避免巨大的网络有效负载
— 更新日期
Appears in: 性能审核
大型的网络有效负载与加载时间较长有很大的关系。另外,这还会提高用户的成本;例如,用户可能需要为更多的移动数据付费。因此,减少页面网络请求的总大小既可以改善用户在您网站上的体验,也可以帮他们省钱。
Lighthouse 网络有效负载审计失败的原因 #
Lighthouse 显示页面请求的所有资源的总大小(单位是 千字节 (KiB) )。首先呈现最大的请求:
根据 HTTP Archive 上的数据,网络有效负载的中位数在 1700 到 1900 KiB 之间。为了筛选出最高的有效负载,Lighthouse 会标记总网络请求超过 5000 KiB 的页面。
如何减少有效负载大小 #
争取将总字节大小保持在 1600 KiB 以下。该目标基于理论上可通过 3G 连接下载的数据量,同时仍可实现 10 秒或更短的Time to Interactive。
以下是一些降低有效负载大小的方法:
- 在真正需要请求之前尽量推迟它们。请参阅 PRPL Pattern 提供的一种可能办法。
- 将请求优化得尽可能小。可能实现的技术包括:
- 缓存请求,避免在重复访问页面时重新下载资源。 (请参阅网络可靠性登录页面来了解缓存的工作原理以及实现方法。)
针对堆栈的具体指导 #
Angular #
应用路由级代码拆分,将 JavaScript 包最小化。此外,请考虑使用 Angular 服务工作进程来预缓存资产。
Drupal #
考虑使用Responsive Image Styles(响应式图片样式)来减小页面上加载的图像的大小。如果您使用视图在页面上显示多个内容项,请考虑实施分页来限制给定页面上显示的内容项数。
Joomla #
考虑在文章类别中显示摘要(例如通过“阅读更多”链接),减少给定页面上显示的文章数量,将长文章分成多个页面,或使用插件来延迟加载评论。
WordPress #
考虑在您的帖子列表中显示摘录(例如通过“更多”标签),减少给定页面上显示的帖子数量,将您的长帖子分成多个页面,或使用插件来延迟加载评论。
资源 #
Last updated: — Improve article