通过以下的方法,可以提高网站的访问速度,减少页面的加载时间。
1.减少HTTP请求数量
80%的用户响应时间被花费在前端,而这其中的绝大多数时间是用于下载页面中的图片、样式表、脚本以及Flash这些组件。减少这些组件的数量就可以减少展示页面所需的请求数,而这是提高网页响应速度的关键。
- 合并文件,通过把所有脚本置于一个脚本文件里或者把所有样式表放于一个样式表文件中,从而减少Http请求的数量。
- CSS Sprites是减少图片请求的首选方案。把所有的背景图片合并到一张图中,使用CSS的
background-image
和background-position
属性去控制展现恰当的图片区域。 - Image maps把多张图片组合成为一张图片。图片的总大小是不变的,但减少Http请求数会提高页面的响应速度。Image maps只能用于图片在网页中相邻的情况,比如导航条。制定image maps中的图片坐标是个很麻烦的过程,而且容易出错。同时给导航使用image maps也并不易读,所以并不推荐使用。
- 内联图片使用data: URL scheme 把图片数据嵌入页面,但这会增加Html文档的大小。把内联图片合并到你被缓存的的样式表中是一个能既减少HTTP请求数又不会增加页面大小的方法。
减少页面的Http请求数量是第一步,而且对于提高用户初次访问体验是最重要的一步。
2.使用内容分布式网络(CDN)
用户80-90%的访问时间被花费在下载页面中的图片、样式表、脚本、Flash这些组件上。这是网站展示的黄金法则。那么与其重新设计网站的结构,不如先实现这些静态组件的分布。这不仅仅可以大幅减少响应时间,而且由于内容分布式网络(content delivery networks)的存在,这将是个很简单的工作。内容分布式网络(CDN)是一系列分布在不同地域的服务器的集合,能够更有效的给用户发送信息。它会根据一种衡量网域距离的方法,选取为某个用户发送数据的服务器。比如,到达用户最少跳或者最快相应速度的服务器会被选中。
3.给头部添加一个失效期或者Cache-Control
- 对于静态组件:把头部的缓存期设为某个遥远的未来,使其能够“永不过期”;
- 对于动态组件:使用适当的Cache-Control头部帮助浏览器执行特定的请求。
网页设计越来越丰富,页面里包含了越来越多的脚本、样式表、图片和Flash。页面的初次访问者也许会发送多个HTTP请求,但通过给头部添加失效期,你可以使那些组件被缓存。这会避免下次浏览页面时的不必要的HTTP请求。给图片文件的头部设置失效时间更为常用,但包括脚本文件、样式表和Flash之类的所有组件的头部都应该被设置失效时间。浏览器(还有代理服务器)使用缓存以减少HTTP请求的数量和大小,提高网页的加载速度。服务器在HTTP相应中通过头部中的过期时间告知客户端一个组件可以被缓存多久。
4.Gzip压缩组件
使用gzip压缩通常会减少70%的HTTP响应大小。当前浏览器中大约90%的Internet通讯传输声明支持gzip。
5.把样式表放在前面
把样式表放在文档的最后,会导致包括IE在内的大部分浏览器不进行逐步呈现。浏览器为了避免当样式改变时重绘元素而中止呈现。用户会十分无聊的看到一个空白的页面。
6.把脚本放在最后
脚本可能会堵塞并发的下载。HTTP/1.1规范建议浏览器在每个域名下只进行两个并发下载。如果你把图片放在多个域名下,可以实现多于两个的并发下载。当脚本被下载时,即使使用不同的域名。浏览器也不会进行任何其它的下载。有些情况下把脚本放到底部并不太容易。比如,脚本使用document.write 来添加部分页面中的内容,就不能放到页面中更后面的位置。还可能有作用域的问题。很多情况下,还有一些变通的方法。
通常的建议是使用延迟脚本。DEFER属性表明脚本不包括document.write,而且提示浏览器继续展现。不幸的是,Firefox不支持DEFER属性。IE中,脚本可以被延迟,但并不如你期望的那么久。如果一个脚本可以被延迟,那么它也可以被放在页面的底部。这会让你的页面加载的更快。
7.不使用CSS表达式
使用一次性的表达式是减少CSS表达式的执行次数的一个方法,当表达式第一次执行时,CSS表达式会被一个确定的值代替。如果在页面生命周期中,样式属性必须动态的设定,使用事件处理替代CSS表达式是一个可选的方法。如果必须使用CSS表达式,要记得它们会执行上千次并影响页面的性能。
8.使用外部的JavaScript和CSS
在实际应用中使用外部的文件往往产生更快的页面,因为浏览器会缓存JavaScript和CSS文件。而内联在页面里的JavaScript和CSS会在每次请求页面时下载。这会减少所需的HTTP请求数,但增大HTML文档的体积。而另一方面,如果放在外部文件里的JavaScript和CSS被浏览器缓存,则既不用增加HTTP请求的数量,HTML文档的体积也会减少。
9.减少DNS查询
当客户端的DNS缓存被清空(包括浏览器和操作系统的缓存),DNS查询的数量等同于网页中单独的域名的数量。包括页面中的链接,图片,脚本文件,样式表,Flash对象等。减少不同域名的数量则会减少DNS查询的数量。减少不同域名的数量可能减少页面并行的下载数量。减少DNS查询缩短了响应时间,但减少了并行下载数也许会增加响应时间。将组件分布在两到四个域名之间能很好的折中减少DNS查询提高的速度和维持较高水平的并行下载的效果。
10.缩小JavaScript和CSS
缩小是指从代码中删除不必要的字母,减少文件体积从而提高加载速度。缩减代码时需要移除所有的注释,以及不需要的空白(空格,新行和tab)。这样处理JavaScript之后,会由于下载文件的体积被减少而提高响应的性能。不仅仅要压缩外部的脚本和样式表,内敛的
< script>和< style>部分也可以而且应当被压缩。
11.避免重定向
重定向降低了用户体验。在用户和HTML文档之间插入的重定向延误了页面的呈现和组件下载,因为它们都不可能在获得HTML文档之前开始。
12.移除重复的脚本
当脚本被重复包含时,由于增加了不必要的HTTP请求和JavaScript的执行,影响了性能。
13.设定ETags
实体标签(ETags)是服务器和浏览器用于确定浏览器中缓存的组件和服务器中的是否对应的一种机制。
14.让Ajax可以缓存
Ajax的好处之一是它能给用户提供瞬间的响应,因为它从服务端异步请求数据。但Ajax不能保证用户在等候那些异步的JavaScript和XML响应返回时什么都不做。在应用程序中,用户是否继续等待取决于Ajax怎样应用。为了提高性能,优化Ajax响应很重要。提高Ajax性能最重要的方式是使响应缓存。
15.更早地刷新缓冲区
当用户请求一个页面,服务端会花费200至500毫秒的时间组合HTML页面。在这期间,浏览器会静静等待数据到来。PHP中有flush()函数,它允许你向浏览器发送部分就绪的HTML响应,这样浏览器可以在服务器处理余下的HTML页面时去获取组件。这样的好处主要在忙碌的后台和轻松的前台间可以看到。
16.在Ajax请求中使用GET方法
POST方法在浏览器中分两步执行:先发送头部,然后发送数据。所以最好使用只发送一个TCP包(除非你有很多的cookie)的GET方法。IE中URL的最大长度是2000,所以如果你发送超过2000的数据就不能使用GET方法。
17.后加载组件
有执行拖放、下拉和动画的JavaScript代码和菜单,它们可以稍后加载,因为用户在初始呈现之后才会在页面上拖动元素。其他的可以被后加载的地方包括隐藏的内容(当用户做某项操作才会展现的内容)和被折叠的图片。
18.利用浏览器的空闲时间来加载之后需要的组件
利用浏览器的空闲时间来加载之后需要的组件(比如图片,样式表和脚本),当用户浏览下一个页面的时候,大部分组件都已经在缓存里了而页面会加载的更快。
19.减少DOM 元素数量
复杂的页面意味着更多的字节需要被下载而且也意味着在JavaScript中遍历DOM更慢。比如你在页面中添加一个事件,让它在500或者5000个DOM元素中循环,它们的效率是不同的。
20.减少cookie的大小
尽量减少cookie的体积对减少用户获得响应的时间十分重要。
21.减少dom的读取
利用Javascript读取DOM元素很慢,所以为了获得响应更快的页面,应该减少dom的读取,同时避免利用JavaScript定位布局。
22.不要再HTML中缩放图片
不要使用大小超过需要的图片,即使你能够在HTML中设置它的属性。
23.使用小的可缓存的favion.ico
favicon.icon是放在服务器根目录的一个图片,而且由于它是在同一服务器下的,Cookie也会随着每次请求一并发送。这张图片同样干扰下载队列,比如在IE中,当你在onload事件中请求额外的组件时,favicon会在这些额外组件之前下载。所以为了减少favicon.ico的不利影响,应当使用小图片,小于1k最好,并设置你认为合适的过期时间。