Introduction

Mobile now overtakes desktop for usage of all web-related activities. The gradual shift culminated in 2018, when mobile accounted for more than 50% of usage worldwide, finally surpassing desktop at 45%.

 

Mobile usage 2018

Source: StatCounter Global Stats - Platform Comparison Market Share

This trend became steady and powerful enough to motivate Google to create the Accelerated Mobile Pages (AMP) Project in 2016. It's an open-source effort to help optimize websites for mobile browsing.

AMP is essentially pages that use a very specific framework based on existing HTML to streamline information exchange with browsers. This structure creates a seamless, faster, and more efficient user experience. AMP makes loading speed for pages almost instantaneous.

A large community of professionals developed the AMP framework with Google backing the initiative. It works with all browsers and integrates with commonly used content management systems (CMS), such as WordPress and Drupal. AMP is a viable way to increase traffic and improve visitor retention on your company's website.

Want to learn more?

Do I Have to Implement AMP to Optimize for Mobile?

No. But here's why it became popular in the beginning.

Google used to reward the use of AMP by favoring it in Top Stories and other search results. After the Page Experience algorithm update in 2021, Core Web Vitals became the primary ranking factor, incorporating speed and stability. New tools emerged in Google Search Console, PageSpeed Insights, and other places to help developers achieve faster downloads and remain steady on mobile. So, AMP is no longer the go-to tool for increasing speed and improving rank.

Four Reasons to Consider Implementing AMP

You can still use AMP to meet the requirements for Core Web Vitals. Google continues to support and improve the framework. You don't have to abandon AMP if it works for you without issue.

Let's look at four reasons to use AMP:

  1. Faster load time
  2. Lower bounce rate
  3. Higher performance and flexibility
  4. Mobile Search Engine Optimization (AMP SEO)
1. Faster Load Time

Accelerated mobile pages are all about speed. Developers founded the project on the idea that mobile users expect results quicker. So, pages adjusted for smartphone use should load at optimal speeds. To achieve faster downloads, developers reduced some of the more complex pieces of back-end programming to favor efficiency.

How does AMP make pages load faster?

Content rendering never stops. Normal pages obey a loading order specified by the underlying code. The browser follows this code to the letter and renders each part by turn. So, until the first piece of content meets certain loading criteria, the next piece of content on the page won’t load. For example, a third-party script such as an ad could take longer to load and stall the rendering process.

The AMP framework makes all its components load simultaneously, while not allowing any sort of script to impede the one golden rule of parallel rendering. Custom AMP elements designed to never interfere with performance handle all the interactive features on the page. 

You can still use Javascript on your pages if you'd like. There are ways to create dynamic and interactive content within the AMP framework, as long as you proceed with caution.

Asset-independent layout. Browsers typically need every single asset on the page to load before they can recognize what the page will look like. The layout includes various images, media elements, and scripts that need to load before the browser can know their size and effect on the page. In AMP, HTML handles everything. So, before any of these elements load, the browser knows what the layout will be because the underlying code establishes the size. This “static layouting” allows pages to load at once without waiting for other resources.

Inline, size-bound CSS. AMP only allows a single stylesheet. By limiting the number of CSS, it reduces the HTTP requests to just a single one. AMP also restricts the CSS size by 50 kilobytes. This size is ample enough for some good design but still forces the developer to use clean and efficient coding.

Font optimization. Normal websites wait until everything else loads before downloading large fonts on pages. Because AMP limits the CSS and use of external scripts, the system requires no HTTP requests until the font downloads.

Minimal style and layout recalculations. Dynamic scripts on normal websites can change the page layout based on user interactions. This interference forces the browser to recalculate how the content will look. The limits put in place by AMP reduce the need for these calculations.

CPU vs. GPU image acceleration. When a CPU renders a page, it uses layers for the images, then sends the media to the GPU (graphics card) for further actions. AMP only allows images to be handled directly by the GPU, which makes load times shorter.

Prioritizing resource loading. AMP prioritizes resources likely to be seen by the user. This ranking means everything above the fold, but also resources that the framework predicts are important. AMP can pre-fetch this data before loading because of static layouting. The information is there and ready to use, but only renders when a user needs to see it.

AMP is about speed, which means other aspects come second to performance. You may need to alter your ideal web design and sacrifice some details to embrace AMP's speed enhancement. If you're not willing to change your design, you must weigh your options. Decide whether your visitors would rather have a mobile page with all the bells and whistles or one that gives them nearly instant gratification.

Need help implementing mobile compatibility on your website?

2. Lower Bounce Rate

Research by Google finds not only do mobile users expect fast loading times, but their expectations also play a vital role on their decisions to stay.

The study found load times of up to three seconds have a bounce rate of more than 30%. Up to five seconds increases the bounce rate to 90%. At the six second mark, the rate surpasses 100%.

Mobile speed optimization is crucial for your company to survive and stay ahead of the competition. Given the smartphone market share, having a mobile-friendly website will make or break your business. AMP can set your company apart with nearly instantaneous loading times.

3. High Performance and Flexibility

AMP may not be the only framework designed to improve mobile website performance. But it's flexible for granting access to a streamlined stylesheet and great for performance. AMP was born from the idea that mobile users want their content now.

You shouldn't dismiss tools such as Responsive Web Design, Progressive Web Apps, or other alternatives. It’s up to your developers to discuss all the options, including AMP, and pick which one is best for your business needs. 

4. Mobile Search Engine Optimization (AMP SEO)

Performance and speed are important factors for retaining and converting visitors. But to drive traffic, your website needs to rank in search engines.

Google began the AMP Project because of increased mobile browsing trends. In 2018, the search engine giant rolled out mobile-first indexing, which assigns ranks based on how friendly pages are for mobile navigation.

This shift meant the usual best practices for SEO as part of a digital marketing strategy were no longer enough. Making your website mobile-friendly and optimizing it with the AMP framework meant your company had a better chance of ranking higher on results pages. Now, ​​SEO depends on creating great Page Experience and meeting Google’s ranking factors.

AMP pages with structured data appeared in Top Stories, host carousel of rich results, Visual Stories, and rich results in mobile search. These results included images, page logos, and other interesting search result features. Learn more about structured data for AMP here.

Here's an example of JSON-LD code on an AMP page with Article structured data.

        
            <html amp>
  <head>
    <title>Article headline</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://google.com/article"
      },
      "headline": "Article headline",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
       ],
      "datePublished": "2015-02-05T08:00:00+08:00",
      "dateModified": "2015-02-05T09:20:00+08:00",
      "author": {
        "@type": "Person",
        "name": "John Doe"
      },
       "publisher": {
        "@type": "Organization",
        "name": "Google",
        "logo": {
          "@type": "ImageObject",
          "url": "https://google.com/logo.jpg"
        }
      }
    }
    </script>
  </head>
  <body>
  </body>
</html>
AMP: Yes or No

There are some setbacks associated with AMP. You probably won't be able to replicate your normal web design if it’s too complex and charged with dynamic elements. You can sidestep this issue with some clever programming, but it requires creativity and patience.

Also, the framework does not allow Google Analytics tracking because of its heavy reliance on cached information. But you can fix this issue with some simple solutions.

Whether you choose AMP or another method, making your website mobile-friendly will lead to better landing page experiences and higher search engine rank.

Comments

skyline


O8 is a web and digital marketing consultancy based in Minneapolis, MN offering expert-level UX Design, CRO, and strategic consulting, as well as highly-technical capabilities in Drupal, WordPress, and HubSpot

We work differently from traditional agencies in that we extend your team with ours.