谷歌即将发布的页面体验更新将来自核心网络重要信息(CWV)的信号引入官方排名算法。 核心Web重要信息是一组衡量页面加载速度，交互速度以及与它们交互的真实用户的可视化稳定性的指标。 未通过Core Web Vitals测试的网站的排名将低于2021年初的网站。
CWV由三速指标组成，这些指标对用户感知的体验有重大影响。 其中包括用于测量加载时间的最大连续涂料(LCP)，用于测量交互性和响应速度的第一输入延迟(FID)以及用于测量视觉稳定性的累积布局偏移(CLS)。 虽然网站速度一直处于许多电子商务公司的前沿，但它即将成为在线格局中最重要的因素之一。 以下是您必须关注的指标以及如何提高每个指标的速度。
什么是核心网络生命要素
在线留下良好的第一印象至关重要。 购物者希望立即查看产品，快速浏览和轻松结账，而不会中断。 如果他们的期望没有得到满足，他们就会反弹，永远不会回来。 Core Web Vitals通过实时评估移动购物者浏览网站时提供的体验页面来帮助解决此问题。
虽然大多数Google工具依赖于模拟环境中的合成测试(称为实验室数据),但核心Web生命体征是使用从Google Chrome用户体验(Crux)收集的现场数据进行测量的,这是一个真实的Chrome用户数据数据库。 字段数据捕获真实用户变量(如设备，网络条件和/或设置)的显著影响。 根据用户的条件，网站的性能可能会发生巨大变化，并会影响您的核心Web重要得分。
每个CWV指标都有不同的阈值，可视为良好，中等或较差。 然而,它们都有一个共同点:谷歌使用75百分位数将页面分类到这些分组中——一个达到门槛的页面被认为是快速处理75%或更多页面加载是一个很好的体验。
您无法优化您不知道的内容，因此让我们了解构成核心网络生命周期的三个指标中的每一个指标。
最大内容绘制 (LCP)
当最大的内容元素在屏幕上完全可见时(即最大的Contentful Paint或LCP的速度)，用户通常会觉得页面已加载。 内容元素可以包括块级元素，图像(包括SVG文件中的图像)和视频。 对于电子商务，LCP通常测量产品图像/主角图像加载的速度。 如果速度缓慢，用户会假设整个体验将是相似的，这会导致他们离开竞争对手的网站。
LCP不超过2.5秒，LCP在2.6到4.0秒之间的页面需要改进，而LCP大于4.0秒的LCP速度较慢。
TheTieBar.com在Layer0 (Edgio)上以800ms的时间加载LCP
在上面的示例中，当主图像完全涂刷时，拉杆的LCP被标记为900毫秒。 Tie Bar始终为移动购物者提供次秒级的页面加载，同时在Edgio上提供自定义，实时库存查询和动态定价。
通常，LCP受以下情况之一的影响：
- 服务器响应时间慢
- JavaScript 和 CSS 的渲染阻塞
- 资源加载时间长
- 客户端呈现问题
要优化LCP，请考虑以下事项：
- 通过将流量路由到最近的可用CDN POP，缓存资产，使用服务工作者以及使用”rel=”preconnect”提前建立第三方连接，优化服务器响应时间。”
- 缩短JavaScript阻塞时间:缩短代码(例如,去除空格),使用Broti或gzip等工具压缩数据,拆分捆绑包并在开始时仅发送必要的内容,以及使用Babel等工具使用较新的语法提供代码。 通过删除任何未使用的CSS或不必要的字符(如间距，缩进或注释)，并通过将关键CSS直接包含在页面的头部来内联来减少CSS。
- 为了减少资源加载时间，优化和压缩图像和文本文件，预加载基本资源以及使用服务工作者根据网络连接和缓存资产交付不同的资产。
- 通过缩短JavaScript阻塞时间(请参阅#2对此进行优化)，使用服务器端渲染(SSR)和预渲染来优化客户端渲染。
首次输入延迟 (FID)
虽然用户的第一印象会受到渲染最大图像的速度的影响，但一旦用户尝试与网站交互，网站的响应能力也同样重要。 首次输入延迟(FID)测量从用户首次与页面交互(单击，点击或按键)到浏览器可以响应该交互的时间。
通常情况下,会发生输入延迟,因为JavaScript是在主线程上执行的,并且所有JavaScript默认情况下都是渲染阻止。 这意味着当浏览器遇到JavaScript文件时,它必须暂停它正在执行的下载，解析，编译和执行该JavaScript的操作。 时间越长,用户体验的延迟就越大,谷歌查看页面的可用性就越少。
谷歌认为FID为100毫秒或更短,在1.1到3.0秒之间需要改进,超过3.0秒的速度较慢。 虽然争取所有核心Web Vitals的第75百分位数很重要,Google建议在移动设备和桌面设备上查看FID的第95–99百分位数,因为这将代表最糟糕的用户体验,并验证最需要改进的领域(因为它将专注于95%以上的页面加载的FID )。
同样重要的是,与LCP和CLS不同,FID只能在现场测量(在实验室数据中不会发现),因为它需要真实的用户交互。
FIDS缓慢的常见原因包括：
- 主线程受阻达 50 毫秒或更长时间的长任务
- 执行第一方脚本会延迟交互就绪
- JavaScript执行时间过长
How至FID的Optime：
- 将长时间运行的代码分解为较小的异步任务并利用代码拆分。
- 将非关键组件的繁重脚本加载(和执行)从关键路径移出，并最大限度地减少级联数据提取以及客户端需要后处理的数据量。
- 使用Web Worker,如Comlink，Workway或Workerize,这样就可以在后台线程上运行JavaScript，将JavaScript包代码分割成多个块(也称为”延迟加载”),并使用延迟或异步加载所有第三方脚本。
累计布局偏移 (CLS)
页面的视觉稳定性是影响用户体验的另一个因素，可能会阻止购物者继续购买。 核心Web重要信息中的第三个也是最后一个指标是累积布局偏移(Cumulative Layout Shift，缩写CLS)，用于测量用户体验意外布局偏移的频率。
您已经经历过这些情况:您即将点击链接或产品图片,但在触摸屏幕，页面移动和bam之前,您无意中点击了其他内容。 在最好的情况下,这些情况是一个轻微的烦恼,但最糟糕的情况下,你发送购物者在网上寻找一个更顺畅,更少杂乱的体验.
Google计算这些页面移动的方法是将影响分数或视口中可见内容的移动量乘以距离分数,或不稳定元素在帧中移动的距离除以屏幕的最大维度(高度或宽度)。 购物者浏览页面时出现的每种意外布局偏移的所有分数(影响分数x距离分数)的总和。
谷歌认为低于0.1的CLS是好的,在0.1和0.25之间的CLS是中等的,大于0.25的CLS是差的。
如果发现CLS不佳，可能是由于以下原因之一：
- 图像或视频会自动调整大小
- 广告调整大小
- 延迟加载并显示大于或小于预期的字体
要改进此指标，请考虑以下几点：
Layer0如何帮助优化每个核心Web重要指标的速度
具有数百万页，1000多个SKU，A/B测试和个性化，动态定价和实时库存查询的大型复杂电子商务网站可通过Layer0实现亚秒级的速度。 事实上，Layer0是市面上唯一保证低于500ms中位LCP的平台。
在Layer0上，内容在页面上即时呈现或绘制，并由于我们的应用程序感知型JavaScript可配置CDN (称为CDN-AS-JavaScript)而立即可点击。 它利用高级预测性预取和边缘计算将动态内容(JSON/SSR/HTML)从边缘传输到用户的浏览器，甚至在收到请求之前。 这使网站始终比购物者的点击提前5秒钟。
Layer0上的网站边缘的HTML和JSON数据的缓存命中率超过95%，而传统CDN上的网站平均为6%。 这是一个巨大的差异,交付内容通常使网站速度缓慢.
底线
快速页面加载区别于取悦购物者和吓唬竞争对手的网站。 核心Web Vitals通过测量最大的连续涂料，首次输入延迟和累积布局偏移来考虑用户对速度，交互性和视觉稳定性的第一印象。 如果LCP的速度超过2.5秒，FID的速度超过100毫秒，CLS的速度超过0.1，您可以假设用户和Google都认为您的网站速度较慢。 谷歌会降低你的排名,消费者会反弹,永远不会回来。
在短短几个月内,糟糕的页面体验会损害您的品牌声誉,并影响您的搜索引擎优化排名。 使用上面提供的优化策略保护您来之不易的搜索引擎优化(SEO ),或立即使用Layer0(现在的Edgio)。
Layer0是用于开发，部署，预览，实验，监控和运行前端的一体化解决方案。 Shoe Carnival，Revolve和1-800-Flowers只是电子商务网站的几个例子，这些网站提供次秒级的速度并从中受益。 如果您对页面体验更新或如何加快您的网站速度有任何疑问，我们很乐意立即与网站速度专家联系。
谷歌即将发布的页面体验更新将来自核心网络重要信息(CWV)的信号引入官方排名算法。 核心Web重要信息是一组衡量页面加载速度，交互速度以及与它们交互的真实用户的可视化稳定性的指标。 未通过Core Web Vitals测试的网站的排名将低于2021年初的网站。
