周日早晨,土耳其安卡拉 Çankaya 一家 14 桌早餐店老板发来消息:"客人在菜单加载完之前就关闭了。"Google Search Console 显示"菜单"关键词排名第 47,PageSpeed Insights 移动端 31/100,LCP 4.2 秒。WordPress 加 18 个插件,以及一张未压缩的 3.2 MB 主图。迁移到 thMenu 四周后:LCP 1.6 秒,移动端分数 94/100,自然点击 增长 42%。
三个指标,三个阈值
自 2024 年起,Core Web Vitals 是 Google 官方移动排名信号。餐厅页面由 LCP(主内容出现)、INP(点击响应)、CLS(视觉稳定性)三项评分。
2026 绿色阈值:
- LCP 低于 2.5 秒
- INP 低于 200 毫秒(2024 年 3 月取代 FID)
- CLS 低于 0.1
thMenu 默认:LCP 1.8 秒
195 家 thMenu 餐厅移动端 LCP 中位数(4G,P75)为 1.8 秒。四个架构决策:Cloudflare CDN(250+ 边缘节点)、WebP/AVIF 自动转换加响应式 srcset、内联关键 CSS 加延迟 JS,以及目录的 ISR(5 分钟缓存加按需刷新)。
INP 方面,React Server Components 为默认;仅 CartDrawer 和分类筛选在客户端运行。JS bundle gzip 后 68 KB。CLS 方面,所有图片有显式 width/height,主图通过 aspect-ratio 预留空间。
测量工具与安卡拉案例
实战流程:PageSpeed Insights 拿 CrUX 现场数据,WebPageTest 看 3G/4G 瀑布图,Search Console 看哪组 URL 处于红区。安卡拉案例中,PageSpeed 标记 3.2 MB 主图和 14 个第三方脚本为元凶。
迁移后:主图改 AVIF,第三方链消失,INP 从 480 毫秒降到 120 毫秒。四周后 Search Console 显示"菜单"排名从 47 升到 14,日自然点击从 23 升到 33(增长 42%)。SearchGPT 也开始把这家餐厅推荐到前三。
常见问题
当前 LCP 5 秒,哪一项改动收益最大?图片优化:WebP/AVIF 加正确尺寸,通常省 2-3 秒。
如何把 INP 降到 200 毫秒以下?小 bundle,RSC,移除或延迟第三方脚本。
如何找 CLS 根因?PageSpeed "Avoid large layout shifts" 诊断。通常是没设尺寸的图片或 cookie 横幅。
觉得有用?分享给朋友。