Web 性能终极指南（点击即可跳转对应的内容界面，制作不易。给个关注谢谢。）

Web 性能🚀终极指南

#[HTML全文] #CSS的 #JavaScript的 #反应

点击即可跳转对应的内容界面，制作不易。给个关注谢谢。

有很多方法可以加快您的网站速度。难道你不希望每个网络性能提示都集中在一个地方吗？我也是这么想的，所以我把它们都放在一个地方：这篇文章。

使用本指南作为
目录

• [HTML全
• CSS的
• 图像
• 字体
• JavaScript的
• 服务器
• 测试工具
• 框架

[HTML全

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

CSS的

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

图像

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

字体

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

JavaScript的

💫 应用 PRPL 模式
⭐️ 限制 NPM 依赖
⚡️项的大小 使用代码拆分
🌟 合并外部 JavaScript
💥 删除未使用的代码
🎉 在 Webpack
✨ 中使用摇树 缩小 JavaScript
💫 为新式浏览器
🌟提供新式代码 了解 CommonJS 如何使您的捆绑包变得更大
⚡️ 延迟加载 JavaScript
⭐️ 首选 Vanilla JavaScript🎊
💡 使用 Service Worker 缓存数据
🎊 使用 Web Worker
💥 编写针对 V8
🎉 的优化代码 使用 Prepack
✨ 将 JavaScript 编译为更快的 JavaScript 使用 Closure Compiler 将 JavaScript 编译为更快的 JavaScript

服务器

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

测试工具

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

框架

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