如何避免巨大的网络负载（明智的方式）

已发表: 2023-07-19

您刚刚运行了 Google PageSpeed Insights 报告，诊断部分中弹出了此警告：

避免 Google PageSpeed Insights 报告中出现巨大网络负载警告

尽管“巨大”一开始听起来很可怕，但“避免巨大的网络负载”消息很容易修复。

在本指南中，您将找到解决问题的最有效技术，并确保您再也不会看到警告。

让我们直接深入吧！

什么是网络有效负载？

就像两个人之间的对话一样，浏览器和服务器通过网络请求和响应进行通信。 因此，网络有效负载是当用户加载您的网站时网络浏览器和服务器交换的信息。

浏览器和服务器通过网络有效负载进行通信

从更技术的角度来说，网络有效负载代表通过网络传输的资源的总大小，例如 HTML、CSS、JavaScript 文件、图像、视频和构成网站的其他内容。

避免巨大的网络有效负载警告是什么意思？

简而言之，“避免巨大的网络负载”意味着您的页面大小太大。 Google PSI 报告之所以引起您的注意，是因为您已经超出了建议的总页面大小 1.6MB（或 1,600kB）。

记住！

在出现此警告的情况下，您不应将优化工作仅限于主页。 所有页面都需要受到监控，并在可行的情况下减小其大小。

抛开一些普遍的疑问——有效负载大小、页面大小和页面权重都是指特定网页的整体大小，并且可以互换使用。

最佳页面大小应该是多少？

虽然没有最佳页面大小，但 Google 发现 1.6MB 的上限目标是理论上可以在 3G 连接上下载的最大数据量，同时将交互时间保持在 10 秒以下。

Google PSI 测试使用 1.6 兆位连接（相当慢），因此实际上，为了在能够访问快速网络的受众中具有竞争力，您需要将目标设置为 1-1.5MB 之间。

这为流行的第三方服务（如 Google Analytics、Facebook Pixel）和大量图像的传输提供了足够的空间，而不会严重影响您的网站速度。

这给我们带来了下一个重要的部分。

为什么巨大的网络负载有害？

通过网络传输的大量数据会对您的网站性能和访问者产生负面影响。

大型网络有效负载需要更多时间来下载，这会损害您的：

  • 加载时间
  • 最大内容绘画得分
  • 总体性能得分和核心网络生命力

与此同时，网络速度较慢且数据计划有限的用户和移动用户会遇到缓慢、令人沮丧的用户体验、无响应的页面，甚至被拒绝访问您的网站。 更不用说，他们可能会因尝试加载您的网站而被网络提供商收取额外费用。

毫不奇怪，这意味着您的企业将经历更高的跳出率和退出率、用户参与度下降以及转化率不佳。

最终，不修复“避免巨大的网络有效负载”警告将使您的在线业务和用户付出真正的代价。

幸运的是，PageSpeed Insights 报告可以提供更精细的查看，因此您可以在开始故障排除之前更快地缩小罪魁祸首的范围。

确定巨大网络负载的原因

展开“避免巨大的网络负载”警告将为您提供按文件类型及其服务位置的页面权重的详细细分。

Google PSI 报告中“避免巨大网络有效负载”警告的详细信息

大型网络负载的最常见罪魁祸首是：

  1. 未优化的CSS和JavaScript文件（包括第三方JS）
  2. 大图像和视频
  3. 过度使用插件或第三方库
  4. 未优化的网络字体

当然，下一步是探索哪些技术和优化将帮助您最有效地减小网页大小。

没有时间DIY？ NitroPack 是一款一体化插件，可消除自动驾驶仪上的 PSI 警告。 立即尝试 →

如何避免 WordPress 中的巨大网络负载

1.选择轻量级 WordPress 主题和页面构建器

首先使用轻量级设置可以保证减小页面大小。 一些 WordPress 主题和页面构建器（例如 Divi 和 Elementor）带有过多的功能、自定义选项和预加载的资源，这些资源会导致您的网站迅速膨胀并减慢速度。

WordPress 页面构建器按资源膨胀进行比较

在开发网站之前考虑测试他们的 CSS、JavaScript 和字体。 另外，请查看哪些 WordPress 主题在速度和 Core Web Vitals 性能方面表现出色。

 如果您已经使用臃肿的主题或页面构建器，有多种方法可以优化它们以减少网络负载：

  • 在 CSS 中对页眉、页脚和侧边栏进行编码（避免在页面构建器中执行此操作）
  • 限制额外页面构建器插件的使用，并在此之前测试其 CSS 和 JavaScript
  • 延迟加载背景图像（直接跳到我们推荐的技术）
  • 考虑放弃一些功能以简化页面设计和资源

2. 小心那些让你的网站变得臃肿的 WordPress 插件

WordPress 通过插件提供了大量的功能。

 但是，使用太多插件，尤其是生成动态内容或加载外部资源的插件，可能会增加网络负载。 每个插件可能会添加额外的 CSS、JavaScript 或其他要由浏览器加载的资源，从而导致更大的有效负载。

 您可以采取以下措施来防止 WordPress 插件使页面大小膨胀：

  • 检查您的活动插件是否仍然与您的网站和业务需求相关：对于大型插件集合，网站所有者经常会忘记在特定时刻认为有用的内容，然后忘记在网站开发过程中重新访问插件。
  • 卸载插件 CSS 和 JavaScript：某些插件倾向于在整个站点范围内加载，而实际上，它们只需要在特定页面或元素上触发。 使用像 Asset CleanUp 这样的工具可以帮助您限制它们。 通过卸载不使用的脚本和样式，您可以减小 CSS 和 JavaScript 文件的大小并减少网络负载。
  • 发现 jQuery 依赖项：一些插件严重依赖 jQuery 或使用效率低下。 如果您在 PSI 警告细分中发现最大的 CSS/JS 文件中有插件，请向开发人员求助以优化脚本依赖性。

