LCP 最大内容绘制 首屏内容保持在14kb以下
1 .测量感知加载速度
image.png
2 .用户开始对一项任务失去注意力的等地啊事件为1秒
3 .哪些元素在考量范围内
1 .image 元素
2 .内嵌在svg元素内的image元素
3 .video 元素，使用了封面图像
4 .通过url函数加载的带有背景图像的元素
5 .包含文本节点或其他行内级文本元素子元素的块级元素
4 .如何确定一个元素的大小
1 .报告给最大内容绘制的元素大小通常是用户在可视区域内可见的大小。如果有元素延伸到可视区域之外，或者任何元素被裁剪或包含不可见的溢出，这些部分是不计入元素大小的
2 .在原始尺寸上经过调整的图像元素，原小于其原始尺寸的缩小图像将仅报告图像的元素尺寸。拉升或放大尺寸的图像将仅报告图像的原始尺寸
3 .文本元素，仅考量文本节点的大小。就是包含所有文本节点的最小矩形
4 .对于所有元素，通过css设置的任何边距，填充或者边框都不在考量范围内
5 .最大元素随内容加载而变化.新内容被添加到dom，并因此最大元素发生了变化。在第二个示例中，由于布局的改变，先前的最大内容从可视区域中被移除
image.png
6 .代码计算LPC
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('LCP candidate:', entry.startTime, entry);
}
}).observe({type: 'largest-contentful-paint', buffered: true});
7 .如何改进LCP https://web.dev/optimize-lcp/
1 .缓慢的服务器响应速度
2 .js 和 css渲染阻塞
3 .资源加载时间
4 .客户端渲染
7.1 缓慢的服务器响应是速度
1 .在用户访问网页的时候，服务器没有第一时间返回页面，而是先运行一些消耗大量时间和系统资源才会完成的一些查询。
2 .服务器没有立即返回静态页面，而是需要动态创建网络页面。也就是现在常用的React框架或者Vue框架来实现网页渲染.这里要看框架的性能渲染攻略
3 .将内容部署到CDN上面
4 .如果html是纯静态的，可以在服务端进行缓存
5 .使用service worker来缓存页面
6 .尽早建立第三方链接.对第三方的服务器请求也会影响LCP，尤其是当浏览器需要这些请求来在页面上显示关键的内容.使用来告知浏览器尽快建立连接
<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />
7.2 阻塞渲染的js和css：浏览器在能够渲染任何内容之前，都需要将html标记解析为DOM树，如果解析器遇到任何外部样式表，link或者script标签，都会暂停解析
减少css阻塞时间
1 .削减css
1 .为了便于阅读，css文件会包含空格，缩进或注释等字符。这些字符对于浏览器来说都是不必要的，而对这些文件进行削减能够确保将这些字符删除
[optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin)
2 .https://web.dev/minify-css/ 。还有一个问题就是频繁的新建项目。如何保证每次都只是加载这次需要的呢
2 .延迟加载非关键的css
1 .使用chrome开发者工具中的代码覆盖率选项卡来查找网页上没使用的css
2 .对于任何初始渲染时不需要的css。使用异步方式来加载文件
3 .https://web.dev/defer-non-critical-css/
3 .内联关键css
image.png
1 .通过把首屏内容的任何关键路径css直接包括在head来将这些css进行内联。
2 .将重要样式进行内联之后，就不需要通过往返请求来获取关键css。延迟加载其余部分可以最大限度的减少css阻塞事件
3 .[Critters](https://github.com/GoogleChromeLabs/critters) 是一个 webpack 插件，能够内联关键 CSS 并对其余部分进行懒加载
4 .https://web.dev/extract-critical-css/
减少js阻塞时间
1 .削减和压缩js文件https://web.dev/reduce-network-payloads-using-text-compression/
1 .缩小：删除空格和不需要的代码。来创建较小但完全有效的代码文件
2 .数据压缩，使用压缩算法修改数据的过程。GZip是用于服务器和客户端交互的最广泛的压缩格式
2 .延迟加载未使用的js,不仅仅是组件，任何不是立即用到的代码都可以后来加载。
form.addEventListener("submit", e => {
e.preventDefault();
import('library.moduleA')
.then(module => module.default) // using the default export
.then(someFunction())
.catch(handleError());
});
const someFunction = () => {
// uses moduleA
}
3 .预加载关键资产来提交加载速度
1 .HTML 文档的头部添加带有 rel="preload" 的 <link> 标记来预加载资源
<link rel="preload" as="script" href="critical.js">
2 .难道没有一种操作，知道当前的网络进度。如果不繁忙的时候后台帮我偷偷加载全部资源
3 .import(_/* webpackPreload: true */_ "CriticalChunk")
4 .最大限度减少未使用的polyfill
1 .https://web.dev/serve-modern-code-to-modern-browsers/
缓慢的资源加载速度
1 .虽然css和js阻塞时间的增加会直接导致性能下降。但加载许多其他类型资源所需要的时间也会影响
1 .img 元素
2 .内嵌在svg中的image
3 .video 中使用封面图像
4 .通过url函数加载的带有背景图像的元素
5 .包含文本节点或其他行内级文本元素的块级元素
2 .统一处理方式
1 .优化和压缩图像
2 .预加载中重要资源
3 .压缩文本文件
4 .基于网络连接交付不同资产
5 .使用Service Worker缓存资产
3 .预加载图片:预加载可以和响应式图像一起使用，将两种模式相结合可以更快速的实现图像加载
<link rel="preload" as="script" href="script.js" />
<link rel="preload" as="style" href="style.css" />
<link rel="preload" as="image" href="img.png" />
<link rel="preload" as="video" href="vid.webm" type="video/webm" />
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />
<link
rel="preload"
as="image"
href="wolf.jpg"
imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
imagesizes="50vw"
/>
4 .自适应服务：根据用户的设备或网络条件按需获取不同的资源. 根据用户网络状况，设备内存，硬件并发来实现
1 .如果有初始渲染十分关键的大型资产，可以根据用户的连接或设备来选择不同的方式比如如果用户的网速是4g，可以选择显示图像，而不是视频
if (navigator.connection && navigator.connection.effectiveType) {
if (navigator.connection.effectiveType === '4g') {
// 加载视频
} else {
// 加载图像
}
}
使用Service Worker 缓存资产
1 .Service Worker 可用于完成许多有用的任务，其中包括本文前面提到的提供较小的 HTML 响应。Service Worker 还可用于缓存任何静态资源，并在收到重复请求时将资源直接提供给浏览器，而无需通过网络。
2 .workbox这样的库更加简单
6 .客户端渲染
1 .客户端
7 .服务端渲染
1 .
8 .网路中渲染 https://web.dev/rendering-on-the-web/
用无头浏览器在搭建期间生成每个路由的静态 HTML 文件。然后可以将这些文件与应用程序所需的 JavaScript 包一起进行运送。
FID 首次输入延迟
1 .测量响应度，并将用户首次尝试与页面交互的体验进行了量化
image.png
2 .我们感知会认为长达100ms左右的视觉反馈是体验比较差的。超过100ms的反应会被认为不是由操作决定的
3 .触摸触屏上的虚拟按钮和随后显示按钮被触摸的视觉反馈之间的同时性感知。当按下按钮和视觉反馈之间的延迟为 85 毫秒或更短时，参与者在 75% 的情况下报告视觉反馈是在按下按钮的同时出现的
CLS 累计布局偏移
1 .测量视觉稳定性 ，并对内容的意外布局偏移量进行了量化
image.png
2 .0.15 及以上的偏移水平被认为具有干扰性
3 .出现的情况可能是图片未加载好的时候没有高度，加载好之后出现了高度。或者是有嵌入外部社交媒体内容，嵌入内容的高度在未完成加载时也是未知的
网友评论