Google 的新页面体验更新对您网站上的图片意味着什么

很容易忘记，作为搜索引擎，Google 不仅仅是比较关键词来生成搜索结果。Google 知道，如果人们不享受他们在网页上的体验，他们就不会在页面上停留足够长的时间来消费内容——无论内容有多相关。

因此，Google 一直在尝试使用可量化的指标来分析网页的用户体验。将其纳入其搜索引擎排名，希望不仅能为用户提供优质的相关内容，还能提供出色的用户体验。

Google 即将推出的页面体验更新是朝着这个方向迈出的重要一步。拥有图片密集型网站的网站所有者需要特别警惕，以适应这些变化，否则可能会被淘汰。在本文中，我们将讨论您需要了解的有关此更新的所有信息，以及如何充分利用它。

注意：Google 于 2020 年 5 月介绍了其页面体验计划，并在2020 年 11 月宣布它将于 2021 年 5 月开始推出。但是，Google 后来推迟了其计划，从2021 年 6 月中旬开始逐步推出。这样做是为了给网站管理员时间首先处理 COVID-19 大流行带来的不断变化的状况。

背景介绍

在我们深入了解 Google 如何将用户体验指标纳入搜索引擎排名的最新变化之前，让我们先了解一些背景信息。2020 年 4 月，Google 在此方向上做出了迄今为止最关键的举动，推出了一项新举措：核心 Web 指标。

核心 Web 指标 (CWV) 的推出旨在帮助 Web 开发人员应对使用可测试指标优化搜索引擎排名的挑战——对于像用户体验这样高度主观的事情来说，这很难做到。

为此，Google 确定了三个关键指标（称为“以用户为中心的性能指标”）。它们是

1. LCP（最大内容绘制）：网页最初加载时折叠上方最大的元素。通常，这是一个大型特色图片或标题。最大内容元素的加载速度在用户感知页面的整体加载速度方面发挥着重要作用。
2. FID（首次输入延迟）：用户首次与页面交互与主线程空闲以供浏览器处理事件之间的时间。这可能是点击/点击按钮、链接或与任何其他动态元素交互。与页面交互时的延迟显然会让用户感到沮丧，因此保持 FID 较低至关重要。
3. CLS（累积布局偏移）：这计算页面在首次加载时的视觉稳定性。该算法考虑了元素的大小以及它们相对于视口的移动距离。加载时不稳定性高的页面会导致用户误操作，也可能导致令人沮丧的情况。

这些指标已经从一些已经使用了一段时间的更基本的指标演变而来，例如 SI（速度指数）、FCP（首次内容绘制）、TTI（交互时间）等。

这之所以重要，是因为图片在网站的 CWV 得分中可能发挥着重要作用。例如，LCP 往往是折叠以上的图片，或者至少必须与图片竞争以首先加载。使用不当的图片也会对 CLS 产生负面影响。加载缓慢的图片还会通过进一步延迟页面的整体渲染来影响 FID。

此外，这建立在 Google 重新关注移动优先索引的基础之上。因此，这些指标不仅对您的网站很重要，而且您还必须确保您的页面在移动设备上的得分也很好。

将会发生什么变化？Google 搜索的页面体验

很明显，总的来说，Google 在搜索引擎排名方面越来越重视用户体验。这让我们看到了最新的更新——Google 现在计划将页面体验作为排名因素纳入考虑，从 2021 年 6 月中旬的早期推出开始。

那么，什么是页面体验？简而言之，它是一个排名信号，它结合了多个指标的数据，试图确定网页的用户体验好坏。它包含以下因素

• 核心 Web 指标：使用相同且未更改的核心 Web 指标。Google 已制定指南和推荐排名，您可以在此处找到。您需要获得总体“良好”的 CWV 评级才能获得“良好”的页面体验得分。
• 移动设备可用性：URL 必须没有任何移动设备可用性错误才能获得“良好”的页面体验得分。
• 安全问题：任何标记的安全问题都会使网站失去资格。
• HTTPS：页面必须通过 HTTPS 提供才能获得资格。
• 广告体验：衡量广告在多大程度上对网页的用户体验产生负面影响，例如，通过具有侵入性、分散注意力等。

