We get asked this question a lot. The best short answer to this deceptively simple-sounding question is, “it depends.”
The next-shortest answer we have is, “read this article listing some best practices, then read this article on caching.” If you’re impatient or just a really quick study, that’s the heart of this post. If you want a gentler introduction to this subject, please read on.
There are many factors that determine how long it takes to load a website. The kind and clever folks at the Yahoo Devoloper Network have written an excellent article on the matter: Best Practices for Speeding Up Your Web Site. If you maintain a website, you should read this article. If you are considering deploying a new website, you should definitely read this article. While many of their suggestions can be implemented on an existing site, being armed with this knowledge during the deployment of a new site will allow you to make speed a factor in many of your design decisions.
After reading the article, you may find some apparent contradictions that leave you scratching your head – Make JavaScript and CSS External and Minimize HTTP Requests are a prime example. These apparent contradictions bring to mind sevaral points:
- Randomly applying some of these suggestions without considering their effects may not improve your site’s load time.
- Cleverly applying suggestions which are both well-suited to your site and complementary can drastically improve your site’s load time.
- Eventually, optimizing a website to minimize load time will result in some trade-offs.
For example, suppose you move your inline CSS and Javascript code to external files per the aforementioned suggestion. This reduces the size of the file that once included this code, but now you’ve got three HTTP requests where you previously had just one. However, you can now apply two more suggestions from the article that you may not have been able to use with the CSS and Javascript inline:
- Add an Expires or a Cache-Control Header
- Now you can have browsers cache your external CSS and Javascript files, so subsequent visits to your site won’t incur the additional HTTP requests to re-download them.
- Minify JavaScript and CSS
- No one (except for hackers trying to cover their tracks 😉 ) is going to bother to minify inline Javascript and CSS. During development, it can be convenient to have some Javascript and CSS inline. But once your site is live, moving the code to minified external files is simple. If you both minify your Javascript files and use gzip server compression, the transmitted file is only about 15% of its original size.
Careful readers of the Yahoo article will have noticed that caching comes up a lot. Many developers find caching daunting, mysterious or frustrating. While it is all of these things, it is also awesome. Proper caching is essential in the management of a website. So, we recommend another excellent article – this Caching Tutorial. It covers a lot of material, including one extremely simple way to ensure you’re never again pulling your hair out when you update a site but your browser insists on displaying old, cached content.
Finally, if you’re reading this article, you probably know that we run Apache web servers. The Implementation Notes section of the caching tutorial illustrates several methods to easily implement caching with Apache on the SWCP Webfarm.
Happy coding (and caching)!