Accelerated mobile pages AMP illustration

AMP-lify mobile user experience with Accelerated Mobile Pages

Accelerated Mobile Pages (AMPs) have become such an integral part of Google’s search results that we don’t even notice them as something fundamentally different from other results. We see them in search results and click on them without even thinking about their presence.  In search results, they appear on top, in a  carousel of AMP featured articles, complete with a preview image and a small lightning bolt to indicate their speed. When clicked, they load almost instantly, which is one of their biggest advantages.

In this article, we will explain what exactly are Accelerated Mobile Pages, how they can boost search rankings, and who and how should implement them.

WHY ACCELERATED MOBILE PAGES?

According to Google Analytics Data, mobile Internet traffic has surpassed desktop traffic in 2016 and since then the trend keeps growing. In 2018, 52.2 percent of all website traffic worldwide was generated through mobile phones. Mobile users consume double the minutes than desktop users. Mobile currently accounts for half of all global web pages served. It is predicted that by the end of 2018 73% of global internet traffic will be from smartphones and tablets.

Google recognized these shifts in user behavior and on April 21, 2015 (also known as Mobilegeddon) released their mobile-friendliness update announcing mobile-first indexing, a topic which we covered in our earlier article.

As repeated ad nauseam in online marketing and web development circles, loading speed is an integral part of the website’s performance. It is important for SEO as well as for user experience – and ultimately conversions.  Data shows that 50% of mobile users abandon a web page if it doesn’t load in 10 seconds. 60% of those won’t return to that site anymore. Search engines have an affinity for high-performing sites. Furthermore, digital actions were responsible for $2.2 trillion in retail sales last year, with the mobile internet contributing to one trillion of that. Therefore, low-speed loading sites not only lose their potential customers but also fall short in search engine ranking. Brands which fail to prioritize mobile are missing out on multiple opportunities.

Reasons to optimise for Accelerated Mobile Pages - AMP: Slow mobile internet affects the websites

Another thing which should be taken into consideration an average mobile internet speed. It is horrifically low even in most developed countries (see image below), which causes serious issues for slow loading websites. As a result, their respective owners lose a lot of potential customers and revenue.

Reasons to optimise for Accelerated Mobile Pages - AMP: even in very developed countries mobile internet speed can be very low (map)

To tackle the issue of slow loading pages, Google launched  Accelerated Mobile Pages (AMP) – website publishing technology aimed at allowing mobile website content to render nearly instantly. The AMP is an open-source project started by Google and supported by many internet giants like Bing, Baidu, Twitter, and Pinterest. It is a distinct concept: a set of protocols developer can use to restructure the website and make it easier to be loaded and viewed on a mobile device. It’s similar to Facebook’s Instant Articles or Apple News but in the body of search results.

The AMP Project was announced in October 2015 by Google, following discussions with its partners in the European Digital News Initiative, and news publishers and technology companies, about improving the performance of the mobile web. First AMP pages started to roll out in February 2016, when Google began to show the AMP versions of web pages in mobile search results. By September 2016 Google started linking to AMP content in the main mobile search results area.

Timeline of development of Accelerated Mobile Pages - AMP:

At first, AMPs were focused on media sites. News publishers (namely Guardian), jumped on this opportunity to participate in AMP project for two reasons. First being that AMP made their pages load much faster and their content was served almost instantly to an end user. The second reason is, obviously, exposure: being featured in Google’s Top Stories News carousel. One can only get in the Top Stories carousel on a mobile device if their page implemented AMP – which made AMP essential for news publishing sites.

One year after AMP project launch, in February 2017, Adobe reported AMP pages accounted for 7% of all web traffic for top publishers in the United States.

One may wonder, though, is AMP even useful for sites which are not news publishers? Shortly, yes. AMP allows any website to enhance their user experience by speeding up loading times. Users are served with the content almost instantly. This circumvents users‘ impatience and prompts them to act. Ultimately, it can result in more positive website metrics and higher revenue. The formula is simple:

Faster Mobile Pages + Readable Content = Better User Experience

Google-sponsored research shows that AMP leads to an average of a 100% increase in time spent on page. The data also shows e-commerce sites experience an average 20% increase in sales conversions compared to non-AMP web pages. Pages which are AMP-optimized rank better and faster and they most certainly convert more mobile page visitors into customers. And which webmaster would oppose such results?

TECHNOLOGY:  WHAT MAKES AMP SO FAST?

