Breaking news at 1000ms - TECH.insight 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.

Transcript

1. Breaking news at 1000ms @patrickhamann - TECH.insight – June 2014
2. theguardian.com
3. next.theguardian.com
4. 100million !
5. " # $ 6000
8. 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
9. 0 5000 10000 15000 20000 Jan Feb Mar Apr 10% Percentile Median 90% Percentile Average SpeedIndex top 10,000 websites Source: HTTPArchive - May 2014
10. 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
11. 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
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
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
23. 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
24. Browser rendering 101
25. Source: Google - Pagespeed Insights
26. 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
27. JS CSS HTML CSS & JS § HTML async DOMContentReady Start render
28. Get the CSS down as soon as possible.
29. What is your critical CSS?
30. Popular content ✘ Sharing ✘ Comments ✘ Related content ✘ Commercial components ✘ Article ✔
31. What if we inlined our critical CSS?
32. WTF%$?! Inline critical CSS
33. 0.0 0.1 0.2 0.0 0.1 0.2
36. 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
37. Use MD5 hash for cache key WTF no stylesheets?
38. What does the future hold?
39. http/2
40.  ) HTML " ) CSS  " HTTP/1.1 * HTML & CSS  " HTTP/2 Server push
41. 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
42. Story of my life
43. – 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.
44. Font loading 101 IE Firefox WebKit Blink Blocking ✗ ✔ ✔ ✔ Timeout – 3s – – Source: Ian Feather – Web fonts and the Critical Path
45. guardian egyptian
46. progressive enhancement https://flic.kr/p/9RDXVd
47. Is modern browser? Support WOFF? Font in localStorage? Show font Show fallback Download JSON localStorage space? Cache in localStorage
48. Example of base64 json’ifed fonts
49. service worker Webfontjson
50. What does the future hold?
51. Font load events
52. service worker ServiceWorker
53. ServiceWorker  " )  " ) )
54. 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
55. assets radiator
56. R.U.M. (real user metrics)
59. speedcurve
62. 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
63. Takeaways
64. Everyone must be involved by baking performance into your workflow from day one.
65. Deliver core content first,
 then progressively enhance the extras.
66. Set a performance budget.
 Measure, optimise & repeat!
67. Performance is a requirement; not an extra feature.
68. Thank you. Questions? @patrickhamann - TECH.insight – June 2014 http://github.com/guardian/frontend http://bit.ly/ti1000ms