Lighthouse-Optimised Demo
This demo applies Lighthouse best practices across all four audit categories. Run Lighthouse (Chrome DevTools → Lighthouse tab) on this page to see the results.
Performance
100
Accessibility
100
Best Practices
100
SEO
100
Optimisation techniques applied
- Critical CSS inlined in
<style>— zero render-blocking requests - Full stylesheet loaded via
rel="preload"+onloadswap - JS bundle loaded with
defer— never blocks HTML parsing <nav aria-label>— satisfies WCAG SC 2.4.1 landmark uniquenessaria-live="polite"region announces panel open/close- All interactive elements have programmatic accessible names
- Correct heading hierarchy: h1 → h2 (JS-injected nav headings) → h3 (panel columns)
- Color contrast ≥ 4.5:1 (AA) for all text / interactive elements
- No
tabindex > 0— natural document focus order - Keyboard navigation: full ARIA APG Disclosure pattern
<meta name="description">and<meta name="theme-color">presentlangattribute on<html>- No console errors; no deprecated APIs
- Zero JavaScript dependencies at runtime — library is self-contained