Dmytro Davydov
Feb 22, 2022 | 11min read

Mobile page loading speed is one of the key parameters that Google uses to measure the overall quality of a page. It is clear as daylight: if the page takes a long time to load, the user is less likely to stay on the site. And why should Google allow for a sub-par search experience by showing its users low-quality page results?

To emphasize the importance of mobile loading speed, on 7 October 2015, Google introduced the Accelerated Mobile Pages (AMP) HTML framework to help website owners speed up mobile pages. However, after the Page Experience update in the summer of 2021, many users feared that AMP would lose its impact: pages were no longer required to be made with AMP to appear among the Top Stories, and fast loading speed could be ensured with tools other than AMP.

There has been a great deal of controversy around AMP, and in this article, we will explain what this technology is, when and how it can be used, and where its alternatives stand.

What is AMP

Accelerated Mobile Pages is an HTML framework that allows instant page loading on mobile search. To become a verified AMP, the page should follow a specific set of rules. Once these requirements have been met, Google will consider the page trustworthy and preload its key elements to reduce loading time. When users click on the link, the page will load directly from the search almost instantaneously.

You might notice that the AMP page’s URL remains on the Google domain—as if you were browsing the site within the site. And under the address bar, you will see the original domain name and the “i” icon, which opens the “What is AMP” page.

Example of Accelerated Mobile Page

If websites want the original domain name to be shown in the URL, they can use the Signed Exchanges (SXG) technology. This AMP extension allows the original source of content to be identified.

What are Accelerated Mobile Pages designed for

54% of Internet users use smartphones for searching information, and that number continues to grow. As mobile traffic prevails, Google’s efforts are aimed at improving the mobile user experience. In 2019, Google switched to mobile-first indexing, introduced Core Web Vitals to determine the quality of mobile pages, and included mobile usability reports to the Search Console

Despite the fact that quality mobile pages rank higher in the search results, it’s also obvious that users simply don’t like slow pages. Pages with low loading speed have a significantly higher bounce rate—some users don’t wait for a page to load and leave the site. After 3 seconds of waiting the bounce rate is skyrocketing—40% of users won’t wait 5 seconds for a page to load. Thus, with a low loading speed, you simply get less traffic.

Loading time also affects other key metrics. For instance, the conversion rate per transaction is significantly higher for pages that load in less than 2 seconds. In other words, it is 2-3 times more likely that users will make a purchase on pages that load in 1-2 seconds rather than 5 seconds.

Depending on different studies, these numbers may vary. But the conclusion will be the same—page loading speed matters a lot. 

Alternatives to Accelerated Mobile Pages

Accelerated Mobile Pages are not the only way to improve loading speed and user experience on mobile devices. The goal of reducing the loading speed to 3 seconds can also be achieved with the help of the following techniques.

Responsive Web Design

Responsive web layout by itself does not increase loading speed but makes a page equally accessible for desktop and mobile. To meet the required loading speed, you should consider:

Responsive layout principles are similar to AMP, the only difference is that the responsive page cannot be preloaded from search. Nevertheless, with the correct optimization, it is more than possible to reach the loading time of 1-3 seconds. For more information, check out our article on mobile optimization.

Progressive Web App

The Progressive Web App (PWA) technology allows a website to be turned into an application. There are no particular limitations—with proper configuration, any site can become a PWA. But this technology best suits sites that could run like applications, for example, SaaS resources. 

PWA is based on the so-called Service Worker. This script allows the downloading and processing of information in the background while users are navigating the site. This way, the content is preloaded and loading is greatly sped up. Also, users can install a PWA as a separate application. During the installation, all PWA elements will be preloaded.

It is easy to see the principal similarity between RWA and AMP—both technologies preload website content. But each approach has its drawbacks:

  • In PWA, the first page loads slower than all following ones because all elements are being loaded and cached during the first visit
  • In AMP, transitions from AMP to non-AMP pages happen with a delay

Fortunately, you can use AMP and PWA simultaneously and counterbalance their weaknesses. AMP can facilitate and speed up the first visit, and PWA will accelerate subsequent interactions. To optimize and expedite the user journey on your website, you should:

  1. Apply AMP to landing pages to make visits from search as quick as possible.
  2. Apply PWA to internal pages to speed up transitions between them. This could be done through a special AMP Service Worker script that preloads PWA content while the user is on the AMP page.

Facebook Instant Articles

This is Facebook’s analog to AMP. The difference is that AMP gets visits from mobile search and Instant Articles does so from Facebook. The technology was introduced on 12 May 2015, about six months prior to the AMP release. Nevertheless, according to parse.ly data, AMP overtook the competitor in 2017 and continues to widen the gap.

Instant Articles can be useful for sites that get a significant portion of traffic from Facebook. In the same manner as AMP, Instant Articles are supposed to minimize the content loading time and reduce the bounce rate. 

AMP: Pros and Cons

The AMP technology has obvious benefits and, as always, several “buts.” Let’s get to know them.

