Shipping a 95+ Lighthouse Web App with Next.js and Tailwind CSS
June 20, 2025
Fast websites aren't an accident of great hosting; they are the result of deliberate architectural discipline. When building The Confident Muslim and client applications, achieving 95+ Lighthouse scores across Performance, Accessibility, Best Practices, and SEO was a hard requirement.
Here are the practical patterns that made that possible.
1. Server vs. Client component boundaries
In Next.js App Router, every component is a Server Component by default. The most common mistake is slapping 'use client' at the top of page layouts. That pulls entire component trees into the client bundle, ballooning First Contentful Paint (FCP) and Time to Interactive (TTI).
Instead, isolate interactivity to the extreme leaves of your component tree. Keep typography, structural layouts, navigation shells, and marketing copy purely server-rendered.
2. Zero layout shifts (CLS < 0.01)
Cumulative Layout Shift kills perceived performance. To achieve a zero CLS score:
- Always reserve aspect-ratio boxes for images and responsive embeds before assets finish loading.
- Use
next/fontwith Latin subsets and size adjust fallbacks to prevent font swap jumps. - Avoid client-side conditional renders that push document content down after mount.
3. Accessibility is performance
High Lighthouse accessibility scores require passing WCAG AA standards: color contrast ratios of at least 4.5:1 for normal text, explicit aria landmarks, keyboard navigable focus states, and meaningful heading hierarchies (H1 to H3 without skips).
By treating accessibility as a fundamental design constraint rather than a post-launch audit checklist, your markup remains clean, semantic, and easily parsed by search crawlers.
June 20, 2025
