Company Blog

SCIENCE - TECHNOLOGY - SOLUTIONS

HTTP Requests & Image Sprites

When we redesigned our main website (www.sicsconsultants.com) last month, we took the opportunity to add a few optimizations to the site's design to help it load more quickly for our visitors. One of these optimizations involves a technique known as CSS Image Sprites.

While it might be a questionable use of time spending hours just to shave a few dozen milliseconds off the load time of a website, a few milliseconds here and a few there, repeated over and over again, add up quickly.

In a nutshell, when we use CSS Image Sprites we take multiple small images and combine them into a single larger image.

Why is it better to load a single larger image rather than many small images? 

HTTP Requests Are Slow
When you visit a website, your computer first sends a request to the server hosting the website, asking for the main HTML web page. Once the page is downloaded, your computer begins requesting all of the extra files the page needs to format itself and display properly. These are javascript files, css files, and images---lots of images. For each of these files, your computer identifies the file's web address and then sends an individual request over the internet to the web server, asking the server for that file. When the server receives the request, it sends the file back to your computer for download and display in the web page. 

All of these requests and responses take time. How much time? 

It depends on your computer, the distance between you and the web server, the network pathway through all the switches and routers of the internet, and the web server itself. But we can do some quick calculations to get a rough idea. 

Trying a simple "ping" to a few websites, showing the initial requests and three responses from each:

PING google.com (74.125.196.113): 56 data bytes
64 bytes from 74.125.196.113: icmp_seq=0 ttl=43 time=18.254 ms
64 bytes from 74.125.196.113: icmp_seq=1 ttl=43 time=20.264 ms
64 bytes from 74.125.196.113: icmp_seq=2 ttl=43 time=24.005 ms

PING yahoo.com (98.138.253.109): 56 data bytes
64 bytes from 98.138.253.109: icmp_seq=0 ttl=49 time=108.740 ms
64 bytes from 98.138.253.109: icmp_seq=1 ttl=49 time=94.720 ms
64 bytes from 98.138.253.109: icmp_seq=2 ttl=49 time=95.774 ms

PING news.bbc.co.uk (212.58.244.119): 56 data bytes
64 bytes from 212.58.244.119: icmp_seq=0 ttl=47 time=189.442 ms
64 bytes from 212.58.244.119: icmp_seq=1 ttl=47 time=188.228 ms
64 bytes from 212.58.244.119: icmp_seq=2 ttl=47 time=191.969 ms

From this we can see that, on my internet connection here, the simplest request can take anywhere from about 20 milliseconds to nearly 200 milliseconds. Again, this depends on many factors, from geographic proximity to time of day to your internet connection and computer. But this is a basic idea of how long it can take the simplest bits of information to navigate the internet.


When you consider that an HTTP (TCP/IP) request involves sending multiple packets of data back and forth, the load on a web server, and other complexities, a single request-response could take as much as half a second or more under adverse conditions, even assuming the smallest of files. And considering that many websites load hundreds of these files, even if they're loaded asynchronously the time adds up quickly. 

So, again, HTTP requests are slow. There is a built-in time overhead associated with each request and response. If we can minimize the number of requests a website demands, it can significantly increase the responsiveness and decrease the load time of the page.

CSS Image Sprites
This is an example of one of the combined images, to be used for image sprites, used for the partners section of our site. Traditionally, we would use 5 individual HTTP requests for these images, adding up all the overhead of each request and response 5 times. With this method, we combine all the images into one file, then, just make the request once and use css styles to position the image so that the right image is showing in the right place.

We use the same technique for our icons, our clients, our partner logos, and our project highlights.

All together, we've taken 31 HTTP requests and reduced it to 4 with just these examples. It could be reduced further by combining the similarly sized icons and client logos, and perhaps the partners and project highlights. But when we get down to these small numbers we get diminishing returns to optimization. 

Visitor experience is the most significant improvement. But when we're building websites, we also have to think about server load and planning to manage network traffic. Reducing the total number of HTTP requests per visit is one of the most significant optimizations to server and network load as well.