你如何诊断并改善缓慢的 LCP？

Question

你如何诊断并改善缓慢的 LCP？

IT Interview Practice · Accepted Answer

先找出 **LCP 元素是什么**以及**它为什么慢**。LCP 可以拆解为四个子部分——修复最大的那个。 ## 诊断：LCP 的四个子部分 ```text [ TTFB ] ─▶ [ Resource load delay ] ─▶ [ Resource load time ] ─▶ [ Render delay ] server when fetch STARTS download the image paint it ``` Chrome DevTools 和 PageSpeed Insights 会显示哪一段占主导。常见的元凶：服务器慢（TTFB）、LCP 图片被发现得太晚，或者渲染阻塞的脚本/CSS 延迟了绘制。 ## 按子部分对症下药 - **TTFB 慢** → 在 CDN 缓存 HTML，使用 SSG/ISR，加速源站/数据库。 - **load delay（图片被发现得太晚）** → 预加载它并提高其优先级，让浏览器立即获取它，而不是在 CSS/JS 之后： ```html

``` - **load time（图片太大）** → 提供 AVIF/WebP，用 `srcset` 给出合适的尺寸，进行压缩。 - **render delay** → 削减渲染阻塞的 CSS/JS；内联关键 CSS；`defer` 脚本。 ## 常见陷阱 - 懒加载 LCP 图片（或把它藏在 JS hydration 之后）——头号自伤 LCP 的做法。 - Web 字体阻塞 LCP 文本；使用 `font-display: swap` 并 `preload` 字体。 - 优化实验室 LCP，而真实用户在 4G 上依然慢——始终用字段数据来确认。 ## 为什么这很重要 LCP 是头号加载指标，也是搜索排名因素。能够说出这四个子部分，并把每一个映射到一个具体的修复，正是面试官所期待的那种结构化、以证据为依据的方法。

诊断：LCP 的四个子部分

按子部分对症下药

相关问题

常见陷阱

为什么这很重要