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 提供自适应组件