Shopify 性能优化(Core Web Vitals)
我们不按「PageSpeed 分数」验收,按真实用户指标验收。实验室分数可以刷,75 分位的 LCP 才是客户实际体验到的速度。
指标诊断
区分实验室分数与真实数据,定位到具体页面与设备类型。
图片与字体
尺寸正确、格式转换、懒加载策略、字体预加载与字形裁剪。
脚本治理
第三方脚本审计、延迟加载、关键 CSS、移除未使用代码。
按指标验收
移动端 LCP 75 分位低于 2.5 秒、INP 低于 200 毫秒、CLS 低于 0.1。
先分清「分数」和「体验」
PageSpeed Insights 的分数受网络与设备模拟影响,同一站点不同时间能差 20 分。真正该看的是 Search Console 里的 Core Web Vitals 报告:有多少 URL 处于「需改进」。
优化目标写具体:移动端 LCP 75 分位低于 2.5 秒、INP 低于 200 毫秒、CLS 低于 0.1。达不到就不算完成。
按收益排序的整改顺序
- 图片:首屏大图改用正确的
img_url尺寸 +srcset,非首屏才懒加载 - 第三方脚本:逐个审计,能删的删、能延后的延后(客服、评价、像素都在首屏抢带宽)
- 关键 CSS:首屏样式内联,其余异步加载,避免无样式闪烁
- 字体:
font-display: swap、预加载主字体、裁掉不用的字形 - 主题结构:Liquid 循环过重、section 嵌套过深,这一类要重构,成本最高放最后
常见误区
- 全站开懒加载:首屏图懒加载反而拖慢 LCP
- 只看首页分数:真正影响转化的是商品页与结账入口
- 装了「加速应用」:多数只是帮你压缩图片和改缓存头,自己配一次不用月费
什么情况下不值得做
如果站点的瓶颈是运费太贵、支付方式不全、尺码信息缺失,优化速度的边际收益远低于先修这些。我们会先看数据再给建议,不硬卖优化。