时间戳

首页 > 解决方案 > 如何使背景图像加载更快

wordpress - 如何使背景图像加载更快

问题描述

我的大多数 WordPress 网站的顶部都有一个背景图片。这些图像是页面上最大的内容绘制元素，通常它们最后加载。我在某处读到“加载页面时要抓取的背景图像排在最后一行”。这是真的吗？
在背景图像的位置使用占位符或图像是一个好主意，然后稍后更改它，以便 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);

}

资源

标签： wordpressbackground-imagecore-web-vitals

解决方案

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

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

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

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

推荐阅读