采用标准化加载属性的经验教训
本文的目标是说服 CMS 平台开发者和贡献者（即开发 CMS 核心的人员）现在就应该实现对浏览器级图片延迟加载功能的支持。此外，我还会分享一些建议，介绍如何在实现延迟加载时确保提供优质的用户体验，以及如何支持其他开发者进行自定义。这些准则是我们在为 WordPress 添加支持以及帮助 Joomla、Drupal 和 TYPO3 实现该功能时积累的经验。
无论您是 CMS 平台开发者还是 CMS 用户（即使用 CMS 构建网站的人员），都可以通过这篇文章详细了解在 CMS 中实现浏览器级延迟加载的好处。请参阅后续措施部分，了解如何鼓励 CMS 平台实现延迟加载。
背景
在过去一年中，使用 loading 属性延迟加载图片和 iframe 已成为 WHATWG HTML 标准的一部分，并且越来越多的浏览器采用了此功能。不过，这些里程碑只是为更快、更省资源的 Web 奠定了基础。现在，它已在分布式 Web 生态系统中使用 loading 属性。
内容管理系统为约 60% 的网站提供支持，因此这些平台在推动网站采用现代浏览器功能方面发挥着至关重要的作用。一些热门的开源 CMS（例如 WordPress、Joomla 和 TYPO3）已实现对图片的 loading 属性的支持，我们来看看它们的做法以及与在其他 CMS 平台中采用此功能相关的要点。延迟加载媒体是一项关键的 Web 性能功能，网站应该能够从中大规模受益，因此建议在 CMS 核心级别采用该功能。
立即实现延迟加载的理由
标准化
在 CMS 中采用非标准化浏览器功能有助于开展广泛测试，并可发现潜在的改进领域。不过，各个 CMS 的普遍共识是，只要浏览器功能未标准化，最好以相应平台的扩展程序或插件形式实现。只有在标准化后，我们才会考虑在平台核心中采用该功能。
浏览器支持
浏览器对该功能的支持也是一个类似的问题：大多数 CMS 用户应该都能受益于该功能。如果有相当比例的浏览器尚不支持该功能，则该功能必须确保至少不会对这些浏览器产生不利影响。
与视口的距离阈值
延迟加载实现的一个常见问题是，由于加载周期会在较晚阶段开始，因此在图片在用户的视口中显示后，图片不加载的可能性会增加。与之前基于 JavaScript 的解决方案不同，浏览器会以谨慎的方式处理此问题，并且还可以根据实际用户体验数据微调其方法，从而最大限度地减少影响，因此 CMS 平台应能安全地采用浏览器级延迟加载。
用户体验建议
要求元素具有尺寸属性
为避免布局偏移，我们一直建议嵌入的内容（例如图片或 iframe）应始终包含尺寸属性 width 和 height，以便浏览器在实际加载这些元素之前推断出这些元素的宽高比。无论元素是否采用延迟加载，此建议都适用。不过，由于图片在视口中一次未完全加载的可能性增加了 0.1%，因此启用延迟加载后，这种情况会略微减少。
CMS 最好为所有图片和 iframe 提供尺寸属性。 如果无法为每种此类元素执行此操作，建议跳过未提供这两个属性的延迟加载图片。
避免延迟加载可见区域上方的元素
目前，建议 CMS 仅向位于底部的图片和 iframe 添加 loading="lazy" 属性，以避免 Largest Contentful Paint 指标出现延迟，因为在某些情况下，该指标可能会出现明显延迟（如 2021 年 7 月发现的那样）。不过，必须承认，在渲染流程之前评估元素相对于视口的位置非常复杂。如果 CMS 使用自动化方法添加 loading 属性，这一点尤为适用；但即使是手动干预，也必须考虑多种因素，例如不同的视口大小和宽高比。不过，我们强烈建议您不要延迟加载主推图像以及可能显示在可见区域上方的其他图片或 iframe。
避免使用 JavaScript 回退
虽然 JavaScript 可用于向尚不支持 loading 属性的浏览器提供延迟加载功能，但此类机制始终依赖于最初移除图片或 iframe 的 src 属性，这会导致支持该属性的浏览器出现延迟。此外，在大规模 CMS 的前端部署此类基于 JavaScript 的解决方案会增加潜在问题的暴露面，这也是在标准化浏览器功能推出之前，没有任何主要 CMS 在其核心中采用延迟加载的原因之一。
技术建议
默认启用延迟加载
对于实现浏览器级延迟加载的 CMS，总体建议是默认启用该功能，即应向图片和 iframe 添加 loading="lazy"，最好仅针对包含尺寸属性的元素添加。与手动启用（例如按图片启用）相比，默认启用此功能可节省更多网络资源。
loading="lazy" 应尽可能仅添加到可能显示在折叠线下方的元素。虽然由于缺少客户端感知和各种视口大小，因此对于 CMS 而言，实现此要求可能很复杂，但建议您至少使用近似启发词语来省略可能显示在可见区域上方的元素（例如主打图片），以免延迟加载。
允许按元素进行修改
虽然默认情况下应将 loading="lazy" 添加到图片和 iframe，但允许在某些图片上省略该属性至关重要，例如，为了针对 LCP 进行优化。如果 CMS 的受众群体平均而言被认为更懂技术，则可以为每个图片和 iframe 公开此界面控件，以便用户选择停用相应元素的延迟加载。或者，您也可以将 API 公开给第三方开发者，以便他们通过代码进行类似更改。
例如，WordPress 允许为整个 HTML 标记或上下文或内容中的特定 HTML 元素跳过 loading 属性。
改进现有内容
概括来讲，您可以通过以下两种方法向 CMS 中的 HTML 元素添加 loading 属性：
- 您可以从后端内容编辑器中添加该属性，将其永久保存在数据库中。
- 在前端呈现数据库中的内容时，动态添加该属性。
建议 CMS 在呈现时选择动态添加该属性，以便将延迟加载的好处也带给所有现有内容。如果该属性只能通过编辑器添加，那么只有新内容或最近修改的内容才能受益，这会大大降低 CMS 对节省网络资源的影响。此外，如果浏览器级延迟加载功能得到进一步扩展，那么动态添加该属性将使未来的修改变得更加容易。
不过，动态添加该属性应能满足元素上可能存在的 loading 属性，并让此类属性优先。这样一来，CMS 或其扩展程序也可以实现由编辑器驱动的方法，而不会与重复的属性发生冲突。
优化服务器端性能
使用服务器端中间件等工具（例如）动态向内容添加 loading 属性时，速度是一个需要考虑的因素。此属性可以通过 DOM 遍历或正则表达式添加，具体取决于 CMS，但建议使用后者，因为它可以提高性能。
应尽量减少使用正则表达式，例如，使用单个正则表达式收集内容中的所有 img 和 iframe 标记及其属性，然后根据需要将 loading 属性添加到每个标记字符串。例如，WordPress 甚至使用单个通用正则表达式对某些元素执行各种即时操作，其中添加 loading="lazy" 只是其中之一，使用单个正则表达式来实现多项功能。此外，这种优化形式也是建议在 CMS 的核心中采用延迟加载而非扩展程序的另一个原因，因为它可以更好地优化服务器端性能。
后续步骤
查看是否有现有的功能请求工单，以便在 CMS 中添加对该功能的支持；如果没有，请新建一个工单。请根据需要引用这篇文章来佐证您的提案。
如有问题或意见，请向我发推文 (felixarntz@)；如果您的 CMS 已添加对浏览器级延迟加载的支持，请告诉我，以便将您的 CMS 列在此页面上。如果您遇到其他问题，我也非常乐意详细了解，希望能找到解决方案。
如果您是内容管理系统 (CMS) 平台开发者，请研究其他 CMS 如何实现延迟加载：
您可以利用研究成果和本文中的技术建议，开始向 CMS 贡献代码，例如以补丁或拉取请求的形式。
主打照片由 Unsplash 用户 Colin Watts 拍摄。