准备：计划和度量
- 建立性能优化文化
- 比竞品快 20%
- 选择正确的度量标准
尽快的渲染重要的像素和反馈输入；优先考虑页面加载，因为它直接被用户感知；交互反应时间、首次输入延迟、Hero Rendering Times、Largest Contentful Paint、Total Blocking Time and Cumulative Layout Shift 通常比较重要；不包括：First Meaningful Paint. - 清空后台并且以用户角色进行测试
- 与同事共享 checklist
设置实际的目标
- 100 毫秒响应时间，60 帧每秒
- LCP < 2.5s, FID < 100ms, CLS < 0.1, Time To Interactive < 5s on 3G
- 控制文件大小 < 170k
定义环境
选择打包工具
渐进的提高用户体验
选择一个有力的性能基准
js 有昂贵的体验代价，170kb 的文件已经包含关键的 HTML/CSS/Javascript，路由，状态管理，工具函数，框架，业务逻辑；彻底检查网络传输时间，转义/编译时间和框架运行时消耗的时间评估每个框架和依赖
选择框架：React, Vue, Angular, Ember and Co.
确保选择的框架有服务端渲染，预渲染能力。测试服务端启动时间和在移动设备上的客户端渲染模式；了解框架的核心和机制，了解 PRPL pattern 和 app shell architecture。推荐选择：Preact，inferno，vue，svelte，Alpine，Polymer优化 API 性能
考虑使用 GraphQL选择 CDN
分离静态内容，放在 CDN ；检查CDN 的压缩和转化效率
优化打包之后的资源
- 使用 Brotli 压缩纯文本
- 使用响应式图片 AVIF 和 WebP
- 图片是否被优化了？
使用 mozJPEG 压缩 JPEG，SVGO 压缩 SVG，Pingo 压缩 PNGs；或者使用 Squoosh - 视频是否被优化了？
- 字体是否被优化了？
优化构建
- 设置优先级
列一个资源清单（js，images，fonts，第三方脚本，“昂贵”的模块）并分组；定义基本体验（需要兼容低版本的浏览器），提升体验（现代浏览器丰富的体验）和扩展（不是必须的资源可以被懒加载） - 在生产环境使用 js 原生模块
使用 ES 2017 的 type=“module” 属性，现代浏览器可以分模块加载js - 加速初始渲染时间
progressive hydration and import on interaction - 使用 tree-shaking，scope hoisting 和 code-spliting 减少 请求的资源
tree-shaking 在打包过程中去掉在生产环境中没有使用到的代码；code-spliting 将代码分离到不同的块中，然后可以按需加载；Scope hoisting 检测导入链是否可以被扁平化，并在不有损代码的清空下转化为内联函数；使用颗粒化的代码块 chunk 将一些客户端的渲染移到服务端；通过追踪 css/js 代码块的使用，找到分割代码的点 - 是否能将 JavaScript 移到 Web Worker 或者 WebAssembly 中运行？
- 定位和移除没有用到的 css/JavaScript
- 减小js依赖的大小
webpack-libs-optimizations 移除在构建过程中没有使用到的方法；Bundlephobia 帮助发现添加一个包所花费的构建时间；size-limit 添加检查 JavaScript 运行时间；Skypack 发现社区挑选的包 - 预请求 JavaScript 代码块
Guess.js 使用 Google Analytics data 发现用户最可能访问的下一个页面 - 为目标 JavaScript 引擎优化
为巨石应用使用 script streaming，因此当脚本下载时，可以被后台线程转译
加载资源优化
- 异步加载 JavaScript
更推荐使用 defer 而不是 async - 使用 IntersectionObserver 懒加载消耗高的组件
- 延迟渲染和解码图片
content-visible 属性和 <img decoding=“async”> - 尽快推送关键的 css
将关键的 css 放在 head 标签内（大小在 14kb 以下） - Stream responses
- 优化渲染性能
如果需要，可以使用细粒度的CSS封装来隔离昂贵的组件。确保在滚动页面或动画元素时没有延迟，并且始终达到每秒60帧。如果这是不可能的，那么让每秒帧数保持一致至少比60到15的混合范围更好。使用CSS will-change通知浏览器哪些元素将发生变化。 - 减少重排合重绘
网络合 HTTP/2
分类
- 打包资源优化
- 打包速度优化
- 浏览器下载资源优化
- 浏览器渲染优化
