1、减少HTTP请求数
用户在打开一个网页的时候,后台程序响应用户所需的时间并不多,用户等待的时间主要花费在下载网页元素上了,即HTML、CSS、Javascript、Flash、图片等,统计显示,每增加一个元素,网页载入的时间就增加25-40毫秒(取决于用户的带宽情况)。
所以,想要提高网页打开速度,就要减少HTTP请求数,方法有3种:
1)减少不必要的HTTP请求,例如用CSS圆角代替圆角图片,减少图片的使用。
2)合并文件,对于文本文件,可以直接合并内容。例如将多个JS(Javascript的简称)文件合并成一个,将多个CSS文件合并成一个。
3)优化缓存,对于没有变化的网页元素(如页头、页尾等),用户再次访问的时候没有必要重新下载,直接从浏览器缓存里读取就可以了。
2、使用CDN(Content Delivery Network,内容分发网络)
CDN由一系列分散到各个不同地理位置上的Web服务器组成,它根据和用户在网络上的靠近程度来指定某台服务器响应用户的请求。当你的网站图片很多事,就一样要使用CDN了,比如现在的电商网站,几乎都在使用CDN。
3、压缩网页元素
网页中的每个元素越小,下载所需的时间就越少,这个很好理解。现在比较成熟和流程的压缩网页的方式,是通过Gzip,我自己的实操经验来看,一般可以将网页文本内容减少70%以上。
4、样式表放在网页Head部分
这也是我实际操作过的案例,把样式表(CSS文件)移到网页的Head部分,可以提高页面的加载速度,让页面元素顺序显示。
5、把JS文件放到网页底部
网页打开时,所有元素是顺序显示的。由于JS文件的特殊性,其相比其他元素来说,会加载的很慢,在JS文件下载完成之前,其他后面元素的顺序显示将被阻塞,因此把JS文件尽量放在底部,意味着内容能被快速显示。
6、把样式表和JS脚本放到外部文件中
尽管将样式表和JS脚本直接写入网页HTML中,可以减少外部文件调用数量,但是,这样做会增加网页的文件大小。综合来看,将样式表和JS脚本放到外部文件中,也许用户首次访问时会有点慢,但是后续在访问网站时,用户直接通过浏览器缓存就可以用,从而达到减少HTTP请求数的目的,为最优的做法。
在提升网页打开速度经常被忽视的一个问题是响应。对于用户来说,每次的操作,不管返回结果是慢,还是快,都要及时予以响应,最典型的例子就是:当用户点击打开一张图片时,是否有百分比数字显示的进度条,就是一个典型的响应设计。
一流的网站用户体验绝对不是一蹴而就的,要进行充分的可用性测试,收集用户的反馈,持续改进。
别让我想
用户不会使用一个网站绝对不是用户的错,他会打开电脑,会使用键盘和鼠标,会打开浏览器上网,经过这么步骤最终到达了你的网站,然后发现网站上一团糟,搞不懂这是什么,那是什么,也懒得学习如何使用,于是就会眼都不眨一下就关闭你的网站。这是很现实的一个用户行为。