AMP - Accelerated Mobile Pages

AMP Accelerated Mobile Pages Juan Lizarazo Sr Software Engineer -
Navitaire LLC, an Amadeus Company www.juanlizarazo.com

Is this the next big thing? I have never heard
of it. I have never used that. First thoughts...

But… what's wrong with current mobile websites?

But… what's wrong with current mobile websites? https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

Finally It loaded!

But… what's wrong with current mobile websites?

So… Sites takes "forever" to load but: We Just Want
content But content creators want to monetize on this content...

So that's the problem… The solution (or one solution)… AMP
to rescue

https://developers.google.com/web/fundamentals/performance/rail RAIL

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.

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>

Core components 1. AMP HTML 2. AMP JS 3. AMP
CACHE

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>

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>

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

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/

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

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

Where do I start? https://www.ampproject.org https://ampbyexample.com https://developers.google.com/amp /cache/

AMP - Accelerated Mobile Pages

AMP - Accelerated Mobile Pages

Juan

More Decks by Juan

Other Decks in Programming

Featured

Transcript