掌握核心网络生命力：增强用户体验的指南

已发表: 2023-03-21

随着电子商务继续主导在线市场，企业必须在网站优化方面保持领先地位。近年来出现的一个关键因素是 Core Web Vitals 的概念。 2020 年，谷歌为这些重要的网站元素建立了具体指标，为电子商务企业提供了更直接的途径来提高网站排名。但究竟什么是 Core Web Vitals，企业如何优化它们以获得最大影响？在本文中，我们将仔细研究 Core Web Vitals 并分享优化它们的基本工具，以便您的电子商务网站在竞争中保持领先地位。

相关文章：企业主需要了解的关于核心网络生命力的 7 件事

为什么 Core Web Vitals 如此重要

1. Core Web Vitals 影响您网站的 Google 搜索排名

2. 它们对于提供出色的用户体验至关重要

3. 优化 Core Web Vitals 可以增加网站的流量和收入

优化 Core Web Vitals 对于在线商店所有者和开发人员提供最佳用户体验、在 Google 搜索结果中排名更高并最终增加收入至关重要。这三个核心指标——最大内容绘制 (LCP)、首次输入延迟 (FID) 和累积布局偏移 (CLS)——基于网站的加载速度、交互性和视觉呈现。

通过确定这些指标的优先级，您的网站可以为客户提供流畅、响应迅速且具有视觉吸引力的体验。在设计或优化您的网站时，不要忽视 Core Web Vitals，因为它们可能是良好和出色用户体验之间的区别，并最终影响您的收入。

什么是 Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) 是衡量网页最重要内容元素（例如图像或文本框）加载时间的重要指标。它是 Core Web Vitals 的关键组成部分之一，Core Web Vitals 是提供无缝用户体验所必需的一组指标。优化您网站的 LCP 可以减少页面加载时间并改善整体用户体验，从而增加客户保留率和获取率。

我们 Perspective 经常收到改进 Core Web Vitals 的 LCP 的请求。您可以在下面看到我们为一位客户所做的 Largest Contentful Paint (LCP) 优化示例：

1.优化前最大的Contentful Paint

2.优化后最大的Contentful Paint

另请阅读：宏碁 vs 联想 Chromebook：哪一款适合您？

Largest Contentful Paint 低的最常见原因是什么：

1.服务器响应时间慢

2. 未优化的JS和CSS

3.资源加载慢

4.客户端渲染慢。

如何增加 Largest Contentful Paint

Largest Contentful Paint

我们创建了一小部分优化方法，这些方法在我们的工作中不断应用，因此我们建议如下：

1.删除不用的JS代码，最小化生产模式下的文件。

2. 最好在模块（块）中编写 CSS 规则，这样一些选择器的样式化不会阻止其他选择器。此外，我们建议避免制作一长串选择器。所有要测试的 CSS 文件或库都应该存储在本地，而不是通过 CDN 下载。

3. 压缩图像以加快加载速度并使用新格式。例如，将 JPEG 转换为 1/3 尺寸的 WebP，而不会降低质量。

4. 我们建议使用响应式图片（链接）来优化图片的下载速度和用户体验。这里有一点很重要。 img 标签有两个关键属性：

1. src——表示原始图片来源。来自 src 属性的图像被搜索引擎扫描并考虑在排名中，因此有必要在此处指定最佳质量的图像。

2. srcset – 允许您指定图像的各种版本。浏览器从 srcset 属性中的图像中选择要加载和显示的图像，具体取决于运行它的桌面设备或移动设备的屏幕尺寸。

5.我们不建议在<img>标签属性中添加loading=”lazy”。

删除惰性属性以增加最大的内容绘画

什么是累积布局偏移 (CLS)

Cumulative Layout Shift (CLS) 是一项重要的视觉稳定性指标，用于量化页面加载期间意外布局偏移的程度。它是通过所有超过阈值 0.1 的布局偏移分数的总和来衡量的。随着用户体验成为现代 Web 开发的中心舞台，改进 CLS 已成为企业的首要任务。因此，客户经常要求改进这一关键绩效指标也就不足为奇了。

另请阅读：2023 年真人娱乐场的增长

Cumulative Layout Shift (CLS) 不良的最常见原因是什么

视觉稳定性指标对于确保流畅无缝的用户体验至关重要。然而，视觉稳定性差可能是由多种技术因素造成的。一些常见的罪魁祸首包括图像和多媒体文件的大小、GraphQL 查询和未优化的轮播。

图像和多媒体文件的大小不正确

当图像或多媒体文件没有指定大小时，浏览器无法在加载项目时分配适当的空间量。这可能会导致页面布局不断变化，从而导致糟糕的用户体验。

未优化的 GRAPHQL 查询

在渐进式 Web 应用程序 (PWA) 上加载图像或 GraphQL 块时，未能预留空间可能会导致页面在加载后“跳转”。这可能会导致不良的布局变化并对性能指标产生负面影响。

未优化的轮播

使用非平滑和非组合动画的未优化轮播可能会触发页面布局的重新计算，从而导致 Cumulative Layout Shift (CLS) 分数不佳。虽然用户可能几乎察觉不到轻微的变化，但它会显着影响页面的整体布局变化和视觉稳定性。

如何改进视觉稳定性指示器和 Cumulative Layout Shift

How to improve visual stability indicator and Cumulative Layout Shift

使用占位符

实施占位符是一种广泛采用的技术，可以提高网站的感知性能。占位符用作视觉提示，指示下载正在进行并且站点正常运行。图像最有效的方法是设置高度和宽度属性。

使用占位符提高 Core Web Vitals 的性能得分

这种策略让浏览器在完全加载之前为图像保留必要的空间，防止意外的布局变化。下面是使用 img 标签实现此技术的示例。

