如何在 Shopify 上优化 Core Web Vitals

已发表: 2023-01-30

网上有很多关于如何衡量 Core Web Vitals 以及您的网站得分高低的信息。但是很少有关于您需要做什么来进行改进的可行建议，特别是在 Shopify 上。

在本文中，我们将了解如何在您的 Shopify 商店中提高您的 Core Web Vitals 分数。我们已尝试让尽可能多的建议在没有开发人员的情况下也能付诸实施，但有些建议需要专家技术实施。

我们将依次分解每个核心网络重要指标，解释影响其性能的因素，然后向您展示如何改进任何 Shopify 商店的每个 CWV 指标。

单击下面的标题可直接跳转到该部分：

如何在 Shopify 上计算 Core Web Vitals
如何在 Shopify 上改进 LCP
如何在 Shopify 上改进 CLS
如何提高 Shopify 上的 FID
Shopify Core Web Vitals 应用程序

什么是核心网络生命力

让我们非常简要地回顾一下 Core Web Vitals 是什么。

Core Web Vitals 是 Google 用来衡量网页性能和用户体验的一组指标。对于每个指标，URL 被标记为“绿色 - 好”、“琥珀色 - 需要改进”或“红色 - 差”。

Core Web Vitals 分数直接影响搜索引擎排名。

LCP - 最大的内容绘画

将页面上最大的元素渲染到屏幕上需要多长时间？

CLS - 累积布局偏移

页面加载时页面布局移动了多少？

FID - 首次输入延迟

页面需要多长时间才能响应交互？

如何在 Shopify 上计算 Core Web Vitals

了解 Google 如何计算 Core Web Vitals 分数很重要，因为这会影响如何进行有意义的改进。 Core Web Vitals 的数据来自 CrUX 数据，该数据衡量使用 Chrome 网络浏览器的真实网站访问者的性能。这称为“现场数据”。

对于每个 CWV 指标，您需要达到一个最低平均分数才能不被标记为“差”。这是基于针对页面组记录的平均分数。重要的是要了解您的 Shopify 网站并未根据核心网络生命力指标进行评分；您网站上的网址是。

当您的 Shopify 商店在 Core Web Vitals 指标上失败时，Search Console 将向您显示受该问题影响的 URL 示例。这有助于您缩小问题所在的范围并应用目标改进。在开始对您的 Shopify 商店进行任何 Core Web Vitals 优化工作之前，首先要确定哪些改进领域的影响最大。不要将时间浪费在不会产生积极结果的工作上。

Shopify Core Web 重要指标优化技巧

Core web vitals 就是要尽快提供最重要的内容和资源。

页面速度优化不是一次性的事情。您的组织需要采用一种文化，将页面速度影响纳入所有决策制定。对于您考虑对商店进行的每项改进，请考虑页面速度的权衡。

如何改进 Shopify 上的 LCP

LCP 指的是页面上最大的元素以及浏览器加载该元素并将其呈现到屏幕上所花费的时间。这通常是图像，但也可以是文本元素。

要改进 Shopify 商店的 LCP，有助于了解影响 LCP 的因素。加载 LCP 元素有四个阶段。

不。	阶段	描述
1个	第一个字节的时间	从 Web 浏览器启动到浏览器收到 HTML 响应中的第一个字节数据的时间
2个	资源加载延迟	TTFB 与浏览器开始加载 LCP 元素之间的增量
3个	资源加载时间	浏览器下载 LCP 元素所需的时间
4个	元素渲染延迟	下载 LCP 元素和将其呈现到页面上之间的增量

LCP 是关于网络浏览器将最大的元素绘制/渲染到页面上需要多长时间。加载和绘画不是一回事。即使您的 LCP 元素已优化为很小的文件大小，LCP 仍可能需要很长时间，因为：

资源加载延迟。浏览器开始下载元素的时间太长
元素渲染延迟。浏览器下载 LCP 元素后，需要很长时间才能将元素呈现到页面上。

这里的要点是 LCP 不仅仅是最大元素的文件大小。这是完成上述 4 个阶段过程所需的时间。要提高 LCP 分数，请关注加载和呈现 LCP 元素的整个过程。

如何在任何 Shopify 页面上查找 LCP 元素

