Advanced HTML for Performance & Accessibility - Mandy Michael - NDC Oslo 2024

Using semantic HTML elements (instead of generic divs) improves both accessibility and performance by providing built-in functionality and better browser optimization

HTML elements come with native features that eliminate the need for additional JavaScript, reducing bundle sizes and improving load times

The accessibility tree uses native HTML semantics to interpret page content - using proper elements helps screen readers and assistive technologies understand the page structure

Resource prioritization (using fetchpriority, preload, preconnect) affects performance significantly - carefully choose which resources to prioritize

Keep DOM node count under control (aim for <800 nodes, warning at 1500) as large DOMs impact both browser and JavaScript framework performance

Set image width and height attributes to prevent layout shifts and improve Cumulative Layout Shift (CLS) metrics

Use native HTML form elements where possible instead of custom components - they provide better accessibility and cross-platform compatibility

Proper heading hierarchy (H1-H6) is crucial for accessibility and content structure - screen readers use these for navigation

Lazy load images appropriately - only images below the viewport fold should be lazy loaded to avoid impacting Largest Contentful Paint

Early Hints (103 HTTP status code) can be used to inform browsers about critical resources before the main response, improving load times