提高页面性能：使用 HTML img 惰性属性和链接预加载图像

我们可以轻松地做两件事来提高我们网页上的图像性能：
1. 延迟加载图像：基本上，延迟加载图像意味着仅当我们需要在视图中显示它时才对该 img 发出请求。
让我们举一个例子，我们有一长串垂直图像：

<img src="cat1.png" />
<img src="cat2.png" />
<!-- many cats here -->
<img src="cat25.png" />

默认情况下，页面将请求所有这些，即使只有第一个在初始视图中。这将使我们的页面加载速度变慢。

但是，如果我们添加 loading=”lazy”，浏览器将仅在用户向下滚动到该特定图像时请求 img。我们只在需要时加载图像。

<img src="cat1.png" loading="lazy"/>
<img src="cat2.png" loading="lazy"/>
<!-- many cats here -->
<img src="cat25.png" loading="lazy"/>

loading 属性的第二个接受值是 loading=”eager”。但与默认相同；因为没有声明 loading 属性。

2.预加载关键大图片：我们可以使用链接rel=preload提前请求大图片：

<link rel="preload" as="image" href="donut.jpg">