“为什么我要优化网站加载速度?Wi-Fi 下网页加载速度足够快啦!“,其实并没有!网络的速度只是影响网站速度的一个因素。

本文带你了解为什么要优化网站加载速度以及如何正确进行网站速度优化。

做 SEO 为什么一定要做网站速度优化?

谷歌在 2018年7月9日更新了一篇《Using page speed in mobile search ranking》的博客,文章中明确说到,移动端网页的加载速度会影响搜索结果排名。

移动端用户基本上已经占到了整个互联网流量的50%以上。毫无疑问,任何用户在访问一个网站的时候都是希望网站能够加载的越快越好。

Experiments demonstrate that increasing web search latency 100 to 400 ms reduces the daily number of searches per user by 0.2% to 0.6%. Furthermore, users do fewer searches the longer they are exposed. For longer delays, the loss of searches persists for a time even after latency returns to previous levels

谷歌曾在2009年的《Speed Matters for Google Web Search》研究报告中得出的上述结论。

如果搜索响应的时间从100毫秒增加到400毫秒的话,用户每天搜索的次数也就降低 0.2% – 0.6%。

在一项类似的研究中发现,亚马逊页面如果页面加载时间增加 100 毫秒会导致销售额下降 1%。

目前,Google 正在大力推动 AMP 项目的发展,Facebook 也在推进 Instant Web 项目,可以看到这些互联网巨头们都在积极推动(移动)网页页面加载速度优化。

因此,优化网站的加载速度是每一个站长都必须要去做的事情。

测试网站加载速度有哪些工具?

1. Google PageSpeed Insights

Google PageSpeed Insights

最受欢迎的分析工具是 Google PageSpeed Insights。但是谷歌的这个工具存在一些争议:比如说如果你想要达到优秀,所需的一些因素要么不切实际,要么不经济,尤其是对于那些大型的网站。尽管如此,Google PageSpeed Insights 还是为优化网站的加载时间提供了一些的初步提示。

优点:

  • 对移动用户体验的评估,例如最佳链接大小
  • 指标很容易理解
  • Google Developers 论坛中有详细的帮助文本
  • 该工具来自Google,因此页面速度的类似评级可以认为在影响搜索引擎排名的因素中

缺点:

  • 测量的不是实际的加载时间,只在服务器响应时间
  • 一个好的评级并不意味着是一个快速的网站
  • 某些要求(例如,避免阻止渲染的CSS资源)可能会有相反的效果

2. Pingdom

Pingdom网站速度优化测试

Pingdom 是一个网站监控服务商,它提供 网页速度测试,跟 Google 工具一样是免费的。

与 Google PageSpeed Insights 不同,它测试的是网站的实际加载时间。

有两个地方需要注意:

  1. 网页的加载时间取决于用户所在的位置以及网页的服务器所在的位置。它们距离越远,比如亚洲用户访问美洲的网站,加载时间肯定比美洲用户访问美洲网站慢。如果网站使用了 CDN 的话,就不一定有这个问题了。因此,为了保证测试结果的准确性,测试的时候选择与你网站目标用户位置较近的地点。
  2. 网站的加载时间并不总是相同的,有非常多的外在因素会影响加载时间。因此,建议连续多次进行测试并比较指定的加载时间。

优点:

  • 测量实际的页面速度
  • 可以选择测量具体的位置
  • 也很容易理解评级
  • 非常简短但具体的行动建议

缺点:

  • 没有自己的帮助文本

3. Varvy

Varvy页面速度优化

该网站提供了许多关于 SEO,速度和移动主题的好文章。此外,还有一个页面速度优化工具。

该工具乍一看,测试结果不如前面提到的两个清晰。但是它并不提供分数,只提供给你一些你需要优化的建议。此外,它提供的一些帮助内容也都是易于理解的文章。

4. WebPagetest

Webpagetest.org

Webpagetest.org 工具界面上看起来不太好,在高峰时段你必须等待几分钟才能获得测试结果。

但是是值得的!因为他们的测试结果非常非常的详细,而且也非常有技术含量,你可以在这个工具的测试结果中看到任何你想要看到的数据,还有很多你可能根本看不懂的数据!

该测试工具不仅分析页面的第一次加载(第一视图),还分析页面的重复加载(重复视图)。上面提到的大多数工具只有前者。

5. Sitespeed.io

Sitespeed.io

首先,Pagespeed 这个工具是开源的,对于开发者来说,如果你熟悉Node.js,Grunt 或者 Gulp,你一定要看看这个工具。你可以把它安装到本地或者你的服务器上。

优势:Pagespeed 对网站的加载速度分析和性能分析可以直接整合到你网站的现有构建过程中。

影响网页加载速度的3个因素

页面

