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

Question

我正在努力改善我的网站的性能.在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文件中添加一个传递给浏览器的随机数？