你好，我是三桥。 首次内容绘制（FCP）是网页核心指标，也是前端全链路中的关键节点之一。这节课，我们将重点探讨如何优化这个首次内容绘制指标。 首次内容绘制和首次绘制的区别首先，我们要先理解什么是首次内容绘制（FCP）和首次绘制（FP）。 FCP的概念...

你好，我是三桥。 上一节课，我们探讨了优化首次内容绘制（FCP）的4种方法，还剩下三种方法没讲，分别是缩短关键请求资源深度、减少请求数量和传输大小以及确保文本在网页字体加载期间保持可见状态。 前面两个方法相对简单，我们略去不提，这节课我们专注解决字体...

你好，我是三桥。 这节课，我们继续讨论前端全链路优化的另一个环节，最大内容绘制（LCP）。LCP是Web Vitals的网页核心指标，可以帮助我们衡量网页内容“准备好”给用户需要多长时间。 什么是最大内容绘制？这个准备好是什么意思呢？我们先通过一些例...

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

你好，我是三桥。 上节课，我们通过实例解决了视口中图片加载的问题，经过几轮优化，图片在视口中的显示速度得到了提升。 然而，在优化之前，视口中的图片加载还存在一个问题，那就是页面视觉稳定性都不太好。下图是上节课优化过程的时序图。 上面四张时序图显示，...

你好，我是三桥。 前几节课，我们主要围绕Web Vitals的核心指标优化了前端性能问题。 前端全链路的性能优化是一个复杂的问题。一些常见的优化技巧，总结起来大概有6点。 优化以减少请求量，包括合并资源、减少HTTP请求数、gzip 压缩、懒加载等...