4

I am trying to improve the performance of my website. In the Chrome DevTools, I see that the request for bg2.jpg is being delayed in starting its download. Chrome DevTools Network Waterfall

I figure this is happening because I am using JavaScript to generate the URL and set it as a background image in CSS and the Chrome browser is deprioritizing the script tag containing this code.

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

My thought is to preload the image using, <link rel="preload" href="img/bg2.jpg" as="image"> in the HTML. My problem is that I have to hardcode the URL for this to work (because my server only runs apache and does not have a true server-side language). My server (host with GoDaddy on a Linux shared host) does give me access to the .htaccess file and there might be a way to use Server Side Includes to inject the random number, but I have not found a way to do this.

Is there a way to do it this way, or a different way to solve this problem?

Update: Looks like I cannot use Server Side Includes. I forgot that I gzip the HTML files before I upload them to the server so that there is a performance boost of serving the compressed static files right from the disk.

Is there a way I can add a random number in the .htaccess file that is passed to the browser?

5
  • Who is your hosting provider? After checking I get similar response times from a statically hosted website on S3. But the current site I work on serves images much faster (183kb png in 205ms) using Nginx on EC2.
    – Lex
    Sep 11, 2018 at 6:26
  • GoDaddy on a Linux shared host
    – Eric
    Sep 11, 2018 at 6:28
  • I understand that my host may serve the images slow, but there is a large empty gap on the network tab before the browser even tries to download the image and there should be a way to reduce this.
    – Eric
    Sep 11, 2018 at 6:35
  • Is starting with an initial image out of the question? For instance, you could start with img0.jpg then randomise from there...
    – user1945782
    Sep 18, 2018 at 14:57
  • I could do that, but the randomization does not happen automatically and I don't think people would be on the page log enough for me to reasonably trigger an automatic switch to another random background.
    – Eric
    Sep 22, 2018 at 2:36

1 Answer 1

1

Since you have 5 random images, an easy way is to use CSS and make them background of any element with 0 size. This will force the browser to load the image before reaching the JS script. Of course, the CSS need to be loaded before your JS and as soon as possible.

So your code can be something like this:

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;
}
3
  • While this will work it will cause all 5 images to download instead of just 1 I need leading to extra resources being consumed. This will actually delay the load of the page because the browser can only download 6 resources per subdomain and when you combine this with the other resources on the page it will cause the last few images to be blocked until one of the 6 connections becomes free. The browsers loading indicator will not stop until all of the resources on the page are loaded.
    – Eric
    Sep 11, 2018 at 16:23
  • @Eric do you really need 5 background images? If performance is your aim perhaps this feature could be nerfed. Or alternatively invest in some server side solution.
    – Lex
    Sep 12, 2018 at 0:38
  • Your right, I could remove the feature and stick with 1 background image, but I would rather take a perf hit than remove it since the slight is basically a playground where I try out new web technologies. It loads pretty quickly in its current state. The server side solution would be overkill just to insert a single value into the code.
    – Eric
    Sep 12, 2018 at 1:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.