How We Achieved 100/100 on Google Lighthouse Performance
A comprehensive technical guide to achieving perfect scores across all Google Lighthouse metrics: Performance, Accessibility, Best Practices, and SEO. Learn our proven optimization strategies step-by-step.
In this video tutorial, we break down the exact techniques and best practices we used to achieve a perfect 100/100 score on all Lighthouse metrics. From image optimization to code splitting, accessibility improvements to SEO enhancements — we cover everything you need to know to move from a mediocre score to 100 across all four Lighthouse categories.
Key Takeaways from This Video
- 1
Image optimisation is the single biggest win
Converting images to WebP/AVIF and adding explicit width/height attributes eliminates layout shift and reduces payload by 40–70% on average.
- 2
Defer non-critical JavaScript
Using Next.js dynamic imports with { ssr: false } for below-fold components (carousels, chat widgets, analytics) keeps the critical JS bundle under 150 KB.
- 3
Font loading strategy matters
Preloading the primary web font and using font-display: swap prevents invisible-text flashes and contributes directly to the Accessibility score.
- 4
Semantic HTML is free performance
Correct heading hierarchy (single H1, logical H2/H3 nesting), labelled form elements, and sufficient colour contrast each add points to Accessibility and Best Practices.
- 5
Third-party scripts need a loading strategy
Facebook Pixel, Google Analytics, and chat widgets loaded via next/script with strategy="afterInteractive" or "lazyOnload" prevent them from blocking the main thread.
- 6
Core Web Vitals are measurable targets
LCP under 2.5 s, FID under 100 ms, CLS under 0.1 — each metric has a clear threshold. Lighthouse's diagnostics panel pinpoints exactly which resource is responsible.
Video Summary
The video opens with a live Lighthouse audit showing the starting state — a typical Next.js project scoring around 65 on Performance, 88 on Accessibility, 79 on Best Practices, and 82 on SEO. Over the 8-minute walkthrough, each category is addressed in order of impact.
The Performance section covers image format conversion, lazy-loading off-screen images, removing render-blocking resources, and using next/font for zero-FOUT font loading. These changes alone move Performance from 65 to 94.
Accessibility improvements focus on ARIA labels on interactive elements, keyboard focus indicators, and colour contrast ratios — bringing that score to 100. Best Practices improvements cover HTTPS, no console errors, and Content Security Policy headers. SEO improvements cover meta descriptions, canonical tags, and structured data — all of which this site (my-mentora.com) implements by default.
The session closes with a re-audit showing 100 / 100 / 100 / 100 across all four Lighthouse categories, achieved in a single optimisation sprint without any architectural changes.
Frequently Asked Questions
Does a 100 Lighthouse score guarantee better Google rankings?+
A perfect score means your site meets all of Google's Core Web Vitals thresholds, which are a confirmed ranking factor. However, content quality, backlinks, and E-E-A-T signals remain the dominant ranking factors. A perfect score removes a barrier — it doesn't override content.
How long does it take to go from 60 to 100 on Lighthouse Performance?+
For a typical Next.js site, the key optimisations (image format conversion, deferred scripts, font strategy) can be completed in one focused day of work. The biggest single win — image optimisation — often takes under two hours.
What tool did you use to audit the site?+
Google Lighthouse, accessed directly from Chrome DevTools (press F12 → Lighthouse tab). The video uses the desktop preset for the audit to isolate code quality from network conditions.
Does this apply to WordPress sites as well?+
The principles are the same, but the implementation differs. For WordPress, you'd use plugins like WP Rocket or Perfmatters for script deferral, and Imagify or ShortPixel for image format conversion. The video is Next.js-specific.