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).

이미지가 필요할 때 요청합니다 (또는 필요할 때까지).하지만 반드시 이 아닌 모두 요청을 함께 받아야합니다.

둘째, 필요에 따라 이미지의 크기를 조정해야 브라우저가 이미지의 크기를 조정하지 않아도됩니다. 그것은 브라우저에서 이미지 크기를 조정하기 위해 시간과 처리를 모두 소모합니다. 이미지를 복사하면 삶이 더 쉬워집니다.

지연로드를 구현하는 데 사용할 수있는 플러그인이 많이 있습니다.

http://css-tricks.com/snippets/javascript/lazy-loading-images/

http://www.google.com/search?q=lazy+loading+jquery

다른 팁

1. http://www.appelsiini.net/projects/lazyload (Here 간단한 데모) :

   모든 스크립트를 결합 당신이 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을 좋아합니다.

   또한 Chris Coyier의 프리젠 테이션 this (슬라이드 97을 확인하십시오)을 살펴 보시기 바랍니다.

Answer 2

@ Pranav의 대답은 꽤 좋습니다.

당신은 확실히 관리자가이 크롬 모든 도구를 살펴한다

사이트를로드하는 것은 나에게 94 오류를 제공합니다 (I 파이어 폭스 확신합니다).

많은 것들을 살펴볼 필요가 있지만 특별히 CSS를 사용하는 것이 좋습니다.

요청을 최소화해야합니다. 제가 무슨 말을하고 있는지보세요 here.

---

여기 크롬 감사 귀하의 사이트에 대해 말하고있는 것입니다, 당신은이 모든 작업을 수행 할 필요가 없습니다하지만 당신은 어떻게 시도해야합니다 :

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.