Google recently announced that they began factoring in web site load time into their search engine ranking algorithm. This has brought the importance of a fast load time front and center even though “fewer than 1% of search queries will change as a result” of this update. MentorMate.com likely was not impacted very significantly from this change to Google’s ranking algorithm; however, we still decided to optimize our site’s load time. We did this because Google showed that “delays of under a half-second impact business metrics.” It’s better to be safe than sorry, and besides, it’s not that difficult to optimize your site. We recommend you do the same with your web site, here are nine easy ways to do just that:
1. Place scripts near closing body tag
Scripts block parallel downloads. While a script is downloading, the browser will wait until it finishes before downloading anything else. This is why it is recommended that you get everything else out of the way before having your users download scripts.
2. Remove any broken links/references
Simply enter your web page URL in Pingdom’s Full Page Test Tool. This tool will color-code any broken links/references in red so you can easily identify them.
3. Specify image dimensions
4. Localize external file references to minimize DNS requests
This is another spot in which Pingdom’s Full Page Test Tool comes in handy. Enter your URL and look for any file references to external domains. If possible, copy these files onto your own domain and link to them locally to minimize DNS requests.
5. Minimize slow-loading libraries and external widgets
Libraries and external widgets need to be chosen carefully. Sometimes it’s worth sacrificing load time for particularly engaging/useful libraries and/or widgets; however, sometimes you can live without the library and/or widget. For example, on MentorMate.com we felt it was worth sacrificing Sexybuttons for better load time, but sacrificing load time for Shadowbox. External widgets can be particularly bad for a site’s load time because of their reliance on external servers.
6. Compress your files using gzip
These days, gzip comes pre-installed on most web servers. You can check to see if gzip is running your server quite easily using Google’s Firebug “Speed Test” extension. Open Firefox, visit the web site you’d like to optimize, and open Firebug. From there, click “Analyze Performance” and select the “Resources” tab. Then you can expand any file to view details. If gzip is installed and compressing the element you are viewing, you will see what is highlighted in red in the following screenshot:
8. Load cross-browser compatibility hacks only for necessary browsers
For instance, we use the IE PNG FIX for IE6 PNG transparency compatibility. This script adds an extra second to web site load time. For this reason, we only load the script if the visitor is running IE6 by applying an IE6-specific stylesheet which references the IE PNG FIX. This way the extra load time will only impact IE6 visitors.
We simply added the following line of code to our header:
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" /><![endif]-->
9. Use CSS sprites to minimize HTTP Requests
A CSS sprite is the combination of multiple images into one. Then CSS is used to reference different aspects of the image where needed. This reduces load time by minimizing all of these images into only one HTTP request. CSS Tricks has a good example of CSS sprites.