The Internet has officially become majoritarily mobile worldwide at the turn of 2017, 4 years after it happened in China. With mobile traffic predicted to reach 80% of total usage by 2020 and Google making its index now mobile first, an optimum mobile user experience is becoming paramount to any business having an online presence. Yet the mobile browsing experience is still too often inferior to its desktop counterpart. This is mostly due to a variety of reasons, from a combination of desktop-first website design with bloated functionalities, to poor network speed and a short users’ attention span, because of the reduced screen size. As a result, the tech giants have been working hard to fix the mobile user experience, but often aim to impose a proprietary standard enlarging their walled garden: Facebook Instant Articles, Apple News, Tencent and Alipay’s Mini Programs. Instead, Google and Baidu have formed a surprising alliance pushing for open standards between Accelerated Mobile Pages (AMP, Google) and Mobile Instant Pages (MIP, Baidu).

While apps have been historically dominant as a channel to consume content on smartphones, the frontier with mobile web is disappearing: now is the time to make the move. Image source: Biztech

These two converging standards aim for making web content look and feel like an app, without the friction of downloading one. It may look tempting to watch these standards mature, delay the investment of time and money, and implement them when they become completely dominant. But we believe implementing mobile web acceleration standards now is key to build a long term competitive advantage, considering that the impact on reach and conversion rates make it already very ROI positive.

In this first article discussing modern mobile web, we will explain the advantages and use cases of the AMP/MIP tandem.

AMP and MIP: 1-second loading, higher conversion, increased SEO, lower bounce rate

Google and Baidu’s open standards for page acceleration are not simply designed for mobile viewing, but for instant-loading directly from the search results page. This happens through a combination of pre-rendering and caching + distributing, directly implemented on the search engine’s server. Instant-loading significantly impacts bounce rate, search engine positioning, engagement, and ultimately, conversion.

Specialized agency Stone Temple sharing the impact of moving to AMP for a range of clients.

Instant-loading

According to Google research, 70% of conventional mobile pages take seven to ten seconds to load and render entirely. By comparison, AMP pages load in less than one second on average.

Baidu’s MIP logo indicating page acceleration (left) vs. Google’s AMP indicator (right).
7–10 seconds conventional mobile page loading (left) VS. 1-second loading on Google AMP-enabled page (Mid) VS. 1-second loading on Baidu MIP-enabled page (right)

The impact of page loading speed on overall conversion and performance is well documented. Mobile page acceleration solves the decade-old mobile speed issue in a neat manner.

Better search engine exposure

Mobile page acceleration makes your content eligible to be shown on the content snippets directly within the search result page, most notably the AMP stories carousel on Google. This can send a significantly higher traffic volume from organic search results. Although the search giants explicitly deny making standard-compliant pages a ranking factor, speed definitely is.

AMP Stories from Washington Post. Image credit: Searchengineland.

Improved user experience, engagement, and ultimately: conversion

Mobile page acceleration gives you more opportunities to engage with your visitors. They are more likely to interact with any features you offer, including forms, buttons, links, videos, and even online shopping.

The case studies above suggest that AMPs have a higher time spent on page, because the faster loading speed and the better SEO exposure attract higher quality traffic. More time-on-site and greater user engagement leads to better click-through rates, improved conversion for retailers, and monetization for publishers.

The page loading speed alone is a key conversion factor. Chart credit: Neil Patel.

Another great asset for publishers is that they have control over the visual design of the AMP, to appear different from other AMP sites. It supports existing ad formats and deepens engagement with related articles.

Mobile page acceleration saves you from the super slow load and the shifting of the visible content. With Scroll Anchoring, the scrolling is locked so the user is not disturbed while consuming content. The content doesn’t “jump” when the visual assets are loaded. Scroll Anchoring prevents three jumps per payload.

As a result, a recent survey showed that Internet users clearly favor AMP pages over regular web content:

9to5Google 2017 survey showing strong user preference for AMP enabled websites.

For what pages? Not only content and landing pages, but also transactional

The beauty of mobile page acceleration is you don’t need to redo your entire website, but can add it only to the content for which it makes most sense.

By design, it’s obviously most useful for publishers and text-heavy content providers. Furthermore, AMP/MIP have added a much wider support for media content with the release of AMP stories. In short, if you have a blog, news, or PR pages driving significant search traffic, consider AMP.

AMP stories allow for asset-heavy visual storytelling

By loading directly from the search results, the technology has maximum impact on landing pages from search engine traffic, especially paid ones (SEM).

But the most important development for the average business is an increasing number of companies have adopted AMP for transactional pages, such as e-commerce product listings, product pages,and so on. With names no less than Ebay, Aliexpress or Lancôme moving to AMP for their product pages, it has already shown significant impact on conversion, with lifts up to 100%.

Some of the big names that have already implemented AMP.

There are still a couple of limitations to work around, however, which might be challenging or costly depending on your specific situation. For example, there are no external JS scripts, all CSS must be inline etc. This can be greatly enhanced by using a combination of mobile page acceleration and progressive web apps (PWA), the latter which we’ll cover in details in a later article.

Lancôme using AMP for its product listing pages. Image credit: Mobify.

As a result, implementing mobile acceleration for your website may result in modifying only a couple of key pages, or turning the AMP/MIP switch to up to 99% of your content.

On Starbucks’s newly released website in China, the education content pages make the best candidate for an AMP/MIP implementation.

How to implement AMP/MIP?

Depending on your website technology stack, implementing AMP may be as simple as installing a plugin, or may require heavy rework of your codebase. If your website is using WordPress, like 30% of the websites, there are loads of dedicated plugins, and the major SEO plugins are increasingly integrating AMP as a core feature. However, the default resulting layout can often be very far from your original design.

