0

我正在尝试建立我的网站,我是新手,但我曾尝试将此代码用于背景幻灯片,不幸的是,加载页面需要很长时间。我已将 3-500KB 的图像优化为现在的 90-100KB,但仍然需要很长时间才能加载...帮助!

我的网站的更新版本。我正在尝试使用我在网上找到的这些提示使其加载更快,但我很难让它加载得足够快。

4

2 回答 2

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>

现在,为了进一步优化,缩小它们。

有很多在线工具,但我喜欢这个

另外,我建议您看一下Chris Coyier 的演示文稿(从幻灯片 97 开始)。

于 2012-12-15T19:44:46.477 回答
0

@Pranav 的回答非常好。

你绝对应该看看 chrome 检查器拥有的所有工具(我确定是 firefox)

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

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

需要最小化请求。看看我在说什么


这是 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.
于 2012-12-15T20:08:45.720 回答