1、背景

上一篇使用GPT调研了，SI（Speed Index）：速度指数，即页面渲染速度的指标的优化方案

使用chatGPT，设计一套可落地的前端性能优化方案（下）- SI 的优化方案 - 掘金 (juejin.cn)

本篇呢，继续上一篇的内容，继续调研性能指标的优化方案，定两个主要方向：

编译时 —— 构建工具打包时的优化（我主要站webpack队的，以下优化方案，如果没有特别说明，均是webpack方案）
运行时 —— 用户从输入URL到展示指标以及对应的优化方案

根据最新的chrome Lighthouse规则，前端的性能指标主要有：

FCP（First Contenful Paint）：首次内容绘制时间，即浏览器首次绘制任何文本、图像、非空白canvas或SVG的时间。
SI（Speed Index）：速度指数，即页面渲染速度的指标。
LCP（Largest Contentful Paint）：最大内容绘制时间，即页面中最大的可见内容元素绘制完成的时间。
TBT（Total Blocking Time）：总阻塞时间，即页面主线程被阻塞的总时间。
CLS（Cumulative Layout Shift）：累计布局偏移，即页面上所有元素在视觉上发生的意外移动的总和。
TTI（Time to Interactive）TTI是指页面变得可交互所需的时间
TTD（Time to Display）TTD是指页面显示所需的时间

2、 LCP（Largest Contentful Paint）：最大内容绘制时间，即页面中最大的可见内容元素绘制完成的时间

问题：前端性能中LCP的优化目标是什么？你能给我一些优化LCP的具体方法吗？

根据这两个答案我们，做个总结：

LCP是一个以用户为中心的性能指标，可以测试用户感知到的页面加载速度，LCP的优化目标是至少75%用户能够在2.5秒内看到页面的主要内容

LCP主要受服务器响应速度、阻塞渲染的js和css、资源加载时间和客户端渲染性能等因素影响，优化这些方面可以提高LCP

最好的方法是根据自己的网站特点和用户群体，测试和比较不同的方案，找出最适合自己的优化策略

特别注意一点的是，针对于LCP的优化目标，多了一个用户维度：

LCP是一个以用户为中心的性能指标，可以测试用户感知到的页面加载速度，LCP的优化目标是至少75%用户能够在2.5秒内看到页面的主要内容

简单拆分一下关键点：

用户为中心75%

2.5秒

用户数据的收集方法，我在第一期的时候就简单说过，再回顾一下：

部署一个nginx服务，且在可访问的路径中放入一个1px的gif

使用页面的Image对象加载图片时，将页面的性能参数作为这个图片的请求参数，传给后台

成功访问到这个gif时，nginx的assets日志会自动保存，URL的全部信息

使用node或者kafka来读取日志，做清洗并落库，方便后边使用

这个75%就是后面使用的一种方法，学名 —— 分位数也叫分位点，这个问题稍后会详细说明

然后我们再看一下，优化LCP的具体方法：

提高服务器响应速度，使用CDN、缓存、预加载等技术
减少阻塞渲染的js和css，最小化、延迟加载、内联关键代码等
优化和压缩图片，使用新格式、响应式图片、图片CDN等
压缩文本文件，使用Gzip或Brotli等压缩技术
自适应服务，根据网络条件和设备性能加载不同的资源

大部分优化方案，在前文中都有提到，这里不再重复，我们主要研究最后一项：

2.1 如何计算LCP优化目标中的用户分位数

在开始之前我们先回顾一下数学~

问题：你能给我一个分位数的例子吗？

原理还是相当简单的，这里我用echarts来模拟一下：

简单讲解一下：

假设我有10个用户，LCP分别是，[1000,1100,1300,1500,1700,2300,2500,2800,3000]
依据2.5秒的优化条件，我得出来6个区间，分别是0，0-625，625-1250，1250-1875，1875-2500，2500以上（单位为ms）。
算法我随便写的，有些问题，不过不重要哈，只要保证other的数据小于25%就算基本达标了。
实际用到的时候，可以由sql查询完成哦，最好不要用代码来完成。