Pros

  • Reduced page loading speed. The main advantage of using AMP is that it helps load pages quickly. In turn, page loading speed has an impact on search engine rankings. Thus, by using AMP, you directly improve the site’s SEO.
  • Reduced bounce rate. Page loading time affects the bounce rate. This means you can get more traffic.
  • Improved conversions. Faster page loading also enhances UX. In other words, it helps get loyal users who are more likely to convert.
  • Increased chance of getting to the Search Gallery. Search Gallery is a separate SERP element that features several search results. Depending on the query, it can have a different appearance: news, recipes, etc. By getting into this block, you can get more traffic.
Example of Google Top Stories

To get into the Search Gallery, you should add the appropriate Schema markup to your page. But with AMP, you are more likely to get to the top position in the gallery—Google prefers AMP pages as they provide instant access to content directly from search.

  • Swipe-to-Visit feature. This unique feature allows previewing AMP-enabled pages directly from Google Image search. After selecting an image, the user can simply swipe up on the preview to load the corresponding web page.
Swipe-to-Visit Feature

Cons

  • JavaScript limitation. AMP limits the use of third-party JS code. As a result, most analytics and advertising tools will not work for AMPs.
  • An increased time when navigating between pages. When users open an AMP page, they basically visit Google servers, not the actual site. And if they want to visit another page, they have to wait for the website content to be completely loaded. Hence, you risk losing users acquired from AMP acceleration.
  • Issues with Google Analytics. AMP URLs differ from regular pages—users do not visit the site but remain on the Google search results page. This means you will not be able to use Google Analytics and track page performance. We’ll talk about AMP analytics later in this article.

With strengths and weaknesses in mind, we can assume that the perfect scenario for using AMPs is when users visit the page from SERP, quickly get the necessary information, and leave the page. That makes AMP perfect for blogs, news sources, etc. 

How to convert a regular page into AMP

For AMP to function correctly, you need to meet multiple requirements:

  1. Apply the AMP markup
  2. Replace unsupported HTML tags
  3. Display images at a resolution that exactly matches the user’s device 
  4. Place above-the-fold images via data:URL
  5. Combine all CSS rules into one line

The complete list of specifications can be found on the amp.dev website.

To check all the requirements, you can include the AMP script in the <head> element and look at the AMP validator errors in the browser developer console. Sometimes it is easier to build an AMP page from scratch than to fix all the errors on an existing page.

List of Errors in AMP Validator

How to make AMP pages on WordPress sites

Being the most popular CMS, WordPress offers many out-of-the-box solutions to automatically convert regular HTML pages to AMP. Using them, the webmaster will not notice any differences—the site will not undergo any specific changes and everything will remain the same in the admin panel. The only thing that will change is the page loading speed.

At the moment, there are two plugins worth testing:

  1. Official AMP Plugin for WordPress
  2. Unofficial AMP for WP – Accelerated Mobile Pages

How AMP impacts SEO

As we’ve mentioned, AMP considerably speeds up page loading time, which, in turn, affects page quality in the eyes of Google. However, Core Web Vitals consider LCP, FID, and CLS metrics instead of the time it takes to load the whole page. So to get the most out of your page, you should take all of these parameters into account. Fortunately, AMPs usually perform great against these metrics.

Core Web Vitals Metrics

AMP Analytics

Since AMP pages do not support standard tracking scripts, common analytical tools cannot work properly with them. Nevertheless, there are special tools for AMP analytics. Although there are quite a few of them, they can easily compete with Google Analytics itself. Let’s meet the heroes.

To enable AMP analytics, you should use a tracking code that’s different from the one used in Google Analytics. Even so, all of the data can be seamlessly transferred to GA. In particular, you can analyze:

  • Pageviews
  • Clicks on page elements
  • Event time 
  • Scroll depth

However, there are some limitations to the AMP analytics:

  • Non-numerical tools like user sessions recordings or heatmaps are not available for AMP
  • Additional configuration is required to identify users who transferred from an AMP to a non-AMP version

With the right settings, you can get the most out of the information you need to properly analyze a page: how well CTA works, how much time users spend on the page, what ads are shown to them, etc. To learn more about AMP tracking, check out use cases here.

Takeaway: Do you need AMP?

The AMP technology has as many significant advantages as limitations. That’s why it won’t fit everyone:

  • AMP is recommended for blogs, news, recipe sites, and other resources that get monetized by showing ads. With AMP, site owners don’t have to put much effort into fixing up the layout and enabling analytics but will get more traffic and a reduced bounce rate.
  • Other sites should pay attention to general loading speed optimization. It makes no sense to land users on fast AMPs and then make them wait when visiting other pages.
  • The worst option is to not optimize the loading speed at all—this can increase the bounce rate by up to 50-70%. With such a high rate, any other improvements on the site become pointless.

Share article
109
Post
Write a comment

Your email address will not be published. Required fields are marked *

More Articles