案例研究：怎么提高网站加载速度
2022-11-28 10:10:20
很多网站的加载速度不佳，导致自身体验很差，往往需要花上很长一段时间来加载。有的时候这就意味着用户在网站完全加载完成之前，只能无聊地转着手指等上几秒钟。甚至还有一些时候，在一些真的加载非常缓慢的网站上，这可能意味着有些图片和脚本无法完全加载，让网站看起来很不协调美观。
通常而言，加载速度缓慢多是由用户的网络不佳造成的，这就由不得网站拥有者来做任何的改善了。在这种情况下，因为用户的网络连接不佳，所以他们在所有的网站上都会碰到同样的问题。
另一方面，如果用户的网络状况是好的，那我们就有可能去改善我们的网站让它运行的更加快一点。为什么网站运行速度如此重要？因为一个快速的网站会提高用户体验。
让网站在所有设备上都能迅速加载，这对于把流量转化成付费用户而言非常关键。研究发现仅仅约40%的用户会愿意花上多于3秒钟的时间让网站完成加载，并且多耽误一秒钟就会使得转换下降7%。
提高网站加载速度可以提高你的SEO排名网站加载时间不仅可以提高用户体验，而且也受到谷歌和其他搜索引擎的高度重视，可以极大地提搜索引擎排名。
怎样才能提高网站加载速度呢？
很多方法可以用来提高网站加载速度，包括：
图片优化、压缩、浏览器缓存、压缩HTML代码、压缩CSS、压缩JS、优化CSS、优化JS、优化“头版”
运用这些方法，通常可以让网站的加载速度提高30%-50%，这不仅可以增加网站流量，也可以提高转化率。
具体的步骤是什么？
如果你跟我们一样也是个极客，你可能也很好奇具体步骤到底是什么？我们是怎么样为我们的客户达成最终的结果？正好我们最近整理了一个客户的案例研究，如果你真的对细节很感兴趣，那就来看看吧：
网站速度的案例研究结果
加载速度（前）
移动端： 44/100
(http://www.screencast.com/t/jMy8md0QvsUJ)
桌面端： 58/100
(http://www.screencast.com/t/pcHO6r7A)
加载速度（后）：
移动端： 63/100
(http://screencast.com/t/8zHEjKEOEcg)=网站加载速度提高了43%
桌面端： 84/100
(http://screencast.com/t/6rIAcfAb2) =网站加载速度提高了45%
解决的问题：
图片优化、压缩、浏览器缓存、压缩HTML代码、压缩CSS、压缩JS、优化CSS、优化JS、优化“头版”
页面加载速度优化步骤：第一步：图片优化
对所有的图片进行优化，并且不损失图片的质量
这个步骤之前的加载速度：
移动端： 44/100
(http://www.screencast.com/t/jMy8md0QvsUJ)
桌面端： 58/100
(http://www.screencast.com/t/pcHO6r7A)
这个步骤之后的加载速度：
移动端： 44/100
(http://screencast.com/t/1RgoRiUcG)
桌面端： 63/100
(http://screencast.com/t/K5z13Ri8h)
第二步：浏览缓存和压缩
浏览缓存
页面缓存
数据库缓存
GZip压缩
所有的资源都覆盖到了，除了：外部资源（http://screencast.com/t/4wTLEagITbA）。很不幸地，对于外部资源我们也是无计可施。
这个步骤之前的加载速度：
移动端： 44/100
(http://screencast.com/t/1RgoRiUcG)
桌面端： 63/100
(http://screencast.com/t/K5z13Ri8h)
这个步骤之后的加载速度：
移动端： 62/100
(http://screencast.com/t/MwUH2aR9uXCL)
桌面端： 81/100
(http://screencast.com/t/R9X3WuoJUh)
第三步：压缩&优化HTML,CSS,JS
压缩JS
压缩CSS
压缩HTML
优化CSS
优化JS
所有的资源都覆盖到了，除了：
外部资源：一些JS&CSS文档：http://screencast.com/t/AiFp5MYj.
很不幸地，对于外部资源我们也是无计可施。
这个步骤之前的加载速度：
移动端： 62/100
(http://screencast.com/t/MwUH2aR9uXCL)
桌面端： 81/100
(http://screencast.com/t/R9X3WuoJUh)
这个步骤之后的加载速度：
移动端： 63/100
(http://screencast.com/t/8zHEjKEOEcg)
桌面端： 84/100
(http://screencast.com/t/6rIAcfAb2)
最终结果十个准则中：
有7项是100%通过：http://screencast.com/t/nj9AJ222M
有2项是95%通过（只有外部资源和缓存档案依然未优化，但我们也无计可施。）
有一项未能修复因为它与网站设计有关。在这种情况下我们只能优先考虑网站内容了。
再一次地对比一下，这是网站在操作前后的加载速度比较：
加载速度（前）
移动端： 44/100
(http://www.screencast.com/t/jMy8md0QvsUJ)
桌面端： 58/100
(http://www.screencast.com/t/pcHO6r7A)
加载速度（后）：
移动端： 63/100
(http://screencast.com/t/8zHEjKEOEcg)=网站加载速度提高了43%
桌面端： 84/100
(http://screencast.com/t/6rIAcfAb2) =网站加载速度提高了45%