Website performance radically impacts our success, 64% of smartphone users expect websites to load in under four seconds.

However, average page weights are still on the rise. 

As marketers, website performance can seem utterly beyond our control. Here’s how to change that...

Drawing on Cyber-Duck's current website performance optimisation processes I'll highlight the key performance-related issues you should be raising with your developers - whether in-house or outsourced.

The idea is to give you back the control so you can ensure your users have a fast loading experience not only when browsing at home or work, but also when using a wireless hotspot in an airport lounge or a mobile network connection.

Plan for poor connections speeds from the design stage

If you start your project by thinking about the needs of users with slower connections, you'll already be making great strides to improving performance. It's far easier to expand on that vision, scaling up the experience when there is more bandwidth, than the reverse.

Set performance budgets

It's really worth setting performance budgets for your website, in terms of page size (e.g. 500KB for a homepage).

Take into account both super-fast connections and powerful new devices alongside sketchy Wi-Fi, slow mobile connections and old devices. For instance, a 10MB homepage is unlikely to load well on your parents' six year old laptop or on your cousin's hand-me-down HTC device that you gave them four years ago.

Performance budgets force the whole team to make conscious decisions about whether to use heavy features like carousels, which may look great but run the risk of giving users on old devices and slow connections a disappointing experience.

Designer and developer collaboration

As performance is such a key part of the user experience, it can't be an afterthought that's left until the end of development.

To ensure this isn't the case, your designers and developers need to collaborate from the start. Key milestones, such as signing off the art direction or the wireframes, need to be approved from a performance perspective by your developers. Otherwise, they may be stuck with designs or features that can't realistically be implemented within your performance budget.

Reducing required processing time and power

There are loads of optimisation techniques that improve your website’s performance by reducing the processing time and power that the device, whether mobile, tablet or desktop, needs to load the website. Many of these are quite technical, but without going into the nitty gritty details, it's still useful to know what solutions your developers should be suggesting:

  • Avoid plugins where possible. Features like carousels, tabbed interfaces, lightboxes and scrolling are often implemented using plugins, but these plugins are heavy, as they try to solve every scenario imaginable. Often your developers can achieve the same effect with a few lines of code.
  • Optimise images. Yes, a picture can speak a thousand words but images and videos can also take up thousands of KBs in your tight performance budget. Fortunately, there are numerous solutions so you should ask your developers which they use. Some examples are using image compression tools, ensuring the right image type is used (e.g. photographs work better as JPEGs whereas flat colour graphics should be PNGs) and even customising the image so the main subject stays high quality, while the background is lighter and performance optimised.
  • Automate media optimisation in a CMS. Ensuring images are optimised before launch is often not enough, as many images will be uploaded later via your CMS. We encountered this issue when creating BAM's new mobile-optimised website, and resolved it by achieving a reasonable degree of automated image optimisation in their CMS. It's not rocket science, most CMS systems have settings that allow a degree of media optimisation, but it is critical that these settings are actually applied.
  • Optimise fonts. While using your brand fonts for your website is important to you, it may not be the user's first priority, so when speed is really necessary you can improve it by deferring font loading. Initially, the browser uses whatever font is available so that the user gets the content quickly. Your chosen font is only loaded after that.
  • Take advantage of loading techniques. You can raise perceived speed by loading content that is above the fold before the rest of the page. Conditional, ‘lazy’ loading takes this one step further by only loading heavy items like images that are towards the bottom of the page if the user chooses to scroll. Similarly, pre-loading tries to anticipate user behaviour and provide a faster experience by loading the page the user is likely to view next.
  • Utilise browser caching. Files that aren't regularly updated should be cached so they don’t need to be loaded every time a recurring visitor views them.
  • Reduce feature testing. It’s recommended for developers to incorporate feature-testing libraries into their code. However, many make the mistake of implementing the entire library, and testing for all capabilities when only a few are relevant. This can really slow a site down so it’s worth customising the library and only testing what you need.

TinyJPG image optimisation tool

Server-side optimisation

By far the largest factor slowing down most website experiences is connection speed, as it impacts the speed with which the server hosting the website can communicate with the user’s device.

Connection speeds vary radically, and users often have to use sub-optimal connections when out of 3G and 4G range or when on busy Wi-Fi networks. While you can’t change the network speed, you can optimise the server to make it more efficient over all networks.