作为此更改的一部分，Google 宣布打算包含一个视觉指示器或徽章，以突出显示通过其页面体验标准的网页。这将类似于搜索引擎以前用来推广 AMP（加速移动页面）或移动友好页面的徽章。

这种官方认可将为高性能网页在竞争激烈的 Google 搜索结果页面 (SERP) 中提供巨大优势。这种视觉提示无疑会提高点击率和自然流量，尤其是在已经排名靠前的网站中。如果当前的试用阶段通过，此功能可能会在 5 月份推出。

对于非 AMP 用户来说，另一个好消息是，所有页面现在都将有资格在浏览器和 Google 新闻应用中显示在“热门新闻”中。尽管 Google 表示页面可以“无论其核心 Web 指标得分或页面体验状态如何”都符合“热门新闻”的资格，但很难想象这在现在或将来不会发挥作用。

关键要点：这对您网站上的图片意味着什么？

Google 指出，消费者对其Lighthouse 和 PageSpeed Insights工具的使用量激增了 70%，这表明网站所有者正在逐渐认识到优化其页面的重要性。这意味着在与其他网站争夺搜索引擎排名时，**标准只会越来越高**。

Google 重申，尽管进行了这些更改，**内容仍然为王**。但是，内容不仅仅是页面上的文本，真正引人入胜且用户友好的内容还包括经过深思熟虑的媒体，其中大部分可能是图片。

随着拟议中的页面体验徽章和“热门新闻”资格的争夺，**在 Google 搜索算法中获得高排名的难度从未如此之高**。您需要利用所有可以获得的优势。而且，正如我即将展示的那样，优化您的图片资产可以对根据这些指标获得高分产生切实的影响。

如何跟上步伐？

在我提出帮助您优化图片资产以获得核心 Web 指标的解决方案之前，让我们先看看为什么图片通常会损害性能

• 图片会增加网站页面的整体大小，尤其是在图片未经优化（即未压缩、大小不合适等）的情况下。
• 图片需要对不同的设备做出响应。您需要更小的图片尺寸才能在较小的屏幕上保持相同的视觉质量。
• 不同的上下文（浏览器、操作系统等）具有不同的格式来优化渲染图片。但是，大多数图片仍然使用 .JPG/.PNG 格式。
• 网站所有者并不总是了解与在网页上使用图片相关的最佳实践，例如始终显式指定宽度/高度属性。

使用传统方法，解决这些问题需要花费大量的人力、物力和财力。大多数解决方案（例如手动编辑图片和硬编码响应式语法）在可扩展性、轻松更新/调整以适应更改以及膨胀开发流程方面存在固有的问题。

要优化图片资产，尤其是在专注于改进 CWV 的情况下，您需要

• 减少图片负载
• 实施有效的缓存
• 加快交付速度
• 将图片转换为最佳的新一代格式
• 确保图片具有响应能力
• 实施运行时逻辑以在不同上下文中应用最佳设置

幸运的是，有一类工具专门设计用于解决这些挑战并提供这些解决方案——图片 CDN。特别是，我想重点介绍ImageEngine，它在我的页面性能测试中始终优于其他 CDN。

ImageEngine 是一款智能的、设备感知的图像 CDN，您可以使用它来服务您的网站图像（包括 GIF）。ImageEngine 使用 WURFL 设备检测 来分析访问您网站页面时的上下文（设备、屏幕尺寸、DPI、操作系统、浏览器等），并相应地优化您的图像资源。根据这些标准，它可以通过智能调整大小、重新格式化和压缩来优化图像。

它是一个完全自动化的、设置后即可忽略的解决方案，设置完成后几乎不需要任何干预。该 CDN 拥有 20 多个全球 PoP，逻辑内置于边缘服务器，可在不同区域实现更快的速度。ImageEngine 声称可以实现高达 98% 以上的缓存命中率，并将图像负载减少 75% 以上。

分步测试 + 如何使用 ImageEngine 提升页面体验

为了说明使用像 ImageEngine 这样的图像 CDN 可以带来的差异，我将向您展示一个实际测试。

