AMP - Accelerated Mobile Pages

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

But… what's wrong with current mobile websites?

Slide 5

Slide 5 text

But… what's wrong with current mobile websites?

Slide 6

Slide 6 text

But… what's wrong with current mobile websites?

Slide 7

Slide 7 text

But… what's wrong with current mobile websites?

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Finally It loaded!

Slide 10

Slide 10 text

But… what's wrong with current mobile websites?

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

How is performance achieved? * Fonts. @font-face !important -> Style limit is 50 kilobytes.

Slide 15

Slide 15 text

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}}body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;anima tion:none}

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

AMP HTML ...... Hello World!

Slide 18

Slide 18 text

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!

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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/

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Discovering amp From AMP: From website: \ Don'ts: User-agent: * Disallow: /amp/ X-Robots-Tag: noindex

Slide 23

Slide 23 text

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