This article is part of my personal wiki where I write personal notes while I am learning new technologies. You are welcome to use it for your own learning!
Accelerated Mobile Pages or AMP are a set of web technologies aimed at providing super fast mobile web experiences out of the box. Using a restricted version of HTML extended with AMP specific custom elements, AMP can optimize the rendering of your website to provide an optimal experience to your users.
AMP is comprised of three element:
- AMP HTML, a restricted version of HTML extended with custom elements.
- AMP JS, a library that packages all best performance practices by providing the custom elements of AMP HTML, manages resource loading to optimize fast page rendering, disables slow CSS selectors and ensures that all external resources are loaded asynchronously.
- AMP Cache, a Google CDN that can be used to serve AMP content with awesome speed.
AMP packages all the learnings from the RAIL model to load your pages faster by:
- Setting a static size for all resources which prevents layout recalculations
- All CSS must be inline and it has a max size
- Efficient font triggering
- Minimize style recalculations
- Only run GPU-accelerated animations
- Prioritizing resource loading, loading only what’s needing when it’s needed and prefetching lazy loaded resources.
- Load pages in an instant with the aid of the preconnect API which starts loaded pages before the user starts navigating to them.
- AMP extensions like highly interactive UI components don’t block rendering
Written by Jaime González García , Dad, Husband, Front-end software engineer, UX designer, amateur pixel artist, tinkerer and master of the arcane arts. You should follow him on Twitter where he shares useful stuff! (and is funny too).Follow @vintharas