How to: Speed up Your Website
Getting your website to load faster is not like running the 100m – or a marathon. It doesn’t need training or a team behind you to make noticeable improvements. All it takes is a little know-how (which I’ll help you with), an actual website and a few minutes of your time.
The first step to making your website faster is knowing where the problem lies.
Analyse Your Site
There are two highly accepted methods of evaluating your website’s performance which anyone can do:
Using browser extensions like YSlow and PageSpeed can give you realistic statistics on how quick your web page is loading while also evaluating the page, giving you a score and giving you advice on improvements.
Reduce File Size (Minify)
Minifying or minification, is the process of removing white space and unnecessary items (like the last semi-colons) from code, which would otherwise aid the developer. But for production code, readability isn’t an issue. This process can reduce your file size by up to 40% (depending on your coding style).
Enable Compression (gZip)
Compression takes place on your web sever, just like you would send a zip file to someone, and is uncompressed at the client’s end. This means that the actual data transferred from web server to client is significantly less, with the only down-side being some extra processing power (but it’s worth it). The snippet below was taken from the HTML5Boilerplate .htaccess file and is show just as illustration. If you’re running Apache on your web server then it utilises the deflate module and there is also a method for IIS.
Of course, if you are like me and your web hosting company doesn’t support gzip then there are alternatives, for 1&1 who is currently hosting this site there is a solution to getting gzip working.
Reduce Image Size
Using tools like PunyPNG and Smush.it can reduce the file sizes of your images at no visible cost! All by removing unnecessary extras added in by third-party programs. More information on this can be found on the PageSpeed website, where it talks about optimizing your images.
This may sound like the cliché statement, “make sure your web page is using valid html” – which is important but only to a degree, as outlined by Jeff Atwood. No, I’m talking about more than just passing the W3C validation service. With some contradiction from different people, I believe images should have their dimensions specified in the HTML, leading to more graceful, perceived loading time and leading to less browser reflows.
<img src="" alt="" width="200" height="100" />
There we have it. I have only listed a few options in this article but there is loads of information out there to help you speed up your site, with a comprehensive documentation on Google Developers and a few useful tips on YSlow.
You may think why bother? Well, Google is now taking speed into account when calculating page ranking and there are many statistics like this one:
…every 100 ms increase in load time of Amazon.com decreased sales by 1%
How quick do your pages load? And what have you done to speed them up? Let us know in the comments.
Cover Photo by Joel Down