Too many marketers still assume mobile strategy is only critical for consumer-centric businesses. Some pigeonhole smartphones and tablets as devices just for entertainment, leisure and social activities. But B2B mobile usage is intensifying. A study from Google revealed an impressive 9 per cent growth in the use of mobile devices throughout the B2B purchasing process.
But mobile users aren’t easy to please. 64 percent demand websites load in under four seconds. As marketers, website speed (or performance) is critical to our success – but can often feel out of our control. Below are key optimization strategies that you can discuss with your production team: taking back control and ensuring your website performs well.
1. Mobile-first design
Mobile can’t be an afterthought. It’s far easier to design with smaller screens in mind from the outset, and scale up the experience for larger screens. Mobile-first design helps you pinpoint the content, visuals and technology needed to instantly grab your visitors’ attention.
2. Set a performance budget
This is a target for the final website’s speed and size e.g., 500KB for a homepage. Designers, developers and marketers must collaborate from the start to ensure that all design elements and features can be delivered within the budget. For instance, they’d need to consider whether the benefits of heavy features (like carousels) outweigh their potential impact on users with old devices and slow connections.
3. Code to reduce strain on devices
Boost performance by decreasing the processing time and power required from devices to load your website. Without drilling into the technical details, here’s a selection of optimization techniques your developers should consider:
Prioritize above the fold – the rule of thumb for content visibility also applies to code. The code used to load the top part of the page should come first. Google Analytics can reveal typical user journeys allowing you to pre-load areas they’re likely to go to next.
Enhance from a core experience – developers can establish and deliver the core functionality (or content) of your website for all users, then add enhancements for users on devices that are likely to be faster (a technique called progressive enhancement).
Reduce feature testing – test libraries that are incorporated into code can take up far less space if they are customized to test for just the capabilities required.
Avoid plug-ins where possible – popular features (like carousels and lightboxes) can be implemented quickly via plug-ins. But, as plug-ins have to work in multiple scenarios they are often bloated. With a few lines of code, developers can achieve the same effect.
Optimize images – pictures can’t speak a thousand words if they don’t load for your users. There are plenty of ways to squeeze down file sizes, without losing quality: from compression tools and using the correct image format, to customizing the quality between the subject (high) and background (low) of an image.
Incorporate CMS optimization – optimizing images for launch won’t help much if subsequent images, uploaded via your content management system (CMS), slow down your site. It’s important to ask your developers to pre-configure your CMS with as much automated optimization as possible.
4. Increase your server’s efficiency
Network connection has a stranglehold over mobile devices. It impacts the speed your server can communicate with users’ devices to load your website. Speed can vary radically between networks, with users dipping out of 3G and 4G ranges while on the move. Weak Wi-Fi networks can even slow down asset loading, depending on how close users are to the access point. Agencies can’t change this – but they can make your server more efficient so less bandwidth is required to load your site.
Cache static content – files that aren’t regularly updated should be stored on users’ browsers, so they don’t need to be downloaded again on return visits.
Pre-render pages – if dynamic content (e.g. user account information) features on your website, it needs to communicate with your database before being displayed. It’s much faster to do this on the server than in the user’s browser.
Use a content delivery network (CDN) – these store static content (like images and fonts) on a network of global servers. They can speed up loading times, by detecting the location of a user and delivering assets from the nearest server. For one of our clients, this tactic alone saved 48 per cent of bandwidth.
4. Test at every opportunity
Testing throughout production is the only way to simulate the user experience and resolve performance issues. The best resources include:
Google’s Pagespeed Insights – offers a visual analysis of your page speed, for desktop and mobile, suggesting optimization techniques to improve specific sections of your website.
WebPageTest – allows you to test how live web pages perform in different countries and at different network speeds. You can review performance data or see a video of how your page loads.
But simulators aren’t enough. To gain a true picture of the user experience you need to test on real devices – both new and ageing, not just on your powerful office network but on mobile networks and congested public Wi-Fi.
There’s no doubt performance optimization is a complex subject. But, it’s one we can’t ignore. The speed your website takes to load has a major impact on conversion rates, especially for mobile.
These tips should arm you with the questions you need to ask the designers and developers working on your website. Better still, ask these questions when selecting your designers and developers, to ensure they’re attuned to target-driven, optimized website development.
