Advanced HTML for Good Developers
summary
Shows concrete wins: add width/height to images to cut CLS, use native loading="lazy" for offscreen images, prefer real buttons and anchors over divs to get focus, keyboard and a11y for free, and use semantic elements to keep the DOM small (Lighthouse warns at ~1500 nodes, depth 32, >60 children). Use fetchpriority="high"/"low" to nudge image/carousel priorities, apply rel=preconnect and DNS prefetch for critical CDNs, and consider 103 Early Hints for server-driven preload.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 2:24The DOM and TypeScript
- 4:46Accessibility Trees
- 9:39Screen Reader Demo
- 12:30Performance Impact
- 15:54Semantic Elements
- 18:52Native Functionality
- 21:13Buttons and ARIA
- 25:00Image Optimization
- 31:02Resource Prioritization
- 35:16Fetch Priority
- 39:02Resource Hints
- 45:55Conclusion
related talks
31mAdvanced HTML for good developers
57mAdvanced HTML for Performance & Accessibility
30mAdvanced HTML for Performance & Accessibility
22mHTML: How to Make Loveliness
44mThe HTML Treasure Hunt: from JavaScripter to Front End Superhero in 29 Minutes- 44mThe HTML Treasure Hunt: from JavaScripter to Front End Superhero in 29 Minutes
32mStay Away From My Path!
34mHTML Best Practice