切换语言为:繁体

LCP优化具体方案

  • 爱糖宝
  • 2024-07-23
  • 2107
  • 0
  • 0

LCP的定义

在分享这次心得之前,得让大家了解一下什么是LCP

根据谷歌官方的定义一句话概括就是:LCP 报告的是视口中可见最大图片或文本块的呈现时间(相对于用户首次导航到相应网页的时间)。

这么一句话可能有点抽象,不过没关系,在浏览器的性能里其实就可以看到LCP的指标,如下图所示

LCP优化具体方案

LCP的优化方向

就算知道了LCP怎么看,但是没有接触过的同学肯定也是对优化无从下手,其实无需担心,谷歌官方专门针对这方面出了一个文档,点击查看

根据这个文档大概可以总结成4个部分

LCP优化具体方案

以上是整个LCP的构成,针对这四个部分,官方分别给出了以下方案

  1. 确保 LCP 资源尽早开始加载。

  2. 确保 LCP 元素可在其资源完成加载后立即渲染。

  3. 在不牺牲质量的情况下,尽可能缩短 LCP 资源的加载时间。

  4. 尽快提供初始 HTML 文档。

LCP优化的具体方案

社区里其实关于LCP优化的帖子不少,但是大部分都很笼统,看完也不知道具体该干什么。以下就是我结合实际经验给大家总结的一些具体措施。

项目分析

解决LCP慢的问题,首先要定位问题,到底慢在哪个环节,这样才能对症下药。 首先让我们打开浏览器的性能查看面板,清除缓存刷新一下页面监测看看

LCP优化具体方案

可以看到我这个案例项目在LCP这条左边所有的加载项都是有可能影响到LCP性能的因素,所以我们要进去放大一个一个去排查哪些JS和CSS是可以优化的,还有些根据接口渲染dom也要重点关注一下。有时候这个dom往往就是视口中的最大文本块,那么接口速度慢就会直接影响到页面的LCP性能,这个时候就要让后端同学去优化了。

我这个案例项目经过排查之后发现有些CSS加载比较滞后,有些JS包当前页面没有用到,却也第一时间加载了,那么具体的优化点就确定了,我们前端目前能做的就是尽可能的去优化这些CSS和JS。

具体举措

对于项目中的一些静态资源,我们可以尽可能的预加载来减少其对LCP的影响,例如link标签的CSS

  • CSS部分

<link rel="stylesheet" href="xxx.css" rel="preload"/>

我们可以设置rel属性为preload,这样就可以前置该CSS的加载从而加快LCP速度。

  • JS部分 至于当前页面用不到的JS包我们可以进行懒加载

<script data-src="xxx.js" crossorigin="anonymous"></script>

我们通过data-src的方式就可以让浏览器对该JS资源懒加载,这样本页面少加载了一个JS包,那对LCP肯定也有提速的作用

小伙伴们可以试试以上两个举措,效果绝对是立竿见影的,在性能看板就可以直观的看到。

总结

LCP优化是个较为复杂和繁琐的工程,这不是单单前端去优化就能很好解决的,很多时候要结合实际项目分析,整个项目组都要参与进来。

而且考虑到项目实际情况可能并不理想,比如庞大的项目里有很多冗余无用的代码,或者有些已经没用的插件库,甚至有些版本迭代时候遗弃的页面和模块。这些都会增大最后打包的体积,影响LCP的速度,这些无用代码和插件库,就要结合实际去和项目负责人或者产品沟通是否可以删除。这样精简后的项目包也可以是明显提升LCP速度的。

甚至再进一步,比如项目里原来用的lodash包,现在可以考虑用原生JS来实现,然后干掉这个工具包。

综上所述LCP优化并不是一个纯技术问题,它需要你对整个项目甚至业务逻辑都有一定的了解,而且针对不同的项目优化的手段也不尽相同,如果小伙伴们有其他的优化方式也欢迎在评论区补充。

0条评论

您的电子邮件等信息不会被公开,以下所有项均必填

OK! You can skip this field.