I have a team member experimenting with base64 encoding of images to reduce HTTP requests (that’s a mouthful). I’m not going to try to explain what this involves, but it isn’t as complex as it first sounds. You can get more info on base64 encoding on this blog post by James McCaffrey. One of the side effects of this technique is it increases file size. So, the question is, what’s better for the performance of your web pages, a few large files or many small ones? Since HTTP requests are costly and bandwidth is plentiful, I’ll take a few large files for $500 Alex.

Did you know it’s faster to download a few large files than it is to download multiple small files of the same cumulative size as the large files? How is that so? It’s because of our nemesis Round Trip Time or RTT for short. RTT is the measure of the time it takes for a TCP packages to be sent to a server in a client request and sent back to the client in a server response. If you look at Yahoo’s Best Practices for Speeding Up Your Website, many of the rules address reducing RTT.

The main problem with RTT is that there is a delay caused by network latency. The latency is compounded when a DNS lookup has to be performed. When every you can reduce DNS lookups you reduce RTT delay. So, requesting one file instead of many is a great strategy. Whether you base64 encode images into your CSS file, combine images to sprites, use caching to prevent unchanged assets from being requested, reduce the number of domain names requested, or you combine your JavaScript files to one file, anything you do to reduce RTT will improve the performance of your web pages.

There are still a lot of people out there that believe the way to improve performance is to first improve issues on the back end, optimize servers and server side code. Don’t be fooled, about 80% of the time used to download a page is affected client side in the browser. You can look at this easy to understand research from Yahoo’s UI team. Next time you look at a waterfall performance report, remember that if the little bar that represents the initial request and response from your server is small in comparison to the rest of the assets downloaded, forget about throwing servers and backend code optimization at your performance problem. Look at client side optimization and maybe even base64 encoding.

In website performance the client is probably not right. Fix the client and your site will not suffer from the effects of RTT delay.

View more posts in: Lost In Space  Performance Optimization