目录
PageSpeed Insights 建议是 Web 性能优化的一个苦乐参半的方面。
它们确实是帮助提高网站性能的极好建议。
但是，PageSpeed 报告可能包含许多建议，这些建议可能会导致混乱，并使您对以下问题感到不知所措：
PageSpeed 建议是什么意思？
如何修复 PageSpeed 警告？
测试 WordPress 网站的性能后，您将获得 PageSpeed Insights 报告，其中包括一系列建议和警告，分为两个主要类别：
- 机会
- 诊断
机会部分重点关注可以缩短页面加载时间的性能指标。
诊断部分更侧重于应在分析页面中实施的 Web 开发最佳实践。
在本指南中，我们将引导您完成最常见的 PageSpeed Insights 建议：我们将用简明的解释，然后我们将了解如何解决它们。请记住，该工具提出了有关改进指标的建议，例如最大内容绘制、累积布局偏移和首次输入延迟。
让我们开始吧！
PageSpeed Insights 建议：机会
通过“机会”部分，PageSpeed Insights 希望为您提供有关性能指标的建议，以帮助您更快地加载页面。如果您想在 Google 的页面速度测试中获得 100% 的分数，您应该注意这些建议。
每项建议都附有通过实施建议的修复可以节省的预计时间。
让我们看看本节中哪些是最常见的 PSI 建议以及如何实施它们。
- 消除渲染阻塞资源
- 删除未使用的 CSS
- 减少服务器响应时间
- 缩小 CSS 和缩小 JavaScript
- 多页面重定向
- 启用文本 压缩
- 预连接到所需的源
- 预加载关键请求
- 如何延迟加载屏幕外图像
- 适当调整图像大小
- 高效编码图像并优化图像
- 以下一代格式提供图像
消除渲染阻塞资源
根据此建议，Google 希望您提供关键的 CSS/JB 内联或延迟 JS 和 CSS 文件，这些文件会干扰加载网页的 首屏内容。
首屏内容是用户打开页面后、开始滚动之前看到的内容。
要了解 PageSpeed 要求您消除渲染阻塞资源（无论是脚本还是样式表）时的含义，我们必须了解什么是渲染阻塞资源。
在浏览器可以显示网页之前，它必须呈现其 HTML。
在此过程中，每当浏览器遇到引用脚本或样式表的元素时，它都必须停止，请求文件，等待它从服务器下载并执行它，然后才能继续解析 HTML。
由于大多数 WordPress 主题和插件不仅加载一个，而且加载多个 CSS 和/或 JavaScript 文件，因此此过程可能会显着延迟页面首次渲染的时间。
虽然某些 CSS 和 JS 资源必须在页面上显示任何内容之前下载并处理（它们是所谓的关键资源），但其他一些资源可以推迟并再次加载，不会出现任何问题，也不会损失用户体验。
推迟非关键资源的加载，并在浏览器渲染页面后加载它们，是节省几（毫秒）加载时间的好习惯。
那么，如何延迟渲染阻塞 JS/CSS 的加载呢？
手动进行此调整可能有点棘手，因为它涉及挖掘和编辑代码。如果您更喜欢以编程方式继续，这里有一个关于如何删除渲染阻塞 JavaScript 的示例和一个关于消除渲染阻塞 CSS的示例。
最简单的解决方案是使用像 WP Rocket 这样的插件！
我们的插件包含两个有助于修复 PSI 建议的选项：
值得注意的是，有时，完全消除所有渲染阻塞 CSS 和 JS可能非常困难（几乎不可能）。实现这一结果的可能性很大程度上取决于您在 WordPress 网站上使用的主题和插件的编码方式。
如果您没有自己从头开始编写网站代码，而是依赖其他开发人员编写的主题和插件，那么您就必须接受您无法对它们进行 100% 的控制。
不推迟所有 CSS 和 JS 渲染阻塞资源是可以的，因为有时此过程可能会导致页面损坏（这比 Google PageSpeed Insight 的“红色分数”更糟糕！）。
删除未使用的 CSS
从样式表中删除未使用的规则可以减轻站点不必要的负担。
这就是我们所说的未使用的CSS。
例如，考虑页面加载后可能需要的样式表，即仅在单击特定按钮后才出现的模式窗口的 CSS。
未使用 CSS 的另一个典型情况是当您使用预构建的 WordPress 主题和插件时：它们通常包含比每个页面所需的代码更多的代码，因为作者无法预测用户将如何构建其网站。
那么，如何删除未使用的CSS呢？
精确地自动执行此任务非常困难，而手动删除未使用的 CSS 则更困难。
CSS Tricks 的作者 Chris Coyer 解释了其中的所有原因。
减少服务器响应时间 (TTFB)
如果您的服务器对用户请求的响应速度缓慢，您网站的整体用户体验将会受到影响。
正如我们在有关优化 WordPress 页面速度的指南中已经提到的，快速的服务器是网站性能的基本要素。
当 Google PageSpeed 要求您减少服务器响应时间时，它基本上指的是称为“第一个字节的时间”的指标。
我们已经在指南中讨论了这个主题：如何减少第一个字节的时间和服务器响应时间！
缩小 CSS 和缩小 JavaScript
这两条建议与最流行的代码优化技术之一相关：缩小。
缩小技术可以降低 HTML 页面、CSS 和 JS 脚本的可读性（当然对于人类而言），但加载速度更快！
此方法删除开发人员倾向于添加到网页和脚本文件中的所有不必要的字符、标记、间距和注释。
事实上，开发人员可能需要注释、标记和间距，以使页面和脚本在开发过程中更具可读性。
但是，当他们的杰作结束并且网站上线时，所有这些附加元素都变得多余：它们增加了网络流量，并增加了网络请求带宽的负担。
这就是缩小派上用场的时候：它使代码更精简，因此最终用户将更快地接收它，并且总体加载时间将得到改善。
那么，如何缩小 CSS 和 JS 文件呢？
有 两种方法可以缩小 CSS 和 JavaScript：
- 手动
- 自动，通过插件
要了解如何手动缩小文件，请查看我们的指南：最佳 CSS 和 JS 缩小工具。
要自动处理缩小并忘记手动调整，您可以使用 WordPress 插件。
正如关于消除渲染阻塞资源的说明中已经提到的，缩小和组合是高级功能，有时会破坏页面的布局。
它始终取决于主题的代码和您正在使用的其他插件：某些 JS 或 CSS 文件可能与缩小不兼容，因此在实现此技术时您应该始终保持警惕。
多页面重定向
301 重定向对于通知您的浏览器 HTTP 请求来自不同的源位置并避免 404 错误确实至关重要；但是当重定向堆积起来时，它们往往会减慢您的页面速度。
当页面包含两个以上重定向时，PageSpeed Insights 会将重定向视为一个问题。
当然，理想的解决方案是更新重定向资源的原始链接。
启用文本压缩
根据此建议，PageSpeed Insights 要求您启用 GZIP 压缩。
文本压缩可最大限度地减少包含文本内容的网络响应的字节大小。下载的字节数越少意味着页面加载速度越快。
GZIP 压缩是一种非常流行且有效的加速 WordPress 网站的方法，因为它可以减少页面的总大小并缩短首次绘制的时间。
我们的指南中包含了您需要了解的有关在 WordPress 网站上实施 GZIP 压缩的所有信息！
预连接到所需的源
每当您的网站上有第三方内容（例如从 Google 加载的字体或来自 YouTube 的视频）并且您没有预取其相应的 DNS 分辨率时，就会出现此 PageSpeed 警告。
什么是 DNS 预取？
以下是我们指南中有关 preload、prefetch 和 preconnect 之间差异的定义：
通过预取，如果用户执行您期望的操作，您可以告诉浏览器获取您认为用户稍后可能需要的资源，作为未来导航或交互的一部分。当当前页面加载完成并且有可用带宽时，这些资源将以最低优先级在浏览器中获取。
特别是，通过 DNS 预取，您可以告诉浏览器在用户浏览页面时在页面上执行 DNS 查找：当请求外部资源时，DNS 解析已经被处理，从而减少了延迟。
预加载关键请求
此警告涉及关键渲染路径 (CRP) 优化策略。
CRP 可用于将某些资源优先于其他资源并决定其加载顺序。
这样，浏览器就可以更快地加载页面。
要修复此 PSI 建议，您应该在 HTML 中声明预加载链接，以便浏览器知道它必须尽快下载关键资源。
如何延迟加载屏幕外图像
屏幕外图像是用户打开页面时不会出现的图像。它们就是所谓的非首屏图像。
由于用户在加载页面时看不到它们，因此在加载过程中下载它们是没有意义的。
通过此建议，PageSpeed 要求您在稍后阶段推迟加载屏幕外图像，即当用户滚动页面并请求非首屏内容时。
要延迟屏幕外图像，您可以延迟加载它们。
LazyLoad 是一种允许您推迟图像加载的技术（要了解有关WordPress 上的 LazyLoad以及如何将其应用到图像的更多信息，请阅读我们的指南）。
您可以手动延迟加载图像文件，或使用插件。
适当调整图像大小
掌握图像优化的艺术是您可以轻松学习的。
它将让您获得页面速度的巨大提升，Google PageSpeed 肯定会注意到它为此奖励您！
要正确调整图像大小并优化图像，您应该遵循我们在有关如何压缩图像并减小其文件大小的指南中广泛描述的几个步骤。
高效编码图像并优化图像
图像编码是以更有效和压缩的格式保存图像的过程。
优化图像是使图像加载速度更快所需的一组措施，例如：
- 选择正确的图像格式
- 减小文件大小
- 小心地压缩它们
要使用独特且高效的工具来制定图像优化策略，您可以使用 Smush Pro。它将帮助您处理文件并修复大多数有关图像的 PageSpeed 警告。
以下一代格式提供图像
通过此建议，PageSpeed 要求您使用更现代的图像格式，例如JPEG 2000、JPEG XR和WebP。
这些图像格式在质量和压缩功能方面优于它们的“老”兄弟 JPEG 和 PNG 图像：它们能够更快地加载并消耗更少的移动数据。
让我们进入下一部分！
PageSpeed Insights 建议：诊断
诊断部分中包含的所有建议都重点关注性能以及有助于改进性能的最佳实践。
让我们看看本节中哪些是最常见的 PSI 建议以及您可以采取哪些措施来解决这些建议。
确保文本在 Webfont 加载期间保持可见
此 PSI 警告涉及 Web 字体的加载，这些字体通常是大文件，会大大降低页面速度。
某些浏览器在等待字体加载时会隐藏页面中的文本，从而产生称为“不可见文本闪烁”的效果。
但这种解决方案并不利于用户体验：在这种情况下，理想的解决方案是让用户立即使用系统字体看到文本。
这将产生所谓的“无样式文本的闪烁”效果：但是默认为系统字体将使浏览器节省重要的加载时间，因为它将使用系统中已有的字体。
一旦您最初选择的网络字体被完全下载，它将对用户可见；如果您选择“闪烁的无样式文本”解决方案，那么没有人需要等待盯着页面上不可见的文本。
要了解有关网络字体优化的更多信息，您可以阅读我们的指南。
最小化主线程工作并减少 JavaScript 执行时间
这些建议与 JS 脚本的使用及其对页面加载性能的影响有关。
JS 对于你的网站来说成本很高：下载后，它必须被浏览器“读取”和“理解”（解析和编译），然后在浏览器中执行。页面上的 JS 越多，浏览器需要解析、编译和执行它的时间就越多。
根据有关“最小化主线程工作”的注释，PageSpeed 是这样定义的：
考虑减少解析、编译和执行 JS 所花费的时间。您可能会发现提供较小的 JS 有效负载对此有所帮助。
为了减少 JS 执行时间并最小化主线程工作，您必须删除未使用的 JavaScript。
您可以使用特定的插件来帮助您从页面中删除不需要的 JS，例如：
请慎重使用它们，并在使用它们之前咨询其开发人员或查看文档。
使用高效的缓存策略提供静态资产
缓存策略是一组确保页面被缓存并快速加载的步骤。
正如我们在有关加载时间和缓存的指南中已经看到的那样，您应该审核几层可用的缓存，并尽可能将其应用到您的站点：页面缓存、服务器端缓存、对象缓存和浏览器缓存。
当 Google PageSpeed 要求通过高效的缓存策略提供静态资源时，它指的是浏览器缓存。
要了解如何解决此警告，您可以阅读我们有关如何纠正 PageSpeed 中的静态缓存警告的指南。
避免巨大的网络负载
这里PageSpeed要求你减少网络请求的数量。
网络请求对页面加载速度有很大影响，但它们也会影响用户体验、跳出率和 SEO。
要修复此警告并减少网站上的 HTTP 请求量，您可以按照我们的指南进行操作。
避免 DOM 大小过大
DOM 元素是页面上的所有标签（如 DIV、HTML、BODY 等）。
根据 Google 的 Web 开发人员指南，最佳 DOM 树包括以下特征：
- 节点总数不到 1500 个。
- 最大深度为 32 个节点。
- 没有父节点具有超过 60 个子节点。
一般来说，要减少过多的 DOM 大小，您应该检查您正在使用的主题和插件：您可以通过直接解决网站设计或向开发人员寻求帮助来做到这一点。
最小化关键请求深度
本注释指的是关键请求链，即页面上以高优先级加载的资源列表。这并不是一项旨在“通过”或“不通过”的审核，但如果您解决了这个问题，您将能够提高网站的页面加载性能。
PageSpeed Insights 建议通过“减少链的长度、减少资源的下载大小或推迟下载不必要的资源以提高页面负载”来解决此审核问题。
发表回复