Proxy Wars: The Battle For Your Content

@georgeocrawford Proxy Wars

@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 Imagine you were Facebook…

⚡Imagine you were Facebook…

@georgeocrawford How big is the problem?

@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 trafﬁc 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 Why are news sites so slow?

@georgeocrawford Network hogging CPU hogging Scroll-jacking Render blocking Relayout forcing
Wasted bandwidth Huge downloads Duplicated tracking Event listeners Bad iframes Lack of HTTPS Intrusive adverts Why are news sites so slow?

@georgeocrawford Distributed Content

@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 User Experience Performance Engagement Demographic Ad Targeting Keep the
user inside the app Distributed Content

@georgeocrawford Aggregators (Apple News) Hosts (Facebook Instant Articles, Twitter Moments)
Off-platform open standards (AMP) Distributed Content

@georgeocrawford Apple News

⚡Apple News

@georgeocrawford Facebook Instant Articles

⚡Facebook Instant Articles

@georgeocrawford fancy news aggregators custom renderers proprietary syndication formats in-app
experience RSS/API driven improved performance, but… …focus is on immersive UX Distributed Content

@georgeocrawford ‘Zuckerberg’s Walled Garden of Earthly Delights’ Imagine you were
Google… Nieman Lab: Get AMP’d

@georgeocrawford Accelerated Mobile Pages

@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 Forbidden elements: frame, frameset, object, applet Replaced elements: amp-img,
amp-video, amp-audio, amp-iframe New functionality: amp-ad, amp-analytics, amp-pixel, amp-font AMP HTML Format AMP HTML

@georgeocrawford Standard CSS, with some limitations Inlined in a single
<style amp-custom> block in the <head> Limited to 50kB !important forbidden AMP CSS Format AMP CSS

@georgeocrawford nodisplay fixed responsive fixed-height fill container AMP Layouts AMP
Layout

@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 Resource loading and prioritisation Security Implements AMP components Centralised
layout system Runtime validator: #development=1 AMP Technical Overview AMP Chrome Extension AMP Runtime

@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 Why is AMP so fast?

@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

⚡Accelerated Mobile Pages

@georgeocrawford Imagine you were a publisher…

@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 Imagine you could see into the future…

@georgeocrawford YouTube: How AMP achieves its speed Imagine you could
see into the future…

@georgeocrawford Content Performance Policy Indiegogo: Implement the picture element in
Blink!

@georgeocrawford Authors gain control over performance Directives are deﬁned 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

@georgeocrawford Imagine you could see into the future… Intersection Observer
Passive Event Listeners FastDOM Chrome Extension (WIP!) WICG: Intersection Observer WICG: Passive Event Listeners GitHub: FastDOM GitHub: FTLabs CPP Extension

@georgeocrawford Imagine you could see into the future…

Thanks! @georgeocrawford

Proxy Wars: The Battle For Your Content

Proxy Wars: The Battle For Your Content

More Decks by George Crawford

Other Decks in Technology

Featured

Transcript