CSS背景幻灯片太慢了？

Question

我正在尝试构建我的网站，我是新手，但我尝试将此代码用于背景幻灯片，不幸的是，它需要永远加载页面。我已经将3-500KB图像优化到现在的90-100KB，并且仍需要一些人来加载...帮助！

My updated version of my site。我试图通过网上发现的这些技巧加快加载速度，但是我的加载速度非常快。我有一个非常糟糕的时间。

• My CSS File（太大而无法发布）。
• My HTML Page无法在此处发布，似乎无法正常工作

Answer 1

在检查时，您正在加载的图像似乎太多，并且立即导致网站变慢。

（http://i.stack.imgur.com/xPRxM.png）

您应该使用延迟加载来更快地加载网站，因为这样只会加载所需的图像。

在需要时请求图片（或者在需要之前请求图片），但您绝对应该不一起获取所有请求。

其次，您应该根据需要准备好不同的图像尺寸，而不是让浏览器调整图像大小。它通过浏览器消耗时间和处理来调整图像大小。如果您有图像副本，它会让生活更简单。

有很多插件可用于实现延迟加载。 由于您使用的是jQuery，因此以下是一些：

1. http://www.appelsiini.net/projects/lazyload（简单演示Here）
2. http://css-tricks.com/snippets/javascript/lazy-loading-images/
3. http://www.google.com/search?q=lazy+loading+jquery

其他提示：

将所有脚本合并为一个，并制作一个js个文件。

所以，以下内容：

 - <script type="text/javascript" src="js/pop-ups.js"></script>
 - <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
 - <script type="text/javascript" src="js/jquery.mousewheel.js"></script> 
 - <script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script> 
 - <script type="text/javascript" src="js/cufon.js"></script>

变为<script type="text/javascript" src="js/all.js"></script>

现在，进一步优化，缩小它们。

有很多在线工具，但我喜欢this一个。

另外，我建议你看看this，（查看幻灯片97以后），Chris Coyier的演讲。

Answer 2

@Pranav的答案非常好。

你一定要看看chrome检查员拥有的所有工具（我确定是firefox）

加载您的网站会给我94个错误。

你需要看看很多东西，但我肯定会推荐使用css sprites，特别是那些疯狂的图片。

您需要最小化请求。看看我在谈论here。

---

以下是Chrome审核告诉您网站的内容，您不需要做所有这些，但您应该尝试：

