LCP的定义
在分享这次心得之前，得让大家了解一下什么是LCP
根据谷歌官方的定义一句话概括就是：LCP 报告的是视口中可见最大图片或文本块的呈现时间（相对于用户首次导航到相应网页的时间）。
这么一句话可能有点抽象，不过没关系，在浏览器的性能里其实就可以看到LCP的指标，如下图所示
LCP的优化方向
就算知道了LCP怎么看，但是没有接触过的同学肯定也是对优化无从下手，其实无需担心，谷歌官方专门针对这方面出了一个文档，点击查看
根据这个文档大概可以总结成4个部分
以上是整个LCP的构成，针对这四个部分，官方分别给出了以下方案
确保 LCP 资源尽早开始加载。
确保 LCP 元素可在其资源完成加载后立即渲染。
在不牺牲质量的情况下，尽可能缩短 LCP 资源的加载时间。
尽快提供初始 HTML 文档。
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优化并不是一个纯技术问题，它需要你对整个项目甚至业务逻辑都有一定的了解，而且针对不同的项目优化的手段也不尽相同，如果小伙伴们有其他的优化方式也欢迎在评论区补充。
