2020 年测量页面速度的高级概念

已发表: 2020-04-09

要了解 2020 年影响页面速度的因素，我们首先需要了解浏览器如何呈现网页。 如果您不熟悉页面速度和 Web 技术概念，例如 DOM、CSSOM、渲染树、回流成本和 DOM 类型，您可能想从阅读上面链接的文章开始。

随着网站和网络浏览器变得越来越复杂，页面速度变得不仅仅是页面有多大或服务器响应速度有多快。 在本文中，我们将研究 2020 年及以后的一些新出现的页面速度指标：资源请求的数量和大小、关键渲染路径、LCP、CLS 和总阻塞时间。

本文是关于页面速度的四篇系列文章中的第二篇。 您可以在此处找到第一篇文章：浏览器如何创建网页？

管理资源请求的顺序、大小和数量

渲染过程的每一步都需要时间。 查找网站速度慢的地方以及如何加快速度的方法涉及查看浏览器在渲染页面的过程中如何处理资源。

这意味着请求的顺序、数量和大小在当今衡量页面速度方面发挥着重要作用。

资源顺序和资源加载提示优化的最重要贡献是通过最大内容绘制减少了 TTI（交互时间）。 通过资源顺序优化，您可以在更短的时间内上传相同数量、相同大小的文件，并交付给用户和搜索引擎。

什么是关键渲染路径？

关键渲染路径包括将创建首屏网页部分的所有资源。

由于页面的总加载大小，您的网页可能比竞争对手的网页慢。 但诀窍是：即使其他业务部门不允许您修复页面的加载大小，您仍然可以通过优化关键渲染路径来比竞争对手更快地提供内容。

如何优化关键渲染路径

这是由 Sergey Chernyshev 创建的页面速度和转换率相关性模拟器。 如果我的网页为用户加载快 0.5 秒并将其显示给您的开发团队以指定每毫秒可以提高转换率，您可能会找到问题的答案。

要优化关键渲染路径，您需要确定创建折叠部分所需的资源。 之后，有几个小问题要问：

  1. 哪些资源会阻止浏览器下载关键资源？
  2. 能否减少关键源的大小和数量？
  3. 可以内联关键源吗？
  4. 能否统一关键渲染路径源来限制 DNS 查找过程？

我们来看一个例子。 我们还将提供一些加速 CSS、JS 和 HTML 的建议。

这是来自亚马逊网页的关键部分示例。 使用 DevTools，您可以在页面的关键部分看到最​​重要的 <div> 元素以及必要的 CSS 代码。 这样，您可以在渲染阻塞资源干扰浏览器之前创建内联 CSS 代码块。 您可能还会在底部看到未使用的代码堆栈。 亚马逊总是对不同的类别使用相同的 CSS/JS 资源模式，即使它们没有经过优化。

除了速度之外，这里还有另一个问题。 随着手机屏幕尺寸的不同，网页的关键部分因型号而异。 有些屏幕不显示价格，有些屏幕不显示股票信息。 这是一个重要的设计错误，但它也使关键的渲染路径优化变得更加困难。 如果该区域有链接，它还会划分PageRank值，并降低转换的概率。

您可以使用 Puppeteer（Googlebot 的抓取引擎）来检查此类问题，并为每个智能手机/平板电脑型号自动截屏，并检查网页关键部分的设计。 Jean-Francois Lagarde 为这项任务提供了一个不错的 Puppeteer 库，您可能想查看它。

这是每个设备视口工具的 Puppeteer 自动屏幕截图中设备配置的快速屏幕截图。

什么是最大的内容涂料？

最大内容绘制 (LCP) 是网页中字节和大小方面最大的区域。 在每个网页中，都有很多“div”元素，它们都包含不同的页面组件。 并且这些组件具有不同的页面加载值。

根据 Google 的说法，最大内容绘制主要受页面中最重要元素的影响。 为了让您了解 LCP 的重要性，Google 决定在未来将这一新指标添加到 Lighthouse 报告中。

