LCP

• 最大内容绘制(LCP) 1 可视范围内 2 资源或者文本块的加载时间 3 通过 page speed 网站， 结合 network 中资源的加载顺序排查问题

• 一般最容易发生和解决的就是图片的加载效率，解决思路是：

  • 使用 preload 优先加载
  • 使用 CDN
  • 使用 webp 格式减少图片大小

• 优先使用服务端渲染 SSR exp: Next.js

• 资源打包后推到 CDN，资源加缓存,开启 Gzip 压缩资源

• 服务端渲染的 html 体积尽量减少 nextjs 会把服务端数据放到 html 一个标签中 所以修剪数据大小

• CSS 打包缩小体积，关键的打包到 header 内联标签中 非关键的延迟加载(使用 loadcss) 减少 CSS 文件数量 写到一个文件中 或者都 import 进到 global.css 中

• 字体预加载 而且加上 display: 'swap' 如果字体文件比较多 比如 4 5 个的话 最佳的策略是把字体文件写到 CSS 中 @font-face 然后把字体文件进行 base64 转化 这样就减少了字体文件的请求数量 这里需要有个平衡 如果要求字体文件预加载 就会影响页面的打开速度 如果要求打开速度 那么字体文件就必须减少数量 写到一个 CSS 中

• JS 关键的预加载 <link rel="preload"> 和非关键的延迟加载和按需加载 JS 打包的数量控制，最好是 8 个以内 因为请求数量多了 加载时间肯定慢 所以 webpack 打包中的 config.optimization.splitChunks.minSize = 20000 需要权衡这个配置 组件按需打包 组件除了 SEO 的懒加载 但是会影响 INP 指标 延迟加载: 使用 React.lazy 或者 nextjs Dynamic

• 图片改成 webP,减少图片大小，重要的预加载, 屏幕外的延迟加载, 预加载使用 <link rel="preload">, 懒加载使用库或者使用浏览器自带的 IntersectionObserver 根据用户的网络情况自适应加载不同质量的图片资源 比如 4G 网络以下加载质量低一级的图片

以上参照文章https://web.dev/optimize-lcp/