什么是 Web 性能?
简单来说就是网站够不够快。
- 打开速度
- 动画效果
- 表单提交
- 列表滚动
- 页面切换
- …
MDN 上的 Web 性能定义:
Web 性能是网站或应用程序的客观度量和可感知的用户体验。
- 减少整体加载时间:减小文件体积、减少 HTTP 请求、使用预加载
- 使网站尽快可用:仅加载首屏内容,其它内容根据需要进行懒加载
- 平滑和交互性:使用 CSS 替代 JS 动画、减少 UI 重绘
- 感知表现:你的页面可能不能做得更快,但你可以让用户感觉更快。耗时操作要给用户反馈,比如加载动画、进度条、骨架屏等提示信息
- 性能测定:性能指标、性能测试、性能监控持续优化
为什么要关注 Web 性能
- 用户的留存
- 网站的转化率
- 体验与传播
- 搜索排名
- 客户投诉
- 提升工作绩效
- …
如何进行 Web 性能优化?
(1)首先需要了解性能指标
- 多快才算快?
(2)使用专业的工具可量化地测量
评估出网站或应用的性能表现;
(3)然后立足于网站页面响应的生命周期
,分析出造成较差性能表现的原因;
(4)最后进行技术改造、可行性分析等具体的优化实施
。
(5)迭代优化
性能指标
RAIL
性能模型- 基于用户体验的核心指标
- 新一代性能指标:
Web Vitals
性能测量
如果把对网站的性能优化比作一场旅程,它无疑会是漫长且可能还略带泥泞的,那么在开始之前我们有必要对网站进行性能测量,以知道优化的方向在何处。通常我们会借助一些工具来完成性能测量,
- 浏览器 DevTools 调试工具
- 网络监控分析
- 性能监控分析
- …
- 灯塔(Lighthouse)
- 网站整体质量评估,并给出优化建议
- WebPageTest
- 多测试地点
- 全面的性能报告
- …
生命周期
网站页面的生命周期,通俗地讲就是从我们在浏览器的地址栏中输入一个 URL 后,到整个页面渲染出来的过程。整个过程包括域名解析,建立 TCP 连接,前后端通过 HTTP 进行会话,压缩与解压缩,以及前端的关键渲染路径等,把这些阶段拆解开来看,不仅能容易地获得优化性能的启发,而且也能为今后的前端工程师之路构建出完整的知识框架,网站页面加载的生命周期如下图所示。
优化方案
- 从发出请求到收到响应的优化,比如
DNS 查询
、HTTP 长连接
、HTTP 2
、HTTP 压缩
、HTTP 缓存
等。 - 关键渲染路径优化,比如是否存在不必要的
重绘和回流
。 - 加载过程的优化,比如
延迟加载
,是否有不需要在首屏展示的非关键信息,占用了页面加载的时间。 - 资源优化,比如图片、视频等不同的
格式类型
会有不同的使用场景,在使用的过程中是否恰当。 - 构建优化,比如
压缩合并
、基于webpack 构建优化
方案等。