Here’s how:

Pre-rendering

If your website has dynamic content (e.g. user account information) it needs to ‘speak’ to your database to create the page. Doing this on the server (as Twitter did as early as 2012) is much faster than in users’ browsers. You can also cache dynamic pages that have already been delivered to a specific device, making the server’s activities more focused for returning visitors.

Content Delivery Networks (CDNs)

You can speed up loading times with CDNs, which store static content like images and fonts on a network of global servers. Every time a user requests this content, the CDN detects their location and delivers the assets from the nearest server.

This technique is particularly recommended for websites with lots of high resolution photography, but you must ensure that assets uploaded via a CMS are also delivered through the CDN. By applying this approach to the Eurofighter Typhoon website, it saved 48% of bandwidth.

Testing

Testing throughout production is a key way of simulating the user experience and identifying performance issues.  There are a variety of tools to help you, such as Google's Pagespeed Insights that analyses page speed for desktop and mobile, and suggests resources that could be cached or optimised.

More advanced tools, such as WebPageTest enable you to test live URLs from different locations around the world and at different network speeds, with videos demonstrating the user experience.

Testing on simulators, however, is not enough. You need to test on real desktop and mobile devices throughout the production processes.

Don’t limit yourself to the office Wi-Fi; instead test on a variety of network connections and in crowded places where there may be network congestion. Only this will give you a sense of the true user experience and any issues that need to be addressed.

Eurofighter results on WebPagetest

To conclude

Despite the technical nature of performance optimisation, it’s an issue that marketers can no longer ignore, as even the most well designed website will fail if loading speed is an issue.

Today, as I write this article, I am roaming in the USA using a free data plan but the loading speed of many websites is 70% slower than in the UK. And even though I live in London my home address is not due to get super fast broadband until 2019!

While the principles above can help marketing teams think more carefully about their website design strategies, I think they illustrate the importance of working with experienced UX professionals and developers who are attuned to performance budgets.

Too often agencies are selected on the basis of their client list and size rather than their design and development acumen, so it’s worth using these principles to verify that your developers, whether in-house or outsourced, are up to the job of creating websites that perform well whenever your users need them to.

Danny Bluestone

Published 6 July, 2015 by Danny Bluestone

Danny Bluestone is Managing Director at Cyber-Duck. You can follow him on Twitter or connect via Google+ and LinkedIn.

10 more posts from this author

You might be interested in

Comments (9)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Graham Perry, Senior Sales Executive at Neotys

Danny

You make some good points - thank you for sharing. I would like to add a couple of points:

The best approach to testing the performance of websites is to use specialist load testing tools such as NeoLoad. WebPageTest effectively simulates a single user on the site. For real situation testing (eg sale time for online retailers) it is critical to simulate tens and hundreds of thousands of users on the website at the same time. International sites need to be tested for use of the website from multiple locations.

My second point is I believe website performance testing should be managed by marketing and delivered by either the IT department or 3rd party test organisations. The rational for this is that if a website crashes due to high demand it is very much a business problem (as experienced by a UK online retailer a few weeks ago) - resulting in loss of sales, brand damage etc.

Marketing can apply the correct focus to minimising this business risk in a way that IT-led initiatives cannot.

over 2 years ago

Stuart McMillan

Stuart McMillan, Deputy Head of Ecommerce at Schuh

An interesting point about "processing power", I would actually take the contrary position: if you can save a server round-trip by the browser/device doing some of the work (particularly on mobile), then you should do that.

Oh, and a point on font loading; not everyone is keen on FLOUT (flash of unstyled text) if you defer fonts too late; that being said, fonts can have significant performance issues. One should reduce the number of code points in your font (if possible), which can be quite easy to do if you are only serving in English.
TBH, I'd rather just ditch custom fonts, but that's contentious.

One thing I think you should have mentioned is JS & CSS script position; in my experience, moving JS to the bottom of the page can be the biggest single performance boost APART from optimising images. One other note on JS (and lazy loading), be careful about putting dependencies in the way of asset downloads, as the browser pre-loader can't access them,

Another technology that should be mentioned is HTTP/2, which will really separate out the roadrunners from the wolf

over 2 years ago

