Back to blog

Fast loading websites: why page speed is just as important as the design

Everybody wants a good looking website. We want our content to reach out and grab the attention of the audience – but what if the information we’re trying to communicate doesn’t manage to hit its mark because the visitor has given up waiting for the page to load? Fast loading websites don’t just help the visitor to access the content, they can actually promote timeless design too.

Fast loading website code

Why we want it to feel ‘designed’

A design brief is only truly resolved when the outcome has been considered fully, from numerous angles. In the context of web design, we might want things to respond in an interesting way when we hover the mouse over them; we might want images to fill the screen when we pop them up into lightbox view; or we might expect to see contact forms automatically populate with information we’ve chosen to store in our Autofill settings.

A truly considered design can be intricate and may contain numerous features – but we should not get carried away with ‘bells and whistles’…

Classic design is timeless, whereas novelty wears off

It’s easy to get carried away. When we see something we haven’t seen before, if it possesses aesthetic qualities we want to see it again – this is only natural. For example, when the presence of social media icons seemingly became a key requirement of websites, designers and developers obediently took it upon themselves to design and build countless styles of social media icons – not just how they looked upon first glance, but how they responded when you hovered the mouse cursor over them… We saw icons jumping up and down, zooming in, even spinning in crazy circles…

Why though?

There has to be a reason – this is the whole point of design; it solves a problem for specific reasons. From my point of view there is no place for a spinning social media icon unless you run a joke shop. Even then, what about touch screen users? It’s not possible to hover the mouse when you have a touch screen…

More bells and whistles = more code to load

It’s not just about teasing out the rationale behind novel features though, there’s a deeper issue that we, as builders of highly performing websites, have to consider. When you add a new feature to a website, be it a hover state or a link style, a button design or pop-up contact form, you add a number of lines of code to the website. And you guessed it, the more complicated the feature, the more lines of code are required. This is a problem because the more code there is to load, logically, the longer it will take to do so.

Imagine a website that’s used for selling products online. The website will require a number of features to allow visitors to browse products, add them to the basket, proceed to the checkout and complete an order. Let’s imagine the website originated from a ‘build your own website’ platform, and one of the features included in the template was the ability to calculate shipping price based on product weight… But the owner of this particular website has opted to offer free shipping for all orders as they make enough of a margin to do so, and they’re forward thinking enough to see that customers really love free shipping… The shipping cost calculator is therefore redundant but its styling still exists in the website’s code, meaning it still needs to be loaded every time someone visits the pages where it would have otherwise been used. This entire feature, completely redundant, is chewing up precious bandwidth of the visitor’s internet connection, adding to the time it takes for the page to load.

And this is just one feature.

One feature can be five lines of code, or it can be five hundred lines of code, or even more depending on the complexity of the feature, and when you add up all of the features on a website you can start to get an idea of how much of a difference there can be between a website that contains loads of extra unnecessary ‘stuff’ and one that’s lean, only serving up what is truly needed. It’s not uncommon for us to see a website serving up 75,000 lines of code when it could get away with a fifth or even a tenth of that.

What about the fundamentals?

So novel bells and whistles aside, there are numerous fundamentals to be aware of too, which can also affect your website’s page load time. Take a quick look at Google’s Page Speed Insights. You can test any website using this free tool, and it’ll give you a summary of what might need looking at to improve the page speed performance. Sparing the technical detail, we see the following items frequently:

Optimize images

Images need to be presented by the website at the size required by the device of the person viewing them. This is probably the biggest cause of poor page speed.

Leverage browser caching

Some things on a website (such as fonts and embedded maps) do not change for a very long time. It’s possible to let web browsers store or cache these, meaning that they don’t need to be loaded again when the visitor loads the page or the site again.

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Google believes that ‘above the fold content’, i.e. things that are in view when a web page loads, should load instantly without the help any additional bandwidth-consuming resources. This is often difficult to fully eradicate when specific fonts are required, for example, or a top-of-page social media share panel is required in the design. However optimising for page speed is always a battle of specifics; tick 90% of the boxes and you’ll get a good score, so we take this point with a pinch of salt in some cases.

Reduce server response time

So, your website is intended for a UK audience. Why then is it hosted in the US? The majority of UK websites are hosted in the US, and this does affect the load time of the pages, purely and simply because the data needs to travel across the Atlantic before it reaches the visitor…!

Minify CSS

This basically means, in the context of code language, “don’t separate things out with unnecessary spaces and carriage returns”. If the code consists of more lines than it needs to, Page Speed Insights will pick up on this and flag it as an issue. Why use 10 lines of code when you can use one, for example.

Conclusion

It’s easy to get something that looks good but it’s harder to get something that looks good and performs well.

There are two conclusions to draw here:

  1. Only features that have a true reason for being there should be included in the design of a website. No novelty.
  2. There is actually no point at all having fancy design features if people can’t see them, therefore in this respect page speed is more important than design!

Our view is that the best way to achieve fast loading websites which load quickly and are well designed, is to have one designed and built from scratch for your specific needs – which is exactly what we specialise in.

Get in touch with us to find out more about how we can help.

Back to blog