Accelerated Mobile Pages (AMP ⚡)

This slide is prepared for Lukkien's intra departmental frontend meeting where I briefly present the concept of the AMP.

Transcript

1. Accelerated Mobile Pages 
 (AMP⚡)
2. • Problem solver, Programmer
 • Python Developer at
 • Foodie and Hobbyist Cook.
 Md Arifin Ibne Matin Hi, I’m,
3. Agenda • Core Concept of AMP. • Bits and pieces. • Why and Why not. • AMP now a days. • Next steps.
4. What • Open source framework and building blocks from Google. • A stripped down (`Diet`) HTML. Copies of existing content that provide faster load times. • Initially introduces as to compete with Facebook’s Instant Article or Apple’s News. • Launch Feb’16. • Publisher focused.
5. How APM is served Initial Concept (In action)
6. Building blocks • AMP HTML
 HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML • AMP JS
 library ensures the fast rendering of AMP HTML pages • Google AMP Cache
 Can be used for serve cached AMP HTML pages on Google servers and CDNs marking it super fast
7. Features • Content Prioritisation • Load only what’s needed • Async JS loading • Limited by design • No Custom Javascript • Max 50MB inline stylesheet • Improved rendition • Minimize style recalculations • Size all resources statically • Only run GPU- accelerated animations • Responsive Design
8. Why not • Additional maintenance and development • Initial project development was slow. • Less control of your design. • Google cache - Disappearing links Why • Good mobile SEO. • AMP is Fast. Thus reduce bounce rate. • Google loves AMP (so should we) • AMP articles is shown in carousel. • Bing, Twitter. • Components are getting richer everyday. • Open Source.
9. AMP Now a days 
 From Accelerated Mobile Pages to AMP
 • AMP isn’t just accelerated, it comes with all sorts of built-in UX advantages • AMP isn’t just for mobile, works across many device types including Desktop and tablet. • AMP doesn’t only power pages anymore – you can now build ads, emails and stories with it.
10. Links and Resources • Official website (https://amp.dev/) • Courses (https://amp.dev/documentation/courses/) • Blogs • Why (https://moz.com/blog/amp-digital-marketing-2018) • Why not (https://medium.com/@danbuben/why-amp-is-bad-for- your-site-and-for-the-web-e4d060a4ff31) • AMP vs PWA (https://codeburst.io/pwa-vs-amp-choosing-the- best-for-me-91c8c48ff152)
11. Questions?