WEB性能优化系列一

最近一直在看Google Page Speed中介绍的Web Performance Best Practices以及Yahoo!的
Best Practices for Speeding Up Your Web Site,并且浏览了很多其他叙述有关WEB性能优化的文章后有一点感悟:当新技术新思想引进国内的时候,国外已经发展相对比较或者绝对成熟、研究有一定深度而且最主要的是理念已经被广为传播开来并为大家所熟知。而联想到国内当前的技术环境和理念创新方面,还是有待提高的。下面是我在浏览了众多有关WEB性能优化方面的论述后的一个总结,因为内容比较多,而且翻译总结时间比较长点,所以初步打算是逐步逐步共享一下自己的心得,后续的将会陆陆续续推出,说的有不正确的地方,欢迎指正~

因为总结是写在word文档里的,所以就顺便保存了一份pdf格式的文件,需要的童鞋可以自行下载:《WEB性能优化系列一》。

  1. Serve resources from a consistent URL:使用一个确定的URL来引用资源
  2. Serve scaled images:衡量图片的大小缩放
  3. Optimize images:优化图片
  4. 拆分初始化负载
  5. Minify HTML
  6. Minify CSS
  7. Minify JavaScript
  8. Remove unused CSS:删除无用的CSS
  9. Enable compression:允许压缩
  10. Minimize request size:最小化request请求头信息的大小
  11. Serve static content from a cookieless domain:减小静态资源的cookie的大小
  12. Optimize the order of styles and scripts:优化js和css文件的加载顺序

(全文…)

尝试Gzip压缩

2010-5-15 update:

本来想尝试使用Google的项目托管功能,把导入js和css的php文件托管在google code下,可是Google托管服务器可能不支持php文件的写入功能,无法通过php来导入css和js文件,测试失败。

接着把css和js文件托管在Google code下来分发下载资源,使得js和css在googlecode.com域下,增加浏览器的并发下载数。虽然是可以,但是测试效果并不佳,没有了js和css的压缩功能,在空缓存下加载速度不佳,最终还是放弃了这个尝试。

不过通过Google的项目托管功能在某些时候把一些资源托管在那里(比如图片,视频,doc,pdf等等),也是一种优化并行下载数的方法。

=====================================================

Gizp这个词或许大家都不会再陌生了,刚开始在《高性能网站建设指南》,《高性能网站建设进阶指南:Web开发者性能优化最佳实践》以及YAHOO Developer Network中发表的关于提高网站加载速度的34条rules中《Best Practices for Speeding Up Your Web Site》,了解到它对提高页面加载速度方面的优越性,可是一直迷惑于不知道怎么去设置和开启,今天在高性能网站建设进阶指南:Web开发者性能优化最佳实践的第9章《超越Gzip压缩》以及后面的《尽早刷新文档的输出》中又讨论了关于Gzip压缩的问题。所以,只能是上网搜资料,一查到底了。

本来很想用自己的blog做测试的,可惜是虚拟主机,不能自由配置。所以对于服务器端的Gzip压缩的设置,只能是先学理论,日后捣鼓捣鼓主机了,不过对于这方面的设置方式,还是搜到了些资料:《如何开启Gzip压缩》。

因为本博客也都是使用了wordpress系统,所以接下来说说利用php来开启Gzip压缩的方式。更多关于优化wordpress系统的技巧可以浏览《优化试试玩》。

首先,介绍给大家一个网站来测试你的blog是否开启了Gzip压缩:《Web Page Content Compression Verification》。这个网站有些意思,可以测试任何网页是否开启了Gzip压缩,而不单单简单的首页。它还可以查看Response Headers(HTTP Request Response Headers),这个firebug、HttpWatch等等插件都可以查看,就不多说了。同时,对于测试出没有开启Gzip压缩的情况,提供了一种使用PHP开启Gzip的方式(Add Gzip Compression Easily With PHP),它提供的方法非常简单,只需要在每个页面的DOCTYPE前面加上<? ob_start(“ob_gzhandler”); ?>的PHP语句即可。不过对于wordpress系统来说,只需要在主题的header.php中加上上面的代码,就可以了。

对于上面提供的方法,我测试了一下,结果不尽如人意。它确实是对页面的HTML进行了压缩,而且效果也非常良好,下面是对我的blog首页进行测试的压缩效果:

Original Size: 17.58 KB
Gzipped Size: 5.5 KB
Data Savings: 68.71%

这个结果让人满意。但缺点是,它没有对css、js等等进行Gzip压缩。测试发现,仅是对HTMl进行了压缩。非常可惜~

GZIP压缩功能在Wordpress2.3-2.5版本里都是自带的,之后的版本就默认取消了,不知道为啥。不过如果想要暂时使用这个替代的方案,也还是可以通过使用一些Wordpress的插件的,比如:GZippyGZIP Output。我查看了下上面两个插件的源码,原理跟上面使用的那句PHP代码是一样的,所以喜欢用哪个就用哪个,无伤大雅。

(全文…)