CSS背景幻燈片太慢了嗎？

Question

我正在嘗試構建自己的網站，對此我還是一個新手，但是我嘗試使用此代碼進行背景幻燈片放映，但不幸的是，加載該頁面需要花費很多時間。 我已經將3-500KB的圖像優化到現在的90-100KB，但仍然需要一些時間才能永久加載...幫助！

我的網站的更新版本 。 我正在嘗試使用網上找到的這些技巧來使其更快地加載，但是我經歷了可怕的時間使其無法足夠快地加載。

• 我的CSS文件 （太大而無法發布）。
• 我的HTML頁面無法發布在這里，它似乎不起作用

Answer 1

在檢查中，似乎您正在加載的圖像太多，並且一次加載，這使站點變慢。

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

您應該使用“延遲加載”來更快地加載網站，因為這種方式只能加載所需的圖像。

在需要它們時（或者可能在需要它們之前）請求圖像，但是絕對不要將所有請求放在一起。

其次，您應該根據需要准備好不同的圖像大小，而不要使瀏覽器調整圖像大小。 瀏覽器需要花費時間和精力來調整圖像的大小。 如果您有圖像的副本，它將使生活變得更加簡單。

有很多插件可以實現延遲加載。 由於您使用的是jQuery，因此有以下幾種：

1. http://www.appelsiini.net/projects/lazyload （ 此處為簡單演示）
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>

現在，要進一步優化，請將其最小化。

有很多在線工具，但是我喜歡這個工具。

另外，我建議你看看這個 ，（檢查滑動97起），克里斯Coyier介紹。

Answer 2

@Pranav的答案非常好。

您絕對應該看一下chrome inspector擁有的所有工具（我敢肯定是Firefox）

加載您的網站給我94錯誤。

您需要看很多事情，但是我絕對會建議使用CSS精靈，特別是對於那些瘋狂的圖片。

您需要最小化請求 。 看看我在這里說什么。

---

這是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.