Recent Updates

 
Speed & Optimisation25 Nov 2012
Usability11 Apr 2012
Planning11 Apr 2012
About Me / Contact Me11 Apr 2012
Home11 Apr 2012
 
Last updated: November 25th, 2012  
Viewed times 

Speed & Optimisation

Website speed and performance is really important for creating a user-friendly browsing experience for your visitors. If your web pages don't load quickly enough, your visitors will get bored and head off to a competitor's website - not good news for any website but certainly not good news if you rely on internet sales.

Search engines, such as Google, will consider load-speed when assigning page-rank, so it's essential that you take as many things into consideration as possible when it comes to optimising your website to ensure that bots and humans alike can move fast and free through your pages. In the ways of the web, a millisecond can make all the difference.

7 Easy ways to speed-up your website

It's been a while since I first started out in web design so I thought I'd write about the easy mistakes that newbie web developers make (myself included, back in the day), and then counter those with some easy fixes that can really help improve loading times.

My first observation is with the common development path that a lots of new-starters take when making their first website;

  • Priority 1 » Find an easy-to-use software that creates a web page for me - all I want to do is point-and-click and drag-and-drop.
    Mistake 1 » Not fully understanding the basic structure of a web page or HTML.
     
  • Priority 2 » Making the web page look nice with lots of eye-catching elements.
    Mistake 2 » Not understanding web-suitable media formats and the extra impact that all embedded elements, scripts and animations have on the speed of a website or impression they make on visitors.
     
  • Priority 3 » Getting Priority 1 and 2 dealt with as quickly as possible so content can be added.
    Mistake 3 » Not realising that visitors won't hang around to read your content, buy your goodies or comment on your articles, or that they're unlikely to want to come back, because the pages take so long to load.

It seems that while in the learning stages, a new web developer's key goal is to just get a nice-ish looking website online as quickly as possible at (seemingly) any cost.

The tips below are basic common sense things so they're unlikely to cover any new ground - I'm just bringing a few thoughts together so you can try them out and see how they work for you. They're all really easy to do and just require a bit of extra thought, time and effort, but collectively their effects can be quite dramatic so it really is worth trying them out, if you don't do them already.

1 - Scale images before putting them online

When putting things on the web, the idea is to make things as small as possible so they download quicker and save on bandwidth. For most media this refers to physical file size on disk rather than physical dimensions, but for images it's a double-whammy, so it's worth covering early. If your image only needs to be 100 x 150 pixels when it's on the web page, resize it to 100 x 150 pixels in Photoshop or GIMP before you put it there rather than relying on resizing with ' height="" ' and ' width="" ' (or drag-and-drop visual scaling within your web page builder).

2 - Use the right image format for the job

  • .jpg/jpeg: For photos or detailed images that require a lot of colours. Also try .png-24 as you can often get more savings with them over .jpg/.jpegs.
  • .gif: For simple, small animations, logos, diagrams and images that require 1-bit transparency, which means a pixel is either transparent or it isn't (no middle-ground). .Gif only supports 256 colours so you may notice speckling after saving in this format.
  • .png-8: Try substituting .gif for .png-8 as in most cases, .png-8 offers a higher compression with, on average, a 7-12% saving over the .gif format.
  • .png-24: For images that require lots of colours and alpha-transparency (pixels can be varying degrees of transparency).

If in doubt, stick to .jpeg/.jpg and .gif formats as they look/behave the same in all web browsers. For artwork, definitely .jpeg/.jpeg. You only really need to stray into the world of .gif if you are contemplating transparencies or animation.

3 - Optimise ALL images

If you're saving images directly from something like Photoshop, make sure you select the option to "save for the web". This will reduce the dpi and quality of the image to strip out all the in-between colours that the human eye can't really differentiate between, leaving you with an image file that takes up much less physical disk space on the web, that downloads much faster. Even saving at 60% quality will produce an image that is almost indistinguishable from the original.

