Call us today on 0191 259 1272

6 Ways to Speed Up Your Website

Here at Wubbleyou, we like to keep our customers up to date with the latest news from Wubbleyou HQ, new technologies available and also articles on current IT related stories. If it’s happening on the world wide web, we’re probably blogging about it!

6 Ways to Speed Up Your Website

We’ve all heard the phrase ‘slow and steady wins the race’. Wise words - if you’re talking about bizarre cross-species running contests. 

When it comes to websites, you can throw that advice out the window. With websites, faster is always better. 

Website speed is a crucial part of usability. Nobody likes waiting around for a site to load - even if it’s the most incredible website in the world when it finally does. 

In fact, according to Kissmetrics, 47% of users expect a website to load in under two seconds, and 40% will abandon a site that takes more than three seconds to load.

 

What exactly do we mean by ‘fast’? 

There are three types of speed to consider when building a website. All of them are vital pieces of the speedy-website jigsaw: 

Load time: this is the time it takes for all the information contained in a website to download to a user’s device. Load time is mainly affected by file size and internet connection speed. 

Processing time: this refers to the time it takes for the browser to process and render the files, once they’ve been downloaded. Processing time is affected by how well the code is written, and whatever else is happening on the user’s device.

Perceived performance: sometimes, fast websites can look and feel as if they’re slow. Conversely, slow website can appear faster with the help of a few neat tricks. Perceived performance is about monitoring how users interact with the site and letting them know what’s going on when they do. 

So, what can you do to speed up a website? Here are six steps you can take to get things moving faster:

 

Clean up your CSS 

First of all, get rid of unused code. This may seem obvious, but it’s easy to change things and forget to delete old CSS. Obsolete CSS makes files larger and slows things down. 

height and width are the fastest, whilst CSS3 properties like box-shadow take longer. 

Desktops should have no trouble rendering these, but mobiles may struggle if you overload your CSS with too many resource-heavy properties. You don’t need to eliminate them completely - just don’t go overboard.

 

Keep JavaScript and CSS external 

Keep your JavaScript and CSS in external files rather than in the page itself. This way, the CSS and JS files will be cached by the browser. 

After the page has loaded once, next time a user visits the browser will use the cached files rather than downloading all the files again. This will improve load time and processing time, making it worth an extra call to the server every now and then.

 

Have stylesheets at the top

Putting stylesheets in the document head enables pages to render progressively. 

This means the browser will display whatever content it can as soon as possible, rather than waiting for the entire page to load before displaying anything. 

Giving users visual feedback in this way - rather than leaving them staring at a blank page - makes the page appear to load faster.

 

Have JavaScript at the bottom 

Whatever is at the top of a page’s source code will be rendered first by the browser. 

If scripts are near the top, they can slow the page down by preventing the browser from rendering the HTML until after they’ve loaded. 

Most of the JavaScript effects and plugins you’ll be using will only need to come into play once the rest of the page has loaded. 

Linking to your external JS files at the bottom of the page will help to reduce the page’s perceived load time.

 

Optimise your images

Firstly, make sure you pick the right image format. For complex graphics like photos, use JPEG. For simpler graphics like logos and icons, use PNG. For animations, use GIF - but only if you wouldn’t be better off animating the graphic with CSS3 or JavaScript. 

When you save your images, play around with the optimisation settings to get the best trade-off between file size and image quality.

 

Minify your code 

Minifying code means removing all the extra line breaks and spaces. This can significantly decrease file size. 

There are tools available that can minify CSS and JavaScript automatically, so there’s no excuse not to.

As well as these six tips, there are plenty more steps you can take in your quest for a faster website. 

Yahoo! has put together a best practice guide for speeding up websites, which includes some of the things we’ve mentioned plus lots more. 

If you’d like to chat to us in more detail about how to speed up websites, please do get in touch - we’re always happy to help. 

 

Custom Development

With our custom development service, we ensure your website has a quick loading time so that it takes the users to wherever they choose to go within a matter of a second.

 

Share Post

Did you enjoy reading this article? It would be great if you could share it with friends and colleagues!

Facebook Twitter Linked In