Avatar-blank-50x50

Chris Monkman, Web Developer at E-Dzine

There's a ton of other ways too.

Js for example can also be cached off a CDN (very useful if you use bootstrap and jQuery, two very common scripts) and the oft forgotten database optimisation.

Doesn't matter how small your website is if the database calls are inefficient or rely on too many call backs (ie run a query, get response into server side language. Do some processing, make another call, rinse and repeat. It's much better to do the processing in one call through a stored procedure, I should know I've turned a search tool that went from a few seconds to 15+ seconds as the site grew, rewrote it and turned it into sub 1 second responses).

over 2 years ago

Morgan Jones

Morgan Jones, Digital Manager at Freestone Creative

"Too often agencies are selected on the basis of their client list and size rather than their design and development acumen"

The problem is that design will always triumph over speed. There aren't many clients who, after spending a sizeable chunk of their budget on a website, are going to point at it and say 'doesn't it cache effectively?'

That may be a simplistic comment but in my experience website optimisation is a thankless task on that front. It is more for the developer to get pride out of creating something that loads rapidly and responds to a user's needs than a clients specific wish. Don't get me wrong this is my angle as well. I am more impressed by the underlying technology deployed on a website than it's design, but the artists triumph over the artisans purely because their work is seen.

over 2 years ago

Avatar-blank-50x50

mike foskett, Senior front-end UI developer - tesco.com at TescoEnterprise

Excellent article, succinctly put.

Another useful technique is inlining priority CSS and JS, post-load the rest.

If you have a lot of returning visitors then use Local Storage for at least the optimised fonts.

I agree with Stuart on dumping custom fonts but only on mobile devices, though as he aptly stated it's a quite contentious.

over 2 years ago

Avatar-blank-50x50

Deri Jones, CEO at SciVisum Ltd

Danny, great to hear the senior guy at a Digital Agency encouraging good web performance practise - well done!

Web performance is what my team here does every day - and on some projects it's embarrassing for the site owner to realise late in the day the performance problems that have been designed in due to lack of care and attention.

The old carpenters adage 'measure twice, saw once' can also be applied to performance: measure twice, launch once!

over 2 years ago

Danny Bluestone

Danny Bluestone, Managing Director at Cyber-Duck

Thanks for reading, Graham and Stuart. Thoughtful comments from each of you.

Graham, you make a good point regarding testing for a high traffic situations. A load testing tool isn’t going to be necessary for everyone, but an ecommerce site doing significant volume should be using one as part of their process. It’s important to consider such things early on, too. Prior to a sale is a crucial time to test, but being prepared for an unexpected flood of traffic is vital in today’s viral age.

I agree that website performance is a marketing responsibility – hence the article here! – for the same reasons you mentioned. A dialogue between marketers and their development or IT departments to understand each other’s perspectives and reasoning is a must.

On the brand topic, Stuart, I think there are valid arguments to be made both for and against custom fonts. It’s important for many brands to adhere to their style guides as closely as possible and, as an agency, it’s our job to balance those client needs against performance on a case to case basis.

From a user-centred design perspective, we want to get content on the screen as quickly as possible. However, if we are consistently hitting that magical four-second performance budget across connection speeds, we can consider hiding content until the custom fonts are loaded.

Finally, for the same reason as above, I absolutely agree about script position and I’m glad you mentioned that. There are many quick wins to be had there.

over 2 years ago

Avatar-blank-50x50

Deri Jones, CEO at SciVisum Ltd

Morgan

> but the artists triumph over the artisans purely because their work is seen.

I think that is very often the case: but I detect a slowly shifting tide: successful digital managers know that both are needed.

Danny's phrase will I think be increasingly seen in job descriptions:
> website performance is a marketing responsibility

over 2 years ago

Morgan Jones

Morgan Jones, Digital Manager at Freestone Creative

Deri.

We can only hope so. I have recently started using the Flipboard App for the very reason that it cuts through all the (love this word) 'cruft' of badly designed load-heavy websites.

This article: http://developer.telerik.com/featured/the-webs-cruft-problem/ is a good read because other than highlighting the poor implementation of server requests (some of the number of requests are staggering to behold) it illustrates that even with the right infrastructure in place the content can still let the site down and ruin the mobile experience.

over 2 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.