🚀 How We Achieve 100% on Google Lighthouse for Bespoke WordPress Sites (and How You Can Too)
Let’s be honest – chasing that perfect 100 on Google Lighthouse can feel like trying to catch a greased-up eel. But when it’s your own handcrafted WordPress theme on the table, there’s no excuse not to squeeze out every drop of performance.
Here at Webolicious, we like our builds lean, lightning-fast, and technically sound. No bloated page builders, no lazy plugins – just proper development practices with a sharp eye on Google’s metrics.
So, if you're a developer and want to impress clients and Google with 100/100 across the board (Performance, Accessibility, Best Practices, SEO), here’s how we do it.
🧼 1. Start with a clean, bespoke theme
We don’t touch pre-built themes with a bargepole. You want complete control over markup, CSS, JS, and assets. Start from scratch or use a barebones starter like:
- ✅ _underscores.
- ✅ Sage
- ✅ Your own custom starter boilerplate
Key tip: Avoid anything that injects inline styles, unnecessary divs, or third-party dependencies you don’t fully control.
🏗️ 2. Build for performance from day one
Key considerations:
- ✅ Limit DOM depth – Google doesn’t love deeply nested elements.
- ✅ Semantic HTML5 – Better for accessibility and SEO.
- ✅ Remove bloat – No jQuery unless you absolutely need it. Vanilla JS is your mate.
- ✅ Minimise plugins – Use only what’s essential. Anything you can custom code, do it.
🎯 3. Performance: Hitting that 100
Here’s the meaty bit. Performance is often the toughest score to max out.
Things you must do:
- ✅ Lazy-load images – Either with loading="lazy" or through a plugin like Native Lazyload (but ideally built-in).
- ✅ Use WebP – Smaller, modern image formats. You can convert images manually or with something like ShortPixel.
- ✅ Minify everything – CSS, JS, HTML. You can automate with a build tool (Gulp, Vite, etc.) or use plugins like Autoptimize (configured carefully).
- ✅ Critical CSS – Generate above-the-fold CSS and defer the rest.
- ✅ Defer and async scripts – Including Google Fonts if you’re using them (or self-host fonts for even better results).
- ✅ Use a CDN – We recommend Cloudflare, free and effective. Enable their speed optimisations.
- ✅ Cache everything – Browser caching, page caching, object caching (we like LiteSpeed Cache or WP Rocket, depending on the setup).
Server-side:
- ✅ PHP 8.2+
- ✅ HTTP/2 or HTTP/3 enabled
- ✅ Fast SSD or NVMe hosting (we use LiteSpeed with Redis support)
- ✅ Use
preload,prefetch, andpreconnecttags where relevant
🦮 4. Accessibility (a11y): Tick every box
Lighthouse checks for basic accessibility issue
- ✅ Every image needs alt text
- ✅ Use proper heading levels (h1 to h6 in order)
- ✅ Add labels to form inputs
- ✅ Ensure sufficient colour contrast (use WebAIM Contrast Checker)
- ✅ Focus indicators must be visible and styled
- ✅ Avoid
aria-hidden="true"on important content
Use a tool like axe DevTools to run deeper audits.
🔒 5. Best Practices: Security + Quality Code
To ace this section:
- ✅ Ensure your site is served over HTTPS (with a valid SSL cert)
- ✅ No mixed content (especially fonts/images/scripts)
- ✅ Keep all dependencies up-to-date (especially WP core and plugins)
- ✅ No mixed content (especially fonts/images/scripts)
- ✅ Avoid
document.write()and unsafe JS functions - ✅ Prevent console errors – Lighthouse checks your JS for issues
🔍 6. SEO: Simple, effective, and clean
- ✅ Only one
h1per page - ✅ Title tags and meta descriptions must be set for each page
- ✅ Use
rel="canonical"properly - ✅ Sitemap submitted to Google Search Console
- ✅ Robots.txt in place
- ✅ Descriptive link text (no "click here")
- ✅ Use schema.org structured data for things like breadcrumbs, reviews, services etc (we use Schema Pro or add it manually)
⚙️ 7. Local development & testing setup
We build locally using Laragon, test on Chrome Lighthouse, and push to staging for real-world tests. Use PageSpeed Insights and WebPageTest for deeper analysis.
Use tools like:
- ✅ Query Monitor to spot performance hogs
- ✅ GTmetrix for waterfall breakdowns
- ✅ Asset CleanUp or Perfmatters to disable assets page-by-page
📱 8. Mobile-first, always
Lighthouse runs mobile tests by default – so optimise for it:
- ✅ Responsive layouts using
clamp(),min(),max()in CSS - ✅ Avoid oversized images on small viewports
- ✅ Touch targets big enough to tap with ease
- ✅ No hover-only interactions (especially on menus)
💡 Final Tips
- ✅ Test with incognito mode, no browser extensions, cleared cache
- ✅ Don’t run Lighthouse from WP Admin – always test frontend pages
- ✅ Run multiple audits – Google averages the scores
- ✅ Focus on real-world UX – don’t just chase scores blindly
🎉 And there you have it
At Webolicious, we build every site with performance baked in from the very first line of code. The perfect Lighthouse score is a byproduct of doing things the right way – clean code, smart architecture, and user-focused design.
If you're a developer trying to build ultra-fast WordPress websites that Google and your clients love – it’s 100% doable. Just takes care, consistency, and a little obsession.
Any questions? Drop us a message or follow along on Instagram @theweboliciousway for more dev tips and WordPress gold nuggets 💥
