谷歌页面体验：排名更新

已发表: 2021-04-08

本文于2020年5月首发，2021年4月更新。

谷歌的研究和行业研究表明，用户更喜欢具有良好页面体验的网站。 谷歌一直在考虑在排名结果中要考虑哪些因素，例如页面加载速度和移动友好性。 即将到来的页面体验更新考虑了将用户放在首位和中心的许多因素。 这些“核心网络生命力”将帮助 Google 为搜索者提供最好的内容。

页面体验和核心网络生命力

Core Web Vitals 是一组指标，可帮助网站所有者衡量用户体验维度，例如加载时间、交互性和内容加载时的稳定性。 谷歌现在提供了即将进行的搜索排名更改的详细信息，该更改将包含这些页面体验指标。

正在引入一个新的信号，谷歌表示“将核心 Web Vitals 与我们现有的页面体验信号相结合，以提供用户在网页上体验质量的整体图景”。

这些更改将于 2021 年 6 月推出。

此外，随着用户期望的发展以及 Google 衡量更多方面的能力增加，每年都会纳入更多的页面体验信号。

页面体验排名

那么这背后的想法是什么？ 从本质上讲，良好的体验可以让人们实现他们想要的，而糟糕的体验可能会阻止人们找到他们正在寻找的信息。 谷歌希望继续成为人们搜索信息的首选之地，因此它需要提供最佳的搜索体验。

通过将页面体验与所有其他信号相结合，目的是让使用网站的人们更容易找到他们正在寻找的东西。

顶级页面指标

页面体验的三个主要组成部分是：

  • 页面加载速度有多快？
  • 页面对用户的反应有多快？
  • 页面的稳定性如何（加载时元素是否会跳来跳去）？

现在我们可以通过一些顶级指标来解读它们的含义。 （前 3 个是所谓的“核心网络生命力”。）

核心网络生命力

  • 最大内容绘制 (LCP) - 该指标寻找最大的图像或文本块。 它测量将该项目加载到视口中所需的时间。 这可能是主图或一大段文字。 （理想情况下，这应该小于或等于 2.5 秒。）

  • 累积布局偏移 (CLS) - 该指标衡量视觉稳定性。 换句话说，它测量了页面加载时内容发生了多少变化，从而使阅读或查看内容变得困难。 （您希望它小于或等于 0.1。）

  • 首次输入延迟 (FID) - 这是指页面响应用户的速度（例如，在单击按钮之后）。 小于或等于 100 毫秒是这个的理想选择。

作为衡量页面有效性的有用指标，以下指标也值得牢记：

  • 首次内容绘制 (FCP) - 此指标衡量首屏文本加载所需的时间。 这是您无需滚动即可看到的内容。 字体过多和字体文件过大都会影响这个分数。 从外部资源加载字体也会变慢。

  • 速度指数 (SI) - 该指标记录视觉变化超过折叠停止的时间。 这意味着视频和英雄图像都会影响速度指数得分。

  • 交互时间 (TTI) - 此指标衡量页面准备好供用户输入所需的时间。 延迟加载的应用程序和跟踪或分析脚本将影响此指标。

  • 总阻塞时间 (TBT) - 此指标类似于 TTI，但它衡量页面上的总阻塞时间。 这是指用户无法单击元素或滚动页面。

重要的是要记住，这些核心网络生命力绝不是评判您网站的唯一方式。 在评估您的网页时，Google 会考虑很多很多因素。 虽然这里的重点肯定是用户体验，但谷歌表示拥有出色的内容仍将是更重要的考虑因素：它会寻求对具有最佳整体信息的页面进行排名，即使页面体验不是最好的。

谷歌没有说明每个因素的权重有多少，但他们已经确认“良好的页面体验不会超越拥有出色的相关内容”。 但是，如果所有其他因素都相同，则页面体验可能是您的知名度的决定因素。

搜索控制台更新

Google 在 Search Console 中添加了一个名为“Core Web Vitals”的新部分，该部分会报告您的网站在这些新的“页面体验”指标方面的表现。 该报告将告诉您需要改进的地方以及如何实施这些改进。

Google 更新了 Lighthouse 和 PageSpeed Insights 等工具，使网站所有者能够更好地衡量自己的性能并改善访问者的页面体验。 我们关于网站速度审核的文章很好地概述了您可以使用的不同工具，以及它们在评估您的网站方面的优势和局限性。

如何为核心 Web Vitals 做准备（并非全部适用于 Shopify 商店）

1 最大含量涂料 (LCP)

潜在问题：服务器响应时间慢

解决方案

a) 缓存资产 - 如果您的 HTML 是静态的，缓存它可以防止在不需要时重新创建它，从而减少资源使用。

b) 将用户路由到 CDN - 内容交付网络使用世界各地许多地方的服务器，这消除了用户由于远离单个服务器而遇到站点速度较慢的问题。

潜在问题：资源加载时间缓慢

解决方案

a) 使用 tinypng 优化和压缩您的图像 - 它可以在不牺牲质量的情况下减小文件的大小，因此它们可以更快地加载但仍然看起来不错。

b) 使用图像 CDN - 这将减少图像负载，提供为每个请求它的设备量身定制的图像，并从网络边缘发送图像。

潜在问题：客户端渲染

解决方案

a) 缩小你的 JavaScript 并推迟未使用的 JavaScript

b) 如果可能，使用服务器端渲染

潜在问题：JavaScript 和 CSS

解决方案

a) 缩小 CSS - CSS 文件通常包含字符以使其更易于阅读，但浏览器不需要这些字符。 缩小它们会删除它们并将其清除，因此它将缩短呈现页面所需的时间。

b) 下载并向用户提供最少量的必要 JavaScript。 减少阻塞 JavaScript 的数量意味着更快的渲染和更好的 LCP。

2 累积布局偏移 (CLS)

潜在问题：意外的布局变化

解决方案

a) 在视频和图像等资产上包含大小属性，以便浏览器在加载之前为对象分配适当的空间量。

b) 确保动态注入的内容仅插入现有内容下方，以免触发意外的布局变化。

3 首次输入延迟 (FID)

潜在问题：浏览器没有快速响应用户（可能是因为它仍在执行 JavaScript）

解决方案

a) 将长时间运行的代码分解成更小的任务。 长任务使页面在处理任务时无响应。 将这些拆分成更易于管理的块有助于减少输入延迟。

b) 通过推迟未使用的 JS 进一步减少 JavaScript 执行时间。 如果浏览器不需要代码来呈现页面，请推迟它——这意味着页面可以更快地为用户交互做好准备。

如果您需要确保您的 SEO、内容或网站遵守最新指南的支持，请与我们联系，我们的 Shopify 设计、开发和 SEO 专家将很乐意讨论我们如何提供帮助。