这也意味着我们将越来越多地听到有关 LCP 的信息，因为它将与真实用户指标 (RUM) 一起使用，并且将成为一个关键指标，尤其是在涉及关键渲染路径的情况下。

这是 Lendio 提供的最大内容绘制示例。 如您所见，DevTools 在页面上显示 LCP 以及有关其类型、大小和加载时间的数据。 Largest Contentful Paint 的内容应该始终包括页面的目的和价值，以及最重要的功能或 CTA——而且，最重要的是，它还应该首先加载！

在此示例中，它只是文本。 将它与功能工具结合起来会比仅使用文本/图像 LCP 更好。

LCP 只考虑某些类型的资源。 这样做的主要原因是首先保持 LCP 测量简单。 下面是一个“脚本实例”，用于创建 LCP 条目列表。 研究这些代码将告诉您 Google 开发人员在加载页面时要注意什么以及如何注意。

[暴露=窗口]
接口 LargestContentfulPaint : PerformanceEntry {
只读属性 DOMHighResTimeStamp 渲染时间；
只读属性 DOMHighResTimeStamp 加载时间；
只读属性 unsigned long 大小；
只读属性 DOMString id;
只读属性 DOMString url；
只读属性元素？ 元素;
[默认] 对象 toJSON();
};

您在此列表中看到的是比较进入 LCP 条目列表的候选项目所需的量表。 下面，我将向您展示选择 LCP 候选者的方法（“大正文”和“大图像”）。

了解定义 LCP 的原则和流程

确定 LCP 的原则极为重要：

  • 当页面加载时，LCP 可以在几秒钟内改变。 有时，即使页面组件作为 LCP 在屏幕上保持足够长的时间，即使后面加载的较大页面元素也不会改变之前的状态。
  • 有时，首屏元素（在网页的关键部分中）被选为 LCP，而不是首屏以下较大的项目（网页的非关键部分）。
  • 如果其组件在屏幕上被拆分，则无法将较大的 <div> 元素选择为 LCP。 相反，块 <div> 元素将被选为 LCP。 下面您将看到一个示例来说明这一点。

在此示例中，我们看到最大的组件是 <div>，其中包含四个不同的图像。 但是，这些单独的图像都没有大于 Oncrawl 徽标和包含在同一 <div> 元素中的文本。 由于两者都在网页的关键部分，第二个元素将是 LCP。

在计算 LCP 时序和确定 Google Developers 的观​​点时，您还应该关注“复合”设计。 如果一个 <div> 元素没有复合和统一的设计感觉/视图，它可能不会被选为 LCP。

即使它被选中，谷歌浏览器也可能认为这不是一个健康的 LCP，它会在未来添加到 LCP API 中的新代码。 出于与 UX 相关的原因以及更好地了解页面速度，Google 将继续使用这些方法改善自己的感知。

什么是版面移位和累积版面移位？

布局转移是指，当浏览器下载页面时，页面元素会以一种可能会干扰用户的方式改变它们的位置。

在下载页面时，每个页面部分都将按照给定的顺序一个接一个地可见。 这很正常。 但是如果这些部分因为后续部分而改变了它们的起始位置，这就是布局转移。

累积布局移位 (CLS) 是所有布局移位事件的总和。

Chrome 用户体验也有一个关于 CLS 分数的部分。 但这不仅仅是关于用户体验。 布局移位可能对光敏性癫痫患者有害。 作为一家“健康公司”，谷歌也必须重视用户的健康； 他们试图尽可能减少“网络压力”。

“我相信谷歌已经是一家健康公司。 它从一开始就存在于公司的 DNA 中”
David Feinberg——谷歌健康负责人

这是一个简单而决定性的布局转换示例，来自我们在本系列前面看到的同一站点之一。 这是来自土耳其的主要新闻网站，这是他们的主页……

您可以从 Moz 开发人员那里阅读更多关于对健康有害的布局偏移、闪烁、闪烁和颜色变化的信息。

如何在您的网站上找到累积的布局变化

要查看网页的布局部分变化，您可以使用 Google Chrome DevTools 或者您可以使用 Layout Instability API 来扩展所有网页的流程。

