First Contentful Paint

First Meaningful Paint

Speed Index

First CPU Idle

Metrics
Time to Interactive

Max Potential First Input Delay

Total Blocking Time

Largest Contentful Paint

cookie

localStorage
本地数据存储
sessionStorage

indexedDB

缓存 内存缓存
强缓存
HTTP 缓存
协商缓存

避免不必要的重定向
DNS预解析
发送请求 预先建立连接
使用CDN

使用流
服务端响应 业务接口内部聚合
避免代码问题

资源位置顺序
页面解析与处理 合理使用defer/async
关键渲染路径

code split
减少不必要的请求
代码合并
uglify
代码压缩
gzip

减少包大小 tree shaking

合理使用polyfill
webpack打包分析
JavaScript
初始加载，删除不必要的代码
避免long task
加快解析与执行
考虑是否需要框架
针对代码的编译优化
基于hash的文件名
缓存 单独打包基础库
hash module id

打包导致的缓存失效 runtime chunk split

Make the Web Faster
使用records
内联
使用关键CSS
骨架屏
合并文件
请求的优先级排序
优化资源请求
CSS
慎用@import
JavaScript脚本的位置

页面静态资源 减少包大小 gzip

简化选择器
加快解析与渲染树构建 避免使用昂贵的属性
使用先进的布局方式
雪碧图
优化请求 懒加载
内联
base64

使用合适的图片格式
适当降低图片质量
图片
减少图片大小 选择合适的分辨率
删除图片冗余信息
SVG压缩

利用缓存
字体
使用合适的视频格式
视频压缩
视频
移除不必要的音轨信息
使用流

注意强制同步布局
长列表优化
任务分解
运行时 避免JavaScript运行占用时间过长 延迟执行
并行计算
机制
composite

滚动的性能优化
passive event listenders

prefetch

resource hints prerender

预加载技术 preload

基于JavaScript实现的预加载
预加载 preload属性

视频预加载 link preload

自定义buffer