AMP version of a page renders

AMP HTML

AMP HTML differs from regular HTML (or HTML5) in that it comes with mobile-focused properties and custom tags. AMP HTML guarantees certain baseline performance characteristics—which translates to content loading faster on users’ devices. This means faster consumption by the reader and a better overall user experience, which can impact conversion rates and SEO/content marketing metrics like bounce rate (mentioned above) and time on site. (Faster consumption means the reader can consume more articles in less time).AMP JavaScript

AMP JavaScript enables the AMP page to more efficiently provide the core benefit of the regular page to the reader. The AMP JavaScript library employs AMP’s top practices like inline CSS and font triggering—which ensure faster rendering of the AMP page for readers. It also allows for performance enhancement techniques, like pre-calculating the layout of every page element before resources are loaded, and disabling slow CSS selectors—all of which are crucial to the reader’s experience.

 

Image source

AMP Cache

The AMP cache is built to serve only recent mobile phone number data valid pages and to let them pre-load safely and efficiently. What this means is, a confirmed page (which we’ll get to later) is guaranteed to work, eliminating dependency on external factors that could slow the page down.

Given the below breakdown, you can see that by cutting back on the HTML code tag management and loading only the page elements that are suitable for mobile users, the  more quickly. Will Critchlow’s Whiteboard Friday diagram provides a simple visual for this:

 

 

As Critchlow notes, if you have an AMP version, in the source code, you would designate that with the rel AMP HTML link. For example, if you put /amp at the end of any news story on The Guardian website (even on desktop), you’ll see the AMP HTML. It’s linked in display with the AMP HTML link in the source code. You can also see the AMP difference:

Here’s a regular Guardian news story page:

 

And here’s the AMP version of that same Guardian news story page:

That is, after adding “/amp” at the end of the link.

 

Without the ads, menu navigation, recommended reads, and other resource-heavy elements, the page loads faster and is a simpler experience for the reader.