如何获得电子商务商店的 90+ 核心 Web Vitals 分数（案例研究）

在这篇文章中，您将学习如何在电子商务商店的 Google Core Web Vitals（桌面版和移动版）上获得 90+ 的分数，即使您使用了很多插件。

当谷歌首次发布他们的核心网络生命力评估时，许多电子商务店主开始恐慌。

与基本内容网站或博客不同，电子商务商店的形象很重，需要更多功能元素来完成销售。 每个添加的功能都会减慢您的网站速度。

例如，实时聊天可能需要 6-10 秒才能自行加载。 使用 Klaviyo 加载基本的电子邮件跟踪可能需要 1-2 秒。 即使添加 Facebook 像素也可能需要一百毫秒才能加载。

您的代码是使用延迟加载还是异步加载并不重要。 您网站上的每一个附加元素都会对您的核心网络要素产生负面影响。

目前，根据 Searchmetrics 的数据，在美国测试的网站中有 96% 未通过谷歌针对桌面、移动或两者的核心网络生命力评估。

由于在线交易所需的功能，电子商务商店的失败率甚至更高。

在这篇文章中，我将向您展示我为我的 7 位数电子商务商店网站获得 90+ Google Core Vitals 评分所采取的确切步骤。

获取有关如何开设成功电子商务商店的免费迷你课程

如果您有兴趣开展电子商务业务，我整理了一个全面的资源包，可帮助您从头开始开设自己的在线商店。 离开前一定要抓住它！

点击这里下载

什么是 Google Core Vitals？

Google Core Web Vitals 是 Google 将其纳入搜索排名以衡量用户体验质量的一组因素。

Google Core Vitals 由 3 个组件组成。

• 最大的内容绘制（Google 需要 2.5 秒或更短的时间） ——这是衡量看到屏幕上显示的最大内容所需的时间。 基本上，它是您网站加载的速度。
• 首次输入延迟（Google 要求 100 毫秒或更短） ——这是衡量您的页面响应能力和可用性的指标。 具体来说，谷歌正在测量访问者点击交互功能与页面响应点击之间的延迟。
• Cumulative Layout Shift（Google 要求 0.1 分或更低） ——这是衡量您的页面加载时的稳定性的指标。 当页面呈现时，您的内容是否上下移动？ 这是唯一与页面速度无关的 Google Core Web Vital 指标。 如果您不知道自己在做什么，这也是最难调试的。

这篇文章的其余部分将详细说明我如何为我的电子商务商店修复这 3 个指标，以在桌面和移动设备上获得90+ 的 Google Core Vitals 分数。

用于此案例研究的电子商务商店

大多数电子商务店主都在 Shopify、WooCommerce、BigCommerce 或 Shift4Shop 上，无论您在哪个平台上，所有这些策略都适用。

我的 7 人偶商店位于 BumblebeeLinens.com。 当您阅读这篇文章以直接查看我的结果时，请随时在我的商店中运行 Google 页面速度测试。

首先，我的商店使用了许多最新的电子商务花里胡哨，因为我在 Profitable Online Store 教授电子商务课程。

事实上，我把我的商店当作实验室来测试新功能，因为它们出现并在这个博客上报告它们。

以下是我在本案例研究中在我的商店中运行的插件和服务。

• Klaviyo – 我的电子邮件营销平台
• 后记——我的短信营销平台
• Vizury - 我的推送通知提供者
• ManyChat – 我的 Facebook Messenger 营销提供商，它实现了我的实时聊天
• Gorgias – 我的客户服务软件，处理所有客户通信。
• Spin To Win Popup – 我商店的主要磁铁
• Facebook Pixel – 跟踪我在 Facebook 上的所有销售额
• 谷歌分析——跟踪我的网站销售
• Notify Slide Up – 通过显示销售量来提供社会证明

只是为了好玩，这是我的网站在没有任何优化的情况下加载的速度。

这就是我将要教您如何实施的优化的运行速度。

如何解决大型内容绘制 (LCP) 和首次输入延迟 (FID) 问题

低 LCP 和 FID 分数是由于页面速度慢造成的。 如果您可以使您的网站更快，那么您的 LCP 和 FID 分数都会自行修复。

对于 99% 的电子商务商店来说， LCP 和 FID 问题是由……

