Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AMP-lify your Web Apps

AMP-lify your Web Apps

This talk includes,

What is #AMP (Accelerated Mobile Pages)
How you can build AMP pages?
How you can convert existing #HTML pages to AMP
How you can integrate it with #PWA

Hiren Dave

July 10, 2020
Tweet

More Decks by Hiren Dave

Other Decks in Programming

Transcript

  1. India India Agenda 1. Introduction to AMP 2. Difference Between

    AMP and PWA 3. Demystify AMP 4. AMP-lify Your Web Apps 1. The AMP Component Catalogue
  2. India India AMP Accelerated Mobile Pages is an open source

    project launched by Google to ensure that mobile webpages operate at optimal speed.
  3. India India Goals of Accelerated Mobile Pages 1. Build the

    Future Web Together 2. Build blazing fast web pages and ads 3. Consistent and High performance across all the platforms
  4. India India What Do You Get With AMP 1. Reduced

    load time 2. Low bounce rate 3. Enhanced SEO 1. Mobile friendly 1. High performance web pages across all platforms
  5. India India AMP vs. PWA AMP PWA What is? It

    is an open source platform created on JavaScript for faster page loading than normal HTML. It is mobile web app that gives native look and feel with high performance. What does it have? Streamlined CSS and standardize JavaScript and components. Service worker, App Shell , App Manifest What does it do? Reduces page load time and increases speed. Enables reach user experience and increases user engagement with features like Push Notifications When to use? It is best suited for static content. It is best suited for web apps and recommended for secure https web apps.
  6. India India The 3 Core Components of AMP 1. AMP

    HTML 2. AMP JavaScript 3. AMP Cache
  7. India India AMP HTML 1. It’s HTML only but with

    some restrictions for better performance 2. It has AMP specific tags which is called AMP HTML Component 3. Existing browser renders it as normal HTML 1. No specific configurations required on server
  8. India India <html > <head> <meta charset="utf-8" /> <title>Sample document</title>

    <link rel="canonical" href="./regular-html-version.html" /> <meta name="viewport" content="width=device-width,minimum-scale=1,initial- scale=1" /> <noscript > <style amp-boilerplate></style> </noscript > <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> </body> </html>
  9. India India AMP JavaScript 1. It ensures fast rendering of

    AMP HTML 2. It makes external resources asynchronous 1. Provides custom HTML tags for fast rendering 2. Disables slow CSS selectors 1. It implements inline CSS and font trigerring
  10. India India AMP Cache 1. Google AMP cache is used

    to server cached AMP pages 2. Cache fetches AMP pages, cache them and improves performance. 1. It has built in validations to ensure AMP page works
  11. India India Must Haves for AMP HTML page 1. It

    should start with <!doctype html> 2. Should have top level tag as <html > or <html amp> 1. Should have <head> and <body> tags 2. First child of <head> should be <meta charset="utf-8"> 1. Include AMP JS library with <script async src="https://cdn.ampproject.org/v0.js"></script>
  12. India India Must Haves for AMP HTML page 1. Add

    a link to non AMP version of the page or 404 page 2. Specify the responsive view port 1. Add CSS boilerplate code
  13. India India <!– NON AMP Page --> <link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

    <!–AMP Page --> <link rel="canonical" href="https://www.example.com/url/to/full/document.html">
  14. India India <html > <head> <meta charset="utf-8" /> <title>Sample document</title>

    <link rel="canonical" href="./regular-html-version.html" /> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" /> <noscript > <style amp-boilerplate></style> </noscript > <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> </body> </html>
  15. India India <!-- Include AMP JS library --> <script async

    src="https://cdn.ampproject.org/v0.js"></script>
  16. India India <!-- Excludes third party JavaScripts --> <!--<script type="text/javascript"

    src=”your.js"></script> --> <amp-script layout="container" src="yourjsfile"> <p>Initial content that can be modified from JavaScript</p> </amp-script>
  17. India India <!– Include Shadow AMP --> <script async src="https://cdn.ampproject.org/shadow-v0.js"></script>

    <!– Check if its ready --> <script type=“text/javascript”> (window.AMP = window.AMP || []).push(function(AMP) { // AMP is now available. }); </script> <!– Use it to render a page --> <script type=“text/javascript”> var ampedDoc = AMP.attachShadowDoc(container, doc, url); </script>
  18. India India AMP Component - Advertising & Analytics 1. amp-ad

    1. amp-analytics 1. amp-sticky-ad 1. amp-pixel 1. amp-social-share
  19. India India AMP Component - Dynamic Content 1. amp-list 1.

    amp-script 1. amp-web-push 1. amp-user-notification 1. amp-live-list
  20. India India AMP Component - Layout 1. amp-accordion 1. amp-iframe

    1. amp-layout 1. amp-sidebar 1. amp-live-list
  21. India India AMP Component - Media 1. amp-img 1. amp-anim

    1. amp-reach-player 1. amp-video 1. amp-youtube
  22. India India AMP Component - Presentation 1. amp-animation 1. amp-font

    1. amp-date-display 1. amp-date-countdown 1. amp-timeago
  23. India India AMP Component - Social 1. amp-twitter 1. amp-facebook

    1. amp-vine 1. amp-gfycat 1. amp-instagram