手札

如何避免大量网络有效负载的简单解决方案

如果您刚刚通过 PageSpeed Insights 或 Lighthouse 运行您的网站，您可能会盯着“避免巨大的网络有效负载”诊断消息，如果页面的文件大小超过 1.6 MB，则会触发该消息。

值得庆幸的是，有一些简单的方法可以减小页面大小并修复诊断问题。

什么是巨大的网络有效负载？

网络有效负载是指在网站服务器和客户端浏览器之间传输的数据大小。

这是您的网站每次有人访问页面时都必须加载的数字“货物”。这包括构建内容的 HTML 文件、设置内容样式的 CSS 文件、添加交互性的 JavaScript 文件以及增强用户体验的图像和视频等媒体文件。

换句话说，它是使您的页面对人类访问者可见所需的所有内容的总大小。HTTP Archive 的数据显示，中位数大小在 1,700 到 1,900 KiB（1.7 到 1.9 MB）之间 ^[1]。

如果网页的总大小超过 1,600 KiB，Google 将触发避免大量网络有效负载诊断。

可能使网络有效负载膨胀到如此巨大比例的一些因素包括：

如果您在 PageSpeed Insights 中展开诊断，它将向您显示导致您网站大型网络有效负载的确切请求。

除了提高 PageSpeed Insights 分数外，以下是您应该学习如何避免大量网络负载的一些具体原因：

加快您的网站速度：减少网络有效负载将帮助您加快网站速度，这对跳出率、转化率、搜索引擎优化（SEO）和改善用户体验有各种好处。
针对移动用户进行优化：Statista 报告称，截至 2023 年，所有网络流量的 58.33% 来自移动设备 ^[2]。这些冲浪者经常在移动中，依赖的宽带连接可能不如常规 Wi-Fi 或 LAN 稳定。再加上巨大的网络负载，结果将严重损害移动浏览体验。
减少带宽使用（对于您和访问者）：巨大的网络有效负载不仅会减慢您的网站速度，还会占用更多带宽。其影响是双重的。对于您（网站所有者）来说，更高的带宽使用量可能意味着更高的托管成本。对于您的访问者，尤其是那些使用有限数据计划的访问者，这可能会导致额外费用。

如果您正在为如何避免巨大的网络有效负载而苦苦挣扎，请尝试实施以下四种策略：

图像通常是网页加载缓慢和大型网络有效负载背后的罪魁祸首，因为它们占数据的 60%。因此，通过优化图像，您应该能够大幅减少网络有效负载并提高速度。

👉 您可以通过几种不同的方法通过优化图像来减小网络有效负载的大小：

压缩您的图像 – 使用有损或无损算法压缩图像将帮助您缩小其文件大小，从而减少网络有效负载。
将图像大小调整为尽可能小的尺寸 – 将图像的尺寸减小到最小的可用尺寸也有助于缩小其文件大小。
使用优化的图像格式 – 使用优化的下一代图像格式（如 WebP 和 AVIF）是减小图像文件大小的另一种好方法。
延迟加载图像 – 延迟加载可让您等待加载首屏图像，直到用户向下滚动。虽然如果用户完全参与您的页面，图像最终仍会加载，但延迟加载可让您减少加载可见内容所需的初始网络有效负载。

如果您使用的是 WordPress，免费的 Optimole 插件可以帮助您自动实施所有这些策略。

它使用实时自适应优化技术，根据访问者的设备和连接速度，向每个访问者提供优化的图像。

除了实施我们上面列出的所有四种图像优化策略外，Optimole 还将从其内置内容交付网络（CDN）提供您网站的图像。虽然 CDN 不会额外减少网络有效负载大小，但它仍然会通过减少图像的下载时间来加快您的网站速度。