How to: Speed up Your Website · Designed by a Turtle

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.

So, why are website’s slow to begin with? Every time you click on a link, or even before you click a link, your web browser is communicating with the web server by sending HTTP requests back and forth, which of course take time. The more files you are loading on your web page (JavaScript files, images, CSS files) the more HTTP requests that have to be communicated – leading to a higher latency in page load. Of course, it’s not just the number of files but also their size, whether they’re able to be cached and many other variables.

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.
PageSpeed also has a web version (for those of you who hate extensions). WebPagetest & GTmetrix are also websites for evaluating the web page’s performance.

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).

HTML, CSS and JavaScript are all able to be minified and there’s an online tool to help you with this, which is a port of the YUI Compressor. Personally, I use an extension for Sublime Text 2, which at a press of a button minifies the code for me.

JavaScript can also be obfuscated, shortening variable names and making the code unreadable, which some would argue is also more secure.

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.

<IfModule mod_deflate.c>
    <IfModule filter_module>
        FilterDeclare   COMPRESS
        FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/html
        FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/css
        FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/xml
        FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/x-component
        FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/javascript
        FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/json
        ...
        FilterChain     COMPRESS
        FilterProtocol  COMPRESS  DEFLATE change=yes;byteranges=no
    </IfModule>
</IfModule>

View HTML5Boilerplate .htaccess file (with full gzip support){.btn.btn-primary}

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.

Update 9/8/2012: As pointed out by @inquisitiveSoft on Twitter, PngCrush is a good command line option which lets you batch process a whole folder of images.

Load JavaScript Asynchronously#

By default, JavaScript is loaded synchronously which means that while one JS file is being downloaded everything else must wait. By loading JS with async they can concurrently be downloaded and run, this means on average the JS is loaded quicker because it doesn’t have to wait.

Have no fear! With the introduction of HTML5, a new async attribute has arisen and is supported by Webkit browsers. But there is also a JavaScript method to achieve the same, explain in a blog post by Emil Stenström.

Correct Markup#

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" />

Another thing related to markup is that all JavaScript should be placed at the bottom of the page (just before thetag) unless explicitly needed at the top of the page – with the exception of some async scripts. This means that all HTML and CSS is loaded before any JS is loaded, which once again lead to a better perceived loading time.

Conclusion#

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%
— WebSiteOptimization How quick do your pages load? And what have you done to speed them up? Let us know in the comments.