Как я могу ускорить загрузку фонового изображения для моего сайта?

Question

Я пытаюсь улучшить производительность моего веб-сайта . В Chrome DevTools я вижу, что запрос на загрузку bg2.jpg задерживается с момента начала загрузки.

Я полагаю, что это происходит, потому что я использую JavaScript для генерации URL и установки его в качестве фонового изображения в CSS, а браузер Chrome депортирует тег script, содержащий этот код.

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 и не имеет истинного серверного языка). Мой сервер (хост с GoDaddy на общем хосте Linux) действительно дает мне доступ к файлу .htaccess, и, возможно, существует способ использовать На стороне сервера для ввода случайного числа, но я не нашел способ сделать это.

Есть ли способ сделать это таким образом, или другой способ решить эту проблему?

Обновление: Похоже, я не могу использовать Включения на стороне сервера. Я забыл, что я распаковываю HTML-файлы перед тем, как загружать их на сервер, чтобы повысить эффективность обработки сжатых статических файлов прямо с диска.

Есть ли способ добавить случайное число в файл .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;
}