Google的新页面体验更新意味着您网站上的图像

很容易忘记，作为搜索引擎，Google不仅比较关键字来生成搜索结果。 Google知道，如果人们在网页上不喜欢自己的经验，那么他们不会在该页面上停留足够长的时间来消耗内容 - 无论它有多么相关。

结果，Google一直在尝试使用可量化的指标来分析网页的用户体验的方法。将这些考虑到其搜索引擎排名中，希望不仅为用户提供出色的相关内容，而且还提供了很棒的用户体验。

Google即将发布的页面体验更新是朝这个方向迈出的重要一步。具有较重图像网站的网站所有者必须特别警惕，以适应这些变化或风险落在旁边。在本文中，我们将讨论有关此更新需要了解的所有信息，以及如何充分利用它。

注意： Google在2020年5月介绍了他们的页面体验计划，并于2020年11月宣布将于2021年5月开始推出。但是，Google自从2021年中期开始推迟了他们的逐步推出计划。这是为了给网站管理员的时间来处理COVID-19造成的转移条件。

一些背景

在我们了解Google因素如何将指标纳入搜索引擎排名的最新更改之前，让我们获得一些上下文。 2020年4月，Google通过引入一项新计划：Core Web Vitals，朝着这个方向迈出了最关键的举动。

引入了Core Web Vitals（CWV），以帮助Web开发人员应对尝试使用可测试的指标来优化搜索引擎排名的挑战 - 这是用户经验（例如用户体验）很难做到的。

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

1. LCP（最大的内容涂料）：当网页最初加载时，折叠的最大元素。通常，这是一个大型图像或标题。最大内容元素加载的速度在用户感知页面的整体加载速度的速度中起着重要的作用。
2. FID（第一个输入延迟）：用户首次与页面交互的时间与浏览器免费处理事件的主线程之间的时间。这可以单击/点击按钮，链接或与任何其他动态元素进行交互。与页面互动时的延迟显然会使用户感到沮丧，这就是为什么保持低FID至关重要的原因。
3. 累积布局移位（CLS）：这计算页面首次加载时的视觉稳定性。该算法将元素的大小及其移动的距离及其与视口相关的距离所考虑。加载高不稳定性的页面可能会导致用户的失误，也导致令人沮丧的情况。

这些指标是从已经使用了一段时间的更基本的指标演变而来的，例如SI（Speed Index），FCP（第一个内容涂料），TTI（互动时间），等等。

这很重要的原因是因为图像可以在网站的CWVS得分中发挥重要作用。例如，LCP通常是折叠图像，或者至少必须与图像竞争以首先加载。未正确使用的图像也会对CLS产生负面影响。缓慢加载的图像也会通过为页面的整体渲染增加进一步的延迟来影响FID。

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

要改变什么？ Google搜索的页面经验

显然，通常，Google在搜索引擎排名方面越来越优先考虑用户体验。这使我们获得了最新的更新 - Google Now计划将页面经验纳入排名因素，从2021年6月中旬的早期推出开始。

那么，什么是页面经验？简而言之，这是一个排名信号，结合了来自许多指标的数据，以尝试确定网页的用户体验的好或坏。它由以下因素组成：

• 核心网络生命力：使用相同的，不变的核心网络生命值。 Google已经建立了指南和建议的排名，您可以在此处找到。您需要总体“良好” CWV等级才能获得“良好”页面体验得分。
• 移动可用性： URL必须没有移动可用性错误才能获得“良好”页面体验得分。
• 安全问题：任何标记的安全问题都将取消网站的资格。
• HTTPS：必须通过HTTPS提供页面才能符合条件。
• 广告经验：衡量广告的衡量标准对网页上的用户体验产生负面影响，例如，通过侵入性，分心等。

作为此更改的一部分，Google宣布打算包括视觉指示器或徽章，该指示器突出显示了已通过其页面体验标准的网页。这将类似于搜索引擎用于促进放大器（加速移动页面）或移动友好页面的徽章。

这种官方的认可将使高性能的网页在Google SERP的竞争激烈的领域中具有巨大的优势。这种视觉提示无疑会增加CTR和有机交通，尤其是对于已经排名良好的网站。如果该功能通过当前试验阶段，则可能会尽快下降。

对于非AMP用户而言，另一个好消息是，所有页面现在都有资格在浏览器和Google News应用程序中都可以使用Top Stories。尽管Google指出，页面可以符合“无论其核心Web Vitals得分或页面经验状态”的资格，但很难想象这不是现在或下线扮演资格的角色。

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

Google指出，消费者对灯塔和PagesPeed Insight工具的使用量增加了70％，这表明网站所有者正在赶上优化其页面的重要性。这意味着，与其他网站竞争搜索引擎排名时，标准只会变得越来越高。

Google重申，尽管有这些变化，但内容仍然是国王。但是，内容不仅仅是您页面上的文本，而且真正吸引人和用户友好的内容还由周到使用的媒体组成，其中大多数可能是图像。

随着拟议的页面体验徽章和冠军资格有资格抢购，使用Google搜索算法，赌注从未如此高。您需要可以获得的所有优势。而且，正如我要展示的那样，根据这些指标，优化您的图像资产对得分有形。

你能做些什么来跟上？

在我提出解决方案以帮助您优化核心Web Vitals的图像资产之前，让我们看看为什么图像通常不利于性能：

