AMP & Furious

AMP & Furious

Web Performance Turin Meetup

Matteo Fogli Web Performance Lead @Modo.md twitter: @pecus

(video, Ken Block starting a massively fast tuned car)

What is AMP?

AMP is like a fast car

AMP is HTML ⚡

AMP is a Web Component Format + JavaScript Library

AMP is strictly validated

What is AMP Recap

Accelerated Mobile Pages are HTML pages designed to be rendered fast AMP is a web component format + JS library, strictly validated AMP does not require any server side technology* and works in any browser

• except for Caches

DRIVER ED

AMP 101

Anatomy of an AMP document

AMP 101

AMP 101

AMP 101

AMP 101

AMP 101

https://www.ampproject.org/

AMP Do’s and Don’ts

Simplified HTML

AMP has a Simplified HTML

Simplified HTML

No external resources 
 img becomes <amp-img>

video becomes <amp-video>

audio becomes <amp-audio>

iframe becomes <amp-iframe>

No JavaScript

CSS

CSS

50Kb single file CSS no inline styles no !important no filter: only GPU–accelerated CSS animations

SEO

SEO

SEO Self Canonicalize or use an alternate page Use <link rel="amphtml"> in alternate page
Ensure Content Parity Validate iteratively + fix errors

Validation

How to validate AMP

With your browser (append development=1 to URL) Web Interface: https://validator.ampproject.org/ Browser Extension NPM Packages for CI Command Line Tool

Development lifecycle issues

Validator via node Complex test environments vs. validation / iteration A/B testing Enforce user input / UGC

AMP 101 Recap

Subset of HTML + boilerplate No JS (iFrames / AMP Components) Light CSS (50Kb + fonts) Must validate (with browser, toolchain or process)

Ready to race?

Photo by Goh Rhy Yan on Unsplash

AMP Pros

Fast / Lightweight (mostly) Progressively Enhanced Open Source / somewhat standardised Publisher advantage (reach, higher CT rates, lower bounces)

Common misconceptions

Does AMP replaces websites? Are we back to the m-site nightmare of pre-responsive web? Will AMP sites look all the same? 50Kb of CSS is tiny! Is AMP a static site? no fancy JS stuff (no JS!)?

Great, right?

Enter Google News Carousel

Video by Ethan Marcotte

Great, right?

So, then, AMP…

AMP Cons

Proprietary (despite OSS) “Breaks” the web breaks URLs, scrolling issues, introduces 3rd party hosting Competitive advantage in News Carousel Associated cost (development, testing, maintenance)

How Can AMP Be So Fast?

How Can AMP Be So Fast?

Critical path is clear of blocking obstacles CSS (inline) JS (AMPified + async) Static layouting (elements have known sizes)

1 SINGLE HTTP REQUEST TO DISPLAY CONTENT

How Can AMP Be So Fast?

Critical path is clear of blocking obstacles CSS (inline) JS (AMPified + async) Static layouting (elements have known sizes)

1 SINGLE HTTP REQUEST TO DISPLAY CONTENT

Early font loading Prioritised resource loading (ATF)

Then add NOS…

NOS: AMP Caches

Caches play a fundamental role in AMP:

• Ensure the document is valid (thus, fast)
• Allow embedding
• Allow image optimisation, source reordering, AMP post–processing
• Allow pre–rendering (partial, prioritised)

NOS: AMP Caches

• Ensure no Cross Scripting Issues when preloading
• Modify JS URLs for better caching
• Provide a privacy shield when content is pre-rendered

NOS: Preloading

https://medium.com/@pbakaus/why-amp-caches-exist-cd7938da2456

NOS: Preloading

• Prerenders only ATF
• No downloads of BTF elements
• Does not execute 3rd party JavaScript
• On average 75% of page is not pre-rendered

https://www.youtube.com/watch?v=hVRkG1CQScA

Recap

AMP Pros

• Fast / Lightweight
• Progressively Enhanced
• Open Source / somewhat standardised
• Preloading (News Carousel)

AMP Cons

• Privately led OSS
• Not a W3C standard
• Less control over content
• Improper advantage on SERP

Comparison

https://timkadlec.com/remembers/2018-03-19-how-fast-is-amp-really/

Comparison

• AMP vs. separate canonical page
• AMP pages are significantly lighter (905 KB vs. 2,762 KB) and load significantly fewer assets (61 vs. 318 requests)
• There are significant extremes across the spectrum (heavily bloated pages, slow pages)

AMP page speeds

https://timkadlec.com/remembers/2018-03-19-how-fast-is-amp-really/

Enter the Cache

Google AMP Cache

• CDN
• caches AMP documents
• applies a series of optimizations
• provides a validation system

AMP page speeds

Google AMP Cache Delta

Canonical page speeds

Video Comparison

Canonical:

• SpeedIndex: 5337
• Start Render: 3600ms

AMP:

• SpeedIndex: 4506
• Start Render: 4033ms

AMP Cache:

• SpeedIndex: 3546
• Start Render: 2850ms

Advanced AMP

PWA + AMP

2 (and 1/2) Strategies

1. AMP Up: use AMP as landing, then install SW and handoff to PWA
2. AMP Down: use AMP as a SSoT for content (vs. Json) 2 1/2. Use a SW with AMP

PWA + AMP

PWA + AMP

AMP future

Standardization: Feature Policy, Web Packaging, iframe promotion, Performance Timeline, and Paint Timing.

Web Packaging format for providing privacy preserving pre-loading, no 3rd party caches

Custom JavaScript (Web Workers + Virtual DOM)

Origin URLs

See: https://github.com/ampproject/amphtml/blob/master/contributing/web-standards-related-to-amp.md

AMP Resources

https://ampbyexample.com https://ampproject.org The AMP Channel (YouTube) Malte Ubl @cramforce Paul Baukaus @pbakaus https://amphtml.wordpress.com

Amp & Furious

Driver: Matteo Fogli @pecus Production: TorinoWebPerf P.R. Agency: #webperformanceitalia Twitvertising: @trnwebperf Camera: Oleg Belousov