浏览器的Performance指标与性能优化

本篇文章主要讲述performance的几个常见的性能指标，以及一些性能优化建议。

 

 

性能指标介绍

绿色是w3c规定的首屏优化的三个核心指标。

红色是谷歌规定的提升用户体验的三个核心指标。

 

优化指标，提升用户体验

资源优化

• 压缩文件、使用 Tree-shaking 删除无用代码
• 服务端配置 Gzip 进一步再压缩文件体积
• 资源按需加载
• 通过 Chrome DevTools 分析首屏不需要使用的 CSS 文件，以此来精简 CSS
• 内联关键的 CSS 代码
• 使用 CDN 加载资源及 dns-prefetch 预解析 DNS 的 IP 地址
• 对资源使用 preconnect，以便预先进行 IP 解析、TCP 握手、TLS 握手
• 缓存文件，对首屏数据做离线缓存
• 图片优化，包括：用 CSS 代替蹄片、裁剪适配屏幕的图片大小、小图使用 base64 或者 PNG 格式、支持 WebP 就尽量使用 WebP、渐进式加载图片

 

 

参考链接：

https://www.h5w3.com/32655.html

https://blog.csdn.net/c_kite/article/details/104237256