Breaking news at 1000ms - Velocity EU 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.

This version of the talk was given at Velocity Conference Europe on the 18th November 2014.

Transcript

1. Breaking news at 1000ms
   @patrickhamann - Velocity EU - November 2014
   

   View Slide

2. theguardian.com
   

   View Slide

3. View Slide

4. next.theguardian.com
   

   View Slide

5. 110million
   !
   

   View Slide

6. "
   #
   $ 7000
   

   View Slide

7. View Slide

8. View Slide

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

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

11. View Slide

12. 1000ms
    

    View Slide

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

    View Slide

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

    View Slide

15. 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 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 Slide

17. View Slide

18. User
    Content API
    Popular Comments
    Article
    DB
    DB
    

    View Slide

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

    View Slide

20. User
    Content API
    Popular Comments
    Article
    DB
    DB
    

    View Slide

21. Final progressively
    enhanced page
    Initial page payload
    

    View Slide

22. View Slide

23. View Slide

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

25. Browser rendering 101
    

    View Slide

26. Source: Google - Pagespeed Insights
    

    View Slide

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

    View Slide

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

    View Slide

29. 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
    Network JavaScript Render tree Layout Paint
    HTML DOM
    CSS CSSOM
    

    View Slide

30. 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
    Network JavaScript Render tree Layout Paint
    HTML DOM
    CSS CSSOM
    Network JavaScript Render tree Layout Paint
    DOM
    CSS CSSOM
    

    View Slide

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

    View Slide

32. Request page
    Network
    Render
    GET html
    Build DOM
    response
    Build CSSOM Render page
    GET css
    GET js
    response
    response
    idle idle
    Async
    Render blocking
    Run JS
    Source: Google - Web Fundamentals
    

    View Slide

33. Request page
    Network
    Render
    GET html
    Build DOM
    response
    Build CSSOM Render page
    GET css
    GET js
    response
    response
    idle idle
    Async
    Render blocking
    Run JS
    

    View Slide

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

    View Slide

35. Get the CSS down
    as soon as possible.
    

    View Slide

36. What is your critical CSS?
    

    View Slide

37. Popular content ✘
    Sharing
    ✘
    Comments ✘
    Related content
    ✘
    Commercial components ✘
    Article
    ✔
    

    View Slide

38. What if we inlined
    our critical CSS?
    

    View Slide

39. Inline
    

    View Slide

40. WTF%$?!
    

    View Slide

41. View Slide

42. 0.0 0.1 0.2 0.3
    0.0 0.1 0.2 0.3
    

    View Slide

43. View Slide

44. localStorage
    

    View Slide

45. Is modern browser?
    Requet with
    Request with
    CSS in localStorage? localStorage space?
    Request with AJAX
    cache in
    localStorage
    inject into
    

    View Slide

46. View Slide

47. View Slide

48. View Slide

49. 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 Slide

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

    View Slide

51. Cookie
    

    View Slide

52. Initial request HTML response
    with inline CSS Render page Request global CSS
    with AJAX Set cookie
    Initial request HTML response
    with default Render page
    Does request contain
    cookie?
    

    View Slide

53. https://github.com/addyosmani/critical
    http://ngxpagespeed.com/
    Penthouse
    https://github.com/pocketjoso/penthouse
    

    View Slide

54. What does the future hold?
    

    View Slide

55. http/2
    

    View Slide

56. 
    )
    HTML
    "
    )
    CSS
    
    "
    HTTP/1.1
    *
    HTML & CSS
    
    "
    HTTP/2 Server push
    

    View Slide

57. 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 Slide

58. Story of my life
    

    View Slide

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

    View Slide

60. guardian egyptian
    

    View Slide

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

    View Slide

62. Is modern browser?
    Requet with
    Show fallback?
    Support WOFF?
    localStorage space?
    Request with AJAX
    cache in
    localStorage
    inject into
    font in
    localStorage?
    

    View Slide

63. Example of base64
    json’ifed fonts
    

    View Slide

64. service worker
    Webfontjson
    

    View Slide

65. What does the future hold?
    

    View Slide

66. Font load events
    

    View Slide

67. CSS font rendering
    

    View Slide

68. service worker
    ServiceWorker
    

    View Slide

69. ServiceWorker
    
    " ) 
    " )
    )
    

    View Slide

70. 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 Slide

71. WARNING!
    

    View Slide

72. assets radiator
    

    View Slide

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

    View Slide

74. View Slide

75. View Slide

76. View Slide

77. speedcurve
    

    View Slide

78. View Slide

79. What does the future hold?
    

    View Slide

80. Resource Timing
    

    View Slide

81. Beacon API
    

    View Slide

82. 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 Slide

83. Takeaways
    

    View Slide

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

    View Slide

85. Deliver core content first,

    then progressively enhance the extras.
    

    View Slide

86. Set a performance budget.

    Measure, optimise & repeat!
    

    View Slide

87. Performance is a requirement;
    not an extra feature.
    

    View Slide

88. Thank you.
    Questions?
    @patrickhamann - Velocity EU - November 2014
    github.com/guardian/frontend
    +
    

    View Slide