
网站浏览速度优化是件大事,从服务器、程序到客户端无数的环节都有影响,下面只是从客户端(浏览器)出发的角度来分析
下载 firefox 插件(需要先安装 firebug,装好后,在 firebug 中会出现分析菜单)
Page Speed 或者 Yslow
本站(pensee.net.cn)报告如下:
*leverage browser caching
图片 js css 都没有设置 expiration 期限,浏览器可能不会使用 cache
*Enable compression
没有 gzip 压缩 js css。压缩后会减少 77k(68%)
*Parallelize downloads across hostnames
并发 requests 太多,建议分布到多个服务器(多用 background slider 也会减少 requests 啊)
*Combine external CSS
样式表太多(目前是4个)
*Combine external JavaScript
js 太多
*Specify image dimensions
没有指定高、宽度的图片会影响浏览器显示速度
*Serve static content from a cookieless domain
*Use efficient CSS selectors
style.css has 64 very inefficient rules, 61 inefficient rules, and 3 potentially inefficient uses of :hover out of 329 total rules.
这部分的错误很多!
还有其它一些错误和注意事项。有趣的是,我把所谓的 minify 的代码另存看了一下,基本上就是去掉 引号、换行等办法,甚至把 </body> 都给去掉了。放在 W3C 测试一下,minify 后的代码错误很多!看来,速度和标准不可得兼啊。
总结优化思路如下:
缓存(expired 期限),gzip压缩,减少request,简写css js,静态服务器分担 request,图片优化,少 redirects,不要有死链,减少主机查询(minimize dns lookups),先css再js,尽量提供小尺寸的图片,多个css(js)合并为一个减少request
Yslow 报告
大同小异。
Make fewer HTTP requests
Use a Content Delivery Network (CDN)
Add Expires headers
Compress components with gzip
Put CSS at top
Put JavaScript at bottom
这个很有意思,如果是 defer(最后执行) 的js就放到最后面,不要让它的下载影响别人。
Avoid CSS expressions
万恶的 ie css expressions 写法(等于 interval,时间间隔取决于 ie 认为“现在系统应该、大概不是很忙了…”)
Make JavaScript and CSS external
Reduce DNS lookups
Minify JavaScript and CSS
Avoid URL redirects
Remove duplicate JavaScript and CSS
Configure entity tags (ETags)
关于 ETags 的介绍。简单地说,不提供 ETags 的 WWW 服务器会返回一个 304 错误。如果不想使用 ETags 验证功能就直接在 Apache 的 .htaccess 中加一句
FileETag none
IIS 的 ETags 解决办法
Make AJAX cacheable
Use GET for AJAX requests
Reduce the number of DOM elements
Avoid HTTP 404 (Not Found) error
Reduce cookie size
Use cookie-free domains
Avoid AlphaImageLoader filter
崩使用万恶的 ie AlphaImageLoader 滤镜!让ie6见鬼去吧(还是老老实实地使用gif,虽然有毛刺…)
Do not scale images in HTML
Make favicon small and cacheable
更多网站优化办法见 Let’s make the web faster




