How We Get 100 Lighthouse on Every Site

Every Wumty template is optimized to achieve top Lighthouse scores across all four categories: Performance, Accessibility, Best Practices, and SEO. Not on a blank page. On real production sites with navigation, images, forms, and dynamic content.

This isn’t luck. It’s architecture. Here’s exactly how we do it.

Why Most Templates Fail Lighthouse

The typical template starts fast, then degrades as you add content. A hero image drops Performance by 15 points. A third-party font adds 200ms to LCP. An analytics script blocks the main thread. A carousel component ships 80KB of JavaScript nobody asked for.

Most templates score 90+ on the demo and 60-70 in production. We solve this at the architecture level so scores stay at 100 regardless of what content you add.

Zero JavaScript by Default

Astro’s island architecture means no JavaScript ships to the browser unless you explicitly opt in. Compare this to Next.js or Nuxt where the framework runtime ships on every page.

Our templates use SolidJS for the few interactive components that need client-side JavaScript (theme toggle, mobile menu, form validation). SolidJS compiles to direct DOM operations with no virtual DOM overhead. The entire interactive layer is typically under 5KB gzipped.

<!-- Static by default - zero JS -->
<Header />
<HeroSection />
<FeaturesGrid />

<!-- Interactive only where needed -->
<ThemeToggle client:load />
<MobileMenu client:media="(max-width: 768px)" />

Image Optimization Pipeline

Images are the #1 cause of poor Lighthouse scores. We handle them with Astro’s built-in image optimization:

Format conversion: All images serve as WebP (or AVIF where supported)
Responsive sizing: srcset attributes serve appropriately sized images per viewport
Lazy loading: Below-fold images use loading="lazy" with proper width and height attributes to prevent layout shift
LCP prioritization: Hero images use loading="eager" and fetchpriority="high"

The result: zero Cumulative Layout Shift (CLS) from images, and Largest Contentful Paint (LCP) consistently under 1.2 seconds.

Font Loading Without Flash

Custom fonts cause two problems: they block rendering (FOIT) or they flash unstyled text (FOUT). Both hurt user experience and Lighthouse scores.

Our approach:

font-display: swap in all @font-face declarations
Preload critical fonts with <link rel="preload" as="font">
Self-host fonts instead of loading from Google Fonts (eliminates a DNS lookup and connection)
Subset fonts to include only the characters actually used

Total font payload: typically under 40KB for two weights, compared to 150KB+ from Google Fonts.

CSS Architecture

We use Tailwind CSS 4 with careful attention to output size:

Purging works perfectly because Tailwind scans your templates at build time and only includes classes you actually use
No global transitions - CSS transition-all on body elements causes theme-switching flash (FOUC). We scope transitions to explicit user interactions only
Critical CSS inlined in <head> for above-the-fold content
Dark mode uses CSS custom properties toggled by a class, with an inline script that applies the class before first paint

Total CSS: typically 15-25KB gzipped for a complete site.

Accessibility Built In

Lighthouse Accessibility isn’t just about alt tags. Our templates include:

Semantic HTML: Proper heading hierarchy (h1 > h2 > h3), landmark regions (<nav>, <main>, <footer>), and ARIA labels where semantic HTML isn’t sufficient
Color contrast: All color combinations meet WCAG AA standards (4.5:1 ratio minimum)
Keyboard navigation: Every interactive element is focusable and operable with keyboard alone
Focus indicators: Visible focus rings on all interactive elements
Skip navigation: Hidden “Skip to content” link for screen reader users

SEO Fundamentals

The SEO category covers technical SEO basics that every site needs:

Meta tags: Title, description, Open Graph, and Twitter Card tags on every page
Structured data: JSON-LD BlogPosting, LocalBusiness, FAQPage, and BreadcrumbList schemas generated from content collections
Canonical URLs: Properly set on every page to prevent duplicate content issues
Sitemap: Auto-generated XML sitemap with proper lastmod dates
Robots.txt: Configured per environment (noindex for staging, index for production)

The Theme Switching Problem (And Our Fix)

Dark mode is a common Lighthouse pitfall. Most implementations cause a flash of wrong theme on page load because the theme preference loads after the CSS.

Our solution uses three techniques working together:

Inline script in <head> applies the theme class before any CSS renders
astro:before-swap listener injects the theme class into the new document during Astro view transitions, before the DOM swap
Transition suppression via a theme-swapping CSS class that sets transition-duration: 0s during the swap

Zero flash. Zero layout shift. Works with Astro’s View Transitions API.

Verify It Yourself

Don’t take our word for it. Run Lighthouse on any Wumty-powered site or grab the free Starter Kit and test it yourself. The scores hold up on real content, real images, and real deployments.

For production sites that need the full feature set (blog, forms, content collections, structured data), the Single Site includes everything while maintaining those perfect scores.

Read more about our content collections architecture or see how we compare to WordPress for agency workflows.

Every Wumty kit ships with the optimizations described in this post. Try the free Starter Kit and run Lighthouse yourself - top Lighthouse scores out of the box. See all options on the pricing page.