页面的加载时间是判断网页速度的一个非常重要的因素。大多数网页速度测试工具都是是单独只测试某一个页面,不考虑网站的其他页面。他们的测试场景是:用户之前从没有访问这个页面,首次访问了测试页面,然后也没有继续访问该网站的其他页面。

如果这个页面是整个网站的入口页面的话,那么这种测试场景是说得通的。但是如果是通过搜索引擎进入到网站中的某个网页的话,就说不通了。

页面加载速度会受页面大小或 HTML 代码量,以及 HTML 元素的排列和其他资源等因素影响。

  • 减少 HTML 代码量
  • 优先考虑可见内容
  • 消除阻止渲染的资源

静态资源

如今的网站不仅仅是 HTML,还包括 CSS,JS 和图片。这些资源都会大大的增加网站的加载时间。

  • 优化图片格式/尺寸,开启图片懒加载模式
  • 减少 CSS
  • 减少 Javascript

服务器

好服务器并不一定能使网站加载时间变快。相反:更好的服务器意味着更多的钱。共享主机我推荐 SiteGround 或者 a2hosting,虚拟主机的话,我推荐 Vultr

相关文章:《最好的 WordPress 共享主机 —— SiteGround 优缺点分析》

在服务器上,有许多地方设置好了都可以直接影响页面加载速度。例如文件压缩或数据缓存等。

顺便说一下:简单的静态网站页面比通过带有数据库查询的 CMS 提供的页面更快。

但是并不是说那网站全部就用静态页面来实现就好了。像淘宝商品详情页,这些页面就必须通过 CMS 查询数据库进行页面加载的。至于网站是否选择使用静态页面的方式,需要你进行多方面的权衡的。

  • 服务器的响应时间
  • 资源压缩
  • 浏览器缓存
  • 重定向

WordPress 网站优化加载速度的6个关键点

网站页面速度需要优化的内容,基本上在上面说到的工具测试结果中都有体现。篇幅限制,一些技术问题不展开说。

减少服务器响应时间

如果你使用的是服务器密集型内容管理系统(CMS),那么中小型 Web 服务器可能就不行了。

优化图像

本质上来说,网页只有在提升用户体验的时候,才需要使用图像,并且保证只使用合适尺寸的图像。另外,记得使用 tinypng 这样的工具,它还可以进一步的压缩你的图像大小。

减少加载资源

CSS 与 javascript 不同,CSS 无法异步加载或在 HTML 代码之后进行加载,因为样式表对于页面外观至关重要。但是可以减少要加载的 CSS 文件数量及其 CSS 的内容。

理想情况下,CSS 代码直接位于 HTML 代码的 head 中,不加载外部CSS文件,但这只适用于较小的网站。

另外,许多网站都使用了较大的 CSS 库,例如 Bootstrap。但实际上可能只用了其中的一部分功能。那么引入整个 Bootstrap 文件是没有必要的,并且对页面速度有负面效果。

同样的,JavaScript 也应该尽可能使用最必要且最紧凑的部分。Web 上 95% 的 JavaScript 代码都是可以异步加载或作为 HTML 代码中的最后一个元素加载,因此不会不必要地阻止页面加载。

与 Bootstrap 类似,JS 库 jQuery 也被大家广泛的使用,其中大多数仍然带有一些插件。使用 jQuery 可能有意义,但应该检查。在你不再需要支持旧版浏览器的时候,99%的情况下你可以使用原生的 javascript 替换 jQuery。参考:你可能不需要jQuery

启用压缩

要启用服务器端压缩,根据服务器的主机和操作系统,需要不同的设置。你可以联系服务器提供商进行优化。

顺便说一句:虽然 Apache 已预先安装在大多数虚拟主机上。然而,越来越多的公司开始使用 Nginx。为什么呢?因为它更快!

使用浏览器缓存

与压缩一样,必须通过服务器进行配置。

如果你在网站上使用了跟踪代码,无论你怎么优化,Pagespeed 工具仍会提示缺少浏览器缓存。许多代码,尤其是 Google 的 Google Analytics 代码和 AdWords 代码,都不支持浏览器缓存。

需要避免的情况

301 重定向也会浪费时间。如果不是某些为了 SEO 而必须使用重定向的话,不要使用重定向!关于重定向与 SEO 的关系,看这篇文章:《HTTP状态码 301、302、307 的区别以及对 SEO 的影响》

结论

网站速度优化对于任何一个网站来说都是势在必行的。即使做这些优化需要付出的成本可能很高,但是其带来的好处也同样很高。

通常情况下,一个网站的页面速度过慢的话,那么这个网站的流量数据肯定不好看。那些能在 Google 搜索首页的网站,你去看他们的页面速度数据,绝对是很好的。

我相信每个人都希望打开一个网页可以秒开,期待更快的网。

作为站长还不赶紧优化起来!