网站速度优化:Core Web Vitals 清单

Google 用 Core Web Vitals 给网站速度打分,三项指标:LCP(最大内容绘制,目标 < 2.5s)、INP(交互延迟,目标 < 200ms)、CLS(布局偏移,目标 < 0.1)。外贸站的目标市场在海外,服务器远、图片多,这三项天然吃亏,更要主动优化。

LCP:首屏最大的那张图

大多数站点的 LCP 就是 Hero 大图或标题。优化手段按收益排序:

  • 图片压缩为 WebP,宽度不超过显示区域的两倍
  • 首屏图片预加载(preload),懒加载只给首屏之外的图
  • 主机套 CDN,静态资源就近分发

INP:点下去多久有反应

交互慢多半是 JavaScript 太重。少装插件是最有效的优化——每个插件都在往页面里塞脚本。第三方统计、聊天窗口、地图,按需加载,别全塞进每个页面的头部。

CLS:页面会不会跳

图片不写宽高、广告位动态插入、字体晚到导致文字重排,是三大元凶。给所有 img 标签写上宽高比,字体用 font-display: swap,就能解决九成问题。

自查节奏

用 PageSpeed Insights 每月跑一次首页和核心产品页,把分数记进表格看趋势。一次优化带来的提升是暂时的,插件装多了三个月就会跌回去。

优化工具箱

日常只需要三个工具:PageSpeed Insights 看分数和具体建议;WebPageTest 看逐秒加载瀑布图,找出拖慢首屏的资源;Search Console 的核心网页指标报告,看真实用户的体验数据。工具不在多,在于每月固定看、记录趋势。

优化顺序永远是:先减法(删掉没用的插件和脚本),再加法(缓存、CDN)。减法不做,加法白做。

Core Web Vitals 三项指标与优化清单。