Why You Should Use AMP (Accelerated Mobile Pages)

Peter A. Liefer II | Posted: June 18th, 2019

We all know how important mobile is nowadays, at least you should. Here are just a few statistics to highlight this.

  • 4 out of 5 consumers use smartphones to shop. (Source: Convince&Convert)
  • In 2018, mobile ad spends worldwide came to $138.1 billion and could reach 212.4 billion by 2021. (Source: Statista)
  • In January 2019, there were 3.986 billion unique active mobile internet users. (Source: Statista)

You can see why it is so important nowadays to have a mobile responsive website to deliver your message to the most consumers. (Learn more read, Why Mobile-friendly Websites Spell SEO Success.)

More than just being mobile responsive though, your content needs to load fast. Page speed is an important ranking factor, and if your website doesn’t load fast, visitors will bounce right off. 40% abandon the site if their wait exceeds three seconds. This is true for PC and Mobile devices.

Mobile operating systems, CPUs and graphics processing are smaller than on desktop. Getting your content to load fast on mobile so visitors stay and you can get conversions requires minimizing the amount of scripts and data. This is why you should use AMP – Accelerated Mobile Pages.

AMP HTML

What is AMP?

AMP is an open source web component framework and a website publishing technology developed by Google which provides fast loading web content. Basically, it is a stripped-down form of HTML (Hyper Text Markup Language), the code used to create a website with certain limitations.

The Google AMP framework consists of three components:

  1. AMP HTML: A redesigned version of HTML with a new set of custom AMP commands.
  2. AMP JS: A new JavaScript structure for mobile pages that allows all loading of external resources one by one (asynchronous).
  3. AMP CDN (Content Delivery Network): This takes AMP-optimized content and caches, serves and validates AMP pages for fast delivery. Referred to as AMP-Cache.

Even with this stripped-down functionality, content such as images and videos can still be published on AMP pages by caching them to Google. Instead of embedding images and videos on your website, which slows load time, the AMP CDN serves this content via Google. The image or video content will still appear on your page, but the source links back to Google’s copy of it, allowing your page to load faster.

Caches are a fundamental part of the Accelerated Mobile Pages. There are also currently 2 other AMP Cache providers, CloudFlare AMP Cache, and Bing AMP Cache. As a publisher, you don’t choose an AMP Cache, the platform which links to your content chooses the AMP Cache to use.

Google likes it when you use AMP because it likes speed. As mentioned, page speed is an important ranking factor. Google reports that AMP pages served in Google search typically load in less than one second and use ten times less data than the equivalent non-AMP pages. CNBC reported a 75% decrease in mobile page load time for AMP Pages over non-AMP pages, while Gizmodo reported that AMP pages loaded three times faster than non-AMP pages.

AMP allows you to repurpose content to match the device it’s being served on. You can have two versions of your content: one version for desktop, and one for mobile. Each version delivers the most efficient experience for users based on the device they’re using. You can have a regular desktop version of a page and in the source code you have an AMP version you designate with the rel AMP HTML link (<link rel=”amphtml”), which points over to a hosted AMP page. While AMP is designed with mobile responsiveness in mind, it will work across all screen sizes.

AMP can be used to build:

  • AMP Websites – enables the creation of websites that are consistently fast and high-performing across devices and distribution platforms.
  • AMP Stories – provides content publishers with a mobile-focused format for delivering news and information as visually rich, tap-through stories.
  • AMP Ads – a faster, lighter and more secure way to advertise on the web.
  • AMP Email – allows email marketers to embed the interactive elements like carousels, accordions, confirmation, purchase buttons, etc., into the emails without opening a new tab to visit a website.

AMP MOBILE SEO

Accelerate your SEO and Sales

There are two main benefits of AMP for SEO. One is pages making use of AMP coding appear in special places in search results and/or with a special “AMP” designation. This leads people to click on your page more often because they know it is fast. The other benefit is that it’s a ranking factor.

