Breaking The Bloat

Transcript

1. B T B l o a t
2. B T B l o a t Our mission today: Achieve the fastest possible navigations on the web
5. I LOVE THE WEB
6. T h e W eb h a s a JAVASCRIPT p r o b l e m U n FORTUNATELY,
7. +15% on Desktop, +10% Mobile Source: bsky.app/profile/tkadlec.bsky.social/post/3mhxwzlsqhc2b
8. Source: httparchive.org/reports/state-of-javascript
9. JAVASCRIPT IS GROWING FASTER THAN ANY OTHER RESOURCE
10. IS THE WEB REALLY THAT MUCH MORE INTERACTIVE?
11. Ecommerce Amazon (1995), Booking.com (1996), OpenTable (1999), Shopify (2006), Airbnb (2008) Webmail Hotmail (1996), Gmail (2004) Live Chat / Helpdesk LiveChat (2002), MSN Web Messenger (2004), Facebook Messenger (2011), Intercom (2011), Zendesk Chat (2014) Interactive Maps MapQuest (1996), Google Maps (2005) Analytics & Dashboards Google Analytics (2005), Mixpanel (2009) Social Media LinkedIn (2002), Facebook (2004), Twitter (2006), Pinterest (2010), Instagram Web (2010) Media Streaming Vimeo (2004), YouTube (2005), Netflix (2007), Spotify (2008) Real-time Collaboration Google Docs (2006), Canva (2012), Slack (2013), Airtable (2013), Notion (2016), Figma (2016), Miro (2017) Real-time A/V Twitch (2011), Discord (2015), Zoom (2016), Riverside (2019)
12. W h y ? IS THIS SUCH A BIG DEAL?
14. Complete Complete & Useful Useful More useful Even more useful HTML / PROGRESSIVE IMAGES / VIDEO JAVASCRIPT / JSON
16. bundle.js (90kb) one.js (60kb) two.js (60kb) three.js (60kb) one.js two.js three.js
17. Source: x.com/aerotwist/status/729712502943174657
18. BUT DEVICES ARE GETTING FASTER...
19. R ig h t ?
20. Source: infrequently.org/2025/11/performance-inequality-gap-2026/#mobile MAYBE AND N o
21. – WIRTH'S LAW, 1995 Software is getting slower more rapidly than hardware is getting faster.
22. I' m NOT HERE TO OUTLAW JAVASCRIPT
23. THE PLATFORM IS QUIETLY FIGHTING BACK
24. HTTP/2 & 3 Adoption Source: https://radar.cloudflare.com/adoption-and-usage • HTTP/2 in 2015, now at >59% adoption • HTTP/3 in 2021/22, now at >30% adoption • Brotli baseline in 2017 • Fetch Priority & Resource Hints • HTML & CSS continually replacing JavaScript
25. ONE DAY YOU' l l PICK up <LIBRARY> AND YOU WON'T KNOW IT' ll BE THE LAST TIME.
26. LOOKING FORWARD
27. REGULAR COMPRESSION CAN ONLY TAKE US SO FAR
28. Uncompressed GZIP Brotli DCZ 2.6kb 64.5kb (estimated) 92.2kb 272kb Source: blog.cloudflare.com/shared-dictionaries/ Transfer Size
29. Uncompressed GZIP DCZ 1ms 161ms 177ms 271ms 332ms 453ms Source: blog.cloudflare.com/shared-dictionaries/ Cache MISS Latency (inc Origin)
30. THIS IS NOT AN EXCUSE TO USE 100 x MORE JAVASCRIPT.
31. COMPRESSION DICTIONARY TRANSPORT
32. Source: datatracker.ietf.org/doc/rfc9842/
33. WHAT? Compression Dictionaries use the contents of one already-downloaded resource to compress another
34. WHY? Mitigate the cache busting impact of your release velocity by ‘upgrading’ resources. Achieve the best of both worlds: the cache granularity of individual small files with the compression ratios of concatenated bundles.
35. HOW? Some HTTP headers and a little elbow grease to apply compression* * See: lessonsofacto.com/articles/005-from-theory-to-tiny-implementing-compression-dictionaries/
36. Shopify Checkout
37. Browser Server Content-Encoding: dcz app.v2.js Compresses response with dictionary Decompresses with dictionary app.v1.js No dictionary (yet) Use-As-Dictionary: match="/application.*.js" Content-Encoding: br Stores as a dictionary app.v1.js Serves with regular compression Stores file as dictionary app.v2.js Available-Dictionary: :a1b2c3d4e5f6: Accept-Encoding: dcz, zstd, br, gzip Loads dictionary Transmits dictionary hash with request (new release to production)
38. main.v1.js 1st Party Code Module A Module B header.v1.js 1st Party Code Module C Module D footer.v1.js 1st Party Code Module E Module F main.v2.js 1st Party Code (v2) Module A Module B header.v2.js 1st Party Code (v2) Module C Module D footer.v2.js 1st Party Code (v2) Module E Module F
39. Google Search
40. Google Search
41. Firefox (Brotli) 21kb = ~85% compression ratio
42. Chrome (w/ dictionary) 5kb = ~96% compression ratio
43. For comparison, HackerNews: 6.3kb
44. LOGO Homepage LOGO Product Listing Page LOGO Product Detail Page dictionary.txt
45. header footer header footer + = = header footer + header footer JSON fetch HTML diff Shell Dictionary MPAs (Multi-Page Applications) SPAs (Single Page Applications) New Page New Page
46. <link rel="compression-dictionary" href="/dictionary.txt" /> // HTTP Header: Use-As-Dictionary: match-dest=("document")
47. WHEN? ⌛ Safari ✅ Chrome 130+ ⌛ Firefox Note: this is a progressive enhancement, fallback to ZStandard, Brotli, GZIP etc.
48. Source: blog.cloudflare.com/shared-dictionaries/
49. T ha t ' s FAST, BUT R y an ... Y o u SAID “THE FASTEST"
50. SPECULATION RULES
51. – Alex Krivit, Cloudflare “[Cloudflare customers] are seeing a reduction in LCP of 45% on successful prefetches” Source: blog.cloudflare.com/introducing-speed-brain/
52. WHAT? Speculation Rules are a declarative API for prefetching HTML or even fully prerendering pages before user navigation
53. WHY? Hide latency for truly instant pageloads
54. HOW? A small blob of JSON
55. { "prerender": [ { "where": { "or": [{ "href_matches": "/products/*", "relative_to": "document" }] }, "eagerness": "moderate" } ] }
57. 2 1
58. 1. Prerendering can be wasteful/expensive 2. JavaScript executes, possibly misinforming analytics
59. Eagerness Level Desktop Mobile conservative Pointer down Touch down moderate Hover for 200ms Complex viewport heuristics eager Hover for 10ms In viewport for 50ms immediate ASAP in idle time ASAP in idle time Source: docs.google.com/document/d/1YPbtUPfZIDElzBZNx8IQMzRFvy8oauLG_i1XIr6jgTs
60. Action Behaviour Resource Use Impact prerender Loads full page Resource hungry Fastest experience, if accurate prerender-until-script Loads full page, until a <script> tag is encountered Preparser runs Fairly heavy on resources Second fastest navigation prefetch Loads only HTML No preparser Least resource hungry Instant TTFB but traditional progressive download experience
61. – Mateusz Krzeszowiak, Shopify “We’re seeing an average 130ms improvement on desktop and 180ms on mobile across all percentiles, and across all loading metrics.” Source: performance.shopify.com/blogs/blog/speculation-rules-at-shopify
62. – Mateusz Krzeszowiak, Shopify “The desktop result is the one that stands out. Across the curve, the median gain is -285ms TTFB, -224ms FCP, and -228ms LCP.” Source: performance.shopify.com/blogs/blog/faster-storefront-navigations-with-moderate-speculation-rules
63. Source: github.com/WICG/speculative_load_measurement Remember: you can't optimise what you aren't measuring
64. WHEN? Prefetch: ⌛ Safari ✅ Chrome 109+ ⌛ Firefox Prerender: ❌ Safari ✅ Chrome 109+ ❌ Firefox Note: this is a progressive enhancement, also you could fallback to manual prefetch Resource Hints
65. Source: blog.cloudflare.com/introducing-speed-brain/
66. Compression Dictionaries 1 Reduce existing network overhead Speculation Rules 2 Hides navigation latency View Transitions 3 More cohesive UI 'App like feel' Speculation accuracy less of a concern Reduced TTFB/TTLB latency = more instant loads Less JavaScript = more instant loads
67. LLMS AREN'T SAVING US FROM WIRTH'S LAW...
68. BUT THE WEB PLATFORM IS HANDING US THE TOOLS TO DO BETTER
69. ...SO LEAN INTO IT.
70. THANK YOU 🙏 Slides 👉 speakerdeck.com/ryantownsend/breaking-the-bloat 🦋 bsky.app/profile/twnsnd.com