首页 > 网站运营 > 网站性能优化的实践

网站性能优化的实践

  最近去听了D2 论坛,更加深刻体会到了网站性能对于用户体验的重要性。

        慢500ms =Google用户访问量降低20%

        慢400ms=Yahoo! 用户访问量降低5-9%

        慢100ms=Amazon销售额降低1%

  散会后,不禁想看看自己网站的性能如何。自从把网站搬家到国外,还真有点担心。通过Google网站管理员工具查看网站性能,不禁大吃一惊:您网站的平均网页载入时间为 20.2 秒。该站比99.7%的网站慢。

  看来要动手优化一下了。先在自己的Firefox 浏览器里安装了网站性能检测工具Google Page Speed和Yslow。首先用YSlow来检测一下访问网站首页的大小。总共257.3KB。

  再用Google Page Speed 看看有什么可以改进的。从发现的问题来看,还是有不少的可以优化的地方。

  由于技术能力和时间都很有限,只能进行简单的优化。我做了以下一些优化工作:

一、压缩样式图片

   我并没有用什么高深的压缩工具,只是用Fireworks CS4批量处理了图片(没有改变文件类型),原来网站的主题的所有样式图片有195KB, 优化后就减少了54.94KB。而且优化后的图片,肉眼根本看不出区别(至少我是没看出来)。

二、启动gzip 压缩

  由于我使用的虚拟主机,并没有配置服务器开启gzip的权限。我只能依靠Wordpress 的插件 GZIP Output。首页页面大小(Html/Text)减少了18.9KB。 

  但是,GZIP Output 只能对于php 文件进行压缩,对于大部头的CSS、JS 文件都无法处理。我又下载安装了WP CSS 和WP JS 插件想分别对CSS 和 JS 文件进行压缩。不过,WP JS这个插件我没搞懂怎么用,WP CSS 倒是应用成功了。网站主题样式表文件从原来的23.5KB 变成了8.1KB,单就首页来说又减少了15.4KB。

三、减少不必要的页面元素 

  从页面来看载入的js 来看,我有两个Js是用来做网站访问统计的。一个是google analytics,另一个是piwik。权衡利弊我去掉了piwik的统计代码,首页大小又减少了8.3KB。

  另外,网站页脚的有个图片没什么作用。我干脆给去掉了,首页大小又减少5.66KB,。这样做不仅可以减少页面大小,还可以减少不必要的Http请求。

