Preloading JavaScript Images

Web Performance Optimization Discussions
1

Hey There,

What do you guys think about preloading JavaScript images?

http://www.webpagetest.org/result/100623_CYF/1/details/
http://www.webpagetest.org/result/100623_CYH/1/details/

You can see a few different images downloading while the base document is being downloaded.

In the later example that uses FIOS, it looks like it might be beneficial to load all the images in the middle using javascript in the header section with the rest of my images near the top.

Do you guys think it would be best to preload all images in the header? Any thoughts or suggestions?

Thanks in advance.

Sincerely,
Travis Walters

2

I dont know how JS preloading works… but if it is not asynchronous, itll probably delay the start rendering by a lot… give it a test n let us know :slight_smile:

3

Hey Guys,

Here are some before and after shots. The test page content is dynamic each time it loads so that does effect the results a little.

FIOS Connection:
Before: http://www.webpagetest.org/result/100623_CYH/
After: http://www.webpagetest.org/result/100623_DVW/

DSL Connection:
Before: http://www.webpagetest.org/result/100623_CYF/
After: http://www.webpagetest.org/result/100623_DVV/

In general, preloading images with JavaScript seemed to reduce the load time of the webpage.

<script type="text/javascript">
var preloadImage1=new Image(800,269);
preloadImage1.src="http://images9.green-watch.org/img/buttons2.png";
</script>

The above code demonstrates how to preload an image with JavaScript.

Sincerely,
Travis Walters

4

Try running a video comparison to see what the user experience looks like for both cases (and try it on IE8 as well). Usually I wouldn’t recommend it and let the browser fetch stuff as it parses the DOM because you really want to make sure you get the HTML and CSS done and laid out to get the text content in front of the user as soon as possible but there are always exception cases.

5

Hey Patrick,

Can you explain a little more why this is a bad idea in general?

Does preloading images block the text from being sent to the user or rendered by browsers?

What about if preloading occurs after the style.css file is loaded?

What if preloading of images occurs on a different subdomain than CSS files to avoid blocking?

Can you give an example of when preloading images would be a good idea?

This would help me and other users know when to use it and when not to in order to improve performance.

Sincerely,
Travis Walters

6

In the case where you have limited bandwidth the images will compete with the text and css (assuming it is on a different sub domain). If it isn’t on a different sub-domain then you could be blocking the text/css outright.

That’s mostly why it’s sort of one of those > beginner optimizations. If you really know what you’re doing and have already done the other optimizations then you might be able to squeak some more performance out (but make sure it’s not just the line in the chart getting faster and that the user experience is actually better).

Certainly I wouldn’t recommend even looking at doing this until you have at least handled the basic optimizations (which I know you have but a lot of people haven’t).

Thanks,

-Pat