介绍
优化网页速度的一个有效但经常被忽视的策略是推迟屏幕外资源加载。
默认情况下，当用户加载网页时，浏览器会立即请求页面上的所有图像和 <iframe> 元素（例如 YouTube 嵌入、交互式地图、社交小部件或广告脚本），即使它们位于折叠下方很远的位置。这种并发下载会阻塞主线程并减慢页面的首次内容绘制 (FCP) 时间。
HTML 标准本机延迟加载 (loading="lazy") 解决了此问题。本文介绍了如何配置图像和 iframe 的延迟加载，并说明了关键的优化规则。
1. 什么是原生延迟加载？
本机延迟加载允许您推迟加载离屏图像和 iframe，直到用户滚动到它们附近，只需添加 HTML 属性即可。
它是如何运作的
- 没有延迟加载（默认）： 浏览器会在页面加载时立即下载所有图像和 iframe 脚本，甚至包括隐藏在页面底部的图像和 iframe 脚本。
- 使用本机延迟加载 (
loading="lazy")： 浏览器仅下载初始视口内或附近的资源，延迟其余部分，直到用户向下滚动。
2. 实现示例
① 延迟加载图像
将 loading="lazy" 属性直接添加到 <img> 标记中：
<!-- Lazy-loaded image -->
<img src="large-photo.jpg"
alt="Detailed product showcase"
width="800"
height="600"
loading="lazy">
- 重要的：
始终在延迟加载的图像上指定显式
width和height属性（长宽比）。如果没有这些尺寸，浏览器会假定图像高度为0直到加载，这可能会导致元素在检索图像后跳转。这种不和谐的转变被标记为累积布局转变（CLS）。
② 延迟加载 iframe（嵌入内容）
您可以将相同的属性应用于第三方 iframe，例如 YouTube 嵌入或 Google 地图：
<!-- Lazy-loaded YouTube video embed -->
<iframe src="https://www.youtube.com/embed/example"
width="560"
height="315"
loading="lazy"
title="Product Demo Video"
frameborder="0"
allowfullscreen>
</iframe>
- 好处： 第三方 iframe 通常会加载繁重的 JavaScript 库。将这些请求推迟到用户滚动到它们时可以缩短页面的初始阻止时间 (TBT)。
3. 何时不使用延迟加载
请勿将 loading="lazy" 应用于页面上的所有图像。有一个重要的例外：
首屏（英雄）图像
切勿将 loading="lazy" 应用于初始视口中的图像，例如主标题背景或特色博客文章。
- 为什么： 浏览器必须在开始下载之前计算元素的位置。对于首屏图像，这个额外的处理步骤会延迟图像下载，从而损害您的最大内容绘制 (LCP) 分数。
优化首屏图像
不要延迟加载，而是删除该属性并考虑在 HTML <head> 标记内添加 preload 链接，以优先考虑 LCP 资源：
<!-- Preloading critical above-the-fold images -->
<link rel="preload" as="image" href="hero-image.jpg">
结论
实现本机延迟加载是提高初始页面加载性能的直接方法。
- 将
loading="lazy"应用于位于首屏下方的所有图像和 iframe。 - 指定显式
width和height尺寸以防止布局偏移 (CLS)。 - 不要延迟加载首屏图像；使用预加载代替。
将这些实践合并到您的项目模板中以构建高性能网页。