Speed is vital for modern websites, particularly those which deals with e-commerce, every ms (millisecond) counts, and it all adds up and is a big turn off for prospective customers.

Recently I optimised the site of my UK Web Hosting business XDnet.co.uk before I started work the site was, well abysmal when it comes to speed. The Pingdom  putting it at 14-16 seconds, slower than 90%+ of sites according to Pingdom, before the page fully loaded with some basic optimisation techniques and a little bit of work I’ve gotten this down to 1.67 seconds.

1. Minify it!

Compressing your code down is one of the simplest ways to gain a few precious milliseconds and it’s dead easy as there are plenty of tools you can use to compress your CSS and Javscript files.

Javascript: 

www.minifyjavascript.com is a nice simple tool to use, simply copy and paste your JS file into the box and hit compress and it will squeeze it down to as small as possible.

CSS: 

www.minifycss.com/css-compressor/ is a fantastic tool with loads of useful settings to help manage the way it compresses the CSS to ensure efficiency and even improves your CSS code!

 

Note: With both JS and CSS compression you should ALWAYS ensure you keep a uncompressed copy for future changes. It’s a good idea to simply save the compressed versions as <filename>.min.css as this will help you easily identify the versions in future.

2. Combine, Merge, Reduce!

Combining your CSS and Javascript files into as few files as possible can have a big impact on speed as it can massively reduce the number of requests you need to make and cuts out all of the DNS lookup, connect & wait time involved in making requests.

In most cases combining CSS & Javascript is fairly simple, but you do need to be careful that it doesn’t cause any oddities in the way your site renders, as you may find that placing a block of CSS before another causes a different output than expected because 1 overrides the other – Just give things a good check over and test it out just incase!

3. Content Delivery Network (CDN) static content

CDNs can be useful, but should be used with care, they aren’t a magic solution and can in-fact slow down your site if you don’t use a good CDN service.

Personally I snapped up a free TB of data with MaxCDN during their speedawareness month and have been testing that out, the results in speed improvements do vary depending on your location as in some cases it is a few ms faster when delivered directly from the server, but overall on a global scale it does improve the average speed.

Ideally you want to be serving all static CSS, JS and Images over CDN for the best results. This can also help with other slow-down factors such as paralleled downloads across hostnames.

4. Parallelize Downloads across hostnames/domains

As specified in HTTP 1.1 browsers have a limit on the number of concurrent connections they make to hostnames, this generally seems to vary between 2 and 20.

This often means if you have a lot of files on the same hostname/domain e.g. mysite.com/images/ then the browser will connect to the first X items to download, and the rest have to wait for the first batch to finish before they can start. By spreading the files across multiple hostnames, such as cdn.mysite.com/images/file.png and cdn2.mysite.com/images/otherfile.png – this can help speed things up by allowing for more objects to download in parallel. This method does have limitations, and should be tested as the DNS lookup time can counteract the benefits so it’s worth checking.

Learn more from the Google Speed docs.

5. Your code sucks. Fix it.

A big time suck for my site was a few poor coding choices which caused unnecessary wait time while PHP did it’s thing to generate the page. The killer was lookup requests grabbing the latest tweet & blog posts to display.

These were adding 5 seconds+ for most page loads – very simply moved these to the client side using some nifty Javascript so that they are loaded after the page has begun rendering.

There are also numerous other ways to optimise your code but it’s important to give everything an eye over it’s often surprising just how much basic code improvements can improve your site speed.

 

Hope these tips have helped, if they have or if you have any more tips please leave a comment below, or tweet me @dansgalaxy