I just attended a Yahoo tech talk here at UCSD, held by Marcell Duran, Yahoo’s Frontend Lead with their Exceptional Performance Team. The tech talk was extremely enlightening and discussed the number one golden rule to boost your website’s performace:
Reduce the number of HTTP requests
While there are several ways to do this, such as making sure to cache content on visitor’s computers, the principle tactic recommended by Yahoo was to attempt to merge all of the JavaScript scripts, CSS stylesheets, and images into as few files as possible.
Tip 1 – Merge JavaScript and CSS: You should combine your JS and CSS pages into one large file JS/CSS page instead of having your site require user’s to fetch script1.js, script2.js, script3.js, …etc.
Tip 2 – Merge Images: Something else I learned tonight about strategies used to optimize load times of Yahoo’s home page is that through CSS, you can effectively “merge” images (called image slicing). When you view Yahoo’s homepage, there is the Yahoo Sites section on the left hand side:
What you may notice is that each Yahoo site has its own icon… or does it? If you inspect closer, Yahoo actually uses a single long image (on the right of this post) over and over again, but obscures most of the image except for the visible “icon” you see. This is image slicing, and is done by delivering only one image, and reusing different regions of the same image multiple times across the web page.
There were several other optimizations mentioned at the tech talk including using image compression, and even base64 encoding an image to have it delivered initially by using a URI scheme. This method is essetially taking the base-64 encoding of an image and embedding the encoded data in the initial HTML payload, instead of having it come up as a separate request for an image–information here.
When your webpage is optimized, Marcell mentioned a few tools that can be used to profile the webpage, specifically YSlow. This tool is a plug-in for Chrome, Firefox, and several other browsers, and analyzes the web page currently being viewed and rates it on 23 different criteria. The first rating mentioned: number of HTTP requests! The best part about YSlow is that it actually gives recommendations on how to optimize areas where the site is slow.
The original presentation available at: Yahoo’s Web Performance Optimization 101 slides.
BrianEsserlieu.com 