如何使用 Google PageSpeed Insights 工具？

什么是 Google PageSpeed Insights？

Google 的 PageSpeed Insights (PSI) 是一款免费工具，可分析网页在移动设备和桌面设备上的性能，并提供有价值的指标（称为核心网络指标）来评估用户体验的质量。该工具会给您 0 到 100 之间的分数，分数越高通常意味着您的页面速度和效率越优化。

PSI 使用 Lighthouse（一种开源自动化工具）来分析网页的性能和质量，并根据两种类型的数据提供包含改进建议的性能报告：

• 实验室数据：这是 Lighthouse 在受控环境中收集的数据。它通过模拟网站的加载方式来帮助您调试问题，但可能不会显示真实的用户体验问题。

• 现场数据：这是从实际用户与您的网站互动时收集的真实用户体验数据。它提供了用户体验的真实视图，但包含的指标较少。

什么是良好的 PageSpeed Insights 分数？

谷歌表示， 90 分或以上的分数为优秀，50 至 89 分需要改进，50 分以下则被认为是较差。

如果许多页面的评分都低于 90，则您的用户体验可能不佳，而且可能还会对 SEO 产生一些负面影响。但没有必要过分追求满分 100 分，因为访问者最终关心的是快速找到信息（或解决方案），而不是您的分数。 

PageSpeed Insights 分数如何影响 SEO？

Google 不会通过 PSI 运行您的网站并用它来为您排名。但该分数部分基于页面速度— 一个已确认的 Google 排名因素。加载时间过慢会让用户感到沮丧，并导致他们放弃您的网站，但如果页面加载速度快，访问者更有可能留在您的网站并与之互动。这会带来更好的用户体验。搜索引擎会奖励那些为访问者提供良好页面体验的网站。因此，提高您的 PSI 分数可能会对您的搜索排名产生积极影响。

如何使用 Google PageSpeed Insights 工具

PageSpeed Insights 非常易于使用。只需转到 PageSpeed Insights，输入任何 URL（无论是您自己的还是竞争对手的），然后单击“分析”。

然后，等待工具分析网页。这可能需要几秒钟到一分钟的时间，具体取决于页面的复杂程度和您的互联网连接速度。在报告顶部，您将看到您的网站是否通过了核心网络生命力评估。像这样：

核心网络指标是一组衡量网站（或页面）用户友好度的指标，基于加载时间、交互性和视觉稳定性。它包括以下三个指标：

• 最大内容绘制 (LCP)：衡量加载性能，特别是页面最大内容元素被用户看到所需的时间；

• 交互到下一次绘制 (INP)：衡量响应能力，特别是页面响应用户交互的速度有多快（或多慢）；

• 累积布局偏移 (CLS)：衡量视觉稳定性，特别是页面内容在加载过程中的移动程度。

其他值得注意的指标包括：

• 首次内容绘制 (FCP)：测量页面显示第一个内容元素所需的时间；

• 首次输入延迟 (FID)：衡量交互性，特别是网站响应首次用户交互（例如单击按钮或链接）所需的时间。（以前 FID 是三个核心 Web 指标之一。INP 于 2024 年 3 月取代了它）；

• 首字节时间 (TTFB)：衡量 Web 服务器的响应能力，具体地说是用户请求网页后，浏览器从服务器接收第一个数据字节所需的时间。

接下来，您将在标题为“诊断性能问题”的部分中看到性能分数。

Google PageSpeed Insights 会针对以下每个类别为您的网页评分： 

• 性能：这是首次内容绘制 (FCP)、速度指数、总阻塞时间 (TBT)、最大内容绘制 (LCP) 和累积布局偏移 (CLS) 分数的加权平均值。它表明您的页面在速度和优化方面的表现如何。

• 可访问性：此类别评估诸如导航的简易性、图像的替代文本以及视障用户的颜色对比度等因素。

• 最佳实践：此类别衡量您的页面遵循 Web 开发最佳实践的程度。从使用现代 Web 技术、优化代码和安全连接，到包含必要的元标记和有效管理 JavaScript。

• SEO（搜索引擎优化）：此类别重点关注您的页面针对搜索引擎的优化程度，考虑元数据、结构化数据和移动友好性等方面。

如何提高你的 Google PageSpeed Insights 分数 

为了提高您的 PSI 分数，您可以按照 PageSpeed Insights 报告以及站点审核中的站点性能报告中的建议进行操作。有些建议可能很容易自己实现（例如，调整图像大小），其他建议可能需要 Web 开发人员和/或技术 SEO专家的专业知识（例如，减少未使用的 JavaScript）。 

这里有一步一步的指南来指导您实施一些 Google 最常见的 PageSpeed Insights (PSI) 建议来提高您的分数：

