Related Tags

What is a headless CMS & how can it help improve mobile page speed?

User experience is, for many companies, about creating an experience that’s beautiful. Mobile-specific websites, responsive sites and apps are in use across the web to deliver those all-important mobile-orientated experiences.

But while it’s no secret that people expect fast mobile experiences, beauty can can come at the expense of utility.

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.

You might be interested in

Comments (2)

Alexander Levashov, Director at Magenable

In Australia, my mobile internet (4G) is 5 times faster than WiFi I am getting through ADSL at home. Not sure how relevant are that efforts taking into account that 5G is going to be introduced soon. Probably it depends on the target geography.

Also, important to consider the cost of building such 'headless' (what a weird name) solution - for most even medium business I afraid it will be prohibitively high - you have to rebuild the whole front end part which is otherwise provided by CMS.

Thanks for taking the time to comment Alexander and get the conversation going!

You make a valid first point – it is all about the target geography. There are big differences in download/upload speeds as you traverse the globe. The general rule of thumb I like to follow is to consider the worst case (that may not be the actual worst case but the worst case your client or end user may experience). By doing this we can make sure that applications/websites/etc. deliver the best possible performance even on the slower connections.

5G is an interesting one. I didn’t include 5G at the moment purely because it hasn’t been fully introduced yet. The rollout dates vary across the globe – here in the UK we’re probably looking at between 2020 (the promised date) and 2022. This does have the potential to change the game once again but until we actually see the practical rollout and coverage it’s difficult to know how much of an impact it will have.

The cost associated with “headless” (a notorious buzzword I know) is something that requires careful consideration. You mention about the CMS providing the front end which is certainly the case in the “coupled” content management system. While this provides some cost saving it does also introduce inefficiencies which could mean that sites fall foul of the upcoming ranking factor from Google. You lose some of the control that you need to deliver efficient and fast front ends. But, like you say, there is a cost involved. I see this as very much “short term pain for long term gain”. By investing in the front end, you can deliver better performances which should help influence ranking and, in theory, boost business. There’s no guarantees but it puts you on the best footing.

Again, thank you for sharing your views. Innovation is always exciting but in order for it to be worthwhile it needs to be tempered with practicality.

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.