AMP - Accelerated Mobile Pages Wiki
What are Accelerated Mobile Pages?
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.
How does AMP work? How can it make your website faster?
AMP packages all the learnings from the RAIL model to load your pages faster by:
- Executing all AMP javascript asynchronously so that it doesn’t block page rendering
- 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.
- Removing third party javascript from the critical rendering path
- AMP extensions like highly interactive UI components don’t block rendering
What to Learn More? Check this references!
Written by Jaime González García , dad, husband, software engineer, ux designer, amateur pixel artist, tinkerer and master of the arcane arts. You can also find him on Twitter jabbering about random stuff.