Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Proxy Wars: The Battle For Your Content

Proxy Wars: The Battle For Your Content

George Crawford

June 16, 2016

More Decks by George Crawford

Other Decks in Technology


  1. @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
  2. @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?
  3. @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
  4. @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
  5. @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
  6. @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
  7. @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
  8. @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?
  9. @georgeocrawford May 2015: Facebook Instant Articles September 2015: Apple News

    October 2015: Twitter Moments February 2016: Accelerated Mobile Pages Distributed Content
  10. @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
  11. @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
  12. @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
  13. @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
  14. @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
  15. @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
  16. @georgeocrawford Resource loading and prioritisation Security Implements AMP components Centralised

    layout system Runtime validator: #development=1 AMP Technical Overview AMP Chrome Extension AMP Runtime
  17. @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
  18. @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
  19. @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
  20. @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
  21. @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
  22. @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
  23. @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
  24. @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
  25. @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