提升网站性能的技术。
Overview
在构建现代网络体验时，如果您希望获得快速的体验并加以维持，那么对网站进行衡量、优化和监控就显得至关重要。性能对于任何线上项目的成功都起着重要作用，因为高性能网站比性能欠佳的网站更能吸引和留住用户。网站应该专注于优化以用户为中心的幸福指标。Lighthouse（已内置在 web.dev 中！）等工具可以突出这些指标，并帮助您采取正确的步骤来提高性能。若想“维持快速的体验”，请设置并执行性能预算来帮助您的团队在所需的限制条件内工作，从而在您的网站推出后继续提供快速的加载体验并让用户满意。
介绍
Core Web Vitals
- Web 指标
- 以用户为中心的性能指标
- 定义核心 Web 指标阈值
- Largest Contentful Paint 最大内容绘制 (LCP)
- Cumulative Layout Shift 累积布局偏移 (CLS)
- First Input Delay 首次输入延迟 (FID)
- Interaction to Next Paint (INP)
- 优化 Largest Contentful Paint 最大内容绘制
- 优化 Cumulative Layout Shift 累积布局偏移
- 优化 First Input Delay 首次输入延迟
- Optimize Interaction to Next Paint
- 核心 Web 指标的测量工具
设置性能预算
- Performance budgets 101
- 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
优化图片
- Choose the right image format
- Choose the correct level of compression
- 使用 Imagemin 压缩图像
- Replace animated GIFs with video for faster pageloads
- 提供响应式图像
- Serve images with correct dimensions
- 使用 WebP 图像
- 使用图像 CDN 优化图像
延迟加载图片和视频
优化 JavaScript
- Optimize long tasks
- 使用 PRPL 模式实现即时加载
- 通过代码拆分减少 JavaScript 负载
- 删除未使用的代码
- 缩小和压缩网络有效负载
- Serve modern code to modern browsers for faster page loads
- 发布、传输和安装现代 JavaScript 以实现更快的应用程序
- CommonJS 如何让您的捆绑包变得更大
优化资源交付
- Content delivery networks (CDNs)
- Prioritize resources
- 预加载关键资产以提高加载速度
- Establish network connections early to improve perceived page speed
- Prefetch resources to speed up future navigations
- 快速播放音频和视频预加载
- Optimize Time to First Byte
优化 CSS
优化第三方资源
- Third-party JavaScript performance
- Identify slow third-party JavaScript
- 高效加载第三方 JavaScript
- Best practices for tags and tag managers
优化网络字体
针对网络质量优化
对性能进行实测
- Using the Chrome UX Report to look at performance in the field
- Why lab and field data can be different (and what to do about it)
- Why is CrUX data different from my RUM data?
