前端全链路优化实战课
唐俊开
前阿里前端技术专家,前教育企业前端总监
1368 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已更新 28 讲/共 34 讲
前端全链路优化实战课
15
15
1.0x
00:00/00:00
登录|注册

27|图片:调整策略,优化图片加载问题

你好,我是三桥。
上节课,我们学习了如何衡量 LCP 指标。通过比较平均值、最小值、最大值和百分位,我们可以判断问题的严重程度。
那判断之后,怎么才能优化 LCP 指标呢?这节课,我们就一起来解决这个问题。
不过在深入讨论优化 LCP 之前,我们首先需要理解浏览器是如何标记 LCP 元素和时间的。

LCP 元素标记的原理

放开 FCP 和 TTFB 的问题不谈,FCP 和 LCP 之间的时间主要用于加载前端资源,例如 JavaScript、CSS 和图片。此外还包括了渲染过程,这个过程包括了 HTML 和 CSS 解析、构建渲染树、布局和绘制等多个步骤,实际上过程很复杂。
尤其是 SPA 单页面项目,浏览器绘制页面的效果会更加明显。浏览器为了能够分析出视口中最大内容绘制的元素,提供了一套判断机制。

标记流程

浏览器记录 LCP 的流程主要包括这么几个步骤。
首先,浏览器在完成第一帧的绘制后开始记录 LCP。所谓“第一帧”,通常是在 FCP 之后,FMP 之前。FMP 指的是浏览器首次绘制页面上有意义的内容的时间点,即用户认为页面开始有用内容的时间。
其次,当第一帧绘制完后,浏览器会创建一个类型为 largest-contentful-paintPerformanceEntry 对象,并标记当前的最大内容元素。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
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
立即购买
登录 后留言

精选留言

由作者筛选后的优质留言将会公开显示,欢迎踊跃留言。
收起评论
显示
设置
留言
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部