移动端FCP后超1秒，如何将LCP降至2.5秒以内？

1. 字体加载触发重绘排查 #

• 你用的H1字体可能存在加载延迟，导致浏览器先显示系统字体，替换自定义字体时触发重绘，拖慢LCP。
  • 给字体样式加上font-display: swap，确保文本渲染不被字体加载阻塞；同时用Perfmatters预加载关键字体文件。
  • 检查Beaver Builder的字体设置，开启本地托管字体，避免第三方CDN加载延迟。

2. CSS阻塞与样式计算延迟排查 #

• 就算H1早出现，若关键CSS没内联或加载慢，浏览器要等完整样式获取后才完成最终渲染，触发重绘。
  • 用Perfmatters的「Critical CSS」功能生成并内联首屏关键样式，优先加载H1的样式规则。
  • 排查后期加载的CSS（比如GTM或第三方插件注入的）是否修改了H1的样式（字体大小、间距、颜色等），导致重排重绘。

3. JavaScript对DOM的干扰排查 #

• GA、GTM或其他脚本可能在页面加载后期修改H1的DOM结构或样式，哪怕微小变化也会触发重绘。
  • 禁用GTM里的非必要标签，逐一排查是否有脚本动态修改H1的内容、属性或父元素样式。
  • 检查Beaver Builder的模块设置，H1附近是否有动态内容模块（比如自定义字段），加载时触发DOM更新。

4. 缓存与CDN生效验证 #

• 虽然用了Kinsta的全页缓存和CDN，但可能存在缓存未命中或资源缓存策略不当的情况。
  • 打开浏览器开发者工具的「Network」面板，确认H1的HTML内容是否在TTFB阶段就已返回，不是后期通过JS注入的。
  • 检查静态资源（CSS、字体）的缓存头，确保Cache-Control设置了足够长的过期时间，避免重复请求。

5. 渲染流程隐藏延迟定位 #

• 用Chrome DevTools的「Performance」面板录制页面加载过程，查看H1元素的「First Contentful Paint」和「Largest Contentful Paint」时间差，定位重绘触发原因。
  • 重点关注「Layout」和「Paint」阶段的事件，排查是否有脚本或样式加载导致的强制同步布局。

内容的提问来源于stack exchange，提问作者Hunter Nelson