Nuxt3 优化 LightHouse 得分
LightHouse 有五个指标 FCP LCP TBT CLS SI
FCP
- First Contentful Paint 第一个内容绘制
TTBF - Time to First Byte 首个字节时间，反应了服务器响应时间
对于静态 html，可以使用 cdn 加速，避免频繁回源服务器，相对应的更新程序后，需要刷新 cdn 缓存
服务器开启 Server Timing，监控服务器响应时间
服务器开启 gzip、brotli 压缩，减少资源体积
服务器开启 http/2 协议，复用 http 请求，减少网络延迟
由于浏览器必须先下载阻塞 css 才能渲染页面，所以可以考虑以下两种
可选路线：
- 内联 css 文件
使用内联 css 样式到 html，避免加载 css 导致 render blocking
由于我们将 css 内联至 html，所以需要删除 Nuxt 注入的全局 css entry.[hash].css
- 保留 css 文件
使用 cdn 加速 css 文件
LCP
- Largest Contentful Paint 最大内容绘制
使用 lazyload，非首屏图片懒加载
避免动态插入 LCP 元素，否则要等待 js 加载完成后才能绘制
使用 cdn 加速图片、字体、脚本等静态资源
调整大小和压缩图片，优先使用 webp 格式图片
html head 中添加 preconnect 和 dns-prefetch，提前 DNS 解析域名，建立 TCP 连接、TLS 握手
关闭 Nuxt 的 prefetch 标签，避免不必要的请求
CLS
- Cumulative Layout Shift 累积布局偏移
避免使用动态插入的内容，导致页面布局变化
容器增加骨架大小，或者设置 min-height、min-width，避免内容加载后导致布局变化
关闭 vite 的 cssCodeSplit，使用一个单独的全局 CSS 文件，避免 css 加载顺序导致的布局变化
TBT
- Total Blocking Time
对于引入的第三方脚本中会影响布局渲染的，需要启用 defer 属性延迟加载，避免阻塞主线程
延迟 Nuxt 水合渲染，欺骗 Lighthouse https://github.com/harlan-zw/nuxt-delay-hydration
SI
- Speed Index 速度指数
与 FCP、LCP 挂钩，提高 FCP、LCP，对应的 SI 也会提高