胜过 Google 的 PageSpeed Insights 评估
已发表: 2022-07-22如果您是企业主，您有兴趣为您的网站获得更好的搜索排名。 如果您是开发人员，则需要满足客户的需求并创建一个能够获得良好排名的网站。 谷歌在确定其搜索引擎排名页面 (SERP) 中网站的顺序时会考虑数百个特征。
页面速度在 2018 年年中被正式列为重要的排名属性。 在本文中，我们将解释企业主应注意的性能分数：PageSpeed Insights。 我们将深入探讨一些技术细节，这些细节将帮助软件开发人员在复杂情况下进行改进，例如与单页应用程序相关的情况。
为什么 Acing Google 的 PageSpeed Insights 测试很重要
当谷歌在 2010 年推出 PageSpeed 工具时，大多数网站所有者都熟悉了它。 那些还没有打开 PageSpeed Insights 的人应该检查他们的网站。
该服务提供有关网站如何在桌面和移动浏览器上执行的详细信息。 很容易错过您可以使用分析顶部的移动和桌面选项卡在它们之间切换的事实：
由于移动设备结构紧凑且旨在延长电池寿命，因此其网络浏览器的性能往往低于运行桌面操作系统的设备，因此预计桌面分数会更高。
大型科技公司在任何领域都不会亏本，但预算紧张的小型网站可能会。 企业主还可以在竞争对手的网站上运行 PageSpeed Insights，并将结果与他们自己的结果进行比较，看看他们是否需要投资以提高性能。
什么分数足以通过 PageSpeed 评估？
PageSpeed 使用来自 Core Web Vitals 的指标来提供通过/失败评估。
这个工具有三个分数：
PageSpeed 在诊断性能问题部分以彩色圆圈突出显示性能分数。 它是使用 PageSpeed 的内置虚拟机计算得出的，这些虚拟机具有与普通移动或桌面设备相匹配的特性。 请记住，此值用于页面加载和 PageSpeed 的虚拟机，Google 搜索引擎不考虑该值。
当开发人员对网站进行更改时，此图很有用，因为它允许他们检查更改对性能的影响。 然而，谷歌的搜索引擎只考虑详细的分数。
特定页面（以及 PageSpeed 认为与所分析页面相似的页面）的详细分数是根据 Chrome 浏览器在真实计算机上收集并发送给 Google 的统计数据计算得出的。 这意味着不考虑 Firefox、Safari 和其他非 Chromium 浏览器的性能。
网站所有页面的摘要的获取方式与单页得分相同。 要访问它，请选择“源”选项卡而不是“此 URL”选项卡。 标签栏下列出的 URL 将有所不同，因为 Origin 将显示站点的主页（仅限域）。
Google 会不断更新 PageSpeed 考虑的指标列表，因此重要的最佳来源是 Google Search Console 中的 Experience / Core Web Vitals 部分，假设您已经在那里添加了您的网站。
要通过 Core Web Vitals 评估，所有分数必须为绿色：
要使值变为绿色，页面需要在测试中得分至少为 75%，并且许多用户需要体验相同或更好的值。 每个分数的阈值都不同，FID 的阈值要高得多。
要更好地理解这些值，请单击分数标题：
这链接到博客文章，更详细地解释了给定类别的阈值。
数据累积了 28 天，与真实用户可能遇到的其他两个主要差异：
- 真实设备的性能和网速各不相同，因此该测试产生的结果与 PageSpeed 的虚拟机结果不同。
- 详细评级是在整个页面生命周期内计算的，从页面打开的每 5 秒间隔中获取最差的值。
如果网站的许多用户生活在互联网访问速度较慢的地区，并使用过时或性能不佳的设备，那么差异可能会令人惊讶。 这不是 PageSpeed Insights 的改进建议之一。 乍一看，如何处理这个问题并不明显，但我们稍后会尝试解释。
使用 PageSpeed Insights 建议提高分数
评分的主要部分来自大多数用户打开页面的方式。 尽管并非所有用户都会长时间访问一个网站，而且大多数用户偶尔会访问一个网站，但所有用户都被考虑在评级中，因此提高影响每个人的页面加载速度是一个不错的起点。
我们可以在评估结果下方的“机会”部分找到建议。
我们可以扩展每个项目并获得详细的改进建议。 有很多信息，但这里是最基本和最重要的提示：
- 提高服务器响应速度。 例如，如果您使用共享主机，请升级您的计划或迁移到虚拟专用服务器 (VPS) 甚至专用服务器。 此外，并非所有主机都是平等的。 尝试选择具有良好硬件和正常运行时间保证的可靠主机。
- 降低打开网站所需的流量。 为此，您可以用优化的图像替换图像：更改它们的格式、调整分辨率和压缩、在需要时用静态图像替换动画图像等。流行的内容管理系统具有使此过程变得简单的插件。
- 缓存更多数据。 最简单的方法是使用像 Cloudflare 这样的内容交付网络 (CDN) 来处理静态内容（图像、样式、脚本、不会更改的页面）。 您可以配置缓存规则以优化性能。
现在让我们看看更复杂的因素，有经验的程序员可以提供帮助。
如何在页面生命周期中调试分数
如前所述，Google Search Console 会考虑过去 28 天从基于 Chromium 的浏览器获得的平均分数，还包括页面整个生命周期的值。
无法查看页面生命周期中发生的情况是一个问题。 PageSpeed 的虚拟机无法解释页面加载后的执行情况以及用户与之交互的情况，这意味着网站开发人员将无法获得改进建议。
解决方案是在站点项目的开发人员版本中包含 Google Chrome Web Vitals 库，以查看用户与页面交互时发生的情况。
GitHub 上的 README.md 文件中提供了有关如何包含此库的各种选项。 最简单的方法是添加以下脚本。 它被调整为在主模板的<head>中显示页面生命周期内的值：
<script> (function() { var script = document.createElement('script'); script.src = 'https://unpkg.com/web-vitals/dist/web-vitals.iife.js'; script.onload = function() { // When loading `web-vitals` using a classic script, all the public // methods can be found on the `webVitals` global namespace. webVitals.getCLS(console.log, true); // CLS supported only in Chromium. webVitals.getLCP(console.log, true); // LCP supported only in Chromium. webVitals.getFID(console.log, true); webVitals.getFCP(console.log, true); webVitals.getTTFB(console.log, true); } document.head.appendChild(script); }()) </script>请注意，累积布局偏移 (CLS) 和最大内容绘制 (LCP) 计算仅适用于基于 Chromium 的浏览器，包括 Chrome、Opera、Brave（禁用 Brave Shields 以使库工作）和大多数其他现代浏览器，Firefox 除外，它基于 Mozilla 引擎和 Apple 的 Safari 浏览器。
添加脚本并重新加载页面后，打开浏览器的开发者工具并切换到控制台选项卡。
要查看如何为移动版本计算这些值，请使用“设备”工具栏切换到移动设备。 要访问它，请单击浏览器开发者工具中的切换设备工具栏按钮。
这将有助于查明问题。 展开控制台中的行将显示触发分数变化的详细信息。
大多数情况下，其他分数的自动建议足以了解如何改进它们。 但是，在页面加载了用户交互之后，CLS 会发生变化，并且可能根本没有任何建议，尤其是对于单页应用程序。 即使您的页面未能通过搜索引擎考虑的因素的评估，您也可能会在“诊断性能问题”部分看到完美的 100 分。
对于我们这些在 CLS 中苦苦挣扎的人来说，这将很有帮助。 展开日志记录，然后是条目、特定条目、来源、特定来源，并将currentRect与previousRect进行比较：
现在我们可以看到发生了什么变化，我们可以确定一些修复它的方法。
减少累积布局偏移
在所有分数中，CLS 是最难掌握的，但它对用户体验至关重要。 将元素添加到文档对象模型 (DOM) 或更改现有元素的大小或位置时会发生布局偏移。 它会导致该元素下方的元素发生移动，并且用户感觉他们无法控制正在发生的事情，从而导致他们离开网站。
在一个简单的 HTML 页面上处理这个相对容易。 设置图像的宽度和高度属性，以便它们下方的文本在加载时不会移动。 这可能会解决问题。
如果您的页面是动态的并且用户使用它就像使用应用程序一样，请考虑以下步骤来解决 CLS 问题：
- 将页面设置为在用户单击按钮或链接后 500 毫秒显示内容，而不会触发 CLS。
- 更改不会导致其他 DOM 元素移动的参数：背景、颜色等。
- 确保在更改元素的大小或位置时其他元素不会移动。
Google Developers 优化 CLS 页面提供了更详细的建议。
500 毫秒如何减少 CLS
为了说明如何使用 500 毫秒阈值，我们将使用一个涉及图像上传的示例。
通常，当用户上传文件时，脚本会在 DOM 中添加一个<img>元素，然后客户端浏览器会从服务器下载图像。 从服务器获取图像可能需要超过 500 毫秒，并且可能会导致布局偏移。
但是有一种方法可以更快地获取图像，因为它已经在客户端计算机上，因此可以在 500 毫秒截止日期之前创建<img>元素。
这是一个关于纯 ECMAScript 的通用示例，没有适用于大多数现代浏览器的库：
<!DOCTYPE html> <html> <head></head> <body> <input type="file"> <img> <script> document.getElementById('input').addEventListener('change', function() { var imageInput = document.getElementById('input'); if (imageInput.files && imageInput.files[0]) { var fileReader = new FileReader(); fileReader.onload = function (event) { var imageElement = document.getElementById('image'); imageElement.setAttribute('src', event.target.result); } fileReader.readAsDataURL(imageInput.files[0]); } }); </script> </body> </html>正如我们之前看到的，解决这类问题可能需要思维敏捷。 对于移动设备，尤其是便宜的设备，以及缓慢的移动互联网，90 年代的性能优化艺术变得有用，而老式的网络编程方法可以激发我们的技术。 现代浏览器调试工具将对此有所帮助。
更新 Google 搜索控制台
发现并消除问题后，Google 的搜索引擎可能需要一些时间来注册更改。 要更快地更新结果，请让 Google Search Console 知道您已解决问题。
使用左上角的搜索属性框选择您正在处理的页面。 然后导航到左侧汉堡菜单中的 Core Web Vitals：
单击移动或桌面报告右上角的打开报告按钮。 （如果您在这两种情况下都遇到问题，请记住稍后对第二份报告重复相同的操作。）
接下来，转到图表下的详细信息部分，然后单击带有失败验证警告的行。
然后单击此问题的查看详细信息按钮。
最后单击开始新验证。
不要指望立竿见影的效果。 验证最多可能需要 28 天。
优化是一场持续的斗争
SEO优化是一个持续的过程，性能优化也是如此。 随着受众的增长，服务器会收到更多请求，响应会变慢。 不断增长的需求通常意味着向您的站点添加新功能，它们可能会影响性能。
当谈到性能优化的成本/收益方面时，有必要取得适当的平衡。 开发人员不需要一直在所有站点上实现最佳价值。 专注于导致最重要的性能问题的原因； 您将更快、更省力地获得结果。 大公司有能力投入大量资源并获得所有分数，但中小型企业并非如此。 实际上，小型企业很可能只需要匹配或超越其竞争对手的表现，而不是像亚马逊这样的行业巨头。
企业主应该了解为什么网站优化很重要，工作的哪些方面最重要，以及在他们雇用的人身上寻找哪些技能。 就开发人员而言，他们应该始终牢记性能，帮助他们的客户创建不仅让最终用户感觉快而且在 PageSpeed Insights 中得分很高的网站。