@georgeocrawford George Crawford Developer at the Financial Times app.ft.com Next version of FT.com Distributed Content team Live in Bristol FT Web App GitHub: Financial Times About me
@georgeocrawford over 2 billion people with smartphones 90% of time on mobile spent in apps 27 apps a month 79% of the time in just 5 apps All data from INMA: Evaluating Distributed Content in the News Media Ecosystem How big is the problem?
@georgeocrawford 44% use a smartphone to access news 64% on a desktop computer 78% publishers get more traffic from mobile 20% see longer visits on mobile How big is the problem? All data from INMA: Evaluating Distributed Content in the News Media Ecosystem
@georgeocrawford More than 50% of downloaded data was from adverts and ‘adblocked content’ www.boston.com: 39 seconds on fast 4G 31 seconds just to load adverts Users expect pages to load in <2s After 3 seconds, 40% abandon the site How big is the problem? All data from INMA: Evaluating Distributed Content in the News Media Ecosystem
@georgeocrawford 44 minutes per day on Facebook 4 minutes per day in news apps 1.5 billion active monthly users How big is the problem? All data from INMA: Evaluating Distributed Content in the News Media Ecosystem
@georgeocrawford How big is the problem? All data from INMA: Evaluating Distributed Content in the News Media Ecosystem WhatsApp 37 WeChat 29 Viber 20 Line 26 Facebook 20
@georgeocrawford 35% of adults found news on social networks 38% of referrals from Facebook 35% of referrals from Google How big is the problem? All data from INMA: Evaluating Distributed Content in the News Media Ecosystem
@georgeocrawford May 2015: Facebook Instant Articles September 2015: Apple News October 2015: Twitter Moments February 2016: Accelerated Mobile Pages Distributed Content
@georgeocrawford Passes the Toothbrush Test: “Is it something you will use once or twice a day, and does it make your life better?” NY Times: In Silicon Valley, Mergers Must Meet the Toothbrush Test Distributed Content
@georgeocrawford “Documents that are fast-by-default” Open-Source framework Web-based, standard HTML page Hosted by the publisher Optional caching on an AMP CDN All about performance Smashing Magazine has a nice introduction AMP: A new approach to web performance Smashing Magazine: Turn Your AMP Up To 11 Accelerated Mobile Pages
@georgeocrawford Standard CSS, with some limitations Inlined in a single block in the <head><br/>Limited to 50kB<br/>!important forbidden<br/>AMP CSS Format<br/>AMP CSS<br/>
@georgeocrawford limited to AMP runtime and AMP extensions Don’t trust the users! amp-iframe allows inline JS Can request a resize AMP Iframes and Media AMP Scripts
@georgeocrawford Google AMP Cache AMP Cache Proxy-based CDN with extra features Anyone can run one Google’s is free! The document, images & JS all load from a single origin, over HTTP2
@georgeocrawford AMP Technical Overview FastDOM Why is AMP so fast? 8-second timeout to basic HTML external resources reserve space all scripts are async resizing allowed when off-viewport, or on user interaction DOM Mutation Batching Separates analytics instrumentation from reporting
@georgeocrawford YouTube: How AMP achieves its speed Why is AMP so fast? Google Search Carousel uses prerendering “With prerendering, you go from fast to instant” Only load visible content Minimum use of network and CPU Only gives the impression of ‘loaded’ postMessage to the iframe says ‘now load it for real’ Preconnect API
@georgeocrawford Huge new markets Platforms decide the rules New content formats Fewer visits to the publishers’ sites Advertisers can sell directly, with richer user data Brands lose their identity Opaque analytics No shared state with browsers Primitive/missing paywalls Not progressive Imagine you were a publisher… Andrew Betts: Progressively Less Progressive
@georgeocrawford Authors gain control over performance Directives are defined with HTTP headers Browser vendors and embed platforms can make decisions when policies are broken Inspired by Content Security Policy Report-only mode Content Performance Policy W3C: Content Security Policy WICG: Content Performance Policy
@georgeocrawford Content Performance Policy WICG: Content Performance Policy No synchronous external scripts No blocking stylesheets Inline scripts and CSS limited in size No text-blocking external fonts (avoid web fonts, or use a fallback mechanism like font- display: swap) No preventDefault in event listeners Document layout not dependent on resource downloads No layout thrashing
@georgeocrawford Content Performance Policy Lazy-load images Only load resources which will be seen Limit size and number of downloaded resources Throttle CPU consumption on the main thread WICG: Content Performance Policy
@georgeocrawford Content Performance Policy No auto-play on video and audio Page components can only paint to allocated areas of the document Prevent hijacking of the viewport No overlays, modal dialogs No popunders WICG: Content Performance Policy
georgecrawford
naohachi89
tkhresk
takesection
nwiizo
aki_iinuma
optimisuke
lmi
k1low
route06
ufried
masa5555
coconala_engineer
bkeepers
notwaldorf
speakerdeck
sugarenia
michaelherold
kneath
addyosmani
marcduiker
moore
holman
jcasabona
caitiem20