如何加速我的网站背景图片加载？

Question

如何加速我的网站背景图片加载？

javascripthtmlcssgoogle-chromeweb-performance

4

我正在尝试提高网站的性能。在Chrome DevTools中，我发现对于bg2.jpg的请求延迟了开始下载。

我猜测这是因为我使用JavaScript生成URL，并将其设置为CSS中的背景图像，而Chrome浏览器正在降低包含此代码的脚本标记的优先级。

let bgImgName = "bg" + Math.floor(Math.random() * 5);
...
document.documentElement.style.setProperty("--bgUrl", `url(img/${bgImgName}.jpg)`);

我的想法是在HTML中使用<link rel="preload" href="img/bg2.jpg" as="image">来预加载图片。问题是，我必须硬编码URL才能使其工作（因为我的服务器只运行apache，没有真正的服务器端语言）。我的服务器（在Linux共享主机上与GoDaddy合作）允许我访问.htaccess文件，可能有一种方法可以使用服务器端包含来注入随机数，但我还没有找到方法。

有没有一种方法可以这样做，或者有不同的方法来解决这个问题？

更新：看起来我不能使用服务器端包含。我忘记了在上传到服务器之前对HTML文件进行gzip压缩，以便从磁盘直接提供压缩的静态文件以提高性能。

有没有办法在.htaccess文件中添加传递给浏览器的随机数？

- Eric

你的托管提供商是谁？经过检查，我发现使用S3静态托管的网站有类似的响应时间。但是，目前我在工作的网站使用EC2上的Nginx，在服务图像方面速度更快（205毫秒内完成183kb的png文件）。 - Lex

GoDaddy 在 Linux 共享主机上。 - Eric

我知道我的主机可能会慢速提供图像，但在浏览器尝试下载图像之前，网络选项卡上有一个很大的空白间隔，应该有一种方法来减少这个问题。 - Eric

以初始图像开始是否不可行？例如，您可以从 img0.jpg 开始，然后从那里随机选择... - user1945782

我可以做到，但随机化不会自动发生，而且我认为人们不会在页面上停留足够长的时间，以便我可以合理地触发自动切换到另一个随机背景。 - Eric

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

既然您有5张随机图片，一种简单的方法是使用CSS将它们作为任何大小为0的元素的背景。这将强制浏览器在到达JS脚本之前加载图像。当然，CSS需要在您的JS之前尽快加载。

因此，您的代码可以像这样：

html {
  background-image:
    url("img/bg1.jpg"),
    url("img/bg2.jpg"),
    url("img/bg3.jpg"),
    url("img/bg4.jpg"),
    url("img/bg5.jpg");
  background-size:0 0;
}