Advanced HTML for Performance & Accessibility
summary
HTML choices change accessibility and performance: use semantic elements (headings in order, native button and anchor) and ARIA only to fill gaps; add width/height to images to reduce cumulative layout shift and use srcset/sizes plus loading="lazy" correctly (don't lazy LCP images). Watch DOM size—Lighthouse warns at 800 nodes and recommends <1500, max depth 32, no parent with >60 children. Use fetchpriority, preload, preconnect/DNS-prefetch and early hints carefully to prioritize critical fonts/scripts and avoid deprioritizing render-blocking resources.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 1:52HTML for performance & accessibility
- 8:42Semantic HTML & accessibility tree
- 13:20HTML impact on DOM & rendering
- 21:36Native vs custom elements
- 33:36Image performance & layout shifts
- 39:23Lazy loading images
- 41:11Fetch priority for resources
- 46:48Resource hints for connections
- 49:15Preloading critical resources
- 54:29HTML optimizations vs file size
- 55:11Conclusion and key takeaways
