快速加载
1. 概述
在构建现代网络体验时,如果您希望持续获得快速的体验,那么对网站性能进行测量、优化和监控就显得至关重要。性能对于任何线上项目的成功都起着重要作用,因为高性能网站比性能欠佳的网站更能吸引和留住用户。网站应该专注于优化以用户为中心的性能指标。Lighthouse 等工具可以突显这些指标,并帮助您采取正确的步骤来提高性能。若想“维持快速的体验”,请制定并执行性能预算来帮助您的团队在特定的需求下工作,从而在您的网站上线后继续提供快速的加载体验并让用户满意。
2. 介绍
3. 制定性能预算
- 性能预算基础
- Your first performance budget
- Incorporate performance budgets into your build process
- 使用 Lighthouse 进行性能预算
- Using bundlesize with Travis CI
- Using Lighthouse Bot to set a performance budget
- Performance monitoring with Lighthouse CI
4. 优化图片
5. 延迟加载图片和视频
6. 优化 JavaScript
- 使用 PRPL 模式实现即时加载
- 通过代码拆分减少 JavaScript 负载
- 删除未使用的代码
- 缩小和压缩网络有效负载
- 为现代浏览器提供现代代码以加快页面加载速度
- 发布、传输和安装现代 JavaScript 以实现更快的应用程序
- CommonJS 如何让您的捆绑包变得更大
7. 优化资源交付
- 内容分发网络 (CDNs)
- Prioritize resources
- 预加载关键资产以提高加载速度
- Establish network connections early to improve perceived page speed
- Prefetch resources to speed up future navigations
- 快速播放音频和视频预加载
8. 优化 CSS
9. 优化第三方资源
10. 优化网络字体
11. 针对网络质量优化
12. 对性能进行实测
- Using the Chrome UX Report to look at performance in the field
- 在 Data Studio 上使用 CrUX Dashboard
- Using the Chrome UX Report on PageSpeed Insights
- Using the Chrome UX Report on BigQuery
- Using the Chrome UX Report API