When we launched the Crux Labs website, we set a hard requirement: 100/100 Lighthouse in all four categories — Performance, Accessibility, Best Practices, and SEO. Not 95. One hundred. Here's what it took.

Why It Matters Beyond the Score

Lighthouse scores correlate directly with Core Web Vitals, which Google uses as ranking signals. More importantly, they reflect the actual experience your users have: how fast the page appears, how quickly it becomes interactive, and how stable the layout is as it loads. A 100 score means you've done the work — not just for the crawler, but for the person.

The Architecture Decisions That Made It Possible

• Next.js App Router with React Server Components — moves rendering work to the server, sending minimal JavaScript to the browser
• Static generation (SSG) for all pages that don't require dynamic data — instant first paint from CDN edge
• next/image for all images — automatic WebP conversion, correct sizing, and lazy loading out of the box
• Font subsetting with next/font — eliminates render-blocking font requests and layout shift from font swap
• Tailwind CSS — utility-first approach eliminates unused CSS; final bundle is minimal
• No third-party scripts loaded synchronously — analytics and tracking deferred or loaded async

The Hard Parts: LCP and CLS

Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) are the metrics where most sites lose points. LCP measures how fast the largest visible element loads. CLS measures how much the layout shifts during load — the jarring experience of elements jumping as images, fonts, or ads load in.

For LCP, we ensured the hero section's main image uses priority loading (no lazy load for above-the-fold content), is served as WebP from a CDN, and has explicit dimensions set. This gave us a consistent LCP under 1.2 seconds across devices.

"

The biggest CLS culprit on most sites isn't the images — it's the fonts. Using next/font with a CSS size-adjust fallback eliminates the font-swap layout shift completely.

Accessibility: The Overlooked 25 Points

Most developers treat accessibility as an afterthought. A 100 accessibility score requires systematic attention: every interactive element has a focus state, every image has meaningful alt text, colour contrast meets WCAG 2.1 AA across all text sizes, and the heading hierarchy is logical. ARIA labels are used where native semantics don't suffice.

The Final 5 Points: Best Practices

• HTTPS everywhere — non-negotiable and trivially achieved with Vercel
• No console errors or deprecated API usage in production
• CSP headers configured to prevent XSS injection
• Third-party cookies reviewed and minimised
• Correct doctype, charset, and viewport meta tags