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.
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.
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.
Comments