3. 缩小 CSS 和 JavaScript 文件

缩小涉及从 CSS 和 JavaScript 文件中删除不必要的字符，例如空格、注释和换行符。 消除这些无关元素会对页面大小产生立竿见影的影响。

无需编写任何代码即可缩小 CSS 和 JavaScript。 开始使用 NitroPack →

4. 延迟第三方 JavaScript

一旦确定了第三方罪魁祸首，就可以通过将它们加载到视口下方来降低它们的优先级，从而在主线程中释放空间以获取更重要的资源。

对于某些人来说，手动减少第三方代码的影响可能感觉技术性太强，如果您遇到这种情况，我建议您选择现成的解决方案。 向 Flying Scripts 寻求专门的解决方案或完整的性能优化插件（如 NitroPack）。

5.优化你的图像

未经优化直接将高分辨率图像和视频上传到 WordPress 会导致文件过大。

当您在网页上加载大文件时会发生什么？ 你猜到了。 增加网络负载。

以下是优化图像的几种方法：

  • 调整图像大小：使用图像编辑软件或在线工具手动调整图像大小可能非常耗时。 为了确保图像在不同设备上始终保持正确的尺寸，请探索 NitroPack 的自适应图像大小调整。
  • 压缩图像：将图像压缩 85% 可减少文件大小，而不会显着影响视觉质量。 您可以使用图像压缩插件批量优化媒体库中的现有图像。
  • 以 WebP 格式转换图像：使用 WebP 等下一代图像格式有助于减小图像文件大小，从而更快地加载和提供内容。
  • 延迟加载图像：实施延迟加载以推迟图像的加载，直到它们即将进入视图。 该技术通过仅加载屏幕上可见的图像来减少初始网络负载，而其余图像则在用户向下滚动时加载。

使用 NitroPack 在自动驾驶仪上优化所有图像！ 延迟加载、WebP、自适应图像大小调整等等 →

6.优化你的网页字体

网络字体在资源优化中经常被忽视，但却是导致大量网络负载的首要资产之一。

确保使用专为网络空间设计的字体。 您将通过其 .woff2 格式来识别它们。 此外，在本地托管它们将减少外部请求的数量。

其他有效的字体优化技术包括：

  • 推迟字体加载，直到用户交互需要时才加载
  • 对字体进行子集化并仅使用页面上实际显示的字符而不是字体中的所有可用字形

减少网络有效负载的其他技术

使用CDN

内容分发网络 (CDN) 是分布在全球的服务器网络。 使用 CDN，您可以将网站静态资产的副本（例如图像、CSS、JavaScript 文件和其他媒体）存储在不同地理区域的服务器上。

内容交付网络 (CDN) 解释

当访问者访问您的网站时，CDN 从距离其位置最近的服务器提供这些资产，从而缩短数据传输的距离并最大限度地减少网络延迟。

这会带来更快的内容交付并减少网络负载。 此外，CDN 可以帮助处理流量峰值并在多个服务器之间分配负载，从而提高网站的整体性能和可靠性。

获得高质量 Cloudflare CDN 的所有优势并使用 NitroPack 完成性能优化 →

使用 GZIP 和 Brotli 压缩资源

作为使用 CDN 的逻辑扩展，您应该利用 GZIP 和 Brotli 等压缩技术。 它们可以显着减小网站资源的大小，包括 HTML、CSS、JavaScript 和其他文件。

  • GZIP是一种广泛支持的压缩方法，可以在您的 Web 服务器上启用。 它会在通过网络发送资产之前对其进行压缩，从而减少网络负载并缩短加载时间。
  • Brotli是一种较新的压缩算法，可提供更好的压缩比。

事实上，Brotli 比 GZIP 更灵活，压缩比通常更高。 事实上，Squash Benchmarks 测试得出的结论是，Brotli 在所有压缩级别上都提供了更好的压缩比（意味着它生成了更小的压缩文件）。

应用缓存

缓存是一种将经常访问的数据或资产存储在临时存储中以缩短后续访问时间的技术。

通过实施缓存机制，您可以减少向服务器发出的请求数量，从而最大限度地减少网络负载。

您可以使用不同类型的缓存：

  • 浏览器缓存：在 Web 服务器上配置缓存标头会指示访问者的浏览器在本地存储静态资源。
  • 服务器端缓存：实施服务器端缓存技术，例如对象缓存、页面缓存或数据库查询缓存，可以显着提高动态网站的性能。

使用 NitroPack 自动修复避免巨大的网络负载

减少大型网络负载的第一大要点是使您的网站尽可能精简。

借助 NitroPack，您可以获得 35 多项自动优化，包括：

  • 先进的缓存机制
  • Cloudflare 内置 CDN
  • HTML、CSS 和 JavaScript 缩小
  • 完整的图像优化堆栈（延迟加载、自适应图像大小、WebP 等）
  • 字体子集化

与其他性能优化插件不同，NitroPack 在云端工作，以消除网站膨胀并减少对单独优化插件的需求。

在您的网站上运行演示测试以查看 NitroPack 的实际情况。

加入 18 万网站所有者的行列，获得超过 90 分的 Lighthouse 性能分数！ 3 分钟内设置 NitroPack →

避免未来出现巨大网络负载的最佳实践

为了确保此警告不再影响您的绩效报告，您应该：

  • 定期审核和优化网站资产（至少每28天一次）
  • 在 Web 开发过程中优先考虑性能（是的，这也意味着设计）
  • 测试网站在不同设备和网络上的性能（用GTmetrix模拟）
  • 随时了解网络性能趋势和技术