Google-sponsored research shows that AMP leads to an average of a 2X increase in time spent on a page. The data also shows e-commerce sites experience an average 20 percent increase in sales conversions compared to non-AMP web pages.

How does AMP make pages load so fast?

AMP makes your pages fast, to the point where their load time feels almost instant. But how does AMP do it? How does AMP get to that high speed?

First, you need to understand that your webpages use these 3 programming languages:

  1. HTML to define the content of web pages
  2. CSS to specify the layout of web pages
  3. JavaScript to program the behavior of web pages

Accelerated Mobile Pages have specific rules for using them. How they are used or not used is important. Our Arizona web design firm has developers who understand how to follow the AMP guidelines and best practices.

AMP has seven features that enable it to create this super-fast loading time.

  1. AMP never stops the load chain 

Most websites include assets and scripts that are synchronously downloaded in the order specified and therefore block the rendering of the page. For example, a third-party ad, that appears between two blocks of content will stop the rest of the page from rendering until the ad is fully available.

AMP solves this by making all of its own scripts and components load in parallel, at the same time by NOT allowing any custom JavaScript that could break those rules. Instead, interactive page behavior features are handled in custom AMP elements. The custom AMP elements may use JavaScript, but they’re carefully designed to make sure they don’t hurt performance.

JavaScript can be used by IFrames, an HTML element used to insert content from another source, such as an advertisement into the Web page. While third-party JS is allowed in IFrames, it still cannot block the main page from rendering.

  1. Asset-Independent Layout

On a normal HTML page, the browser rarely knows what the layout will be before all assets are loaded. It won’t know how much space it needs for assets such as pictures until they are fully loaded. It won’t know if there is enough space for the rest of the content.

In AMP, all external images, ads or IFrames must state their size in the HTML so that AMP can determine each element’s size and position before the actual resource is loaded. AMP loads the layout of the page without waiting for any resources to download. Only one HTTP request is needed to lay out the entire document.

  1. Inline size-bound CSS

CSS (Cascading Style Sheets) is used by programmers to specify the style of your webpages such as font color, size, and other elements. So they don’t have to rewrite code every time some content is to be displayed, they call on a Style Sheet. However, CSS blocks all rendering and page load and is used a lot in the HTML. AMP pages allow only ONE inline style sheet with a maximum size of 50 kilobytes.

  1. Large web fonts

Web font optimization is crucial for performance. A browser will wait to download huge fonts until everything else is done. The AMP system requires zero HTTP requests until the font starts downloading.

  1. Minimizing style and layout recalculations

Each time you measure or change something by a script on a page, the browser has to layout and recalculate the page, and these operations can get expensive in terms of load time. For example, two pictures are already loaded on the page. When the first picture is half-loaded, it’s in one place. But when it’s fully loaded, the content is pushed further down, so the browser doesn’t know in advance what will happen to the layout of the page until all assets are loaded.

With most web pages, multiple scripts do various dynamic actions at the same time, causing many changes in the layout. Because AMP mediates all render operations, it intelligently combines readings and changes to minimize effort.

  1. GPU (Graphics Processing Unit) accelerated animations

For a long time, your CPU (computer processor) did all the work to display a page in a browser. With advances in GPU’s, they have become efficient at managing pixels. AMP offloads a lot of the visual work to the GPU, freeing up CPU cycles and make your page run faster.

  1. Prioritized resource loading

When AMP downloads resources, it optimizes downloads so the currently most important resources are downloaded first. Images and ads are only downloaded if they’re likely to be seen by the user above the fold or if the user is likely to quickly scroll through them. The key here is that resources are loaded as late as possible, but pre-fetched as early as possible. That way, things load very fast, but precious CPU cycles are only used when resources are actually shown to users.

Get Amped up

With AMP you have faster load time leading to better engagement and reduced bounce rate, plus it improves mobile ranking. If you are looking for an SEO Company in Arizona that can code Accelerated Mobile Pages, PrimeView is at your service. Contact us today to get started!