27｜图片：调整策略，优化图片加载问题
唐俊开
你好，我是三桥。
上节课，我们学习了如何衡量 LCP 指标。通过比较平均值、最小值、最大值和百分位，我们可以判断问题的严重程度。
那判断之后，怎么才能优化 LCP 指标呢？这节课，我们就一起来解决这个问题。
不过在深入讨论优化 LCP 之前，我们首先需要理解浏览器是如何标记 LCP 元素和时间的。
LCP 元素标记的原理
放开 FCP 和 TTFB 的问题不谈，FCP 和 LCP 之间的时间主要用于加载前端资源，例如 JavaScript、CSS 和图片。此外还包括了渲染过程，这个过程包括了 HTML 和 CSS 解析、构建渲染树、布局和绘制等多个步骤，实际上过程很复杂。
尤其是 SPA 单页面项目，浏览器绘制页面的效果会更加明显。浏览器为了能够分析出视口中最大内容绘制的元素，提供了一套判断机制。
标记流程
浏览器记录 LCP 的流程主要包括这么几个步骤。
首先，浏览器在完成第一帧的绘制后开始记录 LCP。所谓“第一帧”，通常是在 FCP 之后，FMP 之前。FMP 指的是浏览器首次绘制页面上有意义的内容的时间点，即用户认为页面开始有用内容的时间。
其次，当第一帧绘制完后，浏览器会创建一个类型为 largest-contentful-paint 的PerformanceEntry 对象，并标记当前的最大内容元素。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
1. LCP元素标记的原理是通过浏览器在绘制页面时记录LCP，通过标记流程和确定LCP元素来确定最大内容元素。 2. 确定LCP元素的方法是根据LCP指标的规定，最大内容的元素类型有四种，但元素内容必须在视口可见。 3. 优化LCP需要缩短FCP与LCP之间的链路距离，通过性能报告和Lighthouse报告找出问题点并提出优化方案。 4. 性能报告以豌豆思维学科官网为例，观察官网加载后的性能报告，特别关注LCP指标的位置和时间，分析图片加载导致的空白和闪烁效果。 5. Lighthouse报告分析指出LCP存在的问题点，包括图片加载延迟、图片大小、图片格式和预加载图片等建议。 6. 优化建议包括避免在浏览器视口使用大尺寸图片、减少浏览器视口的最大内容块区域、使用服务器渲染模式提供图片组件和优先级属性、避免重复设置预链接、提前设置预加载图片、根据不同设备设置图片的大小、格式、尺寸等参数等。 These key points summarize the principles of LCP element marking, methods for determining LCP elements, the optimization process, performance and Lighthouse reports, and specific optimization recommendations.
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《前端全链路优化实战课》，新⼈⾸单¥59
《前端全链路优化实战课》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
精选留言
由作者筛选后的优质留言将会公开显示，欢迎踊跃留言。
收起评论