When optimising, there will always be a trade-off between size and quality so you'll need to do a bit of fiddling to find the best-fit settings for you.

4 - Use an external CSS stylesheet

(and condense multiple stylesheets into one and minify)

Web page builders often insert styles in the head section of every web page, meaning that a browser has to download extra code to view that web page, and then download the whole lot again when the visitor moves on to page 2.

Taking all the CSS out of the head section and putting it into an external stylesheet will make it cachable by the web browser, so the CSS is downloaded once and then sits ready and waiting in reserve to style the next page (minus the need to download it again).

It's also worth minifying it to take out all the comments and unnecessary whitespace. I've had mixed results with online minification tools so I find that doing it manually is often more reliable. To minify by hand, just do this;

h1{color:red;text-align:center;font-size:18pt;}
p{color:black;text-align:left;font-size:10pt;}

instead of this;

h1 {
color:red;
text-align:center;
font-size:18pt;
}

p {
color:black;
text-align:left;
font-size:10pt;
}

5 - Use an external javascript file

(and condense multiple js files into one and minify)

Same cachable reason as point 4.

You should only really merge multiple files if they are common to all/most pages of your website. If you have a page that utilises a
one-off javascript file, particularly if its quite large, you should probably only include it in the page that actually needs it to avoid unnecessary load-time on your initial home page.

You can argue that downloading a script before it's actually needed can create the impression of faster load-times elsewhere around the website, but that's something to be considered for each website on it's own merits.

To create an even bigger impression of faster load-time you can also put javascripts at the bottom of your web page (above the closing body tag) but this depends on what the javascripts are needed for (e.g. if the script uses document.write to insert some content, it can't be moved to the bottom of the page) so for the purpose of keeping things simple, lets just stick with merging and minifying.

6 - Spread files over other domains

All the files, scripts and images that make up your web page can be downloaded faster if they are spread over a few different domains. This is because browsers are limited to the number of files that they can download at any one time from one domain, putting subsequent files in a queue to download later. If you are able to put files under other domains, a browser can download them in parallel, resulting in shorter queues and more files being downloaded at the same time.

For a more detailed explanation of this, please refer to this article from the Yahoo! UI Blog about maximising parallel downloads

The exception to the parallel host rule is with critical javascript files that, according to recommendations from Google Developers "Make The Web Faster" documentation, "...should be served from the same host as the main document...", So as a basic rule of thumb, serve CSS, images and non-critical scripts from another domain, but serve critical scripts from the same/main domain.

7 - Stream-line your content

(OK, so this is heavily linked to usability and accessibility, as well as SEO, but it's also relevant for page-load times so I'll continue.)
Obviously if you're writing a medical blog you'll be using lots of fancy sounding, scientific terms, but for general everyday web-talk, try and keep things simple. People tend to visit websites to find information and achieve a goal in the shortest time possible so why make them wade through reams of content to find what they want? Keeping things short and simple will allow people to find the information they want quickly, and also help to stream-line your web page content and allow things to load a bit faster.

  • Only use pictures that are relevant to your content.
  • Use animation sparingly to highlight areas of importance.
  • Try not to auto-play videos and music - allow users the choice to play or ignore.
  • Write shorter sentences/paragraphs (and cut out the jargon). If you need to provide a lot more information on one particular topic, consider providing an additional document for download that the user can take away and read at their leisure.
  • Use bullet lists to get key points across quickly.

OK, as I said at the start of this page, these are all easy steps to take for speeding up web page - no revelations, just common sense.

And if your server is setup for php...

It can take around half a second for a web server to pull an HTML page together, and the web browser during this time will sit waiting for information to be passed to it. Using the flush() function in PHP, the web browser can start to fetch bits of the page early, while the server continues to process the rest - between the head and body tags is a good place;


... <!-- css, js --> ...    
    </head>    
    <?php flush();?>    
    <body>
... <!-- content --> ...


Other pages in this category