gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 07:40:15 24 4
gpt4 key购买 nike

我的大多数 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);
}
Source

最佳答案

在这种情况下,您不想使用占位符图像来确定背景图像的优先级,您想使用 <link rel="preload"> .这将告诉浏览器尽快开始下载图像。
尝试将以下代码添加到 <head>您的页面,然后像往常一样使用您的背景图像。它应该加载得更快:

<link rel="preload" as="image" href="images/header-img.jpg">
您可以在此处阅读有关此技术的更多信息:
  • Preload critical assets to improve loading speed
  • Preloading responsive images
  • 关于wordpress - 如何使背景图像加载更快,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67518245/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com