html背景图片加载慢,javascript – 如何加快我网站的背景图片加载速度？

我正在努力提高

website的性能.在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)`);

我的想法是preload使用的图像,< link rel =“preload”href =“img / bg2.jpg”as =“image”>在HTML中.我的问题是我必须对此URL进行硬编码才能工作(因为我的服务器只运行apache并且没有真正的服务器端语言).我的服务器(在Linux共享主机上使用GoDaddy的主机)确实允许我访问.htaccess文件,并且可能有一种方法可以使用Server Side Includes来注入随机数,但我还没有找到方法来执行此操作.

有没有办法这样做,或者以不同的方式来解决这个问题？

更新：看起来我不能使用服务器端包含.我忘记了在将HTML文件上传到服务器之前对其进行了gzip,这样就可以直接从磁盘提供压缩的静态文件.

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