Even though the original Nintendo system is more than 2 decades old, it’s actually the source of inspiration for another way to increase web site performance!
I’m getting ahead of myself, though. Let’s start with the problem. Every web site has external files that it needs in order to be presented properly. These files are usually images, Javascript libraries, and CSS documents. When the browser goes to look at a web page containing references to these external files, it automatically goes and requests those files.
Each time it has to request a file, it goes through the entire process of:
1. Sending the request all the way through the internet to the web server
2. Waiting for the web server to look for the file and comes back with an initial response (which is sent all the way back through the internet)
3. Downloading the data, saving and using it.
Normally, this process goes pretty quickly and you see a whole page displayed in 4 or 5 seconds.
In those 4 or 5 seconds, there’s a good chance that 20% of the time is wasted in the first 2 steps by making the browser go back to the web server over and over again, while it requests the 30 images that make up your pretty little web page. The time it takes for the browser to get ANY data to (a request) and from (a response) the web server is referred to here as network overhead. The farther away the server, the more overhead you have.
So the problem that we’re going to tackle is the overhead involved in a site that has a lot of external pieces. Now back to Nintendo:
One of the programming tricks of early video games was using sprites. In case you aren’t familiar with the term (besides the drink), here’s the idea: instead of having all the different images in the game be separate images that have to be accessed from storage (which is slow) each time that they need to be shown, the game designers would put all (or most) of the images right next to each other into one big image. Then, the game would load that one big image into memory (which is fast), and then use a simple coordinates system to display a small section of that already-loaded image, which ended up giving them the image they wanted.
Think of it as having a workbench with some tools on it. You’re working across the room on some project and you occasionally want access to different tools. Do you walk across the room each time you need a hammer, then use it, and then go back and put it back on the bench? No – that would be very slow and inefficient. Instead, you move the workbench over to the other side of the room so you can just reach to your left and pick up the hammer when you need it and put it down. All the tools you need are right there on one workbench, which is now right next to you!
So how do we apply this concept to web page performance?
Most web pages have user interfaces that are made up of several images that have been stitched together with code so they look like one seamless interface. However, if we take the “sprites” concept and put all the images together into one image, then we’ve instantly reduced:
1. The number of times the browser has to go request something from the web server.
2. The load on the web server.
3. The number of records in the web server log.
4. The time it takes to load each image on the browser’s side of things.
In terms of performance, we’ve dramatically reduced that network overhead. So now we have to figure out how to tell the browser to only show the correct parts of that “master” image. This is where CSS comes in.
The background property of CSS allows you to specify an image or a color as the background of just about any element. If you use an image, then you can also provide “offsets” which basically tell the background to start displaying at a certain position. The CSS code looks something like this:
background: transparent url(“TheMasterImage.gif”) -123px -456px no-repeat;
That tells the browser to use TheMasterImage.gif as the background, and to move over to the right by 123 pixels, and then down 456 pixels. That should correspond to the top-left corner of an image that is inside TheMasterImage.gif. Now we’re getting somewhere!
At this point, all you have to do is take whatever HTML element that has this background applied to it, and then make the size of the element be the width and height of the image that you want to display. Enough talk – let’s look at an example:
Hey, it’sa Mario!
| The left side (0px and 0px) | |
| And the right side (-46px and 0px) |
Here we can see it in action! Even though you’ve only downloaded one image file, it looks just like two images with the magic of CSS!
Of course, with any trick, there are downsides. Being a background, there could be issues with printing the page if background printing is disabled. There may also be older browsers that are unable to properly display CSS backgrounds. Finally, assembling the master image and the list of coordinates takes a little bit of effort and time.
However, if your web page isn’t really meant to be commonly printed out, and does not have to conform to browser requirements from 10 years ago, (and you actually care enough about performance), then put this trick to work for you! It’s good for your visitors and for your web server!
The topic for next time will be optimizing Javascript and CSS files.