Considering the primary use case for the mobile web (i.e. people searching on the move) micro-improvements to deliver content quickly and efficiently can make a big difference: according to Google’s own research, 40% of users will leave a website when it takes longer than three seconds to load. 

When you’re on Wi-Fi or 4G, it probably doesn’t matter too much if your site takes an extra half second to load – from an SEO perspective, it was never high on the list of “must-haves”. For years, Google has taken desktop page speed into consideration but mobile was simply something to aim for.

Mobile page speed is set to influence rankings

In its mission to improve the mobile web, Google has announced that, from July 2018, mobile page speed will become a ranking factor in mobile results. While ‘mobile friendliness’ is currently a ranking factor it doesn’t specifically consider the actual speed – now the need for speed is about to become even more important.

This is an important shift that will place an added emphasis on delivering well-structured front ends that can serve content faster.

With July looming I would urge everybody to test the speed of their mobile website: Google’s own tool is an easy place to start. If the result is more than five seconds, you’ll get an easy answer to the old adage of ‘which half of my ad revenue is wasted’ which is ‘anyone in a hurry’.

The good news is that there are a number of technologies and approaches out there in the market for delivering these improved page speeds.

AMP and a headless CMS are two ways to improve page speed

The first option is to embrace Accelerated Mobile Pages (AMP), an open source project supported by a range of parties including Google and Twitter. AMP is nothing new but has been adopted by businesses across the globe, particularly within the publishing and ecommerce sectors, to deliver significant improvements in page speed (and, as a result, conversions).

In the past AMP has been criticised for being fairly limited in application. It worked well for news articles, recipes and text-heavy content but stumbled when it came to visually rich landing pages. As a result, the application of AMP was relatively limited. 

At the recent AMP Conf in Amsterdam, Google announced the next step in AMP – the AMP story format. It’s a similar concept to the stories format pioneered by Instagram and Snapchat but allows for the creation of image/video/animation-heavy stories that are designed for mobile. It’s early days for the format but offers the opportunity to deliver rich experiences faster.  

That said, AMP has not had the widespread adoption that you would expect, for two main reasons. First, it adds a layer of development complexity – in that it requires a different approach to CSS and JavaScript which adds development time (and hence it normally sits at the bottom of the list as a nice-to-have).

The second reason is that its first incarnation was quite visually limiting: great for news, blogs and the basics but visually distinctive pages couldn’t use the format. The introduction of the story format goes some way to remedying this and does make AMP a lot more visually appealing: those who have already adopted AMP have a head start and are well placed to take advantage of the new format. 

The second option is to opt for a decoupled or headless CMS: something I’d advise any business to look at if it hasn’t already. 

What is a headless CMS?

For the uninitiated, a traditional CMS such as Sitecore, Kentico, Episerver or Drupal couples the front end (design) and back end (platform) into one package. A good CMS is often easier to install, easier to build in, and easier for the client to maintain with the right training. But it does mean the client is tethered to the CMS’ own technical roadmap. So when a change occurs in the market: such as Google’s decision to prioritise speed in mobile search rankings, or anything else, you’re reliant on the CMS to adapt to that change to keep pace.

This doesn’t preclude developers from being able to incorporate modern front-end technologies but, when it comes to applying these and incorporating AMP for websites built on traditional CMS, it can often be trickier and require workarounds to accomplish the desired effect.

What’s changed is the pace of change, and the need for established, large businesses to adapt quickly to new front-end technologies in light of challenger brands who are moving more quickly and disrupting them. It isn’t a lack of imagination that slows down established business, more often than not it’s corporate culture that’s not comfortable with an agile development culture or being tethered to a legacy CMS.

Hence the rise of the headless CMS: in effect a more open modular system that allows greater customisation by deliberately unbundling the front end and back end. The headless CMS movement has rapidly gained momentum over the past couple of years as businesses seek to deliver omni-channel experiences from a central repository of content.

By taking design out of the CMS it’s also possible to react more quickly to market changes and new front end tech – whether that’s voice-activated speakers, wearables or the humble mobile web – so in the case of Google’s mobile web, being headless makes it possible to quickly optimise pages for speed without being reliant on the platform to make the change.

This isn’t to say you need to rip out their old CMS and start again. Many traditional CMS platforms such as Drupal (Drupal Cloud) and Kentico (Kentico EMS) are responding by offering MVC options; MVC is is a programming architecture that separates different components of an application – and dedicated cloud-based headless CMSs offer an interesting solution to the challenge of delivering super-fast mobile experiences. 

The separation of front end allows developers to implement techniques and frameworks that support lightweight and optimised frameworks as well as allowing developers to leverage AMP: important before and even more so now given the changes Google is making in July. 

As a rule, we’d recommend a target of under two seconds for 4G and WiFI mobile page loads, and under five seconds on 3G. 

Combining AMP and a headless CMS

Taking a hybrid approach, using AMP techniques to accelerate page loading, and some principles of headless CMS to accelerate page serving (namely rebuilding some front-end elements outside the core CMS) could be the quickest and easiest option.

At MMT Digital, by combining AMP with separated presentation/backend layers we significantly cut down the amount for traffic going end to end to the data layer. Having run tests in telecoms, ecommerce and charity sites (that require fast-loading search-optimised static pages) results have been encouraging with significant reductions in load time (in some cases up to 70% for some of our clients) as the majority of traffic doesn’t need to track back to the backend systems. 

With only a few months until the mobile page speed ranking factor lands, those already embracing AMP and/or MVC and headless approaches for their sites are placing themselves in a favourable position. This move by Google favours the trailblazers as they can move faster.

For the rest of us, it is important that we learn from their experiments and advances to deliver improved experiences across the mobile web. 

Further reading: