Breaking The Bloat: Achieving The Fastest Navigations On The Web

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. JAVASCRIPT IS GROWING FASTER THAN ANY OTHER RESOURCE
8. +15% on Desktop, +10% Mobile Source: bsky.app/profile/tkadlec.bsky.social/post/3mhxwzlsqhc2b
9. Source: httparchive.org/reports/state-of-javascript
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. Source: canicompress.com
31. THIS IS NOT AN EXCUSE TO USE 100 x MORE JAVASCRIPT.
32. Source: httparchive.org/reports/state-of-javascript
33. COMPRESSION DICTIONARY TRANSPORT
34. Source: datatracker.ietf.org/doc/rfc9842/
35. WHAT? Compression Dictionaries use the contents of one already-downloaded resource to compress another
36. 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.
37. HOW? Some HTTP headers and a little elbow grease to apply compression* * See: lessonsofacto.com/articles/005-from-theory-to-tiny-implementing-compression-dictionaries/
38. Shopify Checkout
39. 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)
40. 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
41. Google Search
42. Google Search
43. Firefox (Brotli) 21kb = ~85% compression ratio
44. Chrome (w/ dictionary) 5kb = ~96% compression ratio
45. For comparison, HackerNews: 6.3kb
46. LOGO Homepage LOGO Product Listing Page LOGO Product Detail Page dictionary.txt
47. 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
48. <link rel="compression-dictionary" href="/dictionary.txt" /> // HTTP Header: Use-As-Dictionary: match-dest=("document")
49. WHEN? ⌛ Safari ✅ Chrome 130+ ⌛ Firefox Note: this is a progressive enhancement, fallback to ZStandard, Brotli, GZIP etc.
50. Source: blog.cloudflare.com/shared-dictionaries/
51. T ha t ' s FAST, BUT R y an ... Y o u SAID “THE FASTEST"
52. SPECULATION RULES
53. – Alex Krivit, Cloudflare “[Cloudflare customers] are seeing a reduction in LCP of 45% on successful prefetches” Source: blog.cloudflare.com/introducing-speed-brain/
54. WHAT? Speculation Rules are a declarative API for prefetching HTML or even fully prerendering pages before user navigation
55. WHY? Hide latency for truly instant pageloads
56. HOW? A small blob of JSON
57. { "prerender": [ { "where": { "or": [{ "href_matches": "/products/*", "relative_to": "document" }] }, "eagerness": "moderate" } ] }
59. 2 1
60. 1. Prerendering can be wasteful/expensive 2. JavaScript executes, possibly misinforming analytics
61. 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
62. 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
63. – 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
64. – 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
65. Source: github.com/WICG/speculative_load_measurement Remember: you can't optimise what you aren't measuring
66. 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
67. Source: blog.cloudflare.com/introducing-speed-brain/
68. CAN WE MAKE IT EVEN MORE SEAMLESS?
69. VIEW TRANSITIONS
70. WHAT? Declarative transitions within pages (level 1) between pages (level 2)
71. WHY? Achieve the fluid 'app-like' user experience that SPAs claim to provide, without the overheads.
72. HOW? Level 1: 1 JavaScript function Level 2: 1 CSS declaration
73. // Level 1: Single Doc Transitions document.startViewTransition(() => { // update the DOM here })
74. /* Level 2: Cross-Doc Transitions */ @view-transition { navigation: auto; }
75. view-transition-name: my-element-name;
77. WHEN? Level 1: ✅ Safari 18+ ✅ Chrome 111+ ✅ Firefox 144+ Level 2: ✅ Safari 18.2+ ✅ Chrome 126+ ❌ Firefox Note: this is a progressive enhancement, fallback just means no animation.
78. 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
79. LLMS AREN'T SAVING US FROM WIRTH'S LAW...
80. BUT THE WEB PLATFORM IS HANDING US THE TOOLS TO DO BETTER
81. SO LEAN INTO IT.
82. THANK YOU 🙏 Slides 👉 speakerdeck.com/ryantownsend/breaking-the-bloat 🦋 bsky.app/profile/twnsnd.com