AMP stands for Accelerated Mobile Pages, a way to build web pages for static content that render fast, really fast.
Today AMP in action consists of three parts:
- AMP HTML
- AMP JS
- AMP CDN (optional)
AMP HTML
AMP HTML is regular HTML extended with custom AMP properties.
Some tags and elements are replaced with AMP-specific tags. These are called AMP HTML components. An example of an AMP HTML component is the amp-img tag wich provides full support for srcset in all browsers.
Example of the most simplified AMP HTML-file:
<!doctype html>
<html 
>
<head>
<meta charset=”utf-8″>
<link rel=”canonical” href=”welcome-to-semantiko.html”>
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src=”https://cdn.ampproject.org/v0.js”></script>
</head>
<body>Welcome to Semantiko!</body>
</html>
AMP JS
To manage resource loading the AMP JS library implements all of the AMP´s best practices for performance.
The big thing is that the JS library makes all resources asynchronous (even external) so nothing can block the page from rendering.
Other examples are pre-calculation of the layout and disabling of slow CSS selectors.
AMP CDN
The AMP CDN is optionally, it uses a proxy-based CDN for delivering all valid AMP documents. All the JS, images and documents are optimized, cached and load from the same origin using HTTP 2.0 for maximum performance.
The CDN also handlesvalidation of the AMP page to guarantee that the page is working and that it doesnt depend on external resources.
Videos about Accelerated Mobile Pages
Speaker: Paul Bakaus
AMP: Accelerated Mobile Pages with Paul Bakaus
Speaker: Malte Ubl
AMP Anatomy with Malte Ubl
How AMP speeds up performance
- Allow only asynchronous scripts
- Size all resources statically
- Don’t let extension mechanisms block rendering
- Keep all third-party JavaScript out of the critical path
- All CSS must be inline and size-bound
- Font triggering must be efficient
- Minimize style recalculations
- Only run GPU-accelerated animations
- Prioritize resource loading
- Load pages in an instant
To find out more about this awesome idea, read more about the AMP project here.