总结一下

  真是不优化不知道,一优化吓一跳。优化后首页大小从原来的257.3KB变成了154.0KB, 总优化数值为103.3KB,比原来页面优化了40.15%。首页的Http请求从原来的25个变为22个。具体优化明细如下:

  经过了这一番优化,到底会对页面载入时间产生什么效果呢。让我们使用Web Page Analyzer试试看,它可以模拟用户在不同网络情况下访问页面载入时间。对比一下优化前后的情况,效果还是相当不错的。主流带宽的用户首页载入时间,从20.37秒优化到只有不到3秒。

  以上的优化工作其实不只会对首页有优化效果。因为整个网站用的是一个主题样式,其他页面也都得到了优化。至于整个网站的优化性能,我们还用文章开头用的Google网站管理员工具来检验一下。到了一月份再通过它查看网站性能,终于,得到了满意的结果。“您网站的平均网页载入时间为 2.6 秒(更新时间:2010-1-9)。 该网站比 57% 的网站快。”

  1. 2010年1月17日21:33 | #1

    图片都看不到了呢

  2. 呆聋瞎
    2010年1月17日23:12 | #2

    是这篇文章的图片看不到,还真整个网站的图片都看不到?请问楼上同学是什么浏览器?我这里能看到图片呀(IE8,Firefox 3.5,Chrome 我都试过了)。其他留言的同学麻烦回一下是否也有楼上的问题?

  3. 猫咪
    2010年1月18日16:44 | #3

    看得见图片的。

  4. 大西瓜
    2010年1月22日18:07 | #4

    专业,挺有意思的。

  5. 2010年2月1日14:23 | #5

    图片很正常!
    学无止境!
    在此致意了~~

  6. robert
    2010年2月2日16:33 | #6

    提点看法
    网页减少40%,按理网页加载时间也是减少40%,但是最新的加载时间是2秒多,而以前的是20秒。奇怪!
    优化确实是王道,但是网站地点选择更重要。

    20秒的加载时间是不是 google 访问这站点 在国内时 得到的时间。
    现在网站在国外,google当然是测的很快。所以优化后的实际结果不是这么高的。
    移居海外后对于国内访问用户,反而慢了。

  7. 呆聋瞎
    2010年2月3日09:21 | #7

    回答问题一:”网页减少40%,按理网页加载时间也是减少40%,但是最新的加载时间是2秒多,而以前的是20秒。奇怪!”

    解释:不能按照老兄这样算。这次优化不仅只减少了网页大小,还减少了2个http 请求。一个是piwik用于网站统计的js代码,另一个是底部多余的图片。网站优化不仅仅是减少网站页面的大小,减少不必要的http请求也是重要因素。

  8. 呆聋瞎
    2010年2月3日09:26 | #8

    回答问题二:”20秒的加载时间是不是 google 访问这站点 在国内时 得到的时间。”

    解释:不是,我是11月中旬左右把博客搬到国外的,20秒的加载速度是12月份的时候测试的。

  9. 呆聋瞎
    2010年2月3日10:01 | #9

    至于老兄提到的”优化确实是王道,但是网站地点选择更重要。”

    有这么句话,世界上最远的距离不在中美之间,而是在电信和网通之间。在中国做网站,是要考虑南北通信问题的,所以服务器提供商才会有什么双线主机的产品。我原先的虚拟主机在电信这边,而北京朋友(使用网通)就跟我反映说访问比较慢。如果老兄也在国内玩魔兽世界,会发现服务器分几大区:电信,网通。虽然,电信和网通之间的通信带宽比较不如意,但是他们各自对于美国都有比较理想的带宽。我没钱租双线主机,主机放在国外也是考虑了这方面的因素,保证南北用户访问网站的时间都比较理想。

  10. 2010年3月12日16:42 | #10

    底部”w”图片去掉了,wordpress的链接还是再补上去一个呗,尊重作者,呵呵

  11. 2010年4月1日09:21 | #11

    很详细

  12. 2010年4月24日11:35 | #12

    参考博主的这篇文章,我也进行了优化,挺管用的,谢谢啦!

  13. 2010年4月24日12:00 | #13

    请请教一下,Web Page Analyzer的结果,和所选择的主机性能,有没有关系?

  14. 呆聋瞎
    2010年5月2日09:40 | #14

    由于Web Page Analyzer 会计算页面下载时间(download time), 我觉得应该会与网站的主机性能有关。

  15. 2010年7月16日14:27 | #15

    @呆聋瞎
    还是不太合理,数据应该还有其他因素影响。如外连网站的响应速度等。
    毕竟你由25个Http request减小了3个后,竟然减小了17秒之多?
    那这样算不是其余的22个Http request只需3秒,而另外的3个Http request却需17秒?
    可见那17秒,还是有其他因素应响的。

    不过无论如何,多谢你的分享。

  16. 呆聋瞎
    2010年7月20日23:28 | #16

    @WSQ 老兄可能没注意到,减少3个http request 只是因素之一,主要的原因还是图片压缩,和启用gzip 压缩css 文件,这两个因素显著减少了网页大小。

  17. 2010年11月25日15:09 | #17

    @蛋王
    应该加上版权哈。另外,干脆把gravata功能也去掉好了,否则就不只是一个http请求的问题啦!~

  18. 2011年7月28日13:09 | #18

    图文结合,解说明了,呵呵

  1. 2010年11月22日18:19 | #1