如何使背景图像加载速度更快

Question

我的大多数 WordPress 网站在顶部折叠处都有背景图片。这些图像是页面上最大的 Contentful Paint 元素，通常它们最后加载。我在某处读到 'Background images are last in line to be grabbed when a page is loaded'。是真的吗？
在背景图像的位置使用占位符或图像，然后稍后更改它，以便像下面这样快速加载 LCP 是个好主意。

<div class="header-img"><img style="display: none;" src="images/header-img.jpg" alt=""></div>

.header-img {
width: 100%;
height: 500px;
background-size: cover;
background-image: url(images/header-img.jpg);

}

Source

Answer 1

在这种情况下，您不想使用占位符图像来确定背景图像的优先级，您想要使用 <link rel="preload">。这将告诉浏览器尽快开始下载图像。

尝试将以下代码添加到您页面的 <head> 中，然后照常使用您的背景图片。它应该加载得更快：

<link rel="preload" as="image" href="images/header-img.jpg">

您可以在此处阅读有关此技术的更多信息：

如何使背景图像加载速度更快

How to make background images load faster

wordpress

background-image

core-web-vitals