• 加载阻止渲染的 JavaScript 和 CSS – 如果没有任何优化，javascript 和 css 文件会按顺序加载，这可能会阻止页面的视觉渲染。 加速您的 javascript 的最佳方法是延迟加载您的代码或推迟渲染，以便它不会阻止任何内容。
• 加载大照片和/或视频——图像越大、分辨率越高，加载所需的时间就越长。 您永远不应该加载比您网站上显示的更大的图像。 此外，您永远不应该加载任何在屏幕上不可见的图像。
• 缓慢的服务器– 对于 Shopify、BigCommerce 或 Shift4Shop 等完全托管的平台来说，缓慢的服务器应该不是问题，但如果您使用 WooCommerce，那么使用 WPEngine 这样更快的主机可以显着加快您的网站速度。

在较高的层次上，如果您解决了上述 3 个问题，那么您将拥有一个闪电般的网站。

如何实现 1 秒页面加载速度

下面是我的速度优化的完整列表以及1-5的评分，其中 5 表示对速度改进的影响最大。

一般来说，你应该专注于 5并且只有在你有时间或者如果你是超级肛门时才实施 1 和 2 :)

如果你想知道我是如何实现 1 秒页面加载速度的，你可以直接跳到评分为 5 的大炮：）！

启用浏览器缓存（评分 1 分（满分 5 分））

浏览器缓存告诉客户端浏览器在用户的本地机器上缓存您网站的图像和其他元素，以便在初始页面加载后更快地浏览您的网站。

浏览器缓存应始终打开，但请注意浏览器缓存不会影响您的 Google Core Web Vitals 。 谷歌只关心你的网站是如何从完全冷的状态加载的。

最小化 CSS/JS 文件（评分 1 分，满分 5 分）

最小化你的 CSS/JS会从你的 CSS 和 javascript 文件中删除所有的空白，以在这里和那里节省一些字节。

一般来说，缩小 CSS/JS 文件不会显着提高页面速度。

如果您想从站点中找出每最后一毫秒的速度，请执行此优化。

结合 HTML、CSS 和 JS 文件（5 分中的 2 分）

将您的 HTML、CSS 和 JS 文件合并到更少的文件中可能会影响您的页面速度，因为您的服务器必须获取更少的文件。

但是使用最新的 Web 服务器技术，可以同时并行获取多个文件，这大大减轻了这种优化。 我不会花太多时间在这上面。

清理您的重定向（5 分中的 2 分）

您的网站在不断变化，有时您可能会从某些图像和/或页面重定向到其他图像和/或页面。

例如，当我多年前将所有页面从 http:// 迁移到 https:// 时，我发布了从某些页面和图像到其安全对应物的 301 重定向作为快速修复。

页面上的每次重定向都会降低网站速度，因此请确保使用 GTMetrix 之类的工具来检测页面元素上的任何重定向并将其删除。

使用更快的虚拟主机（5 分中的 3 分）

如果您使用的是 WooCommerce 或 Magento 等开源平台，您的第一反应可能是花钱购买全新的服务器来解决您的页面速度问题。

但大多数情况下，更快的服务器并不能解决您的速度问题。 但是，如果您目前使用的是便宜的共享主机，那么 VPS 或专用服务器可能会产生重大影响。

使用 CDN（5 分中的 2-3 分）

内容交付网络或 CDN 将您网站和图像的多个副本存储在世界各地的多台服务器上，以便您的内容由最近的地理位置服务器交付。

如果您在全球范围内拥有客户并且您的网站图片非常重，那么使用 CDN 可能会对您的页面速度产生重大影响。

但是对于像我这样主要服务于美国的小型站点，使用 CDN对页面速度的影响很小。

预加载更大的图像和脚本（5 分中的 3 分）

“最大内容绘制”等指标衡量页面上最大元素的速度。 因此，通过在 HTML 代码中提供提示来“预加载”页面上最大的元素是有意义的。

预加载提示是 HTML 代码中的指令，用于告诉浏览器哪些资源对页面最重要。

例如，如果您有一个大的初始图像，那么首先开始加载该图像以改进您的 LCP 是有意义的。

虽然在您的网站上预加载重要元素可能有助于您的 LCP 得分，但它不会影响您的整体页面速度。

缩小您的图像（评分 4 分（满分 5 分））

大多数新的电子商务商店所有者使用的图像尺寸远大于所需尺寸。 如果您的在线商店主题使用 1000 × 1000 图像，那么您不应该上传大于 1000 x 1000 的图像。

如果您的网站在不同大小的多个页面上使用相同的图像，您应该为每个版本创建一个单独的（和较小的）图像。

例如，我商店中的产品图片根据页面显示为全尺寸、50% 尺寸、33% 尺寸和 25% 尺寸。

因此，我的网站上有 4 个不同的图像文件（每个尺寸 1 个），并且我只显示所需的最小图像而不会降低质量。

