优化网站性能的14条规则 yahoo的14军规

时间:2009-11-22     作者:smarteng     分类: PHP相关


前言:
对于一个高性能的Web站点,性能提升的2个主要突破点
.响应时间.
效率
当前集中考虑的主要是响应时间方面,平时我们关注比较多的是后台Web服务器端的优化,通过Yahoo的实际数据分析,80-90%的终端响应时间是由前端决定的,所以是前端的优化也是非常重要的,存在巨大的改善空间,本文集中讨论前端优化。8/2性能准则:80%的性能问题是由20%的原因引起的,我们集中精力在这20%的原因上来改善80%的性能。通常的经验告诉我们影响Web性能的几个主要因素由Cache的大小和有无,Http请求,静态和动态网页的分布,cookie的大小并行下等等,但是在具体的时间中到底如何去做,没有更多详细的探讨。从2004年起,yahoo专门成立了一个性能分析团队,他们通过开发实际工具和进行严格的数据分析,来改善他们那产品的性能。本文就是这些研究成果的最新总结,在提高网页速度方面Yahoo!的 Exceptional Performance团队提供了14种最佳实践,减少了Yahoo!25%-50%的响应时间,本文将详细介绍这些准则和背后的原理,从而使你可以更快地构建网页,减少响应时间,从前端到后端全面挖掘网页开发更大的潜能!到底如何优化一个网站,提高性能了?基本的原则是:

(1)优化网站资源,主要是图片

(2)优化脚本资源,例如JavaScript

(3)优化网页的样式表,例如CSS

核心思想是减少下载的数据量,尽可能使用少的HTTP请求,合并脚本和CSS表,使用合并的图片,尽量避免重定向和frames的使用。

来自Yahoo的14条准则[break]

由上述思想发散开发,总结起来yahoo的14条准则如下:

1.尽可能使用少的HTTP请求 Make fewer HTTP requests;

    这个是很重要的一条,具体措施是使用Image maps 和Inline Images;合并CSS和脚本代码。比如对于Image Maps

 

(服务器端)server-side

 

<a href="navbar.cgi"><img ismap src="imagemap.gif"></a>→ http://.../navbar.cgi?127,13

 

(客户端)client-side – preferred

 

<img usemap="#map1" border=0 src="/images/imagemap.gif">

 

<map name="map1"> <area shape="rect" coords="0,0,31,31" href="home.html" title="Home">

 

   …

 

</map>

 

(缺点是)drawbacks:

 

图片需要是连续的。

2.使用内容分发网络 Use a CDN;

 

在发布你的动态内容之前发布网站的静态内容,比如使用广泛的Akamai

 

3.增加一个期限头部 Add an Expires header

 

不仅仅是对图片设置,对于脚本和样式表同样需要设置,在Apache中具体的配置方法如下:

 

     ExpiresActive On

 

     ExpiresByType application/x-javascript "modification plus 2 years"

 

     ExpiresByType text/css "modification plus 5 years"

 

当你修改一个资源的时候,修改资源的名称(自动进行),给文件名称加一个时间戳,例如img_1385413733.png;

 

同时候将资源纳入版本控制系统中,比如使用CVS个SVN,例如img_1.2.png。

4.压缩组件Gzip components

 

当前90% 的浏览器都支持压缩,压缩不仅仅是指HTML,脚本,CSS和XML都可以压缩。

 

在Apache中修改下面的配置来支持压缩

 

Apache 2.x: mod_deflate

 

AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

 

对于HTTP请求和响应,表现如下

 

HTTP request: Accept-Encoding: gzip, deflate

 

HTTP response: Content-Encoding: gzip Vary: Accept-Encoding

5.将CSS置为页面的顶部 Put CSS at the top

 

   主要原因是CSS样式表会阻塞HTML在IE中的显示(如果没有下载完的话)

 

6.将JS移植页面的底部 Move JS to the bottom

 

主要原因是脚本的执行会阻塞并行下载和阻塞其他元素在IE中的展示

 

7.避免使用CSS表达式 Avoid CSS expressions

 

比如下面的例子:

 

   width: expression(

 

         document.body.clientWidth < 600 ?

 

       “600px” : “auto” );

 

原因是由于鼠标的移动,按下键等操作事件会是的上述表达式执行多次

 

8. 是JS和CSS从外部包含 Make JS and CSS external

 

可以减少HTML文档的大小,同时增加脚本的重用,但是会增加请求数

 

但是HomePage是一个例外,在Homepage中使用Inline和 PostOnload效果不错,yahoo和goolgede

 

首页都这样处理了;

 

9.减少DNS的查找 Reduce DNS lookups

 

一个典型的DNS查询是20-120ms,DNS 查询的时间直接影响到并行下载的效率,尽量减少主机的域名数目。

 

常用浏览器的缓存时间设置如下:

 

IE

 

DnsCacheTimeout: 30 minutes

 

KeepAliveTimeout: 1 minute

 

ServerInfoTimeout: 2 minutes

 

Firefox

 

network.dnsCacheExpiration: 1 minute

 

network.dnsCacheEntries: 20

 

network.http.keep-alive.timeout: 5 minutes

 

Fasterfox: 1 hour, 512 entries, 30 seconds

 

10.精简JS Minify JS

 

这个主要涉及到JS的编码和优化

 

11.避免重定向 Avoid redirects

 

通常Web服务器返回的是3XX的状态码,常常是301和302,可以通过添加过期头来缓存重定向