A perfect 100 Lighthouse score is the benchmark most sites chase and few reach. This walkthrough breaks down the techniques that move the needle, using the kind of Next.js build we ship. We cover how we approach optimising a client's Next.js website to achieve perfect scores across performance, accessibility, best practices, and SEO — and how you can do the same for your website.
Why Lighthouse Scores Matter
Google's Lighthouse is an automated tool that audits web pages for performance, accessibility, SEO, and best practices. A high Lighthouse score correlates with better user experience, higher search rankings, and improved conversion rates. Google has confirmed that page speed is a ranking factor, and our data shows that sites with scores above 90 have significantly lower bounce rates.
Performance Optimisation Strategies
We implemented several key strategies to achieve perfect performance scores. First, we used Next.js's built-in image optimisation with the Image component, which automatically serves WebP images in the correct size. Second, we implemented code splitting and lazy loading for all non-critical components. Third, we optimised fonts by using next/font to load only the character sets needed.
Server Components and Streaming
Next.js 14+ server components allow us to render most of the page content on the server, reducing the JavaScript bundle sent to the client. Combined with streaming, users see meaningful content almost instantly while interactive elements load progressively. This approach dramatically improves both First Contentful Paint and Time to Interactive.
CSS and JavaScript Optimisation
We eliminated unused CSS using PurgeCSS, minified all JavaScript bundles, and implemented tree-shaking to remove dead code. The result was a 60% reduction in total CSS file size and a 45% reduction in JavaScript bundle size. We also deferred non-critical CSS and used the 'async' attribute for third-party scripts.
Accessibility Achievements
Perfect accessibility scores require attention to detail. We ensured all images had descriptive alt text, maintained proper heading hierarchy (H1 → H2 → H3), used sufficient colour contrast ratios (minimum 4.5:1 for body text), and implemented full keyboard navigation. ARIA labels were added to interactive elements where needed.
Results and Impact
Applied together, these techniques are what a top-scoring Lighthouse audit is built from. Page load time dropped from 3.2 seconds to 0.8 seconds. Organic traffic increased by 85% within three months, and the bounce rate decreased by 40%. The client reported a significant increase in qualified leads and consultation bookings.