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
PING google.com (18.104.22.168): 56 data bytes
64 bytes from 22.214.171.124: icmp_seq=0 ttl=43 time=18.254 ms
64 bytes from 126.96.36.199: icmp_seq=1 ttl=43 time=20.264 ms
64 bytes from 188.8.131.52: icmp_seq=2 ttl=43 time=24.005 ms
PING yahoo.com (184.108.40.206): 56 data bytes
64 bytes from 220.127.116.11: icmp_seq=0 ttl=49 time=108.740 ms
64 bytes from 18.104.22.168: icmp_seq=1 ttl=49 time=94.720 ms
64 bytes from 22.214.171.124: icmp_seq=2 ttl=49 time=95.774 ms
PING news.bbc.co.uk (126.96.36.199): 56 data bytes
64 bytes from 188.8.131.52: icmp_seq=0 ttl=47 time=189.442 ms
64 bytes from 184.108.40.206: icmp_seq=1 ttl=47 time=188.228 ms
64 bytes from 220.127.116.11: 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.