提高在线商店性能

已于 Apr 27, 2024 打印了此页面。若要查看当前版本，请访问 https://help.shopify.com/zh-CN/manual/online-store/web-performance/improving-web-performance?utm_campaign=Guru+Ask&utm_medium=Forum&utm_source=social。

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

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

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

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

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

本页相关主题

在线商店优化

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

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

影响 Web 性能的因素

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

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

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

测试工具

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

Web 性能控制面板

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

PageSpeed Insights

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

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

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

如果您使用第三方模板并需要帮助，则必须联系您的模板开发人员、聘请我们的 Shopify Web 性能专家或聘请 Shopify 合作伙伴。详细了解如何聘请 Shopify 合作伙伴。

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

如果您有开发团队或代理合作伙伴，您还可以联系他们获取更多帮助。

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

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

加载速度

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

视觉稳定性

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

交互性

首次输入延迟 (FID) 基于页面对首次用户操作（例如点击链接或按钮）的响应时间来衡量交互性。在 Core Web Vitals 中，它已被替代为下次绘制交互 (INP)，并且我们正在将 INP 添加到 Web 性能控制面板。

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

准备好开始使用 Shopify 进行销售了吗？

免费试用