要改进 LCP，您需要知道页面上的哪个元素是 LCP。这在 Shopify 上很容易。只需转到 PageSpeed Insights 并分析您需要为其查找 LCP 的 URL。报告完成后，滚动到底部并查看“诊断”部分。将有一行称为“Largest Contentful Paint element”。展开它以查看有关此页面上的 LCP 是什么元素的详细信息。

不要延迟加载 LCP 元素

延迟加载是一种仅在元素在视口中可见时才加载元素的方法。这有助于加快首屏内容的加载速度。您不应该延迟加载 LCP 元素，因为它会延迟浏览器开始下载该元素的速度。

在 Shopify 商店中，产品页面上的 LCP 元素通常是主要产品图片。或者在博客文章中，LCP 元素可能是博客标题图片。一些 Shopify 主题会自动为每张图片添加延迟加载，即使是那些出现在首屏的图片。查看您的每个 Shopify 模板并弄清楚 LCP 元素是什么。如果它出现在首屏上方，请确保以下属性未包含在 HTML 标记中：

加载=“懒惰”

预加载 LCP 元件

您可以使用 rel=”preload” 告诉网络浏览器尽快下载特定资源。通过在 LCP 元素上应用 rel=”preload”，浏览器将优先将该资源加载到页面中。

您可以通过编辑主题代码自行完成此操作。对于 Shopify 主题开发人员，可以将过滤器添加到 Shopify 液体模板中，以输出预加载标签。

使用下一代图像

WebP 等新图像格式的文件大小比 JPG 和 PNG 等传统格式小。如果您的 LCP 元素是图像，使用 Nextgen 图像格式将加快下载时间。在可能的情况下，使用 WebP 图像，但请记住为不支持下一代图像的旧版浏览器添加回退。

新的 Shopify 主题会自动将您的图像转换为 WebP，并将它们提供给适当的浏览器。

确保 LCP 元素包含在初始 HTML 响应中

通过确保您的 LCP 元素在初始 HTML 响应中交付来减少“资源加载延迟”。如果 LCP 元素是通过外部资源（例如 JS 脚本）加载到页面中的，浏览器将需要更长的时间来开始下载 LCP 元素。

这是否会影响您的 Shopify 商店将取决于您使用的商店模版。一个快速测试的方法是弄清楚你的 LCP 元素是什么，然后在关闭 JS 的情况下查看页面。如果 LCP 元素未在页面 HTML 中输出，则意味着它未在初始 HTML 响应中传递。

消除渲染阻塞资源

“消除渲染阻塞资源”的建议已经存在了很长时间。但这究竟意味着什么？某些资源（例如脚本和样式表）会阻止网页呈现。当浏览器发现资源时，它将停止下载页面，而是下载并执行该资源。这会延迟为用户呈现页面。

灯塔报告将向您显示任何页面的呈现阻塞资源。因此，您需要确定哪些脚本和样式表会阻塞渲染，然后优化它们的交付方式。

消除渲染阻塞 JS

首先你需要了解两个属性 defer 和 async。这些 HTML 属性可以附加到外部脚本并告诉浏览器何时下载/执行资源。

属性	定义
推迟	在页面呈现之前不要下载或执行脚本
异步	在下载页面其余部分的同时继续下载脚本，但随后停止下载页面并执行脚本

因此，通过将 async 或 defer 应用到您的 JS 脚本，您可以最大限度地减少它们对页面呈现的影响。 Shopify 不会自动异步或延迟您的脚本，因此您需要进入主题液体模板并自行添加属性。但是在执行此过程时要非常小心，因为您需要考虑推迟脚本对商店功能的影响。

您还会发现您在 Shopify 商店中安装的应用程序和插件会输出渲染阻塞 JS 脚本。您可以通过 Lighthouse 报告识别这些。仔细考虑您在商店中安装的每个应用程序，并考虑对页面速度的潜在影响。一些商家甚至不会意识到未使用的应用程序仍在商店中安装并影响页面速度。当您卸载应用程序时，请确保它不会在您的主题中留下任何遗留代码。

消除渲染阻塞 CSS 样式表

