Barbarian Meets Codingbarbarianmeetscoding

WebDev, UX & a Pinch of Fantasy

2 minutes read

AMP - Accelerated Mobile Pages Wiki

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!

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!

Jaime González García

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).Jaime González García