本篇文章主要讲述performance的几个常见的性能指标,以及一些性能优化建议。
性能指标介绍
绿色是w3c规定的首屏优化的三个核心指标。
红色是谷歌规定的提升用户体验的三个核心指标。
优化指标,提升用户体验
资源优化
- 压缩文件、使用 Tree-shaking 删除无用代码
- 服务端配置 Gzip 进一步再压缩文件体积
- 资源按需加载
- 通过 Chrome DevTools 分析首屏不需要使用的 CSS 文件,以此来精简 CSS
- 内联关键的 CSS 代码
- 使用 CDN 加载资源及
dns-prefetch
预解析 DNS 的 IP 地址 - 对资源使用
preconnect
,以便预先进行 IP 解析、TCP 握手、TLS 握手 - 缓存文件,对首屏数据做离线缓存
- 图片优化,包括:用 CSS 代替蹄片、裁剪适配屏幕的图片大小、小图使用 base64 或者 PNG 格式、支持 WebP 就尽量使用 WebP、渐进式加载图片
参考链接: