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

Breaking news at 1000ms - Velocity EU 2014

Avatar for Patrick Hamann Patrick Hamann
November 18, 2014
Programming
16
2.9k

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.
Avatar for Patrick Hamann

Patrick Hamann

November 18, 2014
Tweet

More Decks by Patrick Hamann

See All by Patrick Hamann
CSS and the First Meaningful Paint - CSS Conf EU, May 2017
Avatar for Patrick Hamann patrickhamann
15
2.2k
CSS and the First Meaningful Paint - All day Hey!, April 2017
Avatar for Patrick Hamann patrickhamann
4
390
Embracing the Network — DIBI Conf, March 2016
Avatar for Patrick Hamann patrickhamann
1
420
HTTP2 What, where, why, and when?! Smashing Conference, March 2016
Avatar for Patrick Hamann patrickhamann
16
3.7k
Embracing the network - Web Directions
Avatar for Patrick Hamann patrickhamann
4
1.4k
Embracing the network - Smashing Conf
Avatar for Patrick Hamann patrickhamann
6
1.3k
Embracing the Network – ColdFront, September 2015
Avatar for Patrick Hamann patrickhamann
36
4.1k
Building theguardian.com
Avatar for Patrick Hamann patrickhamann
41
7k
CSS and the Critical Path - CSSConfEU September 2014
Avatar for Patrick Hamann patrickhamann
29
3.6k

Other Decks in Programming

See All in Programming
Boast Code Party / RubyKaigi 2025 After Event
Avatar for はる lemonade_37
0
120
AIコーディングの理想と現実
Avatar for Tomohisa Takaoka tomohisa
38
40k
監視 やばい
Avatar for syossan27 syossan27
12
10k
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
Avatar for MinoDriven minodriven
8
2k
Orleans + Sekiban + SignalR でリアルタイムWeb作ってみた
Avatar for Tomohisa Takaoka tomohisa
0
250
プロダクトエンジニアのしごと 〜 受託 × 高難度を乗り越えるOptium開発 〜
Avatar for ALGO ARTIS algoartis
0
240
note の Elasticsearch 更新系を支える技術
Avatar for chov(Kohei T) tchov
9
3.6k
VibeCoding時代のエンジニアリング
Avatar for どすこい daisuketakeda
0
250
カウシェで Four Keys の改善を試みた理由
Avatar for ike ike002jp
1
140
The New Developer Workflow: How AI Transforms Ideas into Code
Avatar for Daniel Sogl danielsogl
0
140
ComposeでのPicture in Picture
Avatar for takathemax takathemax
0
140
KANNA Android の技術的課題と取り組み
Avatar for Yosuke Watanabe watabee
1
580

Featured

See All Featured
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.2k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
349
20k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
85
4.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
5
580
Done Done
Avatar for chrislema chrislema
184
16k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
29
940
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
68
11k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
14
1.5k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.6k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
344
40k

Transcript

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

    2014

  2. theguardian.com

  3. None

  4. next.theguardian.com

  5. 110million !

  6. " # $ 7000

  7. None
  8. None

  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

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

  12. 1000ms

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

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

  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

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

  18. User Content API Popular Comments Article DB DB

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

  20. User Content API Popular Comments Article DB DB

  21. Final progressively enhanced page Initial page payload

  22. None
  23. None

  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

  25. Browser rendering 101

  26. Source: Google - Pagespeed Insights

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

    Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM

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

    Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM DOM

  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

  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

  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

  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

  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

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

    Start render

  35. Get the CSS down as soon as possible.

  36. What is your critical CSS?

  37. Popular content ✘ Sharing ✘ Comments ✘ Related content ✘

    Commercial components ✘ Article ✔

  38. What if we inlined our critical CSS?

  39. Inline

  40. WTF%$?!

  41. None

  42. 0.0 0.1 0.2 0.3 0.0 0.1 0.2 0.3

  43. None

  44. localStorage

  45. Is modern browser? Requet with <link> Request with <link> CSS

    in localStorage? localStorage space? Request with AJAX cache in localStorage inject into <head>
  46. None
  47. None
  48. None

  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

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

  51. Cookie

  52. Initial request HTML response with inline CSS Render page Request

    global CSS with AJAX Set cookie Initial request HTML response with default <link> Render page Does request contain cookie?

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

  54. What does the future hold?

  55. http/2

  56.  ) HTML " ) CSS  " HTTP/1.1 *

    HTML & CSS  " HTTP/2 Server push

  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

  58. Story of my life

  59. Font loading 101 IE Firefox WebKit Blink Blocking ✗ ✔

    ✔ ✔ Timeout – 3s – – Source: Ian Feather – Web fonts and the Critical Path

  60. guardian egyptian

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

  62. Is modern browser? Requet with <link> Show fallback? Support WOFF?

    localStorage space? Request with AJAX cache in localStorage inject into <head> font in localStorage?

  63. Example of base64 json’ifed fonts

  64. service worker Webfontjson

  65. What does the future hold?

  66. Font load events

  67. CSS font rendering

  68. service worker ServiceWorker

  69. ServiceWorker  " )  " ) )

  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

  71. WARNING!

  72. assets radiator

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

  74. None
  75. None
  76. None

  77. speedcurve

  78. None

  79. What does the future hold?

  80. Resource Timing

  81. Beacon API

  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

  83. Takeaways

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

    from day one.

  85. Deliver core content first,
 then progressively enhance the extras.

  86. Set a performance budget.
 Measure, optimise & repeat!

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

  88. Thank you. Questions? @patrickhamann - Velocity EU - November 2014

    github.com/guardian/frontend +