此外，您应该在 Photoshop（或您使用的任何图像程序）中将所有 JPG 文件压缩到最高 50 质量。

压缩和缓存您的页面（5 分中的 4 分）

如果您使用的是完全托管的平台，例如 Shopify、BigCommerce 或 Shift4Shop，您的页面可能在提供服务之前已经被压缩和完全缓存。

但是，如果您使用的是像 WooCommerce 这样的开源平台，请确保使用像 WP Rocket 这样的插件。

WP Rocket 将预渲染您的所有网页，以便您的商店将提供需要很少或不需要 CPU 使用率的静态页面。

WP Rocket 还会将您的网页压缩到其大小的 90%。

使用较少的加载外部代码的插件（评分 4 分，满分 5 分）

您添加到网站的每个插件都会减慢速度。 因此，无论何时决定安装新的软件工具，都应格外小心。

看似无害的功能有时会显着降低您的网站速度！

例如，添加 Facebook 分享按钮或 Pinterest 固定按钮可能会导致从外部源下载一段新的 javascript 代码。

对于 Twitter、Facebook 或 Pinterest 等按钮，我总是使用不需要外部加载代码的“非 javascript”版本。

如果您想在您的网站上添加 Facebook 分享按钮，您应该使用如下所示的超链接版本。

https://www.facebook.com/sharer/sharer.php?m2w&u=https://mywifequitherjob.com/the-best-way-to-find-vendors-for-your-online-store/

延迟加载您的图像和 Javascript 代码（5 分中的 5 分）——最重要的！

在提高页面加载速度时，您应该只加载站点中必需或可见的元素。

例如，如果有一张图片在您的页面中向下滚动 5 次，您不应该显示该图片，直到您的客户将其向下滚动到足以看到它为止。

同样，对于 javascript 代码，在实际需要加载之前，您不应为网站加载任何功能。

如何延迟加载您的 Javascript 和 CSS 代码

延迟加载图像相当简单，大多数主题已经内置了图像延迟加载。

但是您如何才能在您的网站上安全地延迟加载 javascript 代码呢？

这是我如何做到的秘密。

对于我网站上的每个页面，我首先加载我网站的视觉元素。 然后，一旦用户在页面上执行操作，我只会在我的网站上加载功能性 javascript 代码。

例如，如果您现在访问 Bumblebee Linens，您会注意到我的网站加载速度非常快（有时不到一秒钟）。

但是，如果您单击页面或移动或滚动鼠标，则实时聊天才会与我商店中的其他“购物”功能一起加载。

换句话说，只有当用户在我的商店中采取行动或购物时，我才会延迟加载我网站的购物车功能。

结果，我的页面加载速度非常快，因为我只加载我网站的图形 HTML/CSS 元素。

从用户的角度来看，购物体验是完美的，因为每个页面加载速度都快如闪电。 同时，谷歌也看到了一个快速加载的页面。

如何实现 Javascript 延迟加载

延迟加载您的 javascript 所需的第一步是找出可以在不破坏您的站点的情况下延迟加载的内容。

请记住，您必须将所有“基本”代码加载到您的站点，以便您客户的“视觉”购物体验不受影响。

因此，您必须加载影响站点图形元素呈现的每一段代码。

以下是如何弄清楚什么是必不可少的。

转到 GTMetrix 并分析您的瀑布图。 您的瀑布图会告诉您页面上加载的所有内容以及加载所需的时间。

根据上图，klaviyo_subscribe.js 的加载时间为450 毫秒。 此外，klaviyo_subscribe.css 还需要 420 毫秒。

Klaviyo 是我的电子邮件营销工具，我知道Klaviyo 根本不会影响我网站的呈现。

因此，我可以轻松地延迟加载 Klaviyo，而不会影响页面的视觉元素。

事实上，删除 Klaviyo 代码将使我的页面速度几乎减少一整秒！

使用 GTMetrix，创建一个列表，列出呈现站点视觉元素不需要的所有慢速加载代码，然后在发生以下任何事件时延迟加载代码。

• 鼠标移动
• 页面滚动
• 屏幕触控

这是一个小代码片段，说明了我的 javascript 实现。


