A presentation at Turin Web Performance Meetup in in Turin, Metropolitan City of Turin, Italy by Matteo Fogli
Matteo Fogli Web Performance Lead @Modo.md twitter: @pecus
(video, Ken Block starting a massively fast tuned car)
AMP is like a fast car
AMP is HTML ⚡
AMP is a Web Component Format + JavaScript Library
AMP is strictly validated
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
Anatomy of an AMP document
AMP 101
AMP 101
AMP 101
AMP 101
AMP 101
https://www.ampproject.org/
AMP has a Simplified HTML
No external resources img becomes <amp-img>
video becomes <amp-video>
audio becomes <amp-audio>
iframe becomes <amp-iframe>
50Kb single file CSS no inline styles no !important no filter: only GPU–accelerated CSS animations
SEO
Self Canonicalize or use an alternate page
Use <link rel="amphtml"> in alternate page
Ensure Content Parity
Validate iteratively + fix errors
With your browser (append development=1 to URL) Web Interface: https://validator.ampproject.org/ Browser Extension NPM Packages for CI Command Line Tool
Validator via node Complex test environments vs. validation / iteration A/B testing Enforce user input / UGC
Subset of HTML + boilerplate No JS (iFrames / AMP Components) Light CSS (50Kb + fonts) Must validate (with browser, toolchain or process)
Photo by Goh Rhy Yan on Unsplash
Fast / Lightweight (mostly) Progressively Enhanced Open Source / somewhat standardised Publisher advantage (reach, higher CT rates, lower bounces)
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!)?
Video by Ethan Marcotte
Proprietary (despite OSS) “Breaks” the web breaks URLs, scrolling issues, introduces 3rd party hosting Competitive advantage in News Carousel Associated cost (development, testing, maintenance)
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
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)
Caches play a fundamental role in AMP:
https://medium.com/@pbakaus/why-amp-caches-exist-cd7938da2456
https://www.youtube.com/watch?v=hVRkG1CQScA
AMP Pros
AMP Cons
https://timkadlec.com/remembers/2018-03-19-how-fast-is-amp-really/
https://timkadlec.com/remembers/2018-03-19-how-fast-is-amp-really/
Google AMP Cache
Canonical:
AMP:
AMP Cache:
2 (and 1/2) Strategies
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
https://ampbyexample.com https://ampproject.org The AMP Channel (YouTube) Malte Ubl @cramforce Paul Baukaus @pbakaus https://amphtml.wordpress.com
Driver: Matteo Fogli @pecus Production: TorinoWebPerf P.R. Agency: #webperformanceitalia Twitvertising: @trnwebperf Camera: Oleg Belousov
What is AMP? Is it good or is it evil? Can we talk of the ⚡️symbol as a brand? What are the limits of AMP? Can you be faster than AMP? Do you need to choose between AMP & PWA? What is the impact of AMP on a development and delivery team?
A full dive in into AMP and web performance.
for free. You
can too.