As internet speeds increase around the world, it seems that we only get more impatient when it comes to pages that load slowly. This is especially true if we are looking at sites on our phones, where a web page that takes longer than a few seconds to load can be very frustrating.

Designing a fast website need not be that difficult. There are some basic principles to bear in mind when designing and optimizing your site. It should be clean, and as minimal as possible. It should have a logical design that allows users to reach the pages they are looking for quickly and easily.

Beyond this, there are some basic things you can do to improve your sites' speed. One of the easiest is to have a look at the basic code your site runs on - the HTML - and ruthlessly eliminate unnecessary bits of code.

By doing this, you should see your sites' load times improve dramatically. Because you are optimizing the base level of your site, everything from image cropping to payment systems should see an improvement.

Today, I'll take you through 6 ways of optimizing your HTML code.

1. Minify Your HTML

A super quick way of optimizing your HTML code is to use an online, automated code compressor. In the olden days, when HTML was written by hand, developers would write minimal code by instinct. Now that most of us use GUIs for web page design, generated HTML can sometimes be hopelessly inefficient.

Online code compressors like HTML Compress work on a pretty basic principle, deleting comments and white space out of your code to reduce file sizes and speed up loading times. They can have a big effect on complicated websites that have gone through many revisions.

One downside of such services, however, is that they can make your code pretty hard to read. If you are the type of coder who likes to leave comments for yourself, these will generally be lost.

2. Make CSS and JS Files External

Even a few years ago, there was an unwritten rule of HTML that helped pages to load quickly: keep your CSS and JS files external, invoke the CSS at the beginning of a page, and the JS scripts at the bottom.

In recent years, this rule has begun to be ignored, which is unfortunate. Stick to it, and you will avoid long delays as your browser tries to load your fancy JS script before the important bits of the page.

Bear in mind, however, that by keeping scripts external you are requiring your customers' browsers to load several different files, and if your web host is rubbish this will slow your page down. Check a website like Aussie Hosting for comparisons of hosting speeds to make sure this will not effect you.

3. Eliminate Duplicate Scripts

This might sound like a strange point to make, but have a look at some of your front end pages and you might see that the same JS scripts are being invoked multiple times on the same page. If this applies to you, don't kick yourself - it's actually a pretty common problem on sites that have been through a few revisions.

Not to state the obvious, but each additional instance of a JS script you invoke will slow down your pages, so make sure you only load them once.

In addition, it can be worth making these scripts conditional on other elements of the page, so that they only start when they are required, especially if you have a number of scripts per page.

4. Avoid CSS Expressions

CSS expressions where introduced in IE5, and at that time seemed to be a great invention. They allow you, basically, to set CSS properties on the fly, updating values and parameters dynamically. This made complicated formatting and font-heavy sites a lot easier to design.

The downside is that every time a user renders, re-sizes, or scrolls a page, the CSS is re-evaluated. This can really slow pages down.

There is still  a place for CSS expressions, but my advice would be this - unless you absolutely need to use one, don't.

5. Look At Your Code

Well, duh. It might sound obvious, but only by looking at your code - and I mean in a text editor, not in a GUI - can you truly optimize it. Ideally, you should regularly enough in order to understand how each new piece of HTML works, so you can optimize or delete it as you develop your site further.

Bookmark this article with:

 •    •    •