function activity(){
defer(//Add all of your slow javascript stuff here);
activityEvents.forEach(function(eventName) {
document.removeEventListener(eventName, activity, true);
});
}

// 应该被解释为的 DOM 事件数组
//用户活动。
var 活动事件 = [
“鼠标按下”、“鼠标移动”、“按键按下”、“滚动”、
'触摸启动'
];

window.onload = 函数（）{
//将这些事件添加到文档中。
//将活动函数注册为侦听器参数。
activityEvents.forEach(function(eventName) {
document.addEventListener(eventName, activity, true);
});
}

一旦您实施了这一步，您应该能够在移动设备和桌面设备上实现低于 1 秒的页面加载速度！

如何解决累积布局偏移问题

您 90% 的累积布局偏移问题将由以下 2 个原因引起。

加载没有尺寸的元素

图像大小参数允许 Web 浏览器在加载时了解内容的大小。

例如，如果您在 HTML 代码中定义图像尺寸，浏览器将在加载图像时为图像保留空间，因此页面不会跳转。

但是，如果缺少尺寸参数，则不会发生保留，并且在最终加载图像时页面将不得不重新排列。

此问题的简单解决方案是指定站点上每个元素的尺寸，如下所示。

<img width="400" height="300" class="" src="images/Hankie_HLW-009.jpg" border="0" alt="Wedding Handkerchiefs" title=" Wedding Handkerchiefs ">

使用 Javascript 动态添加内容

许多 Shopify 插件使用 JavaScript 在您的网站上动态显示功能。 有时此代码加载较晚，这可能会上下推动您的页面。

例如，如果您在网站上展示广告，您的网站可能会随着广告加载而上下跳跃。

防止这种情况发生的最佳方法是在页面上预先分配空间以显示添加的内容。

添加预渲染的空白对于某些插件来说可能会出现问题，因此如果这是您商店的问题，请确保与插件创建者联系。

如何解决更复杂的 CLS 问题

如前所述，90% 的 CLS 问题都可以通过向元素添加维度来解决。 但是剩下的 10% 可能在不使用特定工具集的情况下非常难以解决。

对于我的网站，我花了 3 周的时间来解决我的 CLS 问题，因为 Google Page Speed 测试不能反映现场测量的 CLS 分数。

例如，我在 MyWifeQuitHerJob.com 上的博客在页面速度实验室测试中获得了完美的 CLS 分数，但未能通过该领域的 CLS 测试。

如果您不知道我在说什么，这里是 Google Page Speed Test 的快速细分。

最高分是从使用 Chrome 浏览器的真实用户收集的数据。 最低分是在理想条件下的试运行。

当 2 个分数不匹配时，修复起来会很痛苦，因为 Google 不会告诉您出了什么问题。 事实上，您可以在实验室中获得完美的 CLS 分数，但在现场完全失败。

以下是 Google 没有告诉您有关 CLS 的内容。

页面速度测试仅在理想条件下测量您的首屏 CLS 。 在现实生活中，用户在可能更慢的互联网连接上上下滚动。

为了解决您的 CLS 问题，您必须模拟慢速连接并表现得像真正的人类用户！

如何模拟真实用户来修复 CLS

最好的方法是使用内置的 Chrome 调试器。

以下是逐步调试 CLS 问题的方法。

第 1 步：启动 Chrome 调试器

第 2 步：降低网络速度

在“网络”选项卡上，将页面速度降低到“慢 3G”。 这将显着降低页面加载速度，因此您可以轻松检测布局变化。

第 3 步：渲染布局移位区域

单击“性能”选项卡，然后确保选中“渲染”下的“布局移位区域”框。

第 4 步：刷新页面

设置好 Chrome 调试器后，刷新页面并像真实用户一样在页面上上下滚动。

确保您查找表示布局偏移的蓝色突出显示区域。

步骤 5：分析性能时间表

如果您在加载时看到网站布局发生变化，请通过放大页面加载时间线来仔细查看。

在下面的示例中，布局正在移动，因为我正在加载不同的字体，由于新字体更大，页面稍微向下移动。

通过在页面的不同区域多次运行这些测试，您可以轻松发现并修复累积布局偏移问题。

最难的部分是诊断您的 CLS 问题所在，因为 Google Page Speed 测试仅考虑页面的折叠部分。

您可以为电子商务商店获得 90 多个核心网络重要分数

如果您遵循上述所有说明，您可以在移动和桌面的 Core Web Vitals 上实现低于 1 秒的页面加载速度并获得 90+ 的评分。

一般来说，您应该始终保持您的网站尽可能简单，并且不惜一切代价避免使用插件！

在实现某个功能之前，问问自己是否绝对需要某个功能。 然后，寻找不需要向您的站点添加额外 javascript 代码的解决方案。

因为我是超级肛门，除了发生的网络调用之外，我实际上检查了我安装的每个插件的源代码。

有一次，我盲目使用了一个插件，该插件实际上将我的网站信息发送到多个广告网络，并在我不知情的情况下出售我的客户信息！

大多数页面速度问题不是由您的主题引起的，而是由您安装的插件引起的。 小心和快乐销售！