要消除渲染阻塞 CSS，您应该内联渲染首屏内容所需的关键样式。立即为每位访问者下载整个样式表效率不高，因为大部分 CSS 都不会被使用。

解决方案是通过将其包含在head的样式标记中来内联呈现页面首屏部分所需的关键 CSS。然后将下面的代码添加到你的 theme.liquid.js 异步加载你的主样式表。

 <link rel="alternate stylesheet" href="slow.css" title="styles" as="style" onload="this.title='';this.rel='stylesheet'">

在将其发布到您的在线商店之前，请尝试测试主题以验证您的页面在视觉上仍然显示正确。

如何在 Shopify 上改进 CLS

CLS 是关于页面加载时页面布局移动了多少。原因通常是图像在加载和渲染时四处移动内容。

为图像添加宽度和高度属性

最简单的 CLS 解决方案是确保您的 img 标签输出明确的宽度和高度属性。这些属性应用于图像 HTML 并告诉浏览器图像的宽度和高度。有了这些信息，浏览器就可以计算出图像的宽高比和尺寸，并为该图像预留所需的空间。当图像添加到页面中时，这会阻止布局移动。

要在您自己的 Shopify 商店的图片上执行此操作，请登录并转到主题部分。并为您的主题进入“编辑代码”。然后在您的 liquid 模板中找到输出图像的代码片段，并将以下片段添加到 img 标签中。

 height="{{img.height}}" width="{{img.width}}

查看您用于 Shopify 主页、产品系列、产品和博客的液体模板，并确保 img 标签引用宽度和高度属性。

优化你的字体

由于称为 FOUS（无样式文本闪烁）的问题，您从 Google 字体等地方加载的那些花哨的网络字体可能会导致 CLS 问题。这是 Web 浏览器最初加载后备字体的地方，然后当加载主 Web 字体时，文本会重新呈现，从而导致布局偏移。

减少对第三方网络字体的依赖首先，尝试减少对第三方网络字体的依赖。导入 Web 字体时，仅导入您需要的字体系列。如果从未使用过不同的字体粗细和样式，请不要导入它们，因为这会使字体文件大小膨胀。

预加载字体Web 字体有时从样式表中加载。这会延迟浏览器开始下载字体的速度。相反，将您的字体文件预加载到你的商店。这将告诉浏览器以高优先级加载字体文件。

使用 font-display:optional Font-display 是一个 CSS 属性，它告诉浏览器在 100 毫秒内未下载字体时要做什么。浏览器最初会加载后备字体，如果自定义字体在 100 毫秒内未完成下载，浏览器将保持后备字体呈现在页面上。这降低了自定义字体加载过晚并导致布局偏移的风险。

如何提高 Shopify 上的 FID

根据我们的经验，FID 是我们看到影响 Shopify 商店的最不常见的 Core Web Vital 指标。将 FID 视为衡量页面在加载期间的响应程度的一种方式。没有什么比点击/敲击却什么也没有发生更让用户感到沮丧的了。

FID 类似于另一个称为总阻塞时间 (TBT) 的指标。 TBT 测量页面开始呈现（First Contentful Paint 或 FCP）与页面响应（交互时间或 TTI）之间的时间。

TBT 是由阻止主线程处理的“长任务”引起的。主线程是浏览器处理加载页面所需的一切的地方。如果长任务阻止主线程处理，它会延迟页面对用户交互的速度。

FID 和 TBT 有什么区别

FID 和 TBT 之间的主要区别在于 FID 基于现场数据（来自访问过您的 Shopify 商店的真实用户的数据）。而 TBT 是实验室可测量的，并且是通过在具有定义的网络条件的人为环境中运行测试来计算的。

由于您在测试自己的页面时无法衡量 FID，因此您应该衡量 TBT。

要提高 FID，您需要加快 Shopify 商店对用户首次交互的响应速度。这是通过尽可能高效地加载您的 Shopify 页面来完成的。重点关注这三个方面：

减少第三方代码的影响

与所有核心 Web Vitals 指标一样，第三方 JavaScript 通常是问题的根源。任何阻塞主线程超过 250 毫秒的第三方都将在 Lighthouse 报告中被标记。通过 Lighthouse 运行您的页面，以确定哪些第三方脚本会导致问题。然后决定哪些可以设置为异步或延迟。

