这是我参与11月更文挑战的第1天

6大衡量指标

First Contentful Paint 首次内容绘制 (FCP)

标记浏览器渲染来自DOM第一位内容的时间点，该内容可能是文本、图像，SVG甚至元素。
Time to Interactive （TTI）可交互时间

用于标记应用已进行视觉渲染并能可靠响应用户输入的时间点

Speed Index
Total Blocking Time 页面阻塞总时长（TBT）

汇总所有加载过程中阻塞用户操作的时长，在TCP和TTI之间任何long task中阻塞部分都会被汇总。

Largest Contentful Paint 最大内容绘制（LCP）

代表在视图中最大的页面元素加载的时间。LCP的数据会通过PerformanceEntry对象记录，每次出现更大的内容渲染，则会产生一个新的PerformanceEntry对象。
Cumulative Layout Shift

其他指标

DCL (DomContentLoaded)

当HTML文档被加载和解析后，DOMContentLoaded事件被触发，无需等待样式表、图像和子框架的完成加载
FP（First Paint）首次绘制

标记浏览器渲染任何在视觉上不同于导航前屏幕内容之内容的时间点
FMP （First Meaningful Paint）首次有效绘制
L (onLoad)

当依赖的资源，全部加载完毕之后才会触发

FCP、LCP举例

页面显示一段文字和一张图片

<div>
        <div class="footer">显示一段文字</div>
        <img src="__PUBLIC__/Images/test/001.jpg"  />
    </div>

Chrome Lighthouse 测试的结果如下

chrome 原始跟踪记录中显示FCP的时间为112.9毫秒，大致是文本显示的时间

LCP的时间戳为686.1毫秒，大致是图片显示的时间

什么是LCP？

最大内容绘制（LCP）指标会根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间。

怎么才算是良好的LCP分数？

为了提供良好的用户体验，网站应该努力将最大内容绘制控制在2.5秒或以内。

建议

优化图片大小

以下一代格式提供图片，如WebP、AVIF often

消除渲染阻塞资源

内嵌关键JS/CSS
推迟所有非关键JS/样式

如何识别关键资源

使用chrome的 Coverage tab (覆盖率)

延迟非关键CSS

<link rel="preload" href="inputV2.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
<noscript>
    <link rel="stylesheet" href="inputV2.css">
</noscript>

preload 不阻塞渲染，无论资源是否加载完成，浏览器都会接着绘制页面。
搭配as使用，可以指定将要预加载内容的类型，可以让浏览器：1.更精准的优化资源加载优先级；2.匹配未来的加载需求，在适当的情况下，重复利用统一资源；3.为资源应用正确的内容安全策略；4.为资源设置正确的Accept请求头。
noscript

实例分析

优化前：

优化后：

webpack集成critical

critical是一个提取关键css，内联到html中，并且使用平reload和noscript兼容加载非关键css的工具。

blog.csdn.net/weixin_3980…

html-critical-webpack-plugin

Chrome Lighthouse