• 图像膨胀网站页面的整体大小，尤其是如果图像不优化（即未压缩，尺寸不正确等）。
• 图像需要对不同设备的响应。您需要较小的图像尺寸才能在较小的屏幕上保持相同的视觉质量。
• 不同的上下文（浏览器，OSS等）具有不同的格式，可最佳渲染图像。但是，大多数图像仍以.jpg/.png格式使用。
• 网站所有者并不总是了解与网站页面上使用图像相关的最佳实践，例如始终明确指定宽度/高度属性。

使用常规方法，解决这些问题可能需要大量的血液，汗水和眼泪。大多数解决方案，例如手动编辑图像和硬编码响应性语法都有固有的问题，具有可扩展性，轻松更新/调整更改的能力以及开发管道的膨胀。

要优化您的图像资产，尤其是为了改善CWV，您需要：

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

幸运的是，有一类专门设计这些挑战并提供这些解决方案的工具 - 图像CDN。特别是，我想专注于ImageEngine，在我进行的页面性能测试上始终优于其他CDN。

ImageEngine是一种智能的，设备感知的图像CDN，您可以用来为您的网站图像（包括GIF）使用它。 ImageEngine使用WURFL设备检测来分析您的网站页面从（设备，屏幕尺寸，DPI，OS，浏览器等）访问，并相应地优化您的图像资产。基于这些标准，它可以通过智能调整，重新格式化和压缩它们来优化图像。

这是一种全自动的，设置和验证的解决方案，设置后几乎不需要干预。 CDN拥有20多个全球流行音乐，其中逻辑内置在边缘服务器中，以便在不同区域更快。 ImageEngine声称达到高达98％的缓存比率，并将图像有效载荷减少75％。

分步测试如何使用ImageEngine改善页面体验

为了说明使用Image Engengine像Image Engine可以做出的图像CDN的差异，我将向您展示一个实用的测试。

首先，让我们看一下使用PagesPeed Insights具有大量图像内容分数的页面。这是一个简单的页面，但由大量具有一些交互式元素的高质量图像组成，例如按钮和链接以及文本。

FID之所以独特，是因为它依赖于用户与您网站的现实世界交互的数据。结果，只能“在现场”收集FID。如果您的网站有足够的流量，则可以通过在Google控制台中生成页面体验报告来获得FID。

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

哦，是的，出于多种原因，我也将重点关注移动审核的结果：

1. Google本身正在优先考虑移动信号和移动优先索引
2. 优化网页和图像资产通常对于移动设备/一般响应率通常是最具挑战性的
3. 它提供了显示图像CDN可以提供的最大改进的机会

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

因此，如您所见，我们有一些问题。有益的是，PagesPeed Insights标记了存在的两个C​​WV，LCP和CLS。如您所见，由于巨大的图像有效载荷（大约35 MB），我们的荒谬LCP近1分钟。

由于我确实明确地给出了图像宽度和高度属性的简单布局，因此我们的页面恰好使用0 cls稳定。但是，重要的是要意识到缓慢的加载图像也会影响您的页面的感知稳定性。因此，即使您无法直接改善CL，诸如图像加载之类的较快元素，对现实世界用户的总体体验越好。

TTI和TBT也低于标准。从第一个元素出现在页面上的那一刻，直到页面开始变得互动时，它将至少需要两秒钟。

从改进和诊断的机会中可以看到，几乎所有问题与图像有关：

设置ImageEngine并测试结果

好的，现在是时候将ImageEngine添加到混音中，看看它如何改善同一页面上的性能指标了。

在几乎任何网站上设置ImageEngine都相对简单。首先，请访问ImageEngine.io，然后注册进行免费试用。只需遵循简单的三步注册过程，您需要：

1. 提供您要优化的网站，
2. 存储图像的网站位置，然后
3. 复制送货地址image Engine分配给您。

后者将以{Random String} .cdn.imgeng.in的格式，但可以从ImageEngine仪表板中更新。

要通过此域使用图像，只需返回您的网站标记并更新 src属性即可。例如：

从：

 <img  src="%E2%80%9C" mywebsite.com alt="Google的新页面体验更新意味着您网站上的图像" >

到：

 <img  src="%E2%80%9C" myimages.cdn.imgeng.in alt="Google的新页面体验更新意味着您网站上的图像" >

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

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

如您所见，结果几乎完美无缺。所有指标均得到改进，在绿色 - 甚至速度指数和LCP中进行了评分，这些速度指数和LCP受到大图像的显着影响。

结果，没有更多的改进机会。而且，如您所见，Image Engine将总页面有效载荷降低到968 KB，将图像内容降低了大约90％：

结论

在某种程度上，Google始终如一地朝着移动方向移动并采用越来越多的指标列表来磨练其搜索引擎用户的最佳“页面体验”。除了重申朝这个方向迈进的举动外，Google表示，他们将继续测试和修改信号列表。

可以在其工具中浮出水面的其他指标，例如TTFB，TTI，FCP，TBT或可能是全新的指标，可能在以后的更新中起更大的作用。

找到可以帮助您为这些指标获得高分评分的解决方案是在这个竞争激烈的环境中保持领先地位的关键。尽管图像优化只是一个方面，但它可能具有重大影响，尤其是对于较重的图像站点。

像ImageEngine这样的图像CDN可以解决与图像内容相关的几乎所有问题，并以最少的时间和精力以及未来的网站证明未来的更新。

以上是Google的新页面体验更新意味着您网站上的图像的详细内容。更多信息请关注PHP中文网其他相关文章！