LCP 慢，先别慌，按顺序查这五个地方。LCP 是首屏最大内容加载出来需要的时间，它慢的原因基本就那么几个。
第一个，查图片。首屏那张最大的图，是不是太大了。有没有压缩过，格式对不对，有没有懒加载（首屏的图就不该懒加载）。这是 LCP 慢最常见的原因。我遇到过的案例，十有六七是图片的问题。换一个压缩好的图，LCP 立刻降一半。
第二个，查服务器响应。你的服务器多久才返回第一个字节。如果这个时间本身就长，那后面再怎么优化也没用，因为源头就慢了。这个要看服务器配置、数据库查询、有没有缓存。前面讲的响应时间优化，这里就用得上。
第三个，查阻塞渲染的资源。你的 CSS 和 JS 有没有挡在内容前面。浏览器必须先下载并执行完这些，才能显示内容。如果这些文件很大，或者加载很慢，内容就被挡住了。解决办法是把关键的 CSS 内联，非关键的延迟加载，JS 尽量放到最后或者加异步属性。
第四个，查字体。用了自定义字体的话，字体文件没下载完，文字可能就不显示，或者显示成别的字体再跳一下。解决办法是用 font-display 的 swap 模式，先用系统字体显示，自定义字体加载好再换。或者干脆用系统字体。
第五个，查 CDN 和缓存。静态资源的缓存配好了没有，有没有用 CDN 加速。这两个是基础设施层面的优化，做完了整体都能快一截。
按这个顺序查，基本都能定位到问题。修完了再测一遍，看指标降下来没有。LCP 这个指标，从三四秒降到两秒以内，是完全可行的，多数站都能做到。
—— 来自 图趣网 - 优秀网站分类目录 的分享