AMP pages are published online and are compatible across browsers. AMP builds on the existing skill sets and frameworks to create web pages. Any organization or individual can build products or features which will work on AMP pages, provided they comply with the AMP Project specifications. AMP is also supported by many different platforms.

When a standard webpage has an AMP counterpart, a link to the AMP page is usually placed in an HTML tag in the source code of the standard page. Because most AMP pages are easily discoverable by web crawlers, third parties such as search engines and other referring websites can choose to link to the AMP version of a webpage instead of the standard version.

AMP FRAMEWORK

AMP framework consists of three core components:

 Accelerated Mobile Pages - AMP framework: three key comonents. AMP-HTML, AMP-JavaScript library, AMP Cache

AMP HTML is like a diet HTML: certain tags of HTML cannot be used. However, AMP – HTML is extended with custom AMP properties. Though most tags in an AMP HTML page are regular HTML tags, some HTML tags are replaced with AMP-specific tags.  These custom elements, called AMP-HTML components, make common patterns easy to implement in a way that performs well.

The simplest AMP HTML file looks like this:

 Accelerated Mobile Pages - AMP: basic AMP-HTML

AMP pages are discovered by search engines and other platforms through the <link rel="amphtml"> tag.  One can choose to have a non-AMP version and an AMP version of the page, or just an AMP version.

AMP JS LIBRARY implements AMP’s best performance practices, manages resource loading and provides the custom tags of AMP-HTML, all to ensure a fast rendering of the page. AMP introduces the whole plethora of techniques to optimize and enhance page performance. One of the biggest performance optimizations is fetching external resources asynchronously. That way requests cannot block rendering of the page content.

GOOGLE AMP CACHE is a proxy-based content delivery network for delivering AMP documents. It fetches AMP pages, caches them, and improves page performance automatically. The cache also comes with a built-in validation system which confirms that the page is guaranteed to work and that it doesn’t depend on external resources. When using the Google AMP Cache, the document, all JS files, and all images load from the same origin which is using HTTP 2.0 for maximum efficiency.

Nowadays, most AMP pages are delivered by Google’s AMP cache, but other companies can support AMP caches. For example, Internet performance and security company Cloudflare launched an AMP cache in March 2017.

HOW DOES AMP WORK?

In a nutshell, AMP platform is designed just for pure readability and an instant speed. The AMP plugin renders a mobile page more quickly, by cutting back on the HTML code tag manager aspect and rendering only the ones that are suitable for mobile users. This means no fancy CSS. Also, if JavaScript is included in mobile pages, the script won’t be rendered for the AMPs. Media and images do not load until they’re scrolled into view (which is done by JavaScript, asynchronously).

 Accelerated Mobile Pages - AMP: how they work

Furthermore, AMP is designed to be really heavily cached. That way Google host these pages on their own server and don’t need to fetch it from the original website anymore.

 

BENEFITS AND DOWNSIDES OF AMP

Except for the obvious – page loading speed and discoverability in Google’s carousel, there are also several other benefits to using AMP (when appropriate).

 Accelerated Mobile Pages - AMP - the benefits: Ad and analytics are enhanced, faster load time, lower bounce rate, enhanced SEO, compatible with most browsers, mobile friendly, optimized data consumption, no sitemap required

As of February 1, 2018, Google requires the content of canonical pages and those displayed through AMP be substantially the same. This is aimed at improving the experience of users by avoiding common difficulties with the user interface and increase security and trust.

It’s important to note that AMP is not perfect. It has some downsides too.

 Accelerated Mobile Pages - AMP: JavaScript and CSS limitations, Tracking problems, serving cached pages and complicated implementation

Since its very launch, it has been widely criticized by many in the tech industry. It was mainly due to a perception that AMP is an attempt by Google to exert its dominance on the Web by dictating how websites are built and monetized. Critics noted that since mobile search traffic is moving to be majority Google cached version of AMP, it would limit webmasters‘ control over branding and design of the page, monetization and ultimately, content served. Now, webmasters are capable of serving any content which they please on their websites. Launching of AMP and especially AMPs hosted elsewhere and not on their own servers made them think that someone could try to police which content is published. And that is very much against the concept of an open internet.

With all due respect to critics, there is no point in denying that AMP provides faster content delivery while browsing on a mobile device – which is paramount in SEO. According to Google, the project gets faster and grows every day. It can be a real game-changer in mobile optimization.

