By Craig Hyde
Web designers and developers are always looking for ways to speed up their page load times. Yahoo has an excellent article written on the best practices for speeding up your page. How do you know if implementing one of their suggested practices will actually increase the performance of your page? The short answer is: you don’t.
When looking to implement some of these suggestions, it is important to understand what problem it aims to solve and whether it is advantageous for your site. Some techniques may require a lot of work, and little or no benefit. An optimization technique may actually decrease performance if the preconditions of the site do not match the preconditions of the technique. There are some techniques where the only sure proof way of knowing the benefit is to test it, and there are some that will be optimal no matter what. Lets look at an example of each.
A popular technique is to use a data URI (Uniform Resource Identifier) scheme seems to respond directly to Yahoo’s first rule of limiting HTTP requests. The standard method of loading images on a web page requires that each image has its own URL (Uniform Resource Locator.) The browser must make a separate HTTP request for each image. At first glance it makes sense that this technique be beneficial anytime we are loading more than one image to the page, since we don’t have to make extra requests to the URLs if we just request one page with all of the URIs. But there are a lot of other variables involved:
- Modern browsers can run many HTTP requests in parallel.
- Data URIs for images with Base64 encoding can be about 30% larger than the original.
- The images may already be cached for returning visitors.
- Duplicate images on the same page need not be requested.
There is a lot to take into a consideration to determine if implementing this technique is worth it. Although this method can decrease page load time, there are better places to start.
We want a technique that will improve the page load time under all circumstances. Compressing, smushing, or crushing your PNGs is one of these techniques. There are plenty of image optimization tools out there, but they all more or less do the same thing. They decrease the file size of your images, which makes it faster for visitors to download your page. Period. You can try Yahoo’s online tool here: http://www.smushit.com or you can download other tools like Pngcrush or RIOT.
There are tons of tutorials and guidelines to follow when looking to speed up your web page. The most important tip is to start with the simple techniques that provide performance under any condition. Optimizing images by decreasing the file size should be one of the first things you do.