减少 JavaScript 执行时间

执行 JavaScript 所需的时间也很重要。首先，通过 Lighthouse 运行您的页面并确定哪些脚本执行时间最长。 Lighthouse 会标记任何超过 2 秒的脚本。

使用代码拆分与其在单个文件中交付所有 JavaScript 代码，不如将代码拆分为更小的部分，并且仅交付该页面所需的代码。这并不容易，需要管理代码的开发人员的支持。如果在项目开始时将其集成到 Shopify 主题的开发中，您会发现这会容易得多。

缩小和压缩您的代码当您缩小您的代码时，您删除了不必要的空格和注释。这减少了文件的大小，但加快了浏览器执行代码的速度。 Shopify 的一大优点是大多数主题 js 都会自动缩小。

与缩小一样，压缩 js 可减小文件大小并加快 Web 浏览器执行代码的速度。

最小化线程工作

主线程完成所有处理和计算如何构建页面的工作。当主线程被密集型任务占用时，你的TBT就会变差。这主要取决于您的 Shopify 主题有多强大。可怜的开发人员构建的廉价主题不会像 Shopify 专家开发的那样高效加载。

如何最大限度地减少 Shopify 商店的线程工作？如上所述，如果从一开始就将其集成到您的主题中，就会容易得多。我们建议您购买好评如潮的高级 Shopify 主题。或者，如果您正在构建自己的 Shopify 商店，请确保您正在与 Shopify 专家开发人员合作，他们可以确保您的主题得到优化以最大限度地减少线程工作。

如何衡量核心 Web Vitals 性能

现在您了解了如何在您的 Shopify 商店中改进 Core Web Vitals，接下来您需要知道如何衡量您的 Core Web Vitals 进度。

搜索控制台

查看您的 Shopify 商店当前在 Core Web Vitals 方面表现如何的最快方式是通过 Search Console。从左侧菜单转到 Core Web Vitals 报告，获取有关您的网站当前表现的数据。它将包括您遇到任何 Core Web Vitals 问题的细分，并向您展示受影响的 URL 示例。

Pagespeed Insights/灯塔

Pagespeed insights 是一款免费的 Google 工具，可让您测量任何页面的页面速度。通过该工具运行您的 Shopify URL，以详细了解您的表现以及获得更高分数的建议操作。

关键点报告

CrUX 是 Google 自己的数百万真实页面的速度/性能数据集。您可以使用 Google CrUX Data Studio 仪表板访问您自己的 Shopify 商店的 CrUX 数据。该仪表板提供了过去 16 个月您的网站在核心网络生命指标方面的表现的深入细分。

所有这些 CWV 术语是什么意思？

当您开始查看 Core Web Vitals 时，您会遇到许多复杂的术语，这就是它们的全部含义：

学期	定义
预加载	提示浏览器优先下载特定资源。高优先级
DNS 预取	解析域名
预取	告诉浏览器在用户请求之前加载资源。用于近期可能需要的资源（例如下一页）。将在需要资源时加快加载速度，但可能会减慢当前页面的加载速度。低优先级
预连接	在从域下载资源之前，建议浏览器连接到源。将解析 DNS 和 TCP 握手/TLS 协商
推迟	延迟加载脚本，直到页面加载完毕
异步	到达后立即加载脚本，但继续加载页面的其余部分

核心网络活力 Shopify 应用

有很多 shopify 应用程序声称能够提高 Core Web Vitals 分数。其中一些应用程序非常有效，确实可以提高性能。虽然这可以提高您的 Core Web Vitals 分数，但不能保证您会看到任何效果。这是因为每个 Shopify 商店的 Core Web Vitals 分数都是独一无二的。如果您商店的 Core Web Vitals 分数因特定主题问题而较差，应用程序可能不会产生任何影响。

如果您想采用应用程序路线，我们建议您试用一个应用程序并观察它对性能的影响。以下是一些建议试用的应用程序：

https://apps.shopify.com/core-web-vitals-booster
https://apps.shopify.com/page-speed-optimizer
https://apps.shopify.com/swift

如果您的电子商务业务需要任何建议或支持，请联系我们的团队，我们很乐意提供帮助。