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

AMP - Accelerated Mobile Pages

Avatar for Juan Juan
November 08, 2017

AMP - Accelerated Mobile Pages

Presented @ SLC Front end DEV

Avatar for Juan

Juan

November 08, 2017
Tweet

More Decks by Juan

Other Decks in Programming

Transcript

  1. AMP Accelerated Mobile Pages Juan Lizarazo Sr Software Engineer -

    Navitaire LLC, an Amadeus Company www.juanlizarazo.com
  2. Is this the next big thing? I have never heard

    of it. I have never used that. First thoughts...
  3. So… Sites takes "forever" to load but: We Just Want

    content But content creators want to monetize on this content...
  4. How is performance achieved? * Fonts. @font-face <link rel="stylesheet" href="some-css-file.css">

    <script src="some-js-file.js></script> <style>...</style> <script src="some-js-file.js" async> !important -> Style limit is 50 kilobytes.
  5. amp-boilerplate <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s

    steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;anima tion:none}</style></noscript>
  6. AMP HTML <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link

    rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>...</style><noscript>...</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello World!</body> </html>
  7. AMP JS Read the spec: https://www.ampproject.org/docs/reference/spec Optimizations: (all external resources

    are async). Best practices: Disable slow css selectors, precalculate layout. Validator! <script async src="https://cdn.ampproject.org/v0.js"></script>
  8. AMP validator #development=1 Built in validator. Run it before publishing

    your AMP's. Let's try it: https://ampbyexample-com.cdn.ampproject.org/c/s/ampbyexample.com/amp-ad s/introduction/amp_ads_vs_non-amp_ads/preview/?exp=a4a:-1
  9. AMP CACHE • HTTP 2 multiplexing • Content delivery network

    by google • Built in validation system • Protocol relative url's (dont!) Http: {cdn}/c/ Https: {cdn}/c/s/ More on https://developers.google.com/amp/cache/
  10. Use HTTPS… • Recommended but not required. • Required for

    progressive web apps. • Security for your users, integrity, even when there's no sensitive data. • Required for video and iframes in AMP's More details at https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https
  11. Discovering amp From AMP: <link rel=”canonical” href=”http://example.ampproject.org/article.html"/> From website: <link

    rel=”amphtml” href=”http://example.ampproject.org/article.amp.html" />\ Don'ts: User-agent: * Disallow: /amp/ <meta name="robots" content="noindex" /> X-Robots-Tag: noindex