One major "best practice" from both Yahoo! YSlow and Google Page Speed is minimizing HTTP requests. Yahoo! indicates that "80% of the end-user response time is spent on the front end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc." cite
What does this mean? The fewer calls your page makes to the server, the faster your page is. Here are three ways to drastically improve your site response time:
- Combine your stylesheets and scripts so that you only have to load one CSS file and one JS file.
- Compress and minify the combined files so you save bandwidth and transfer time.
- Cache the compressed output so your server doesn't have to repeat the process for each new visitor.
Here's one way to accomplish this:
The first time the script is called (ever), it may take a few seconds to generate the cache file, but every time after that it will load extremely quickly due to the "three Cs" implemented above. Since minification is part of the process, you can work directly with unminified and commented code on the server, and let the script minify it for you. If you normally load 3+ stylesheets or scripts, you will see a massive performance boost with this type of script.
Do you have a favorite method of combining scripts to improve website performance? Please share it in a comment!