2.2 优化点：自适应服务，根据网络条件和设备性能加载不同的资源

问题：前端性能优化，自适应服务，根据网络条件和设备性能加载不同的资源，如何做到

方案中大部分都是，前几篇文章中提到过的，这里就不再重复，我们挑一些没讲过的。

2.2.1 使用 Client Hints 或 Network Information API 等技术，获取用户设备或网络信息，并根据这些信息调整资源加载策略或内容展示方式。

可以使用 Client Hints 或 Network Information API 等技术，获取用户设备或网络信息，并根据这些信息调整资源加载策略或内容展示方式。

Client Hints 是一种 HTTP 请求头，可以让服务器根据客户端的设备特性，如屏幕尺寸、分辨率、网络类型等，来优化响应内容。示例如下：

首先，你需要在服务器端发送一个 Accept-CH 响应头，来指定你想要接收的客户端提示。例如：

Accept-CH: DPR, Width, Viewport-Width

或者，你也可以在 HTML 中使用一个元素来启用 Client Hints。例如：

<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width">

这样，当客户端发起子资源请求时，就会携带相应的请求头，如 DPR (设备像素比)、Width (图片宽度)、Viewport-Width (视口宽度) 等。例如：

Accept: image/webp,image/*,*/*;q=0.8 DPR: 2 Width: 320 Viewport-Width: 640

然后，你可以根据这些信息来优化你的响应内容，比如根据设备像素比和图片宽度来选择合适的图片格式和尺寸。例如：

Content-Type: image/webp Content-Length: 12345 Vary: DPR, Width

注意，你应该在响应头中使用 Vary 字段来指定影响资源选择的客户端提示，以便正确地缓存响应内容。

Network Information API 是一种 Web API，可以让应用程序获取到系统的网络连接信息，比如说连接方式是 WiFi 还是蜂窝。应用程序可以根据此信息为用户展现不同清晰度的内容。

首先，你需要获取一个 NetworkInformation 对象，它是 Navigator 接口上的一个属性。例如：

var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

然后，你可以通过这个对象的一些属性来获取用户的网络连接信息，如 type (连接类型)、downlink (下行速度)、effectiveType (有效类型) 等。例如：

var type = connection.type; // wifi, cellular, etc. 
var downlink = connection.downlink; // in megabits per second 
var effectiveType = connection.effectiveType; // slow-2g, 2g, 3g, 4g

你也可以给这个对象添加一个 change 事件监听器，来检测用户的网络连接状态变化。例如：

function updateConnectionStatus() {  
    console.log("设备的网络连接从" + type + "变成了" + connection.type);  
    type = connection.type; 
} 

connection.addEventListener('change', updateConnectionStatus);

你可以根据这些信息来优化你的应用程序逻辑，比如根据下行速度或有效类型来选择合适的资源加载策略或内容展示方式。

3、小结

好的针对LCP的优化，应该就这些了，有一大部分的优化跟FCP、SI是重复的，这里我们再重复一下目标。

LCP是一个以用户为中心的性能指标，可以测试用户感知到的页面加载速度，LCP的优化目标是至少75%用户能够在2.5秒内看到页面的主要内容

这里特别注意，指标设计到了用户，也就说，要考虑到业务场景了，举个例子，高端电商和低端电商，用户的手机性能肯定不一样

如果你在一个高端电商的公司工作，其实没有必要去考虑一些低端机才用到的优化手段，除此之外，涉及到了用户，LCP还有很多可以挖掘的点，比如LCP的上报时机，有机会我在一起讨论吧

由于篇幅所限，其他的性能指标放在下一篇来分享

本文正在参加人工智能创作者扶持计划

使用chatGPT，设计一套可落地的前端性能优化方案（下）- LCP 的优化方案

1、 背景