Having just redeveloped my website I am increasingly becoming obsessed with the load speed, not only will this help with SEO and user satisfaction it will also enable me to look at the code and make sure it is as clean and fast as possible.  The last thing you want is bloated code cluttering up your search results.

I chose a responsive template so I could have the one website for all view ports (devices) and now I find I am tweaking everything just to get 1 second faster load speed from my website.

Using a mobile device to view websites has overtaken desktops, so every second counts,

64% of smart phone users expect pages to load in less than 4 seconds

So where do you start.

1. Scan your site with a website performance tool.

I discovered my site loaded in 2.82 seconds from a server in the US on Pingdom, but when I used a server from Sweden it was over 4 seconds and google speed test was 62/100, very poor indeed.

This is where you need to know your market, where are your users coming from.  My market is Australia so when I tested it from Melbourne it loaded in an impressive 1.8 seconds.

I knew I needed to tweak it to make it respond faster so this is what I did.

2. Use appropriate Meta tags and use the browser caching

At the very least have the following meta names in the header of each HTML page so your website knows what to do and doesn’t have to waste time scanning for answers:

  • keywords
  • title tags
  • description
  • charset
  • http-equiv
  • robots
  • author
  • viewport

Most CMS’s will have a place for these and you just need to find them.

You can read about Meta Data here.

2. Minify your CSS and JS files

All this means is that you take out the extra lines, comments and spaces to make the code leaner more efficient.

Instead of using three separate CSS tags you can just use one.

border-style: solid;
border-width: 1px;
border-color: #000000;

This gets reduced to:

border: 1px solid #000;

See how I have cut out more than half the code without affecting the functionality. You can use a multitude of CSS and JS tools to minify your code.  Just google “minify CSS” or “minify js”.

You could even consider splitting your CSS and JS into two sections, one for above the fold tasks and the later can load for the rest of the page in the background.

Don’t use inline styles in your HTML, always have them linked via a separate style sheet. This will reduce duplication.

eg of an inline style

<p style=”font-family:Arial, sans-serif; font-size:14pt; font-color:#000000;”>This is a paragraph of text</p>

You can see this code could be duplicated many times in the HTML for every paragraph on the web page, however, if the code was in the linked CSS it would be applied to all the <p> tags at once which would reduce load speed.

3. Optimise images

Make sure all your images a purpose built for the site, crop them to the correct size.  They must all specify their width, height, source, alternative text in order to make them load faster.

eg If you have a small image 50px x 50px don’t put a large image 1024 x 2500, in and resize it on the page.  The poor web page needs to load the large image then reshape it to fit the space.  Make sure the image is actually 50px x 50px with a maximum resolution of 96 px and minimum of 72px.

If you want to use the same image over and over again but they are different sizes you are better off creating multiple images of different sizes as it is more efficient for the browser to download actual sized images rather than resizing one large image.

I know we cannot all do the above as we sometimes have restrictions wiht the CMS we are using. for instance this Business Catalyst site has a script in it that is on the hosted site that I do not have access to but is not minified but at lease I can cache it to make it faster to load.

I hope you take a look at your own site and speed test it to find out how optimised it