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

Breaking news at 1000ms - Front-Trends 2014

Breaking news at 1000ms - Front-Trends 2014

An introduction into how the Guardian are making their next generation website load as fast as possible, and ultimately breaking the news to the user within 1000ms.

During the talk you will discover why performance matters, what are the common performance bottlenecks in the browser from networking to painting and learn how to best optimise and monitor each stage of the critical path to create fast, jank free websites.

Patrick Hamann

May 08, 2014
Tweet

More Decks by Patrick Hamann

Other Decks in Programming

Transcript

  1. Breaking news at 1000ms
    @patrickhamann - FrontTrends - May 2014

    View full-size slide

  2. next.theguardian.com

    View full-size slide

  3. 0
    2.25
    4.5
    6.75
    9
    2000 2006 2009 2012
    User load time expectations (Secs)
    User load time expectations are decreasing
    Source: Web Performance Today - March 2013

    View full-size slide

  4. 0
    5000
    10000
    15000
    20000
    Jan Feb Mar Apr
    10% Percentile
    Median
    90% Percentile
    Average SpeedIndex top 10,000 websites
    Source: HTTPArchive - May 2014

    View full-size slide

  5. Maslow's hierarchy of user needs
    • We surveyed 3000 users
    • About 17 key product drivers
    • They rated speed 2nd most important
    • Only after easy to find content

    View full-size slide

  6. Time & user perception
    Delay User perception
    0–100 ms Instant
    100–300 ms Small perceptible delay
    300–1000 ms Machine is working
    1,000+ ms Likely mental context switch
    10,000+ ms Task is abandoned
    Source: Ilya Grigorik – High-Performance Browser Networking

    View full-size slide

  7. A performance budget
    https://flic.kr/p/iQ69Kg

    View full-size slide

  8. – Tim Kaldec - 2013
    A performance budget is just what it sounds like:
    you set a “budget” on your page and do not allow
    the page to exceed that. This may be a specific load
    time, but it is usually an easier conversation to
    have when you break the budget down into the
    number of requests or size of the page.

    View full-size slide

  9. Setting a budget
    https://flic.kr/p/eHsirY

    View full-size slide

  10. 1. Core content should be delivered first
    2. Core content should render within 1000ms
    3. Every feature must fail gracefully
    4. Every request should be measured

    View full-size slide

  11. 1. Core content should be delivered first
    2. Core content should render within 1000ms
    3. Every feature must fail gracefully
    4. Every request should be measured

    View full-size slide

  12. User
    Content API
    Popular Comments
    Article
    DB
    DB

    View full-size slide

  13. https://flic.kr/p/77ZtUH

    View full-size slide

  14. User
    Content API
    Popular Comments
    Article
    DB
    DB

    View full-size slide

  15. Final progressively
    enhanced page
    Initial page payload

    View full-size slide

  16. 1. Core content should be delivered first
    2. Core content should render within 1000ms
    3. Every feature must fail gracefully
    4. Every request should be measured

    View full-size slide

  17. Browser rendering 101

    View full-size slide

  18. Source: Google - Pagespeed Insights

    View full-size slide

  19. Network JavaScript Render tree Layout Paint
    HTML DOM
    CSS CSSOM
    Network JavaScript Render tree Layout Paint
    HTML DOM
    CSS CSSOM
    Network JavaScript Render tree Layout Paint
    HTML DOM
    CSS CSSOM
    DOM

    View full-size slide

  20. JS
    CSS
    HTML CSS & JS
    §
    HTML
    async
    DOMContentReady
    Start render

    View full-size slide

  21. Get the CSS down as
    soon as possible.

    View full-size slide

  22. What is your critical CSS?

    View full-size slide

  23. Popular content ✘
    Sharing

    Comments ✘
    Related content

    Commercial components ✘
    Article

    View full-size slide

  24. What if we inlined
    our critical CSS?

    View full-size slide

  25. WTF%$?!
    Inline critical CSS

    View full-size slide

  26. 0.9 1.0 1.1
    0.9 1.0 1.1

    View full-size slide

  27. Load time First byte Start render Visually complete
    3.366s 0.204s 1.113s 3.700s
    Before
    Load time First byte Start render Visually complete
    3.017s 0.262s 0.759s 2.00s
    After

    View full-size slide

  28. Use MD5 hash for cache
    key
    WTF no stylesheets?

    View full-size slide

  29. What does the future hold?

    View full-size slide

  30. 1. Core content should be delivered first
    2. Core content should render within 1000ms
    3. Every feature must fail gracefully
    4. Every request should be measured

    View full-size slide

  31. Story of my life

    View full-size slide

  32. – W3C Font Spec
    !
    !
    !
    User agents may render text as it would be rendered
    if downloadable font resources are not available or
    they may render text transparently with fallback
    fonts to avoid a flash of text using a fallback font.
    !
    In cases where the font download fails user agents
    must display text, simply leaving transparent text is
    considered non-conformant behaviour.

    View full-size slide

  33. Font loading 101
    IE Firefox WebKit Blink
    Blocking ✗ ✔ ✔ ✔
    Timeout – 3s – –
    Source: Ian Feather – Web fonts and the Critical Path

    View full-size slide

  34. guardian egyptian

    View full-size slide

  35. progressive
    enhancement
    https://flic.kr/p/9RDXVd

    View full-size slide

  36. Is modern browser?
    Support WOFF?
    Font in localStorage?
    Show font
    Show fallback
    Download JSON
    localStorage space?
    Cache in localStorage

    View full-size slide

  37. Example of base64
    json’ifed fonts

    View full-size slide

  38. service worker
    Webfontjson

    View full-size slide

  39. What does the future hold?

    View full-size slide

  40. Font load events

    View full-size slide

  41. service worker
    ServiceWorker

    View full-size slide

  42. 1. Core content should be delivered first
    2. Core content should render within 1000ms
    3. Every feature must fail gracefully
    4. Every request should be measured

    View full-size slide

  43. assets radiator

    View full-size slide

  44. R.U.M.
    (real user metrics)

    View full-size slide

  45. What does the future hold?

    View full-size slide

  46. Resource Timing API

    View full-size slide

  47. 1. Core content should be delivered first
    2. Core content should render within 1000ms
    3. Every feature must fail gracefully
    4. Every request should be measured

    View full-size slide

  48. Everyone must be involved by
    baking performance into your
    workflow from day one.

    View full-size slide

  49. Deliver core content first,

    then progressively enhance the
    extras.

    View full-size slide

  50. Set a performance budget.

    Measure, optimise & repeat!

    View full-size slide

  51. Performance is a requirement;
    not a feature.

    View full-size slide

  52. Thank you.
    Questions?
    @patrickhamann - http://github.com/guardian/frontend
    g
    We’re hiring!

    View full-size slide