提高在线商店性能

在线商店由一组功能组成，例如模板代码、应用、图片、视频、轮播、社交媒体源和分析。这些功能可以增强访客体验并扩展网站的功能。

但是，您添加到在线商店的每个功能都可能影响商店的性能。某些功能可能会减慢您的网站速度或产生可能影响用户体验的意外行为。

Web 性能侧重于优化用户体验。目前，Web 性能侧重于三个主要方面，这三个方面也在 Core Web Vitals 中体现：

加载速度，通过最大内容绘制 (LCP) 衡量
布局稳定性，通过累积布局偏移 (CLS) 衡量
用户交互的响应情况，通过首次输入延迟 (FID) 和与下次绘制交互 (INP) 衡量

优化 Web 性能意味着您的客户更有可能停留在您的网站并实现转化。详细了解 Web 性能为何重要。

在线商店优化

在线商店中内置了 Web 优化功能。任何新功能中也将内置网站优化功能。您无需执行任何特殊操作即可使用以下功能：

您的商店托管在快速的全局服务器上，并且该服务器不会限制您商店的带宽。您可以在 Shopify 状态中查看 Shopify 商店的状态。
在线商店中有 Cloudflare 运行的内容分发网络 (CDN)，可确保您的在线商店在全球范围内快速加载。您可以在 Cloudflare 状态页面上查看 CDN 状态。
为保持快速的加载速度，系统将使用图片 CDN 自动优化图片。图片 CDN 与您的模板代码相结合，可提供最佳的图片格式，图片还将经过调整和压缩以使文件较小。

影响 Web 性能的因素

对于 Shopify 商店，下方是影响 Web 性能的最主要因素：

在线商店模板
您安装的应用
您手动添加到商店的任何其他第三方代码，包括标签管理器和其中的标签

这意味着您应关注以下内容以提高 Web 性能：

使用最新且经过优化的 Online Store 2.0 模板。Shopify 提供的所有 Online Store 2.0 模板都是免费的，并针对 Web 性能进行了优化。此外，许多其他第三方模板也针对 Web 性能进行了优化。您可以查看最新的模板性能数据。
评估已安装的应用和第三方代码，确保它们能够创造足够的价值来抵消任何潜在的性能损失。
审核标签管理器以删除任何未使用或低价值的标签。详细了解适用于标签和标签管理器的最佳做法。

性能优化策略

以下是一些可以帮助您提高Shopify商店性能的具体策略：

1. 优化图像

图像通常是网页上最大的资源，优化它们可以显著提高加载速度：

使用Shopify的内置图像优化功能
压缩上传前的图像（使用TinyPNG等工具）
选择适当的图像格式（WebP优于JPEG和PNG）
为产品图片使用适当的尺寸，避免过大
实施延迟加载，特别是对于首屏以下的图像

2. 减少第三方应用

应用可以增强功能，但也会增加加载时间：

定期审核已安装的应用，移除不再使用的应用
选择性能良好的应用，查看应用商店中的评论和评分
避免安装功能重叠的多个应用
使用Shopify原生功能替代第三方应用（如可能）

3. 优化模板

模板是商店性能的核心：

使用最新的Online Store 2.0模板
保持模板更新到最新版本
减少自定义代码的复杂性
避免在模板中添加过多的JavaScript库
考虑使用Shopify的Dawn等性能优化模板

4. 减少JavaScript使用

过多的JavaScript会影响交互性和加载时间：

审核并删除未使用的脚本
延迟加载非关键JavaScript
最小化和压缩JavaScript文件
使用异步加载脚本
减少第三方脚本的依赖

5. 优化CSS

精简CSS可以加快渲染速度：

删除未使用的CSS规则
内联关键CSS
延迟加载非关键CSS
使用CSS而非JavaScript实现简单动画

6. 实施缓存策略

有效的缓存可以显著提高回访用户的体验：

利用Shopify的CDN缓存
为静态资源设置适当的缓存头
使用浏览器缓存策略
实施服务工作线程（如果可能）

7. 减少布局偏移

稳定的视觉体验对用户至关重要：

为所有媒体元素设置明确的宽高比
预留空间给动态内容（如广告、嵌入内容）
避免在页面加载过程中插入新内容
优化字体加载以减少FOIT/FOUT（字体闪烁）

8. 优化移动体验

移动优化对当今的电子商务至关重要：

确保响应式设计适应所有屏幕尺寸
简化移动导航
减少移动设备上的动画和复杂效果
优先加载移动用户最需要的内容

测试工具

您可以使用以下工具来调查在线商店的性能。

Web 性能控制面板

Shopify 的 Web 性能控制面板报告使用 Core Web Vitals 来衡量您在线商店中的真实用户体验。

PageSpeed Insights

您可以使用 Google 的 PageSpeed Insights 运行自己的报告，以查看更详细的商店页面指标。

其他有用的测试工具

Lighthouse：Chrome开发者工具中的内置性能审核工具
WebPageTest：提供详细的性能瀑布图和优化建议
GTmetrix：结合Google Lighthouse和YSlow的综合性能测试工具
Chrome DevTools：用于深入分析网页性能的强大工具集

获取在线商店性能方面的支持

如果您使用Shopify 提供的免费模板，则 Shopify 支持团队也许能够帮助您进行基本的性能改进。

如果您使用第三方模板并需要帮助，则必须联系您的模板开发人员、或者找我作为您的 Shopify 合作伙伴。详细了解如何联系我。

如果您的性能问题来自应用，则可以联系APP商店的应用开发人员。

用于故障排除的技术信息和资源

如果您是开发人员并希望提高 Shopify 店面、模板或应用的性能，则可以查看下方每个 Core Web Vital 对应的资源。详细了解适用于 Shopify 模板的性能最佳做法。

加载速度

最大内容绘制 (LCP) 基于屏幕上最大元素的呈现速度来衡量加载速度。传送首字节的时间 (TTFB) 和首次内容绘制 (FCP) 是可帮助您更好地了解问题根源的支持指标。您可以详细了解如何针对 Shopify Liquid 店面加载缓慢的常见原因进行调试。

视觉稳定性

累积布局偏移 (CLS) 基于内容在加载期间的意外移动程度来衡量视觉稳定性。有关调试 CLS 的深入分析，请参阅如何在 Shopify 网站中优化累积布局偏移 (CLS)。

交互性

下次绘制交互 (INP) 基于页面对大多数用户操作的响应时间来衡量交互性。例如，用户操作，如点击链接或按钮。

如果您的 INP 不佳，则您的商店中可能有太多来自模板代码、应用代码或第三方/标签管理器的 JavaScript。请清理带来最大影响的内容。详细了解找到对页面加载产生最大影响的 JavaScript 内容的 3 种方法。如果您仍遇到 INP 问题，请详细了解 web.dev 中的相关资源。