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!
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.
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:
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.
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.
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.
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.
Linking to your external JS files at the bottom of the page will help to reduce the page’s perceived load time.
When you save your images, play around with the optimisation settings to get the best trade-off between file size and image quality.
Minifying code means removing all the extra line breaks and spaces. This can significantly decrease file size.
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.
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.
There are a few common mistakes made when designing a UI, here are 7 that you need to avoid at all cost.
26th January 2017
As holidays come and go, winter is pretty much here and Christmas is around the corner! If your thinking of a temporary redesign, have a look at this first!
1st November 2016