The basics of improving your website’s page loading times

There is one factor that can cause your visitors to stop dead in their tracks and leave your site never to return, what is this all powerful factor that can ruin all your plans to be the next Amazon or Reddit? Loading speed.

Design & Development No comments
Share on Google+ Share on LinkedIn

Recent research suggests a massive 50% of users will abandon a site that doesn’t load within three seconds. What’s more, just under 50% of users will tell their friends about their poor online shopping experiences.

Add the fact that search engines have announced that page load speed is now a key ranking factor, and Amazon’s claim that a delay of as little as one second could cost them up to $1.6bn in lost sales every year, and it’s clear that poor page loading speed is something that no business can afford to ignore.

The concept of ‘loading speed’ is easy enough to understand, but what actually dictates the speed at which your site pages are displayed to your viewers, and what can you actually do to improve it? Wonder no more as we highlight the top four tricks to speed up your website.

Image files

Image Optimisation

Image files can be enormous, and can take what seems like an eternity to load – especially on a mobile with slow connections. This situation is worsened if you’ve got multiple images on your page.

It’s very rare that a viewer actually needs the quality provided by a 10Mb jpg over that provided by a 50 to 100Kb version, and luckily there are many ways to reduce the size of an image, many of which are free. Just do a search for “reduce image file size” to find a solution suitable for you.

CSS and JS minification

CSS & JS Minification

CSS and JavaScript are some of the basic building blocks on which a website is built. But unlike the content your viewers read, browsers don’t need the CSS and JavaScript to be neatly formatted to be understandable, which gives us an opportunity to significantly reduce their size.

Put simply, the smaller the file that has to be loaded by the browser, the quicker it can create the rest of the page. Tools such as CSS Nano and UglifyJS make it easy to remove duplications, comments, white space, and shorten variable names where possible, to speed up your page.

Concatenation

Concatenation

Every time a browser comes across a specific CSS or JavaScript file whilst loading a page, it has to make a trip to that website’s server to ask for the file and download it before moving onto the next. Each trip takes time, and this can have a substantial impact when the browser has to make several such trips. Websites can significantly speed up the process by simply combining the files used on a page to reduce the number of trips required.

Hard-core techies out there can also consider render blocking JavaScript and CSS

Render Blocking - JavaScript & CSS

In ye olden days, before your browser loaded or ‘rendered’ a page, it would read every line of code from the very beginning to the very end. This meant instructions such as loading a JavaScript file were in effect ‘blocking’ the page from being displayed until it had completed.

We won’t go into great detail here, suffice to say that the browser can now be told to ignore unnecessary instructions, or to do several instructions at the same time, to help to load your page in record times.

Is the speed of your website costing you money? (And what to do about it)

For further details on the above, and many other suggestions on how you can improve the performance of your website, download our free step-by-step guide.

New Call-to-action


Add your comment

Your email address will not be published. Required fields are marked *

× Megaphone

Fancy more of this?