Web 性能终极指南🚀

提升网站速度的方法有很多。难道你不希望所有网站性能技巧都集中在一个地方吗？我也是这么想的，所以我把它们都放在了一起：这篇博文。

使用本指南作为参考。

目录

• HTML
• CSS
• 图片
• 字体
• JavaScript
• 服务器
• 测试工具
• 框架

HTML

✨压缩 HTML
☄️为页面速度排序样式和脚本
⚡️消除阻塞渲染的资源
🌟最大限度地减少布局抖动
🎉确定资源优先级
✨预加载关键资产以提高加载速度
💥尽早建立网络连接
⚡️预取资源
🌟实施自适应服务

CSS

⭐️压缩 CSS
✨删除未使用的 CSS
💥推迟非关键 CSS
⚡️通过组合外部 CSS 来最小化 CSS 请求
🚀使用媒体查询优化 CSS 背景图像
⭐️避免在 body 标签内使用 CSS
☄️内联关键 CSS
✨避免使用昂贵的样式
💫优化 CSS 长度

图片

✨选择正确的图像格式
💫选择正确的压缩级别
⭐️使用 Imagemin 压缩图像
💥延迟屏幕外图像
⚡️适当调整图像尺寸
✨用视频替换动画 GIF
🎉提供响应式图像
⚡️提供尺寸正确的图像
🌟使用 WebP 图像
⚡️使用 AVIF 图像
🎊使用图像 CDN 优化图像
✨使用延迟加载
🚀延迟加载视频
⚡️使用 lazysizes 延迟加载图像
⭐️压缩 JPEG 图像
🔥优化 PNG 图像
✨优化 SVG 矢量文件

字体

💫避免在字体加载过程中出现不可见的文本
💥使用预连接更快地加载字体
⚡️优化 Webfont 的加载和渲染
☄️减小 Webfont 的大小
✨将 Webfont 的大小保持在 300kb 以下

JavaScript

💫应用 PRPL 模式
⭐️限制 NPM 依赖项的大小
⚡️使用代码拆分
🌟合并外部 JavaScript
💥删除未使用的代码
🎉在 Webpack 中使用 tree-shaking
✨最小化 JavaScript
💫为现代浏览器提供现代代码
🌟了解 CommonJS 如何使您的捆绑包更大
⚡️延迟加载 JavaScript
⭐️首选 Vanilla JavaScript 🎊
💡使用服务工作者缓存数据
🎊使用 Web 工作者
💥为 V8 编写优化代码
🎉使用 Prepack 将 JavaScript 编译为更快的 JavaScript
✨使用 Closure Compiler 将您的 JavaScript 编译为更快的 JavaScript

服务器

☀️使用 HTTPS
☄️尽可能保持 cookie 的大小
🔥避免不良请求
💫设置 HTTP 缓存标头
⭐️启用 gzip 和 brotli 压缩
⚡️自托管静态资产
🌟启用 OCSP 装订
💥采用 IPv6
💡通过 HTTP/2 提供资产
🎉实施 HPACK 压缩
✨设置适当的安全标头

测试工具

💫使用 Pingdom 测量网站速度
🌟使用 WebPageTest 测量网站速度
🎊使用 RAIL 模型测量性能
⚡️配置 Webpack 性能提示
⭐️使用 bundlesize
💥测量 JavaScript 执行时间
🎉使用 lighthouse-ci
☄️使用 Lighthouse Bot 设置性能预算
☀️在远程真实设备上测试
🔥使用 Sitespeed
✨使用 Calibre
💫使用 SpeedCurve
🎊使用 k6
⚡️使用 SpeedTracker

框架

⭐️使用提前编译器
💥提高 Angular 性能
☀️调试 React 性能
🔥消除常见的 React 问题
✨使组件连接感知
💫实现自适应服务
🎉使用网络信息 API 提供自适应组件