Video - Make Your Webpage Load Faster by Prefetching Resources

This video by Shawn Brenneman, Google software engineer on Picasa Web Albums, explains how pre-fetching can speed up the downloading of images on your webpage.

Image pre-fetching is a technique to make the browser load and decode resources early. Image pre-fetching can be used to create smooth image transition effects. You might have noticed that the first time you click on a button, the transition is not smooth. The solution is to make the browser load the image and keep it in cache.

Large image files take longer to download than the HTML on a webpage. The sooner that you make the request for the image file, the sooner the webpage gets downloaded. If you make the request at the begiining of the HTML page, the image and the HTML code will get to the user at about the same time.

You can use the Image() JavaScript object to make the browser pre-fetch the images. An example of the javascript code for creating the image object is shown below.

<script type="text/javascript">

var myImage = new Image();
myImage.src = "imagename.gif";

</script>

<img src="imagename.gif" />

Prefetching applies to more than just image files, it also applies to other web page resources like Java Script code files and Style code files. If you make the requests for these resources at the begiining of the HTML page they can all get to the user at about the same time.

RSS Feed

 Follow @Stephen Bucaro

 General Web Design
 HTML Quick Reference
 CSS Quick Reference
 Java Script Quick Reference
 HTML Design
 Graphics Design
 Easy Cascading Style Sheets
 Easy Java Script Code
 Web Design Tools
 Coding Issues