AMP is built thanks to a collaboration with thousands of developers, publishers and websites, distribution platforms and tech companies. Nowadays, AMP’s ecosystem includes 25 million domains, 100+ technology providers, and leading platforms, that span the areas of publishing, advertising, e-commerce, local and small businesses, and more!

Who uses Accelerated Mobile Pages - AMP: search engines (Google, Bing, Sogu), Social platforms (twitter, pinterest), content publishing platforms (WordPress, Medium), eCommerce platforms (eBay, AliExpress), Financial services

Which brings us to the next question: Do I need an AMP on my site?

If your business revolves around publishing, blogging or content creation, AMP is a very valuable tool. E-commerce and FinTech companies joined the AMP ecosystem too, but it’s a relatively new development. Keep in mind that AMP is an ongoing project. As the AMP platform grows, more specific optimization will be available for niche industries. Therefore, if your business belongs to any of the above categories, implementation of the AMP is at least worth considering.

HOW TO GET THE SITE OPTIMIZED FOR AMP?

How does one get the AMP on their site? We have prepared (below) a step-by-step implementation overview. It’s a TL; DR of AMP’s own Getting Started with AMP guide but we threw in the mix a few additional tips and tricks.

 Step-by-setp guide how to optimize a page for Accelerated Mobile Pages - AMP

By doing the above, the page is optimized to serve AMP when available and now it’s designed to be much faster. However, as mentioned before, Google dedicated whole hosting service solely for AMPs. And it would be a pity not to take advantage of it. The version that shows up in Google search results will be typically cached version hosted on a gstatic.com (i.e. Google’s server). Both versions, though, the one hosted on own server and the one cached on gstatic.com those contain  rel=“canonical“  back to the original.

Which brings us to another important aspect: ads and monetizing. As described above in step by step implementation overview, it is possible to serve the ads just like one would serve them on regular pages. Adverts from most of the major advertising platforms (AdSense, Outbrain and many others) are currently using amp-ad extended component to allow serving ads and enable the content creator to accrue all the revenue.

Also, with the cached version, it is possible to use Analytics. The analytics in AMP is solved intelligently: to prevent multiple analytics tracking from slowing down a site, philosophy of “measure once, report to many” is implemented. There are two ways to enable analytics functionality with AMP for your website:

  • The AMP-Pixel Element: This is a simple tag that can be used to count page views as a typical tracking pixel would, using a GET request.
  • The AMP-Analytics Extended Component: a bit more complicated but allows for a greater level of configuration for analytics interactions.

Both, advertising and analytics are possible even for the cached version.

As mentioned before, AMPs are very strict in protocols they use to build the pages. The tags have to be in certain orders and certain places, there are restrictions when it comes to using custom CSS and JavaScript, and even some HTML5 tags are not allowed.

Technical limitations of Accelerated Mobile Pages - AMP

If you decided for AMP, what really matters is speed and readability, not shareability. Social buttons may not work at all, but you can always make sure there are links to your original website.

If the AMP page created is invalid, it will end up not being used. To prevent that, it is necessary to validate the AMP pages. For that, there is a tool built into Chrome’s developer tools as well as AMP Project Validator.

For the websites which are created with some sort of CMS (like WordPress), there are plugins available which will do a lot of work in creating AMPs.

 

In conclusion, with mobile traffic continuing to grow and search engines favoring mobile-friendly sites, demand for fast-loading mobile pages keeps increasing. Webmasters are competing to offer the best possible experience for their users. AMP is a pretty simple way to achieve those goals.

Web pages and ads published in the AMP open-source format load near instantly, offering a smooth, more engaging user experience on mobile and desktop. AMP provides a boost in visibility too, by making the page eligible for the AMP carousel. This can give the page a substantial boost in organic search results. Furthermore, using AMP could increase the amount of time visitors spend on the site. AMP also gives more opportunities to engage with the visitors. Visitors on an AMP are more likely to interact with any of the features, including forms, buttons, links, videos, and even online shopping. They perceive the site as reputable – since they came on it through a high ranked page in search results.

There is also an „early bird catches the worm“ element to it. If one adopts AMP before the competition, they come across as a frontrunner. On the other hand, if one waits and implements AMP too late, they allow the competition a significant advantage. However, each webmaster should decide for themselves. Unless the industry dictates AMP as a must-have, there is still some space to wait a bit and do it when the time is right.

In the end, we compiled the content of this overview in an infographic; which you can download as .pdf below.

Download an Infographic on AMP here


References:

Share your thoughts

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d Bloggern gefällt das: