如何解决如何使背景图像加载速度更快
我的大多数 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);
}
解决方法
在这种情况下,您不想使用占位符图像来确定背景图像的优先级,而是想使用 <link rel="preload">
。这将告诉浏览器尽快开始下载图像。
尝试将以下代码添加到您页面的 <head>
,然后照常使用您的背景图片。它应该加载得更快:
<link rel="preload" as="image" href="images/header-img.jpg">
您可以在此处阅读有关此技术的更多信息:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。