Recommended
More Related Content
What's hot
What's hot (20)
Similar to Amp
Similar to Amp (20)
Recently uploaded
Recently uploaded (20)
Amp
- 1. AMP(Accelerated Mobile Pages) A brief analysis for a typical Web Application
- 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.
- 9. Thank You