如何加快網站背景圖片的加載速度？

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)`);

我的想法是預加載使用，圖像<link rel="preload" href="img/bg2.jpg" as="image">中的HTML。 我的問題是我必須硬編碼 URL 才能工作（因為我的服務器只運行 apache 而沒有真正的服務器端語言）。 我的服務器（在 Linux 共享主機上使用 GoDaddy 的主機）確實讓我可以訪問 .htaccess 文件，並且可能有一種方法可以使用服務器端包含來注入隨機數，但我還沒有找到一種方法來做到這一點。

有沒有辦法做到這一點，或者有不同的方法來解決這個問題？

更新：看起來我不能使用服務器端包含。 我忘記在將 HTML 文件上傳到服務器之前對它們進行 gzip 壓縮，以便直接從磁盤提供壓縮靜態文件的性能提升。

有沒有辦法可以在傳遞給瀏覽器的 .htaccess 文件中添加一個隨機數？

Answer 1

由於您有 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;
}