10 Steps to Speed Up Your Website

How fast your website loads is now a crucial factor in how you rank in the search engines.
While many factors contribute to your rankings, with the growth of the mobile web Google is now factoring how fast your site loads as one of those many factors to determine where you should be in the listings.

This is especially true for search results on mobile devices where speed and size is king - the bigger the site, the longer it takes to load (Google doesn't care about cached objects).
But not only is it essential to have a quick site for the search engines users also want a site to load quick - for every second that a site takes to load you are losing visitors to the Back button.
So here are some easy to implement tips to get your site zipping along in no time.

 1. Minify and combine all your css in one file and all your javascript in one file
By default IE10+ allows 8 simultaneous downloads, IE9 and lower, Firefox and Chrome allow 6. This means if you have lots of CSS files in your page header you are blocking the download of your other resources.
If you are using a CMS like Wordpress or one of the popular shopping cart systems there are plugins available to do this automatically for you.
If not then there are several websites online that will do it for you.
Javascript - http://jscompress.com/
CSS - http://cssminifier.com/

2. Don't use inline CSS or javascript
The only times you should be using inline css is if the style is for one particular element on one page, ditto for the Javascript. Otherwise everything else should be in your external css and js files.
And remember CSS goes in your head tag and Javascript should go before your closing BODY tag - Javascript in the head tag only slows down the site as the browser has to parse this file before it can continue.

3. Make sure all your images are optimized for the web
Most popular photo editing software has an option to Save for the Web. Sometimes this may only result in a saving of a few kb's but could also reduce a 100kb image down to 10kb.
JPEG Compressor - http://jpeg-optimizer.com/
Another thing to look at is a lazy loader for your images so they are only loaded as and when they are in the viewport.
This will increase your site loading time as images are only downloaded as they are needed and not at page load.
If you are using jQuery there is a lazy loader plugin available here:
http://plugins.jquery.com/lazyload/

4. Enable compression
This means enabling gzip on the site so all your pages are compressed before they are sent to the browser. A 500kb page could be compressed down to just 50kb and it is actually quicker to unzip that page than wait for it to download the uncompressed 500kb page.
Most webservers have this enabled by default but double check it is.

5. Enable caching
Static resources - objects that rarely change - like CSS, Javascript, images etc especially should have a long cache time - about a month is good.
This won't help on the first page load but subsequent page loads will be far quicker as the browser doesn't need to reload everything again.
It's generally OK to leave the actual php, html, .net page etc as expires immediately - but if you have pages that do not change that much then think about setting a cache expiry on these too.

6. Use a CDN (Content Delivery Network)
These static resources will benefit from being served from a seperate server with cookies disabled.
This allows more parallel downloads which in turn means a quicker loading site.
Every object has a cookie associated with it, by serving these files from a separate server (can be just a subdomain of your site) you eliminate a small amount of data.

7. Fix missing resources
Lots of 404 errors just waste time - make sure there is nothing missing and/or that you are not referencing files that do not exist.

8. When using CMS like Wordpress, Joomla, Drupal...
If you are using a CMS/e-Commerce system do not bog your server down with every 'cool' plugin you can - every plugin adds a little more time to your page load.

9. If you are using any external resources on your page like Facebook, ShareThis etc load them after the page has loaded
This means dynamically adding the script - if you are using jQuery there is this plugin you can use:
http://api.jquery.com/jQuery.getScript/

10. Finally - sites you should be using to check your site health
Use Google's site checker to see how your site measures up on mobile and desktop:
https://developers.google.com/speed/pagespeed/insights/
A few other sites to test how your site measures up:
http://www.webpagetest.org/ - tells you everything you need to know about your site.
http://tools.pingdom.com - just a quick test to see loading times etc.

In conclusion - minimize everything - every byte saved counts, follow best practices on web design and offload the heavy work (images, js, css) to a CDN.