What exactly is AMP?

AMP is essentially a performance optimized HTML and JavaScript framework designed to deliver content quickly. It was originally conceived as a delivery format mostly for static, news-type content. But AMP has already evolved beyond its original static content aspirations, and now rich, interactive, and engaging pages can be built. Indeed, the range of user experiences possible was underscored at the first ever AMP conference in NYC in March 2017, where a fully functional messaging app was demonstrated, as well as an e-commerce app complete with payment capabilities.

There are three main components of AMP: AMP-HTML, AMP-JS, and AMP Cache. Let's take a look at them next.

AMP-HTML

AMP-HTML is an HTML5-based markup language that's used to write AMP content. It's basically a flavor of HTML5 designed with performance in mind. It both restricts and extends the HTML tags you can use in your pages. It restricts the HTML tags you can use to ensure reliable performance, and it provides a set of custom HTML tags--AMP components--to deliver rich but constrained functionality on top of the permitted HTML tags.

Because they are HTML-based, AMP pages will run in any web browser, out of the box. Additionally, AMP-HTML is designed so that it can also be served from the AMP Cache, and when it is, further optimizations can be automatically applied.

AMP-JS

AMP-JS is a JavaScript library that powers AMP pages. It's a runtime that orchestrates the optimized loading and rendering of AMP content. To achieve lightning-fast page loads, AMP-JS follows strict web performance best practices.

AMP-HTML restricts the tags you can use so that the exact layout needed to render the page can be known in advance. The AMP-JS runtime calculates page size and converts your custom AMP-HTML tags into HTML that the browser understands. It also assumes control of the loading of resources from the browser, so that it can prioritize resources that are above-the-fold or likely to be viewed by the user.

AMP Cache

Sometimes referred to as AMP-CDN, this is the caching component of AMP. It's a free-to-use content delivery network (CDN), for caching AMP pages so that they can be rendered instantly. Anyone is free to implement and use their own CDN. AMP Cache is a key component in delivering AMP's instant-loading experience.

When AMP pages are served from the cache, they can be optimized even further. These optimizations include:

• Resizing images to match the user's viewport (reduces page size)
• Inlining images that are above-the-fold (reduces HTTP requests)
• Inlining CSS (reduces HTTP requests)
• Preloading of extended components (reduces perceived page load time)
• Minification of HTML and CSS (reduces page size)
• Pre-rendering of web pages in the background (reduces perceived page load time)

AMP URLs

It's worth noting that a side-effect of the AMP Cache is that AMP documents will have a separate URL for the cached version. In fact, AMP documents have three different kinds of URL. For domain example.com, these will be:

• Original URL:
  https://example.com/amp_doc.html

• AMP Cache URL:
  https://example-com.cdn.ampproject.org/c/s/example.com/amp_doc.html

• AMP Viewer URL (when viewing AMP pages from Google search results):
  https://www.google.com/amp/example.com/amp_doc.html

Having three URLs might be a little confusing, but they're necessary for caching and pre-rendering in AMP.