1. 消除渲染阻塞资源

阻止渲染的资源会阻止网页快速加载，这是因为 CSS、JavaScript 和字体文件等资源会强制浏览器在显示页面之前加载它们。消除这些障碍可以让您的页面加载更快，并提高您的 Google 网页速度测试分数。为此，请按照下列步骤操作：

1. 在 PSI 报告的“诊断”部分中查找“消除阻碍渲染的资源”。

2. 点击建议旁边的箭头可查看导致问题的资源列表。这将向您显示哪些资源阻碍了页面快速呈现，以及可能节省的时间（以毫秒为单位）。

3. 一旦确定了阻止渲染的资源，下一步就是找出哪些资源对于网站的功能不是必需的，以便可以删除、内联或延迟它们。如果您不熟悉编码或网站开发，则此步骤可能需要开发人员的支持。

2.减少服务器响应时间

服务器响应时间，也称为首字节时间 (TTFB)，是浏览器从服务器接收第一个数据字节所需的时间。较慢的 TTFB 会对页面加载速度产生负面影响，因为它会延迟浏览器接收页面内容所需的时间。当用户尝试访问网页时，浏览器会发出网络请求来获取该内容，然后服务器接收请求并返回页面内容。

当浏览器等待服务器响应请求的时间超过 600 毫秒时，Google PSI 会提供“减少初始服务器响应时间”的建议。

为了减少服务器响应时间，您可以尝试以下操作：

• 选择提供快速服务器和低延迟的网络托管服务；

• 通过优化代码和删除不必要的流程来简化服务器的应用程序逻辑，以更快地生成页面；

• 正确索引数据库表以提高查询性能。如果需要，请考虑升级到更快的数据库系统；

• 通过添加更多随机存取内存 (RAM) 和升级到更快的处理器来提高服务器性能。这样您的服务器就可以高效地处理更多请求；

• 使用内容分发网络 (CDN)将页面资源分发到多个服务器。这可以减少将这些资源分发给用户所需的时间。

为此，您可能需要开发人员或网络主机的支持。

3.优化你的图片

图像（尤其是大图像）可以显著提高页面加载速度。Google 网站速度测试报告会显示您网页上所有尺寸不合适的图片，并以千字节 (KiB) 为单位显示当前大小和潜在节省空间。 

调整这些图像的大小可以节省数据并缩短页面加载时间。优化图片的方法有很多，优化方法相对简单，您可以：

• 使用TinyPNG或ShortPixel等工具压缩图片，然后再将其上传到网站；

• 对每张图片使用适当的图像格式（JPEG、PNG、GIF 或 WebP）以优化文件大小并保持图像质量；

• 使用“srcset”属性根据用户的设备提供适当的图像尺寸；

• 使用LazyLoad或Smush等 WordPress 插件延迟加载图像。

如果您有 WordPress 网站，那么自己做这件事相当简单。以下是使用 TinyPNG 优化图像的方法：

1. 登录 WordPress

2. 点击“添加插件”。然后搜索“TinyPNG”。找到插件后，点击“安装”，然后点击“激活”。

3. 注册账户后，转到“媒体库”并选择“批量优化”。

该插件将显示您上传了多少张图片以及节省了多少空间。 

4. 避免链接关键请求链接关键请求是指页面需要下载多个文件和资产才能加载。 

假设您是一家宠物食品店的电子商务经理。在您的猫食着陆页上，文本只有在可爱小猫的图片加载完成后才会显示。而要加载图片，CSS 文件需要先加载。每个请求都依赖于前一个请求，从而形成一个链条。如果任何资源未加载，浏览器将不会呈现页面。这可能会导致严重的延迟。

如果您无法自己更改网站代码，您可以请开发人员为您添加“async”和“defer”脚本标签。需要注意的是，使用这些属性可能会导致某些类型的脚本出现问题。因此，在网站上实施这些属性之前，请务必进行全面测试。

5. 预加载密钥请求

预加载关键请求意味着告诉浏览器优先考虑关键资产并首先下载它们。这样，最相关的文件就可以更快地加载。关键请求是页面在早期加载阶段需要的任何东西。最常见的关键请求是字体，但这也适用于 JavaScript 文件、CSS 文件和图像。

如果您的网站在 WordPress 上运行，您可以使用支持预加载的插件，例如Preload Images和Pre* Party 。否则，请开发人员识别关键请求并将预加载标签添加到代码中。 

6.减少CSS和JavaScript

CSS 是网页设计的重要组成部分。但 CSS 文件通常比实际需要的要大，这会降低网站速度。同样，JavaScript对于您网站的运行至关重要，但如果代码未得到适当优化，它也会显著降低您网站的速度。减少代码的大小（这一过程称为“最小化”）可以使其加载得更快。

