优化指标
FID 首次输入延迟，用于捕获用户对网站交互响应度的第一印象
建议测量TBT 总阻塞时间，这个的改进有利于FID的改进
js 优化
分割长任务（50ms以上的都是长任务）
- 切割成多个异步任务
优化您的页面。做好交互准备
js 体积膨胀 执行时间长 芬快效率低下都会影响
第一方脚本执行延迟交互准备
- 最大限度减少对集联数据获取的依赖
第三方脚本
- 在某些情况下 第三方脚本在主小城优先级和带宽抢占第一方脚本，并延迟页面做好交互的准备时间
web worker
comlink
workway
workerize
减少js 执行时间
延迟加载为谁用 js
将资源包代码进行分块
webpack 动态导入 import
懒加载
async，defer 延迟加载非关键js，脚本
最大限度减少没有使用的polyfill
- babel preset-env
TTI
LCP 最大内容渲染速度
阻塞渲染的 JavaScript 和 CSS
减少css阻塞时间
缩减css
- webpack optimize-css-assets-webpack-plugin
延迟加载非关键的css（chrome 开发者工具的代码覆盖率。查找没有使用decss）
如果有的样式就单独的页面使用，可以提取出来
可以 通过preload，onload 加载
内联css
通过首评内容的任意关键路径 css 直接在head中将css内联，不再需要往返请求css，减少css阻塞时间
- webpack critters
减少js 阻塞时间
缩减 和压缩 js
tree sharing
ugliyfill
分割代码
减少极联
延迟加载未使用的js
最大限度减少没有使用的polyfill
缓慢的服务器响应速度
TTFB 首字节时间
优化服务器
代码优化
服务于前端的数据结构
流处理
cdn 加速
- 分布在不同位置的服务器网络就近分配
preconnect 打算尽快建立链接
dns-prefetch
缓存
使用签名交互SXG
缓慢的资源加载速度
影响LCP元素
包含文本节点或者其他行内文本元素的块级元素
通过url 函数 加载的带背景的元素
video
内嵌在svg 元素中的image 元素
img 元素
优化和压缩图像
tinypng 工具压缩
webpack图片压缩plugin
imagemin-webpack-plugin
- 生成资源到 output 目录之前再来压缩，，后者的运用场景也能做雪碧图的压缩方案
image-webpack-loader
- loader的方式是先找到图片压缩后再交给url-loader处理 ，如果想图片base64或使用雪碧图插件可以使用
打包转雪碧图方案
webpack-spritesmith
postcss-sprites
将图片转换为更新的格式 webp vif
cdn 图像
使用响应式图片
预加载资源
- preload 加载
压缩文本文件
html css js
GZIP
- compression-webpack-plugin
Brotli
- 提供更好的压缩
基于网络链接交付不同资产
- 环境不好可以先显示一个缩略图 ，骨架屏
使用service worker 缓存资产
客户端渲染
最小化js
使用服务器渲染
会增加js渲染的复杂度
可能会增加TTFB时间
TTI 时间 变糟 可交互时间，因为再客服端加载完js 前 就算服务端渲染了页面，也没有交互性
使用预渲染
懒加载
SI
1.最小化主线程工作
优化JS脚本
对输入进行防抖处理
使用web workers
css 避免复杂的布局和布局抖动 缩小样式计算的范围并降低其复杂性
渲染
坚持仅合成器的属性和管理层计数
简化绘制的复杂度、减小绘制区域
解析HTML和CSS
脚本解析和编译
FCP 1.8s
消除阻塞渲染资源
- 阻塞渲染的 JavaScript 和 CSS #
- 减少css阻塞时间
- 缩减css
- webpack optimize-css-assets-webpack-plugin
- 延迟加载非关键的css（chrome 开发者工具的代码覆盖率。查找没有使用decss）
- 如果有的样式就单独的页面使用，可以提取出来
- 可以 通过preload，onload 加载
- 内联css
- 通过首评内容的任意关键路径 css 直接在head中将css内联，不再需要往返请求css，减少css阻塞时间
- webpack critters
- 减少js 阻塞时间
- 缩减 和压缩 js
- tree sharing
- ugliyfill
- 分割代码
- 减少极联
- 延迟加载未使用的js
- 最大限度减少没有使用的polyfill
缓慢的服务器响应速度
TTFB 首字节时间
优化服务器
cdn 加速
- 分布在不同位置的服务器网络就近分配
缓存
preconnect 打算尽快建立链接
dns-prefetch
使用签名交互SXG
使用高效的缓存策略服务静态资产
避免巨大的网络负载
预加载关键请求 资源 也可以减少关键请求深度
保持较低的请求数和较小的传输大小
避免多个页面重定向
重定向会减慢页面的加载速度，当浏览器请求已经重定向的资源时候，服务器会返回响应，然后浏览器必须向新位置发出另外一个http请求资源才行
react 减少redirect 组件进行路由导航
响应设计
避免DOM过大
网络效率和加载性能
- 大型dom 包含许多用户首次加载页面不可见的节点，增加用户数据和加载速度
运行时性能
- 渲染速度慢，因为dom 样式多
内存性能
- 不知不觉存储大量节点的引用
优化
确保文本在网页字体加载期间保持可见
字体通常需要一段时间加载的大型文件，可能会影响文本的现实
避免在加载自定义字体显示不可见字体，临时使用系统字体 @font-face{ flont-dispaly:swap}
预加载网页字体
谷歌字体