1.减少http请求
2.如果需要在页面中为背景,按钮,导航栏提供大量背图片,CSS Sprites可以缩短响应时间
3.合并脚本和样式表
4.对于地理上分散的用户群来说,CDN(内容发布网络)能轻易的得到响应速度的提高
(注:CDN用于发布静态内容,如图片,脚本,flash.动态HTML会对存储有特殊需求–数据库连接,状态管理,验证等,这种超出CDN能力范围内。)
5.浏览器(和代理)使用缓存来减少HTTP请求的数量,并减小HTTP响应的大小。Expires头告诉Web客户端“在这一日期之后,响应是无效的”。静态的html页面想要设置使用缓存,通过HTTP的META设置expires和cache-control ,max-age(s)
- 一个资源文件设置了expires过期时间并且在浏览器端缓存后,在过期时间前,浏览器再次访问该资源时不会再请求(连接)服务器(按F5强制刷新除外),直接使用浏览器上的本地缓存,哪怕服务器里的资源版本已经改变了。如果不设置expires,浏览器会请求(连接)服务器,判断本地缓存中的资源与服务器里的资源是否一样,如果一样,服务器返回304状态到浏览器,浏览器不再下载服务器的版本,直接使用本地缓存;
如果不一样,浏览器会下载服务器上新的资源替换本地缓存中的旧资源。
- <meta http-equiv="Cache-Control" content="max-age=7200" />
- <meta http-equiv="Expires" content="Mon, 20 Jul 2013 23:00:00 GMT" />
6.压缩组件(服务器端完成,gzip),压缩通常能将响应的数据量减少近70%, 缺点是服务器会花费额外的CPU周期来完成压缩,客户端要对压缩文件进行解压缩,要检测收益是否大于开销。
7.将样式表放在顶部,脚本放在底部,避免css表达式
8.使用外联JS+CSS,好处是可以被浏览器缓存。
9.精简.
- 精简javascript —– 混淆 和精简一样,它也会移除精简和空白,同时它还会改写代码,作为改写的部分,函数和变量将被简化为更短的字符串,这时的代码更加精炼也更难阅读。通常这样做是为了增加对代码进行反向工程的难度,但这对提高性能也有帮助。
- 精简css —–移除注释和空白,使用缩写#fff代替#ffffff,用0代替0px等。
10.避免重定向
11.移除重复脚本
12.当网站被宿主在多于一台服务器上时,ETag头可能会阻碍缓存。
13.使ajax可缓存