压缩代码包括从 CSS 和 JavaScript 文件中删除不必要的字符，例如空格和注释。有许多工具可以缩小你的代码，例如Toptal CSS Minifier、Toptal JavaScript Minifier和Minify。您还可以考虑使用轻量级且加载速度快的 JavaScript 框架或库。例如 jQuery 或 React。

如果您的网站使用 WordPress，您可以使用插件来提供帮助。用于 CSS 和 JavaScript 压缩的流行插件包括Hummingbird、LiteSpeed Cache和W3 Total Cache。

以下是使用 Hummingbird 压缩代码的方法：

1. 登录 WordPress 并从仪表板菜单中选择“插件”

2. 要安装 Hummingbird，请单击“添加插件”，然后单击“激活”

3. 在仪表板菜单中找到“蜂鸟”，并完成设置向导

4. 然后返回“仪表板” 

5. 检查您的文件在 Gzip 压缩部分是否标记为“活动”。

7. 延迟屏幕外图像解决与图像相关的页面速度慢的另一种方法是推迟加载屏幕外的图像 – 这意味着屏幕上看不到但仍在由浏览器加载的图像。 

通过延迟加载不可见图像，您可以优先加载可见图像。这样，页面就可以加载得更快。 您可以使用延迟加载来实现这一点。这意味着只在需要时加载图像，例如当它们出现在屏幕上时。这可以显著减少加载页面所需的时间，尤其是在互联网连接速度较慢的移动设备上。 WordPress 有一些插件可以为您做到这一点，例如Lazy Loader。 

8.减少文档对象模型的大小

文档对象模型 (DOM) 是网页 HTML 结构的树状表示，DOM 过大可能会导致加载时间变慢和用户体验不佳。 

为了减少 DOM 大小，你可以：

• 要求您的开发团队从 HTML 代码中删除不必要的元素和属性，并删除未使用的 JavaScript 或 CSS 文件；

• 使用服务器端渲染 (SSR) 在将页面发送到客户端之前在服务器上渲染页面；

• 避免使用（大多数）可视化页面构建器，因为它们会生成膨胀的 HTML；

• 不要将文本粘贴到所见即所得 (WYSIWYG) 页面构建器中；

• 寻找干净编码的主题和插件。

Google 的 Chrome DevTools 等工具可以帮助您分析 DOM 大小并确定需要改进的地方。您可能需要开发人员支持才能实施更改。

9. 修复多个页面重定向

重定向会自动将流量从一个 URL 转发到另一个 URL。它们也会降低您的页面加载速度。 假设您尝试访问已重定向的页面。服务器告诉您的浏览器该页面已移动。然后，您的浏览器尝试检索新的 URL。这个额外的步骤会使加载新页面的时间更长。 一次重定向就已经影响了页面速度。但通常情况下，您可能会遇到多次连续重定向的问题。这些重定向被称为重定向链。

重定向链经常发生，因为旧页面被删除，新页面取而代之。因此，原始 URL 和最终 URL 之间会存在多个页面。如下所示：Google 最多可以跟踪 10 次重定向，而不会在 Google Search Console 中报告问题，但重定向链可能会不必要地减慢您的网站速度。因此，最好保持简单以提高您的 PageSpeed Insights 分数。您应该直接从原始 URL 重定向到最新 URL。

10.避免过度使用第三方代码

第三方代码包括脚本、像素和插件，它会减慢页面加载时间并对您的 PageSpeed Insights 分数产生负面影响。第三方代码通常来自其他公司（例如分析工具和广告商），用于监控您网站的性能。 一些第三方代码是必需且有用的，例如，您可能有 Google Analytics 像素来衡量网站性能，或者 Facebook 像素来跟踪广告活动。 但你可能有一些不必要的第三方代码，比如你不再使用的工具和平台。这就是为什么您应该定期审核网站上的第三方代码，并删除所有不必要的内容。

在您的 PageSpeed Insights 报告中，Google 会标记第三方代码，以及传输大小和主线程阻塞时间。请特别注意灰色栏中的公司名称。这些是运行您网站上代码的第三方公司，Google 还对它们进行了分类（标签管理器、社交、实用程序、分析），以帮助您了解它们的用途。

记下您不认识或不再需要的公司名称，并采取措施删除其代码。这可能涉及从您的 CMS 中删除代码、如果您的网站使用 WordPress 则卸载插件或者从您的标签管理工具中删除标签。

审核您的网站以更快地监控和修复页面问题

如果您想进行更详细的网站审核，请联系我们！

本篇文章来源于微信公众号: 外贸加出海