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
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.
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
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
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>
<!– 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>