Web 性能?终极指南
#[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 提供自适应组件