Shopify 网站速度优化清单

Shopify 店铺的速度问题，九成来自三个地方：过大的图片和视频、安装过多的 App 及其残留脚本、以及臃肿的主题代码。Shopify 的服务器、CDN 和基础架构本身已经做了优化，商家能控制的就是这三块。本文按优先级给出一份清单，建议先测速建立基线，再逐项处理，每处理一项就重新测一次。

第一步：先测速，再优化

• Shopify 后台的网页性能报告：在「在线商店」中可以查看 Shopify 基于真实访客数据给出的性能表现，重点关注加载速度、交互性和视觉稳定性三类指标。
• PageSpeed Insights：输入首页、一个系列页和一个商品页的 URL，分别测移动端分数。移动端分数更重要，因为跨境独立站大部分流量来自手机。
• 关注核心指标：最大内容绘制（LCP）反映主要内容多快出现，交互延迟反映页面多久可以操作，布局偏移（CLS）反映页面是否在加载中跳动。这三项直接影响用户体验与 Google 排名。

测速时注意：同一页面多测几次取平均值；不同地区的网络环境差异很大，不要用国内网络的体感判断海外访客的速度。

图片与视频

• 上传前把商品图控制在合理尺寸，不要直接上传相机原图。Shopify 会自动生成多尺寸版本并转为 WebP 等现代格式，但原图过大仍会增加处理负担。
• 首页幻灯片是最常见的性能杀手，减少幻灯片数量，首屏只用一张高质量图，其余改为静态区块。
• 使用主题自带的图片区块而不是在富文本中粘贴大图，前者支持响应式尺寸和懒加载。
• 视频优先使用 Shopify 托管或 YouTube / Vimeo 嵌入，避免自动播放多个视频；首屏尽量不放视频背景。
• 为所有图片填写 alt 文本，既利于 SEO 也利于无障碍。

字体

• 每多一种字体或字重，就多一次下载。标题和正文各一种字体、不超过三个字重是比较合理的上限。
• 优先使用系统字体或 Shopify 字体库中的字体，避免在代码中引入外部字体服务。

App 与残留代码

• 列出所有已安装 App，逐个问自己：最近 30 天有没有用它产生价值？不用的立即卸载。
• 卸载 App 后，部分 App 在主题中插入的代码不会自动删除，需要在主题代码的 theme.liquid、assets 等文件中手动清理，或者让开发者处理。
• 多个功能重叠的 App（例如两个弹窗 App、两个评论 App）保留一个。
• 优先选择使用 Theme App Extension 和 App Embed 方式集成的 App，它们对主题代码的侵入性更低，卸载时也更干净。见 Shopify App 安装与管理指南：权限、账单与卸载。

第三方跟踪脚本

• Google Analytics、Meta Pixel、TikTok Pixel 等尽量通过 Shopify 的官方渠道集成或 Customer Events（自定义像素）添加，而不是直接把多段脚本粘贴进主题。
• 删除已经不投放的渠道脚本、过期的 A/B 测试脚本、在线客服插件中不用的功能。
• 热图、录屏类工具只在需要分析时开启。

主题代码与结构

• 选择代码干净、速度评分高的主题作为基础，比如 Shopify 官方的 Dawn 系列，参考 如何选择 Shopify 主题：免费与付费怎么选。
• 减少首页分区数量，首屏之外的内容让主题的懒加载机制处理。
• 清理主题中未使用的分区、代码片段和 CSS，合并重复的 JavaScript。
• 避免在 theme.liquid 的 head 区域放置大量同步加载的脚本，非关键脚本改为延迟加载。
• 不要用大量嵌套的 Liquid 循环在页面渲染时处理复杂逻辑，必要时把逻辑移到 App 或元字段预处理。

常见误区

• 盲目追求 PageSpeed 满分。分数是参考，真实访客的体验指标和转化率才是目标。
• 用「速度优化 App」解决速度问题。多数这类 App 本身也是一段脚本，效果有限。
• 只优化首页。广告落地页通常是商品页或系列页，它们同样需要优化。

什么时候需要找服务商

图片压缩、卸载 App、精简字体这些操作，运营人员自己就能做并且立竿见影。涉及清理主题代码里的 App 残留、重构脚本加载方式、重写性能差的分区，则需要开发者介入，操作不当还可能让页面出错。创意时空作为 Shopify Plus Partner，长期为跨境品牌提供 Shopify 性能优化与主题重构服务，可以先做一次诊断再决定优化范围，欢迎 联系我们。