浅谈怎么加快网页载入速度

今天杭州SEO中心来和大家分享下如何加快网页载入速度。很多人想当然的认为，网页的加载速度是网站的投入决定的，比如花高价钱钱买性高性能的服务器，扩展带宽，花钱买CDN，等等。其实很多时候并不是这样。比如，cctv.cn一定比我有钱得多，可是打开它的网站我用了5秒以上。很多时候，服务器和网络带宽只是基础，但如果不好好利用，再大的优势到终端就不再为优势。

 

在杭州SEO中心看来，一个网站的页面呈现时间应该控制在3秒以内，3秒以外每过一秒，用户满意度下降20%。可能这对于很多站长来说是天方夜谭，但如果采取适当的前端优化，是完全有可能做到的。那么如何进行前端优化呢？概括起来有以下三点，按照重要性排列如下：

 

1. 减少呈现页面所需的请求数目

 

2. 减少传输量

 

3. 优化域名请求

 

第一，影响网站载入的最大因素往往不是服务器，而是网络。一台服务器，如果不借助CDN，要想让全世界各个地方的人都能快速访问是很困难的，尤其是国内的网络环境复杂，电信网通教育等都有覆盖，却连接较慢，而国外的服务器更存在ping值较大，响应较慢的现象。减少呈现首页所需的请求数目，就能减少网络因素对页面加载的影响。做到这一点并不容易，因为很多网站需要动态呈现许多内容，但我们应尽量往这个方向努力。比如：

 

1) 减少</body>前的js

 

2) 尽量使用async或defer属性来异步加载和呈现页面内容无关的js，比如广告跟踪，页面交互功能等

 

3) 合并js和css文件，js数量控制在5个以内，css则最好只传输一个，或者完全内嵌在页面里

 

4) 异步加载图片，对于页面关键的图片如图标等，用css sprite的形式呈现

 

5) 对静态资源设置较长时间的缓存，如css, js, 图片等，不要在url后面加上ver=这类查询，因为有些缓存代理会跳过带有问号的url

 

6) 对于较小的页面图像，例如favicon等，直接用base64编码写在html里面。

 

第二，在带宽一定的情况下，我们要争取用最短的时间传输更多的东西，增加传输效率。最有效的方法无非两点：

 

1) 采用gzip压缩传输，通常情况下可以少传输50%-80%的内容

 

2) 压缩html，js和css等资源，在线的压缩服务有很多，举手之劳

 

再次，是优化域名的请求，这一点很多人都忽视了，但实现起来很简单。域名请求有时候在网页的响应时间中占有很大比重，除了在DNS层面提高缓存时间外，在主页上加上dns-prefetch的link，就能让浏览器自动预读你要引用的其他站点的dns，从而加快响应速度。

 

做好以上几点，就能让网站在各种网络情况下都能保持较快的访问速度。如果想知道自己的网站是否做到以上谈到的几种优化方法，可以采用积分评测和在线实测两种方法。

 

积分评测：Firefox的YSlow和PageSpeed插件，Chrome的PageSpeed插件，Google在线的PageSpeed Insight 服务，还有gtmetrix和ShowSlow等等。

 

在线实测：国外的极力推荐webpagetest <https://www.webpagetest.org/>网站，可以模拟全球各个地方不同浏览器和设备的真实访问情况和瀑布图分析。国内的推荐百度云监测https://developer.baidu.com/apm/功能少一些，不过毕竟可以获得更准确的国内访问数据。