Google 让网络更快的使命简史
2009 年，通过发出“让网络更快”的号召，谷歌开始着手尝试说服网站所有者让他们的网站加载速度更快。
为了吸引网站所有者真正关心这一点，2010 年谷歌宣布网站速度将成为其桌面（非移动）搜索引擎排名算法的一个因素。这意味着快速加载的网站将比其他网站具有 SEO 优势。
Mobile现在在搜索中的主导作用促使 Google 开发了其“加速移动页面”(AMP) 项目。该举措旨在鼓励网站所有者在响应式移动主题的基础上创建本质上的另一个移动主题，该主题符合一套非常严格的开发和性能指南。
尽管许多网站所有者和 SEO 抱怨必须将页面速度和 AMP 置于已经让他们头疼的其他 200 多个排名因素之上，但页面速度确实值得网站所有者关注。2017 年，谷歌进行了一项研究，结果非常能够证明他们专注于提高网络速度是合理的。他们发现“随着页面加载时间从 1 秒增加到 10 秒，移动网站访问者跳出页面的概率会增加 123%。”
2018 年 7 月，页面速度成为移动搜索的排名因素，今天 Google 将在其排名算法中纳入更多与速度相关的因素（称为Core Web Vitals）。
随着人类的平均注意力持续时间一直在下降，同时我们对移动设备的依赖也在不断增长，毫无疑问，页面速度对于网站所有者来说会是并且将持续会是非常重要的事情。
如何优化网站以提高速度
像赛车手一样思考
赢得页面速度比赛与赢得赛车比赛是相似的事情。要在赛车比赛中获胜，您需要确保您的车辆尽可能轻巧、功率尽可能大，并尽可能高效地在赛道上行驶。
我将使用这个类比来尝试使页面速度优化技术更易于理解。
让它轻巧
如今，网站比以往任何时候都更加美观和实用——但这也意味着它们比以往任何时候都更大。大多数现代网站相当于派对巴士或豪华轿车。它们超级花哨，配备了各种便利设施，因此又重又慢。在搜索引擎“赛道”中，您不会因派对巴士或豪华轿车而获胜。你看起来很酷，但你会输。
图片来源：GTMetrix 测试结果页面
要赢得页面速度竞赛，您需要一辆合适的轻型赛车。赛车没有收音机、杯架、手套箱或任何并非绝对必要的东西。同样，您的网站不应该加载精美的动画、视频背景、巨大的图像、花哨的小部件、过多的插件或任何其他并非绝对必要的东西。
除了清理不必要的花哨和过多插件的网站外，您还可以通过以下方式减轻网站权重：
- 减少第三方脚本的数量（从其他网站发送或接收数据的代码片段）
- 切换到重量更轻（代码量较少）的主题并减少字体数量
- 实施 AMP
- 优化图像
- 压缩和缩小代码
- 执行定期数据库优化
在像 WordPress 这样的开源内容管理系统上，可以使用速度插件来简化许多这些任务。WP Rocket 和 Imagify 是两个 WordPress 插件，可以一起使用，通过图像优化、压缩、缩小和各种其他页面速度最佳实践来显着减轻您网站的重量。
给它更多的力量
您不会在赛车中安装高尔夫球车引擎，那么您为什么要将您的网站置于极其便宜的共享托管计划中呢？如果您长期以来一直是这些计划中的一个，您可能会发现每月支付超过几美元的托管费用很痛苦的，同样的，高尔夫球车与赛车引擎相比较：那么您真的想赢得这场比赛吗？ ?
传统的共享托管计划将数以万计的网站塞进一台服务器上。这使得每个单独的站点都缺乏计算能力。
如果您想参加大联盟，是时候制定成熟的托管计划了。对于 WordPress 网站，WP Engine 和 Flywheel 等托管托管公司利用功能强大且经过专门调整的服务器来更快地为 WordPress 网站提供服务。
如果托管 WordPress 托管不是您的事，或者如果您没有 WordPress 站点，升级到 VPS（虚拟专用服务器）将使您的网站拥有更多可用的计算资源。您还可以更好地控制自己的托管环境，允许您使用最新版本的 PHP、MySQL、Varnish 缓存和其他现代 Web 服务器技术等内容“调整您的引擎”。您将不再受共享托管公司的贪婪摆布，因为他们将越来越多的网站塞入您已经征税的服务器上。
简而言之，将您的网站放在经过良好调整的托管环境中就像在您的赛车上安装增压器一样。
更好地驾驶
最后，同样重要的是，如果没有训练有素的车手了解如何有效地驾驭赛车驰骋赛道，即便是一辆轻便而强大的赛车也只能跑得这么快。
这个类比的“导航课程”部分指的是网络浏览器加载网页的过程。网站的每个元素都是浏览器在浏览代码和处理页面输出时进行导航的另一个转折点。
我将暂时换一个类比以尝试更清楚地解释这一点。比如改造房屋时，您首先要粉刷房间，然后再铺新的地板。如果你先铺设地板，然后再粉刷房间，新的地板会洒上油漆，你就不得不再回去收拾干净地板。
当浏览器加载网页时，它会经历一个名为（巧合）“绘画”的过程。每个页面都是“绘制”的，因为浏览器从网页的源代码接收数据位。这种“油漆”过程要么可以高效地执行（即在翻新地板之前粉刷墙壁），也可以以更混乱的无序方式完成，这需要往返于整体过程开始前几次，以重做、修复或添加本可以在这个过程的早期完成/应该完成的东西。
图片来源：WebPageTest.org 测试结果（Filmstrip View）
在这里，事情可以变得技术化，但重要的是尽一切努力帮助您的网站更有效地推动“轨道”。
缓存是每个网站都应该具备的一个概念，以便在浏览器上更轻松地加载网页。浏览器花费了足够长的时间处理页面的所有源代码并以视觉方式将其绘制给用户，因此您最好准备好将源代码放在服务器上。默认情况下，没有缓存，情况并非如此。
如果没有缓存，网站的 CMS 和服务器仍然可以在浏览器等待绘制页面时生成网页的源代码。这可能导致浏览器不得不暂停并等待来自服务器的更多代码。通过缓存，页面的源代码在服务器上预编译，以便它完全准备好一次性完整地发送到浏览器。把它想象成一台复印机，拥有大量已经制作好的文件副本并准备分发，而不是每次有人要求时才按需制作副本。
可以通过插件、您的托管公司和/或通过 CDN（内容交付网络）实现各种类型和级别的缓存。CDN 不仅提供缓存，而且还在世界各地的各种服务器上托管预先生成的网站代码的副本，减少服务器和用户之间的物理距离对加载时间的影响。（是的，互联网实际上由物理服务器组成，这些服务器必须在物理距离上相互通信。从这个意义上说，网络实际上并不是“云”。）
回到我们的赛车类比中，利用缓存和 CDN 等于在赛道上更快地驰骋。
这是高效页面绘制的两个基本构建块，但还有更多技术可以使用。在 WordPress 上，以下内容可以通过一个或多个插件来实现（同样，WP Rocket 和 Imagify 是实现很多这样的一个特别好的组合）：
-
**脚本的异步和/或延迟加载。**这基本上是一种奇特的方式，指的是同时加载多个东西或等到稍后加载不需要的东西。
-
**预加载和预取。**基本上，提前检索有关链接的数据，而不是等待用户点击它们。
-
**懒加载。**具有讽刺意味的是，这个概念存在于页面速度目的，但默认情况下，大多数浏览器加载页面上的所有图像，即使是那些在用户向下滚动到它们之前看不见的图像。实现延迟加载意味着告诉浏览器延迟加载并等待加载那些看不见的图像，直到用户真正滚动到那里。
-
**以下一代格式提供图像。**与老式的 JPEG 和 PNG 格式相比，浏览器可以更快地加载 WebP 等新图像格式。但需要注意的是，并非所有浏览器都可以支持这些新格式——所以一定要使用一个插件，该插件可以为支持它们的浏览器提供下一代版本，但向不支持它们的浏览器提供旧版本. WP Rocket 与 Imagify 搭配使用时，可以实现这一点。
图片来源：WP Rocket插件设置
针对 Core Web Vitals 进行优化
最后，针对新的Core Web Vital指标（最大内容绘制、首次输入延迟和累积布局偏移）进行优化也可以使在赛道上的行驶效率更高。
这些是非常技术性的概念，但这里有一个快速概述，让您熟悉它们的含义：
-
**最大内容绘制 (LCP)**是指页面上最大元素的绘制。Google 的 PageSpeed Insights 工具会告诉您哪个元素被视为页面的 LCP 元素。很多时候这是一个主图像或大滑块区域，但它因页面而异，因此运行该工具以识别页面中的 LCP，然后考虑如何使该特定元素加载速度更快。
-
**首次输入延迟 (FID)**是用户的第一个操作与浏览器响应它的能力之间的延迟。FID 问题的一个示例是用户在可点击之前就可以看到的按钮。延迟可能是由于点击功能加载比按钮本身晚得多。
-
**Cumulative Layout Shift (CLS)**是一组三个大词，它们指的是一个简单的概念。您知道当您在手机上加载网页并点击某些内容或阅读某些内容时，它会上下跳动，因为在其上方或下方加载了其他内容吗？这种运动是 CLS，它主要令人讨厌，它是低效页面绘制的副产品。
总之，赛车>高尔夫球车
页面速度优化当然复杂且令人困惑，但它是获得更好排名的重要组成部分。作为网站所有者，无论您喜欢与否，您都在这场比赛中——所以您不妨尽一切努力使您的网站成为赛车而不是高尔夫球车！