If your website is using a fully custom stack, implementing AMP will require “manual” coding. The more dynamic/interactive components you use, the more resources you will need to build your AMP templates. Luckily, AMP is well documented and Google provides a handy validator to test your codebase.

Stone Temple had to rework the default template generated from the WordPress AMP plugin to match their original layout.

Should you go for MIP or AMP in China?

Baidu officially supporting AMP (as well as most Chinese search engines) means that the pages will be properly indexed and displayed in China, unlike a lot of Google assets (blocked in China) such as font and JavaScript libraries. But as of now, there are no plans to extend their acceleration there.

Following the intervention of Baidu MIP project leader at the AMP Conference last year, we learned three main things about the Google-Baidu alliance:

  • AMP Leads/MIP Follows: MIP is a participant to AMP Project, basically it’s its local version.
  • Possible Migration to AMP: It is possible to migrate from MIP to AMP and vice-versa, but there are some specificities that obviously need localization; just like the Chinese version of your website is different from the English one.
  • Big efforts on both sides: Baidu supports AMP indexing and loading, and their caching system also supports them. Both Baidu and Google will strengthen the technical compatibility to jointly accelerate the development of this project.

For most multinationals, implementing AMP benefits from its mobile readiness all over APAC

Since the alliance with Baidu, Google has now broadened its target compatibility by going APAC, and has since covered the most important search engines in the Asia Pacific region (e.g, Sogou in China, Yahoo in Japan, and so on). This resulted in multinational brands trying out this new technology on their website with impressive results across the whole region. If your activities in mainland China are sufficiently served by a global website having Chinese as one of the languages available, or a .cn website cloning your global website, implementing AMP globally may be enough.

If you are China only or China is a key country in your websites portfolio, implement MIP for your Chinese pages

To fully benefit from mobile acceleration in China, and especially for the conversion improvement effects, you would need to implement MIP rather than AMP on your Chinese pages. E.g. if your site receives over 50% traffic from Chinese Search Engines (Baidu, Sogou or/and Shenma), then definitely consider MIP.

At the moment, there are no tools that can operate a direct migration from AMP to MIP, but the Baidu validator and the rich collection of courses and video tutorials from Baidu itself, can help making this transition at a fraction of the cost of the initial migration to AMP.

Just like Accelerated Mobile Pages, Mobile Instant Pages have been implemented on billions of pages in China, reportedly improving page-load speeds by 30 to 80%, and click-through rates from 5 to 40%. A few brands have made the move already: Douban (豆瓣 blog/forum), 道客巴巴 (online document sharing platform), Kaitao (开淘网 E-commerce information/sharing/learning platform), Baidu translate 百度翻译, Hackhome (网侠手机站 mobile game app forum), 91门户(portal website), ChinaZ (online SEO tool and forum), Docin (豆丁网 online doc sharing platform), and others.

Chinese brands having already moved to MIP.

With Baidu reducing their number of paid results from ten to maximum five per query, a huge space is now available for organic results and SEO teams in the months and years to come.

Case study: how we increased our content loading performance in a couple of clicks

At 31Ten, our main target audience are multinational, English-speaking digital teams that use Western search engines. As an experiment, we set up AMP on the content section of our WordPress website using a default plugin (AMP for WordPress):

  • The original responsive page of our WeChat AR article: https://www.31ten.network/wechat-ar-time-to-jump-on-the-bandwagon
  • Its AMP counterpart: https://www.31ten.network/wechat-ar-time-to-jump-on-the-bandwagon/amp

When users visit this page on mobile, the redirection to the AMP version is automatic.

The result: loading speed reduced by more than 50%.

The plugin is perfect for beginners and those looking to get the hang of AMP optimization on a WordPress site; however, resource-heavy and custom sites will have a harder time finding support solutions that can be implemented out of the box.

Where are we headed?

For all the benefits mobile acceleration brings, it also creates significant additional complexity for large scale websites. It is not uncommon to see Responsive Mobile & Desktop, or Desktop with a separate mobile subdomain, each having an additional AMP/MIP version for each page or article. That sounds complicated to maintain, but it allows the best user experience on every device, and most often the performance lift allows for a very positive return on investment.

As for every project, we recommend benchmarking your industry for whether you should choose mobile page acceleration. If all of your competitors are using it and you aren’t, you have a problem. At the same time, being a pioneer in its adoption can definitely be a significant competitive advantage.

So, if you want to create a cross-device site from the beginning, AMP/MIP is a good option, just keep in mind that a lot of the modern dynamic features you see on most sites (i.e. interaction plugins, JavaScript libraries, advanced ajax functionalities, complex forms and validations) are not currently supported.

A way of going around the limitations of mobile page acceleration is to combine it with another modern web feature, Progressive Web Apps (PWA), which make a fantastically powerful combination. We will show in detail how PWAs work and what use cases they serve best in another article. Stay tuned!

Authors

Clement Ledormeur

Clement is the Digital Project Director at digital agency 31Ten. He is currently leading the delivery of digital projects understanding client’s business and technical requirements in the area of digital and converting these requirements into a solution and project plan. He is always looking to help build something exciting…

Editor: Joseph Leveque

Joseph is Managing Partner at 31Ten. He helps brands to find the most efficient online road to reach the ever-more agile and informed Chinese consumers. Feel free to reach him at joseph@31ten.network if you have any questions regarding China’s Internet landscape, or if you simply enjoyed this piece and would like to talk more about it.



SOURCE

LEAVE A REPLY

Please enter your comment!
Please enter your name here