我如何把首页 Lighthouse 跑到 98 分

98 分没有黑魔法,只有纪律。

预算先行

我给首屏定了硬预算:HTML < 30KB,CSS < 40KB,JS < 20KB,字体用系统栈零成本。

图片策略

• 全部图片懒加载,首屏图 priority
• SVG 优先,位图按需 WebP
• 占位用固定宽高比,杜绝布局抖动

渲染纪律

动画只碰 transform 和 opacity;凡是会触发重排的属性,一律进不了提交。

结果

Lighthouse 四项 98 / 100 / 100 / 100,TTFB 稳定在 100ms 内。