$30 off During Our Annual Pro Sale. View Details »

Proxy Wars: The Battle For Your Content

Proxy Wars: The Battle For Your Content

George Crawford

June 16, 2016
Tweet

More Decks by George Crawford

Other Decks in Technology

Transcript

  1. View Slide

  2. @georgeocrawford
    Proxy Wars

    View Slide

  3. @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

    View Slide

  4. @georgeocrawford
    Imagine you were Facebook…

    View Slide

  5. ⚡Imagine you were Facebook…

    View Slide

  6. @georgeocrawford
    How big is the problem?

    View Slide

  7. @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?

    View Slide

  8. @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

    View Slide

  9. @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

    View Slide

  10. @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

    View Slide

  11. @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

    View Slide

  12. @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

    View Slide

  13. @georgeocrawford
    Why are news sites so slow?

    View Slide

  14. @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?

    View Slide

  15. @georgeocrawford
    Distributed Content

    View Slide

  16. @georgeocrawford
    May 2015: Facebook Instant Articles
    September 2015: Apple News
    October 2015: Twitter Moments
    February 2016: Accelerated Mobile Pages
    Distributed Content

    View Slide

  17. @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

    View Slide

  18. @georgeocrawford
    User Experience
    Performance
    Engagement
    Demographic Ad Targeting
    Keep the user inside the app
    Distributed Content

    View Slide

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

    View Slide

  20. @georgeocrawford
    Apple News

    View Slide

  21. ⚡Apple News

    View Slide

  22. @georgeocrawford
    Facebook Instant Articles

    View Slide

  23. ⚡Facebook Instant Articles

    View Slide

  24. @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

    View Slide

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

    View Slide

  26. @georgeocrawford
    Accelerated Mobile Pages

    View Slide

  27. @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

    View Slide

  28. @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

    View Slide

  29. @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/>

    View Slide

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

    View Slide

  31. @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

    View Slide

  32. @georgeocrawford
    Resource loading and prioritisation
    Security
    Implements AMP components
    Centralised layout system
    Runtime validator: #development=1
    AMP Technical Overview
    AMP Chrome Extension
    AMP Runtime

    View Slide

  33. @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

    View Slide

  34. @georgeocrawford
    Why is AMP so fast?

    View Slide

  35. @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

    View Slide

  36. @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

    View Slide

  37. ⚡Accelerated Mobile Pages

    View Slide

  38. @georgeocrawford
    Imagine you were a publisher…

    View Slide

  39. @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

    View Slide

  40. @georgeocrawford
    Imagine you could see into the future…

    View Slide

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

    View Slide

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

    View Slide

  43. @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

    View Slide

  44. @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

    View Slide

  45. @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

    View Slide

  46. @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

    View Slide

  47. @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

    View Slide

  48. @georgeocrawford
    Imagine you could see into the future…

    View Slide

  49. Thanks!
    @georgeocrawford

    View Slide