AMP (Accelerated Mobile Pages) is an open-source library that creates web pages that load instantly. It uses HTML with restrictions and AMP-specific components to optimize page performance. The AMP cache delivers cached AMP pages via a CDN. AMP works by asynchronously loading resources, statically sizing elements, prioritizing loads, and only allowing certain animations. It improves user engagement through speed while allowing mobile-friendliness and SEO benefits. AMP has requirements like specific tags and boilerplate but also limitations like disallowing external CSS, JavaScript, and certain elements.
2. AMP is an open-source library that provides a way to create web pages that are
compelling, smooth, and load near instantaneously for users.
AMP HTML : AMP HTML is HTML with some restrictions for reliable performance. It uses some of the
AMP specific tags called AMP HTML components to make common patterns easy to implement in a
performant way.
AMP JS : The AMP JS library ensures the fast rendering of AMP HTML pages. It implements all of the
AMP optimizations, provide custom-tags, makes everything that comes from external resources
asynchronous and do the pre-calculation of the layout of every element on page before resources are
loaded for fast rendering of the page.
AMP Cache : The Google AMP Cache is a proxy-based content delivery network for delivering all valid
AMP documents. It fetches AMP HTML pages, caches them, and improves page performance
automatically.
3. How AMP works!!
1. Execute all AMP JavaScript asynchronously.
2. Size all resources statically.
3. Don’t let extension mechanisms block rendering.
4. Keep all third-party JavaScript out of the critical path.
5. All CSS must be inline and size-bound.
6. Font triggering must be efficient.
7. Minimize style recalculations.
8. Only run GPU-accelerated animations.
9. Prioritize resource loading.
10. Load pages in an instant.
4. Benefits
● Improve user engagement with fast and instant experience.
● Low Bounce rates.
● Mobile friendly and enhanced SEO(Search Engine Optimization).
5. What allowed in AMP and What Isn’t
Must Haves:
● start with the doctype <!doctype html>.
● contain a top-level <html ⚡> tag (<html amp> is accepted as well).
● contain <head> and <body> tags (They are optional in HTML).
● contain a <link rel="canonical" href="$SOME_URL"> tag inside their head that points to the
regular HTML version of the AMP HTML document or to itself if no such HTML version exists.
● contain a <meta charset="utf-8"> tag as the first child of their head tag.
● contain a <meta name="viewport" content="width=device-width,minimum-scale=1"> tag inside
their head tag. It's also recommended to include initial-scale=1.
● contain a <script async src="https://cdn.ampproject.org/v0.js"></script> tag inside their head
tag.
● contain the AMP boilerplate code (head > style[amp-boilerplate] and noscript > style[amp-
boilerplate]) in their head tag.
6. NO Goes:
● No Javascript.
○ Have to use available amp component elements for interactivity
● No external CSS.
○ CSS from external src through link and inline style for element
● Disallowed CSS.
○ !important, filter attributes, and only transform, opacity animations
● Disallowed HTML.
○ Img, video, audio, iframe and form tags have alternates, but not allow
frame, frameset, base, object, applet, embed.
7. Limitations of Using AMP.
● Bootstrap framework doesn’t go with AMP.
● Custom css and external css cannot be more in size than the AMP limit of
50kb.
● All the multimedia components needs to have static layout, pre-defined.
● General script operations using Jquery and other external js’s are not allowed
by AMP.
● May end up using more iframes to handle the external and custom written
scripts.
● Customization of content will be hindered. For example usage of different font
styles, third party sources and services etc..
● Embed tag is prohibited.
8. Hack around the Optimizations!!
● Load css and javascripts that are really been used for the page.
● Execute scripts async if possible.
● It doesn’t require that the page is fully valid AMP but can use some of the
components it provide.