Combine external JavaScript (16)
There are multiple resources served from same domain. Consider combining them into as few files as possible.
8 JavaScript resources served from globalplayernetwork.com.
5 JavaScript resources served from maps.gstatic.com.
3 JavaScript resources served from maps.google.com.
Enable gzip compression (20)
Compressing the following resources with gzip could reduce their transfer size by about two thirds (~668.95KB):
in.html could save ~10.15KB
style.css could save ~12.02KB
jquery.min.js could save ~46.99KB
pop-ups.js could save ~4.91KB
jquery.easing.1.3.js could save ~3.54KB
jquery.mousewheel.js could save ~881B
jquery.jscrollpane.min.js could save ~9.52KB
cufon.js could save ~14.03KB
Quicksand_Book_400.font.js could save ~17.13KB
functions.js could save ~2.10KB
jquery.mCustomScrollbar.js could save ~8.67KB
%7Bmain,mod_util,mod_act,mod_act_s,mod_actbr,mod_adf,mod_appiw,mod_gmmp,mod_mg,mod_mssvt,mod_pphover,mod_rst,mod_strr%7D.js could save ~354.18KB
click could save ~343B
main.js could save ~103.37KB
hosts.js could save ~8.07KB
%7Bmod_ctrapp,mod_touch,mod_rot,mod_exdom,mod_kbrd,mod_lyrs,mod_blyr,mod_qdt,mod_trtlr%7D.js could save ~57.23KB
mod_svau.js could save ~2.14KB
%7Bmod_tfcapp,mod_lyctr%7D.js could save ~12.15KB
maps.google.com/cbk?output=xml&hl=en&ll=36.131931,-115.160451&cb_client=&v=4 could save ~659B
mod_ls.js could save ~926B
Leverage browser caching (120)
The following resources specify a "Vary" header that disables caching in most versions of Internet Explorer:
icon_mhlasvegasdowntownbj.png
The following resources are explicitly non-cacheable. Consider making them cacheable if possible:
in.html
style.css
90.jpg
GPNLogo.png
1joe.jpg
5.jpg
thestrip.jpg
gpn13.jpg
gpnSStrip.jpg
gpn3.jpg
10.jpg
gpn11.jpg
gpn9.jpg
gpn4.jpg
gpnSW.jpg
close.png
200x200.png
CritterPokerIcon.jpg
p48_baccarat_comp.jpg
roulette_icon.png
street-craps-icon.png
slide4.png
maps
facebook.png
linkedin.png
twitter.png
jquery.min.js
pop-ups.js
jquery.easing.1.3.js
jquery.mousewheel.js
jquery.jscrollpane.min.js
cufon.js
Quicksand_Book_400.font.js
functions.js
jquery.mCustomScrollbar.js
home3.html
v=123&src=app&x=2950&y=6425&z=14&s=Gal
v=123&src=app&x=2951&y=6425&z=14&s=Galile
lyrs=h@202000000&hl=en&src=api&x=2950&y=6425&z=14&s=Gal
lyrs=h@202000000&hl=en&src=api&x=2951&y=6425&z=14&s=Galile
lyrs=h@202000000&hl=en&src=api&x=2950&y=6426&z=14&s=Gali
lyrs=h@202000000&hl=en&src=api&x=2951&y=6426&z=14&s=Galileo
transparent.png
%7Bmain,mod_util,mod_act,mod_act_s,mod_actbr,mod_adf,mod_appiw,mod_gmmp,mod_mg,mod_mssvt,mod_pphover,mod_rst,mod_strr%7D.js
90.jpg
91.jpg
overlay.png
down.png
up.png
main.js
hosts.js
pt
vp
%7Bmod_ctrapp,mod_touch,mod_rot,mod_exdom,mod_kbrd,mod_lyrs,mod_blyr,mod_qdt,mod_trtlr%7D.js
lyrs=h@202000000&hl=en&src=api&x=2950&y=6427&z=14&s=Galil
lyrs=h@202000000&hl=en&src=api&x=2951&y=6427&z=14&s=
transparent.png
red_markers_A_J2.png
shadow50.png
transparent.png
transparent.png
transparent.png
lyrs=h@202219229&hl=en&src=api&x=2950&y=6426&z=14&s=Gali
lyrs=h@202208787&hl=en&src=api&x=2951&y=6426&z=14&s=Galileo
lyrs=h@202220091&hl=en&src=api&x=2950&y=6425&z=14&s=Gal
lyrs=h@202153576&hl=en&src=api&x=2951&y=6425&z=14&s=Galile
red_markers_A_J2.png
shadow50.png
markerTransparent.png
dithshadow.gif
mod_svau.js
%7Bmod_tfcapp,mod_lyctr%7D.js
lyrs=h@202000000&hl=en&src=api&x=2952&y=6426&z=14&s=Ga
lyrs=h@202000000&hl=en&src=api&x=2952&y=6425&z=14&s=G
iw3.png
iws3.png
transparent.png
red_grow_markers_A_J2.png
shadow50.png
transparent.png
markerTransparent.png
transparent.png
transparent.png
maps.google.com/cbk?output=xml&hl=en&ll=36.131931,-115.160451&cb_client=&v=4
red_grow_markers_A_J2.png
transparent.png
shadow50.png
lyrs=h@202000000&hl=en&src=api&x=2952&y=6427&z=14&s=Gal
v=123&src=app&x=2950&y=6427&z=14&s=Galil
transparent.png
transparent.png
transparent.png
transparent.png
v=123&src=app&x=2951&y=6427&z=14&s=
transparent.png
transparent.png
transparent.png
transparent.png
v=123&src=app&x=2952&y=6426&z=14&s=Ga
v=123&src=app&x=2952&y=6425&z=14&s=G
v=123&src=app&x=2952&y=6427&z=14&s=Gal
transparent.png
transparent.png
transparent.png
transparent.png
lyrs=h@202214362&hl=en&src=api&x=2950&y=6427&z=14&s=Galil
lyrs=h@202216272&hl=en&src=api&x=2951&y=6427&z=14&s=
transparent.png
transparent.png
transparent.png
transparent.png
lyrs=h@202208787&hl=en&src=api&x=2952&y=6426&z=14&s=Ga
lyrs=h@202179311&hl=en&src=api&x=2952&y=6425&z=14&s=G
transparent.png
transparent.png
transparent.png
transparent.png
lyrs=h@202219273&hl=en&src=api&x=2952&y=6427&z=14&s=Gal
mod_ls.js
Leverage proxy caching (5)
The following publicly cacheable resources contain a Set-Cookie header. This security vulnerability can cause cookies to be shared by multiple users.
icon_mhlasvegasdowntownbj.png
480_icon.png
v=123&src=app&x=2950&y=6426&z=14&s=Gali
v=123&src=app&x=2951&y=6426&z=14&s=Galileo
cbk
Minimize cookie size
The average cookie size for all requests on this page is 99B
Parallelize downloads across hostnames (51)
This page makes 51 parallelizable requests to maps.gstatic.com. Increase download parallelization by distributing the following requests across multiple hostnames.
back_gray.png
smc.png
poweredby.png
transparent.png
transparent.png
emulate_iphone_full2.png
iw2.png
transparent.png
red_markers_A_J2.png
shadow50.png
transparent.png
transparent.png
transparent.png
mp4.png
hpimgs28.png
red_markers_A_J2.png
shadow50.png
markerTransparent.png
dithshadow.gif
iw3.png
iws3.png
transparent.png
red_grow_markers_A_J2.png
shadow50.png
transparent.png
markerTransparent.png
transparent.png
transparent.png
red_grow_markers_A_J2.png
transparent.png
shadow50.png
transparent.png
transparent.png
transparent.png
transparent.png
transparent.png
transparent.png
transparent.png
transparent.png
transparent.png
transparent.png
transparent.png
transparent.png
transparent.png
transparent.png
transparent.png
transparent.png
transparent.png
transparent.png
transparent.png
transparent.png
Serve static content from a cookieless domain (32)
29.32KB of cookies were sent with the following static resources. Serve these static resources from a domain that does not set cookies:
icon_mhlasvegasdowntownbj.png
p48_baccarat_comp.jpg
p
transparent.png
v=123&src=app&x=2950&y=6425&z=14&s=Gal
v=123&src=app&x=2950&y=6426&z=14&s=Gali
v=123&src=app&x=2950&y=6427&z=14&s=Galil
v=123&src=app&x=2952&y=6426&z=14&s=Ga
v=123&src=app&x=2952&y=6425&z=14&s=G
v=123&src=app&x=2952&y=6427&z=14&s=Gal
v=123&src=app&x=2951&y=6425&z=14&s=Galile
v=123&src=app&x=2951&y=6426&z=14&s=Galileo
v=123&src=app&x=2951&y=6427&z=14&s=
lyrs=h@202000000&hl=en&src=api&x=2950&y=6425&z=14&s=Gal
lyrs=h@202000000&hl=en&src=api&x=2950&y=6426&z=14&s=Gali
lyrs=h@202000000&hl=en&src=api&x=2950&y=6427&z=14&s=Galil
lyrs=h@202219229&hl=en&src=api&x=2950&y=6426&z=14&s=Gali
lyrs=h@202220091&hl=en&src=api&x=2950&y=6425&z=14&s=Gal
lyrs=h@202000000&hl=en&src=api&x=2952&y=6426&z=14&s=Ga
lyrs=h@202000000&hl=en&src=api&x=2952&y=6425&z=14&s=G
lyrs=h@202000000&hl=en&src=api&x=2952&y=6427&z=14&s=Gal
lyrs=h@202214362&hl=en&src=api&x=2950&y=6427&z=14&s=Galil
lyrs=h@202208787&hl=en&src=api&x=2952&y=6426&z=14&s=Ga
lyrs=h@202179311&hl=en&src=api&x=2952&y=6425&z=14&s=G
lyrs=h@202219273&hl=en&src=api&x=2952&y=6427&z=14&s=Gal
lyrs=h@202000000&hl=en&src=api&x=2951&y=6425&z=14&s=Galile
lyrs=h@202000000&hl=en&src=api&x=2951&y=6426&z=14&s=Galileo
lyrs=h@202000000&hl=en&src=api&x=2951&y=6427&z=14&s=
lyrs=h@202208787&hl=en&src=api&x=2951&y=6426&z=14&s=Galileo
lyrs=h@202153576&hl=en&src=api&x=2951&y=6425&z=14&s=Galile
lyrs=h@202216272&hl=en&src=api&x=2951&y=6427&z=14&s=
cbk
Specify image dimensions (16)
A width and height should be specified for all images in order to speed up page display. The following image(s) are missing a width and/or height:
1joe.jpg
5.jpg
thestrip.jpg
gpn13.jpg
gpnSStrip.jpg
gpn3.jpg
10.jpg
gpn11.jpg
gpn9.jpg
gpn4.jpg
gpnSW.jpg
close.png (4 uses)
200x200.png
facebook.png
linkedin.png
twitter.png
Web Page Performance
Optimize the order of styles and scripts (1)
The following external CSS files were included after an external JavaScript file in the document head. To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript.
1 inline script block was found in the head between an external CSS file and another resource. To allow parallel downloading, move the inline script before the external CSS file, or after the next resource.
Remove unused CSS rules (2287)
93.85KB (80%) of CSS is not used by the current page.
style.css: 5.24KB (37%) is not used by the current page.
Inline block #1: 222B (31%) is not used by the current page.
Inline block #2: 0B (0%) is not used by the current page.
Inline block #3: 54.91KB (90%) is not used by the current page.
Inline block #4: 20.84KB (72%) is not used by the current page.
Inline block #5: 4.16KB (93%) is not used by the current page.
Inline block #6: 908B (100%) is not used by the current page.
Inline block #7: 723B (100%) is not used by the current page.
Inline block #8: 1.37KB (100%) is not used by the current page.
Inline block #9: 96B (100%) is not used by the current page.
Inline block #10: 2.14KB (83%) is not used by the current page.
Inline block #11: 2.00KB (100%) is not used by the current page.
Inline block #12: 636B (93%) is not used by the current page.
Inline block #13: 267B (100%) is not used by the current page.
Inline block #14: 269B (100%) is not used by the current page.
Inline block #15: 149B (100%) is not used by the current page.
Inline block #16: 0B (0%) is not used by the current page.
Inline block #17: 0B (0%) is not used by the current page.