累积布局移位，或所有布局移位事件的总和，是 2020 年及以后页面速度和用户体验的重要标准。 如果网页的首屏部分在加载时发生移动，则在优化速度时还需要对其进行优化。

下面，您将找到 Layout Shifting Formula，以及 Layout Instability API 代码示例，让您了解 CLS 的贡献以及计算 Layout Shifting Score 的方法。

版面移位公式如下：
布局偏移分数 = 影响分数 * 距离分数

Layout Shifting 分数是使用两个有用的新术语计算的，即影响分数和距离分数：

  • 影响分数是受移位影响的屏幕百分比。 您知道，如果页面元素（覆盖移动设备上 50% 的视口）造成布局偏移，则您的 CLS 会很高，因为移动它会影响至少 50% 以上的屏幕。
  • 距离分数是通过换档元件在换档期间在其换档方向上远离其原始点的距离来衡量的。 如果第一个位置和最后一个位置之间的距离过大，则距离分数也会过大。

这将使您更容易估计您的 CLS 分数并为您的 IT 和 UX 团队提供建议。

上面，你可以看到一个 CLS API 代码片段，下面是一个 GIF，它显示了如何计算 Cumulative Layout Shifting。

在我们一直在查看的同一个土耳其新闻网站上，我们的 CLS 是 0.47。 考虑到它是在 0 和 1 之间计算的，这是一个非常糟糕的分数。
您可以使用 Webpagetest.org 的高级自定义度量系统计算您的 CLS。 在“发送信息部分”之前，您应该使用 CLS API 的代码。 之后，您需要将 URL 从 root/results/ 更改为 root/custom_metrics.php?test={Same Result Number}。

什么是总阻塞时间？

您可以快速下载网页的折叠部分，而无需进行任何布局转换，但如果它没有响应用户的输入，Google 算法会声称您还有另一个 UX 和页面速度问题。 总阻塞时间是在这个阶段损失的时间。

与累积布局移位和最大内容绘制一样，总阻塞时间是 2020 年及以后的新页面速度和用户体验指标。

计入总阻塞时间 (TBT) 的是首次绘制 (FP) 和交互时间 (TTI) 之间的任何加载事件，该事件阻塞浏览器（或设备）的主线程超过 50 毫秒并阻止用户执行任何过程。

如何计算和优化 TBT

您可以使用 Long Tasks API 计算您的总阻塞时间 (TBT)。

为了优化您的 TBT 分数，您还应该关注加载资源的顺序和偏好，以及请求的数量和大小。

这是来自以前的同一个站点。 您可能会注意到，主线程完全忙碌了超过 5 秒，不停。 他们的 LCP 在将近 2.5 秒后仍在加载……这里要注意的重要一点是，他们最长的任务请求超过了 350 毫秒。 这意味着它被认为阻塞了主线程超过 300 毫秒。

此外，所有阻塞时间都计入总阻塞时间的一部分。 这不仅包括首屏部分中的元素，而且适用于所有网页组件。 它会为您的网站创建有害的浏览器历史记录。

如果您的 TBT 超过 300 毫秒，这可能会大大损害您的用户保留率和转化率。

您可能会看到上面主线程的 TBT 计算示例。 在此示例中，有四个请求。 谷歌浏览器一次可以从同一台服务器创建 6 个请求。 只有前 50 个 MS 会顺利进行； 之后它将开始同时执行多个任务，只要 CPU/网络功率允许。 请记住，人类每 16 毫秒可以看到一帧。 谷歌关心用户的每一毫秒。

在此示例中，总阻塞时间为 1 秒和 100 MS。

页面速度优化的下一步

到目前为止，在本系列中，我们已经研究了浏览器如何创建网页，这使我们能够在本文中看到与页面在浏览器中的加载方式相关的新指标如何影响页面速度。 我们已经研究了一些最重要的新指标，以及如何衡量和优化它们。

在本系列的下一篇关于当今网站的页面速度的文章中，我们将介绍一个已成为 SEO 和 Web 开发的主要主题的主题：优化 JavaScript 资产以提高页面速度和页面渲染。

开始免费试用