【原创】网页加载速度优化实例分析

不久前帮助一个客户做网站优化。打开这个使用Wordpress模板的主页竟然需要19秒！
经过检查和初步调整，我成功将加载时间缩短到4秒。如果进一步优化有把握把速度再
提高3~5倍。在本文中我将和大家分享网页加载速度优化的一些基础知识。

网站的速度取决于多方面的因素，包括服务器带宽、处理器速度、并发请求数量、用户带宽等等。还有地理位置的考量，如果服务器在中国，美国的用户通常会体验到较慢的速度。因此选择网站服务器时需要考虑用户的位置。在本文的例子里服务器和主要客户都在美国，所以可以排除这方面的因素。

Wordpress插件的优化

客户的网站使用了一个叫做Lambda的主题，当网页加载时会显示进度如下。
这个设计的本意是为了提高网页打开时的用户体验，实际上却达到了相反的效果。本来页面会一边下载一边显示。用户看到前面的内容一般也就不在乎后面还没有打开的部分。现在这个进度条挡住了所有内容，必须要等到全部下载完再一块显示。不知道有多少用户会有耐心等待。所以我做的第一件事就是关闭了这项功能。

除此之外网站上还装了许多插件。这些插件不论有没有用到都要加载到主页上，使速度变慢。经过分析我关闭了大部分插件，比如Yoast SEO是用来分析页面、优化搜索引擎
的，只需要运行一次就可以了，没必要每次访问都跑一遍。

网页内容对加载速度的影响以及优化方案

一个影响网页速度的关键因素是网页的内容。浏览网站的过程实质上是把服务器上的内容传输到客户端。如果需要加载大量数据比如图片、视频、音频必然会影响速度。

在这里推荐一款实用的工具firebug，结合firefox浏览器可以方便地进行网页加载分析。http://getfirebug.com/。安装以后会在浏览器右上方显示一个蜜蜂的图标。
点击firebug图标然后载入网页，在浏览器下方显示分析结果。我们需要的信息在Net菜单下：
上图的表格里显示打开网页时加载的所有文件。文件路径、尺寸、加载时间分别显示在第1、4、6列。这里的文件主要有三类：
1. css文件，用于网页格式的渲染。
2. js文件，用于网页实现动态效果。
3. 媒体文件，包括图片、音频、视频等。

通过分析每个文件的加载时间可以了解哪些文件是造成速度变慢的罪魁祸首。由于css
和js文件涉及专业知识，普通用户最好不要随便改动。所以优化的主要对象是第三类文件。点击image标签显示所有的图片，逐一进行分析。
在上图的例子里，图片文件http://bsheen.com/wp-content/uploads/2016/08/1.jpg的尺寸为298.4kb（1158X773)。那么我们是否需要这么大的图片呢？在网页中找到图片如下：
右键点击图片，选择View Image显示图片实际尺寸如下：
我们可以得出结论，在网页中的一个小图标完全没有必要使用如此大的图片。下一步是对图片进行压缩。将文件下载到本地，windows用户用画图板即可编辑图片再上传到服
务器。经过压缩后图片的尺寸变为原来的1／15，大大提高了加载速度。

页面加载方式的优化

前文提到打开网页时要下载大量的css与js文件。这些文件在不同页面其实是重复使用
的。此外网站的一些单元比如导航栏、页眉、页脚也是通用的。为了最大程度得利用已经下载的资源，许多网站使用了Ajax技术，即在页面切换时之更新部分内容而不是重新加载整个页面。比如在电商网站浏览不同产品是只需更新产品相关的文字和图片。在
Wordpress中，这一功能可以通过安装插件实现。

服务器端的优化

从接到用户的请求到返回显示的内容会有一段延迟，这是服务器进行数据检索和运算的时间。即使大型计算机和服务器阵列面对海量数据时也会力有不逮。这时算法的优化就会发挥关键作用。使用好的算法可以将数据处理速度提高几十上百倍。这也是许多IT企业面试时重视算法考察的原因。小型网站由于成本限制通常不会进行算法开发，只需合理使用各种工具即可。

好贴 干货 谢谢分享