在网站的典型载荷中，图片和视频所占的比例可能很大。遗憾的是，项目利益相关方可能不愿意从其现有应用中删除任何媒体资源。这种僵局令人沮丧，尤其是当所有相关方都想提高网站性能，但不同意如何实现这一目标时。 幸运的是，延迟加载这一解决方案可以减少初始网页载荷和加载时间，但不会删减内容。
什么是延迟加载？
延迟加载是一种在网页加载时延迟加载非关键资源的技术。而是在需要时加载这些非关键资源。就图片而言，“非关键”通常等同于“屏幕外”。如果您使用过 Lighthouse 并研究了一些改进机会，则可能会在这方面了解到一些关于推迟屏幕外图片审核的指南：
您可能已经见过延迟加载的实际应用，具体过程如下所示：
- 您到达一个页面，并在阅读内容时开始滚动页面。
- 在某个时间点，您将占位符图片滚动到视口中。
- 该占位符图片会突然替换为最终图片。
您可以在热门发布平台 Medium 中找到图片延迟加载的示例。该平台在网页加载时加载轻量级的占位图片，并在这些图片滚动至视口时将其替换为延迟加载的图片。
如果您不熟悉延迟加载，您可能想知道该方法有多实用，以及它有何优势。请阅读下文，一探究竟！
为何要延迟加载图片或视频，而不是仅加载它们？
因为这样可能会加载用户永远不会查看的内容。这样会带来一些问题，具体原因如下：
- 浪费流量。使用不按流量计费的连接时，这并不是最严重的后果（尽管您可能会利用这宝贵的带宽下载用户确实会看到的其他资源）。然而，如果流量套餐有限，加载用户永远看不到的内容实际上是在浪费资金。
- 这会浪费处理时间、电量和其他资源。下载媒体资源后，浏览器必须对其进行解码，并在视口中呈现其内容。
延迟加载图片和视频可以减少初始网页加载时间、初始页面重量以及系统资源用量，所有这些都会对性能产生积极影响。
实现延迟加载
您可以通过多种方式实现延迟加载。您选择的解决方案必须考虑您支持的浏览器，以及您尝试延迟加载的内容。
新型浏览器会实现浏览器级延迟加载，您可以使用图片和 iframe 中的 loading 属性来启用延迟加载。为了与旧版浏览器兼容，或在没有内置延迟加载的情况下对元素执行延迟加载，您可以使用自己的 JavaScript 实现解决方案。此外，许多现有的库也可帮助您做到这一点。如需了解所有这些方法的完整详情，请参阅本网站上的博文：
此外，我们还汇总了延迟加载的潜在问题列表，以及实现过程中需要注意的事项。
总结
谨慎使用延迟加载图片和视频可以显著减少网站的初始加载时间和网页载荷，包括核心网页指标。用户不会产生不必要的网络活动（包括较慢的连接时发生网络争用）以及他们可能永远看不到的媒体资源的处理费用，但他们仍然可以根据需要查看这些资源。
就性能改进技术而言，延迟加载无可争议。如果您的网站中有大量内嵌图像，这是减少非必要下载的好方法。您网站的用户和项目干系人都会因该方法而受益匪浅！