网络载荷量较大与较长的加载时间密切相关。 它们还会让用户付费;例如,用户可能必须付费才能使用更多的移动数据网络。因此,减少网页的网络请求的总大小有利于改善用户在您的网站及他们的钱包中的体验。
Lighthouse 网络载荷审核如何失败
Lighthouse 会显示您的页面请求的所有资源的总大小,以千字节 (KiB) 为单位。系统会先显示最大的请求:
![Lighthouse 避免大量网络载荷审核的屏幕截图](https://developer.chrome.google.cn/static/docs/lighthouse/performance/total-byte-weight/image/a-screenshot-the-lightho-5edd6e4e68e25.png?authuser=8&hl=ro)
根据 HTTP Archive 数据,网络载荷中位数介于 1700 到 1900 KiB 之间。为了帮助显示最高载荷,Lighthouse 会标记网络请求总数超过 5,000 KiB 的页面。
如何缩减载荷大小
尽量将总字节大小保持在 1600 KiB 以下。此目标基于理论上可通过 3G 连接下载的数据量,同时仍能实现 10 秒或更短的可交互时间。
您可以通过以下几种方法来减少载荷大小:
- 在需要时推迟请求。 如需了解一种可能的方法,请参阅 PRPL 模式。
- 将请求优化为尽可能小。可能采用的技术包括:
- 缓存请求,以免网页在重复访问时重新下载资源。(请参阅网络可靠性着陆页,了解缓存的工作原理及实现方法。)
针对特定堆栈的指南
Angular
应用路由级代码拆分以尽量减小 JavaScript 软件包的大小。此外,您不妨考虑使用 Angular Service Worker 预缓存资源。
Drupal
请考虑使用自适应图片样式来缩减网页上加载的图片的大小。如果您使用 View 在一个页面上显示多个内容项,不妨考虑实现分页,以限制给定页面上显示的内容项的数量。
Joomla
考虑在文章类别中显示摘录(一种常用的解决方案是“阅读更多”链接)、减少给定页面上显示的文章数量、将长博文拆分为多个页面,或使用插件延迟加载评论。
WordPress
您可以考虑在博文列表中显示摘录(可以使用“更多”标记)、减少给定页面上显示的帖子数量、将长博文拆分成多个页面,或者使用插件延迟加载评论。