首先，让我们看看一个包含大量图像内容的页面在使用 PageSpeed Insights 进行评分时的表现。这是一个简单的页面，但包含大量高质量图像和一些交互元素，例如按钮和链接以及文本。

FID 是独一无二的，因为它依赖于用户与您的网站进行的真实世界交互的数据。因此，FID 只能“现场”收集。如果您的网站流量足够大，则可以通过在 Google Console 中生成页面体验报告来获取 FID。

但是，对于来自 Lighthouse 或 PageSpeed Insights 等工具的实验室结果，我们可以通过查看 TTI 和 TBT 来推测阻塞资源的影响。

哦，是的，我还会关注移动审计结果，原因有很多。

1. 谷歌本身正在优先考虑移动信号和移动优先索引。
2. 优化网页和图像资源对于移动设备/整体响应能力来说通常是最具挑战性的。
3. 它提供了展示图像 CDN 可以提供的最大改进的机会。

考虑到这一点，以下是我们页面的结果。

因此，正如您所看到的，我们有一些问题。值得庆幸的是，PageSpeed Insights 指出了存在的两个 CWV，即 LCP 和 CLS。正如您所看到的，由于巨大的图像负载（大约 35 MB），我们的 LCP 接近 1 分钟，这简直是荒谬的。

由于布局简单且我明确地为图像提供了宽度和高度属性，因此我们的页面恰好是稳定的，CLS 为 0。但是，重要的是要意识到，加载缓慢的图像也会影响页面的感知稳定性。因此，即使您无法直接改进 CLS，更快的可调整大小的元素（例如图像）加载速度越快，真实用户的整体体验就越好。

TTI 和 TBT 也低于标准。从页面上出现第一个元素到页面开始可交互，至少需要两秒钟。

从改进机会和诊断中可以看出，几乎所有问题都与图像相关。

设置 ImageEngine 并测试结果

好的，现在是时候将 ImageEngine 加入其中，看看它如何提升同一页面的性能指标。

在几乎任何网站上设置 ImageEngine 都相对简单。首先，访问 ImageEngine.io 并 注册免费试用。只需按照简单的三步注册流程操作，您需要

1. 提供您要优化的网站，
2. 存储图像的网络位置，然后
3. 复制 ImageEngine 分配给您的交付地址。

后者将采用 {随机字符串}.cdn.imgeng.in 的格式，但可以在 ImageEngine 仪表板中更新。

要通过此域名提供图像，只需返回到您的网站标记并更新 <img> src 属性。例如

这就是您需要做的所有事情。现在，ImageEngine 将自动提取您的图像并动态优化它们，以便在访问者查看您的网站页面时获得最佳效果。您可以在 文档中查看官方集成指南，了解如何在 Magento、Shopify、Drupal 等中使用 ImageEngine。还有一个官方的 WordPress 插件。

<img src=”mywebsite.com/images/header-image.jpg”/>

从

<img src=”myimages.cdn.imgeng.in/images/header-image.jpg”/>

到

这是我的 ImageEngine 测试页面设置后的结果。

如您所见，结果几乎完美无瑕。所有指标都得到了改善，得分均为绿色——甚至速度指数和 LCP 也因大型图像而受到显著影响。

因此，不再有改进机会。而且，如您所见，ImageEngine 将总页面负载减少到 968 kB，将图像内容减少了大约 90%。

结论

在某种程度上，这与谷歌一贯的做法相同，谷歌一直以来都在朝着移动方向发展，并采用越来越多的指标来优化其搜索引擎用户所能获得的最佳“页面体验”。除了重申他们在这方面的发展方向外，谷歌还表示，他们将继续测试和修改其信号列表。

其工具中可以显示的其他指标，例如 TTFB、TTI、FCP、TBT，或者可能是全新的指标，在未来的更新中可能会发挥更大的作用。

找到有助于您现在和将来在这些指标上获得高分的解决方案是保持在竞争激烈的环境中领先的关键。虽然图像优化只是一个方面，但它可能会产生重大影响，尤其是在图像密集型网站上。

像 ImageEngine 这样的图像 CDN 可以解决几乎所有与图像内容相关的问题，并且只需最少的时间和精力，还可以让您的网站免受未来更新的影响。