Web Components Can't Save Us. But You Can!
summary
Claim: web components alone don't fix performance — real wins come from shipping HTML first, cutting JavaScript, and using browser features. Evidence: WebPageTest shows 1.5 MB compressed (6.5 MB expanded) of JS causing ~2s total blocking on a fast device but ~12s freeze on a low-end Android. Concrete examples: Photoshop for web, Apple Pay button, Crew Dragon UI, GitHub timestamp and Wordle use web components in production. Techniques and tools mentioned: SSR/Next.js, declarative shadow DOM, templates and slots, CrUX, WebPageTest, SpeedCurve. Beware accessibility and form quirks with shadow DOM, prefer progressive enhancement and aim to remove JS not add it, citing 1.5 MB compressed / 6.5 MB expanded.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 0:48The state of web performance
- 4:20JavaScript and frameworks
- 6:18Performance testing
- 10:46Adopting web components
- 13:15Understanding the core standards
- 20:14Shadow DOM and slots
- 25:57Native browser features
- 29:37Integration and tools
- 31:13Closing thoughts
- 31:54Q&A session
