Shopify 店铺速度术语表：用简单的话解释

Core Web Vitals

Google 衡量页面真实体验的三项指标：LCP（加载）、INP（响应）和 CLS（视觉稳定性）。当三项在第 75 百分位的访问中都达到良好时，页面即为通过，数据来自 Chrome 用户体验报告的真实用户数据。它们是 Google 搜索使用的页面体验信号之一。

在 Shopify 上： Shopify 后台有网页性能报告，用您自己访客的数据展示同样的三项指标。

LCP（最大内容绘制）

从访客开始加载页面到可视区域内最大的图片或文字块绘制完成的时间。2.5 秒或以内为良好，超过 4 秒为较差。

在 Shopify 上： 在商品页上，LCP 元素通常是商品主图；在首页，则是首屏横幅。任何抢在它之前加载的内容都会拖慢它。

INP（与下一次绘制的交互）

访客点击、轻触或输入后，页面显示响应所需的时间，取本次访问中最慢的交互之一。200 毫秒或以内为良好，超过 500 毫秒为较差。2024 年 3 月，INP 取代首次输入延迟（FID）成为 Core Web Vitals 之一。

在 Shopify 上： 让浏览器持续忙碌的应用脚本是 INP 变慢的常见原因，例如顾客点击“加入购物车”时。

CLS（累积布局偏移）

页面打开期间可见内容意外移动的程度，按移动内容的大小和移动距离计分。0.1 或以下为良好，超过 0.25 为较差。

在 Shopify 上： 常见原因是页面绘制后才出现的公告栏、弹窗和评价星级，以及未设定宽高的图片。

TTFB（首字节时间）

从发出请求到收到页面 HTML 第一个字节的时间，包括重定向、建立连接和服务器处理时间。Google 的建议是 0.8 秒或以内为良好。

在 Shopify 上： 服务器由 Shopify 运行，店铺对 TTFB 的直接影响有限，但多重重定向和繁重的主题代码仍会增加它。

FCP（首次内容绘制）

浏览器绘制出页面第一段文字或第一张图片的时刻。1.8 秒或以内为良好。

在 Shopify 上： FCP 很快而 LCP 很慢，通常说明主图被页面上的其他内容拖住了。

Speed Index（速度指数）

Lighthouse 的实验室指标，根据加载过程的录像计算页面可见部分填满的速度。数值越低越好。

Total Blocking Time（总阻塞时间，TBT）

在 Lighthouse 实验室测试中，FCP 之后长任务（超过 50 毫秒）阻塞浏览器主线程的总时间，每个任务只计超过 50 毫秒的部分。它是 INP 在实验室中的替代指标，也是 Lighthouse 性能得分中权重最高的几项之一。

在 Shopify 上： 页面加载时运行的应用脚本是 TBT 偏高的常见原因。

阻塞渲染的资源

浏览器在绘制任何内容之前必须下载并处理的文件，通常是页面头部中未加 async 或 defer 的样式表或脚本。每多一个，FCP 和 LCP 都会被推迟。

在 Shopify 上： 在 Shopify 上，添加到主题头部的应用脚本是常见来源。PageSpeed Insights 会在建议中列出它们。

关键 CSS

绘制首屏可见内容所需的少量 CSS，直接内嵌在 HTML 中，让页面在完整样式表到达前就能绘制。其余部分随后加载。

在 Shopify 上： 部分提速应用会为主题生成关键 CSS。Whoosh 不会，它调整的是应用的加载时机。

延迟加载（懒加载）

等图片、视频或 iframe 即将滚动进入视野时才加载，通常使用 loading="lazy"。它节省流量，让网络优先服务屏幕上的内容。

在 Shopify 上： 切勿对第一张商品图片或首屏横幅使用延迟加载：它通常就是 LCP 元素，延迟加载只会让 LCP 更慢。

预加载与预获取

预加载（rel="preload"）让浏览器提前获取当前页面很快需要的文件，例如首屏图片或字体。预获取（prefetch）则以低优先级获取下一次可能访问的文件或页面，让下一页更快打开。

在 Shopify 上： Whoosh 的 AI Page Preloading 会在顾客点击之前加载下一页。

推测规则（Speculation Rules）

Chrome 和 Edge 浏览器的一项功能：页面用 JSON 列出浏览器可以在点击前预获取或预渲染的链接。预渲染的页面在访客点击时几乎可以立即出现。不支持的浏览器会忽略这些规则。

CDN（内容分发网络）

分布在全球的服务器，保存网站文件的副本，让每位访客从就近的位置下载，缩短每个文件到达的时间。

在 Shopify 上： 每家 Shopify 店铺都通过 Shopify 自己的全球 CDN 提供服务，无需任何设置。应用开发商的文件则来自他们自己的服务器。