如何优化LCP？准备好迎接CWV新排名算法了吗？
极诣在去年介绍了谷歌提出的衡量用户网页浏览体验的新指标Core Web Vitals（核心网页指标），该系列指标将在今年5月纳入谷歌的核心算法用以影响网页排名，尤其是移动设备上的排名。在时间表上仅剩3个月的今天，依然有三分之一的数字营销者不清楚Core Web Vitals是什么，意味着什么。这不禁令人担忧。
CWV包含了三个最核心的指标。它们分别是LCP、FID和CLS。这三个指标要全部飘绿才算合格。前两者和网页的加载速度紧密相关。而大多数网页是非强交互的，因此LCP就成为在CWV中最应该让营销者们投入时间来尽快改善的指标。同时LCP又是优化CWV的难点，因此本篇，极诣将展开与读者探讨如何优化LCP来满足即将到来的变革。推荐营销者和前端开发的小伙伴一同阅读。
LCP的意义
LCP（Largest Contentful Paint）是一个时间长度的考量。它始于网页请求，终于网页视口（Viewport）中最大的内容元素的显示。知道了它的衡量方法我们至少可以从两方面考虑：
一是如何锁定网页上视口中最大元素，二是如何减少最大元素显示之前的各个步骤并压缩这些步骤所花费的时间。
LCP中锁定视口最大元素
谷歌在最近的Chrome 88版本中的DevTools里添加了查看Web Vitals的方式。
如上图所示，我们在Performance中勾选了Web Vitals，然后在时间序列中找到了LCP的标签。点击该标签后我们可以在下方视窗中查看详情。看来最大的一块是个图片，长宽乘积48960，时间戳在3120.2毫秒。
当我们将鼠标移到LCP标签上时，我们可以看到网页中标记出了最大元素的位置。见下图：
优化LCP的思路
我们知道LCP的benchmark分三档，小于2.5秒是健康，大于4秒是糟糕，中间算马马虎虎。上面的结果显然算不上健康，我们需要对其进行优化。我们可以先看看在该图片载入之前浏览器都做了什么。
在上图中首先我们看到当蓝色的网页HTML下载后浏览器开始解析，此时前三个紫色的css文件，下面绿色的logo和icon，以及最下面橙色的js文件陆续进行下载。以上一共6个文件并行下载，这是因为该网站使用的是HTTP1.1协议最多只允许6个下载线程。当其中第一个css文件下载完成之后，这才轮到第四个紫色的css文件开始下载，再等到icon图片下载完成后，这才轮到我们LCP的图片开始下载。
这里我们非常直观地可以看到，如果我们把HTTP1.1升级到HTTP2，那么我们LCP图片的下载至少可以提前700毫秒。于是我们得到了第一个结论强烈建议使用HTTP2节省等待下载的时间。
那么除了这个我们还能做些什么呢？我们看到有4个css文件在这一过程中被使用，如果我们将这四个文件瘦身或者合并可以显著提升LCP。因为css文件是天生的阻塞元素，浏览器需要这4个css文件才能将网页“画”出来。
要将css瘦身我们可以通过DevTools – More tools（右上角三点） 中的Coverage来进行诊断，这个工具会告诉我们css（和js）文件中有多少代码其实根本没有用到。
我们需要做的是将那些大部分没有用到的css代码块去掉，把剩下的代码合并成一个css文件。对于首屏需要用到的css代码，我们可以直接inline写到HTML的<head></head>里面。
那些用到的css代码被整合到css文件之后依然会对页面加载产生阻塞怎么办呢？web.dev提供了一种不错的方法来lazyload css。
<link rel=”preload” href=”styles.css” as=”style” onload=”this.onload=null;this.rel=’stylesheet‘”>
<noscript><link rel=”stylesheet” href=”styles.css“></noscript>
上面的代码中我们先用preload下载稍后需要加载的css文件放在一边，当页面加载完成到了load事件时将rel的属性从preload改为stylesheet应用这个css。这方法十分精妙，当JavaScript被禁用时将fallback到noscript的做法。
更多优化LCP的方法
上面的例子中我们提供了优化LCP的思路和难点的解决方法。web.dev的官方文档中提供了更多其他的优化LCP的方法，包括但不限于：
- 提升网路、DNS和服务器响应时间
- 应用CDN
- 优化图片大小
- 减少JavaScript的阻塞并延迟加载JavaScript
- 应用缓存和最小化/压缩资源
- 预加载和DNS预解析
- 适配伺服（Adaptive Serving）
以上我们也可以借助谷歌提供的PageSpeed Insights工具进行诊断。我们留待今后展开。
[notification type=”alert-info” close=”false” ]注：本篇使用的实例在Fast 3G的网路下测试，实际页面评分并非如此不堪，大概PSI在70分上下。[/notification]
