Addy Osmani 的 18 点 Web 性能检查清单

我刚刚浏览了Addy Osmani今年夏天写的“问我任何事”。虽然这篇文章充满了智慧，但这条评论却格外引人注目，堪称 Web 开发界的金字招牌：

我首先要检查的性能改进是网站是否可以减少 JavaScript 代码的加载量，同时仍能为最终用户提供其大部分价值。如果您的目标用户主要使用桌面设备，那么发送几兆字节的 JS 代码可能完全没问题；但如果他们使用移动设备，这通常会使其他资源的成本相形见绌，因为处理时间可能会更长。

一般来说，我会尝试浏览以下列表，并检查该网站是否可以在其中一个或多个方面做得更好：

✂️ 减少 JavaScript 代码发送（代码拆分）
😴 延迟加载非关键资源
🗜 认真压缩！（GZip、Brotli）
📦 有效缓存（HTTP、Service Workers）
⚡️ 压缩并优化所有内容
🗼 预解析关键来源的 DNS
💨 预加载关键资源
📲 尊重流量套餐
🌊 流式传输 HTML 响应
📡 减少 HTTP 请求
📰 制定 Web 字体加载策略
🛣 基于路由的分块
📒 库分片
📱 PRPL 模式
🌴 Tree-shaking（Webpack、RollUp）
🍽 为现代浏览器提供 ES2015 服务（babel-preset-env）
🏋️‍♀️ 作用域提升（Webpack）
🔧 不要将开发环境的代码发送到生产环境

Web 性能对于用户体验至关重要。在它成为问题之前，请优先考虑它。

编码快乐❤️

文章来源：https://dev.to/ben/addy-osmanis-18-point-web-performance-checklist-2e1