通过定义 height 和 width 属性，浏览器可以为图片分配空间，防止图片加载时布局发生偏移。因此，用户将体验到更流畅、视觉上更稳定的浏览体验。

FRONT-DASPLAY：SWAP

为了获得最佳的 Cumulative Layout Shift (CLS) 分数，开发人员可以利用 font-display:swap 属性在自定义字体文件完全加载之前以系统字体显示文本。所需 CSS 字体文件中的 font-face 规则应指定字体文件路径并包含 font-display:swap 属性。

以下是如何使用 font-display:swap 属性定义字体规则的示例：

@font-face {Font-family: “Proxima Nova”;src: url(“../fonts/proximanova-regular.woff2”) format(“woff2”);font-display: swap;}

使用 font-display:swap 属性，浏览器将立即以系统字体显示文本，直到自定义字体文件完全加载。这种技术可以防止意外的布局偏移并提高页面的视觉稳定性，从而带来更好的用户体验。

另请阅读：全球经济状况对加密货币价值的影响

CSS 变换

CSS 转换功能是一种有影响力的工具，开发人员可以利用它来增强网站的性能和用户体验。例如，使用 CSS 变换可以帮助缓解与加载图像轮播相关的问题，从而带来更快、更用户友好的浏览体验。

通过 GraphQL HTML 元素优化 CMS 块的加载（尤其是在 PWA 项目上）时，建议使用固定高度设置 CSS 属性。这种方法有助于防止意外的布局变化，并确保页面在加载后视觉上稳定。

通过实施这些技术，企业可以提高 Core Web Vitals 分数，并提供更流畅、更愉快的用户体验。在我们最近的一个案例中，我们通过在 CSS 文件中添加 font-display:swap 属性、设置最小高度和优化字体加载 (@font-face) 显着提高了 CLS 分数。

1. 核心 Web VITALS 优化之前的在线商店

2. Core Web VITALS 优化后的在线商店

什么是首次输入延迟 (FID)？

首次输入延迟 (FID) 是衡量网站交互性的关键指标。 First Input Delay 衡量站点响应用户与页面的首次交互（例如单击按钮或在表单字段中键入）所需的时间。

在 Magento 2 中使用 FID

在 Magento 2 中，许多用户交互都会影响站点的 FID，例如单击实时聊天按钮、将产品添加到购物车或完成购买。如果这些交互没有响应并且不向用户提供即时反馈，则可能会导致缓慢且令人沮丧的用户体验。

为确保最佳用户体验，必须实现小于 100 毫秒的 FID 分数。这可以通过各种优化技术来实现，例如最小化 JavaScript 执行时间、优化第三方脚本和优化服务器响应时间。通过优化 FID，企业可以提供响应更快、更具吸引力的网站，让用户保持参与和满意。

如何优化首次输入延迟

任务分解

增强首次输入延迟 (FID) 的推荐方法是将较长的任务划分为更小、更易于管理的子任务。冗长的任务会使主线程负担过重，阻碍用户输入的处理和执行。任何阻碍流程超过 50 毫秒的代码段都属于冗长任务。

确定 FID 需要在真实条件下进行测量，因为真正的用户与网页的交互对于获得精确测量至关重要。

在真实条件下进行测试

要准确测量首次输入延迟 (FID)，建议使用专门的工具来衡量实际条件下的性能。一些这样的工具包括：

1. PageSpeed Insights测试；

2. Search Console（Core Web Vitals 报告）；

3. Chrome用户体验报告；

由于 FID 需要用户交互，因此在实验室环境中进行测试是不可行的。相比之下，现场指标通过分析用户行为来捕捉真实世界的表现。然而，总阻塞时间 (TBT) 是一种评估首次内容绘制 (FCP) 和交互时间 (TTI) 之间的时间的指标，可以在实验室环境中测量，并且与现场条件下的 FID 密切相关。 TBT 还擅长识别与交互相关的问题。因此，在实验室环境中增强 TBT 的任何优化也将改善用户的 FID。 Lighthouse 是一个可以有效衡量 TBT 的工具。

另请阅读：构建自定义 Shopify 店面的分步指南

启用按需下载

您可以使用第三方代码来启用网页的按需下载。例如，您可以启用按需下载，以便页面底部的横幅或广告仅在滚动到视图附近时显示。主要思想是优先下载为用户提供最重要价值的 Web 元素，而不是那些可以在线末尾下载的元素。

优化JavaScript

为了提高网站性能，删除任何不必要的 JavaScript 文件至关重要。一种推荐的方法是推迟 JavaScript 文件的下载，直到需要它们为止。该技术最初使浏览器能够获取关键的 Web 元素，例如 HTML 和 CSS。在此之后，可以评估脚本，从而促进更快的加载时间。采用这种策略对于具有大量 JavaScript 扩展的网站特别有用，例如许多 Magento 商店使用的 Mega Menu 扩展。这种技术允许网站所有者简化加载过程并提供更高效的用户体验。因此，删除未使用的 JavaScript 是一项基本的优化技术，应该考虑提高网站性能。

结论

总之，请考虑联系我们的 Core Web Vitals 审核团队，以确保为您的在线商店提供良好的用户体验。尽管 Core Web Vitals 指标可能看起来很抽象，但它们可以使您的网站更加用户友好。此外，这些指标与您网站代码的功能有着明确的联系，使它们相对容易改进。

根据我们的经验，优化这些指标可以快速提高排名和转化率。通过衡量 Core Web Vitals，您可以查明需要优化的区域并增强网站的整体用户体验。因此，请不要犹豫，联系 Core Web Vitals 审核团队，了解它对您的在线业务的积极影响！