How to Get 100% on Google Lighthouse with WordPress

How we achieve 100% on Google Lighthouse for bespoke WordPress sites

A perfect 100 on Google Lighthouse is a difficult standard to hit consistently, but on a handcrafted WordPress theme there's no reason not to aim for it.

At Webolicious, we build lean, fast, and technically sound sites: no bloated page builders, no unnecessary plugins, just proper development practices with a close eye on Google's metrics.

Here's how we approach getting 100/100 across the board: Performance, Accessibility, Best Practices, and SEO.

1. Start with a clean, bespoke theme

We avoid pre-built themes entirely. Complete control over markup, CSS, JS, and assets matters, so we start from scratch or use a barebones starter such as:

• _underscores
• Sage
• A 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 favour deeply nested elements.
• Semantic HTML5: better for accessibility and SEO.
• Remove bloat: no jQuery unless it's genuinely needed; vanilla JS is usually enough.
• Minimise plugins: use only what's essential, and custom-code anything you can.

3. Performance: hitting that 100

Performance is often the toughest score to max out.

Things you must do:

• Lazy-load images: either with loading="lazy" or a plugin like Native Lazyload, ideally built in.
• Use WebP: smaller, modern image formats, converted manually or with something like ShortPixel.
• Minify everything: CSS, JS, HTML, automated with a build tool (Gulp, Vite, etc.) or a plugin like Autoptimize, configured carefully.
• Critical CSS: generate above-the-fold CSS and defer the rest.
• Defer and async scripts: including Google Fonts, or self-host fonts for better results still.
• Use a CDN: Cloudflare is free and effective; enable its speed optimisations.
• Cache everything: browser caching, page caching, object caching (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, and preconnect tags where relevant

4. Accessibility: cover every requirement

Lighthouse checks for the fundamentals:

• Every image needs alt text
• Use proper heading levels (h1 to h6 in order)
• Add labels to form inputs
• Ensure sufficient colour contrast (use the WebAIM Contrast Checker)
• Focus indicators must be visible and styled
• Avoid aria-hidden="true" on important content

A tool like axe DevTools is useful for deeper audits.

5. Best practices: security and quality code

To score well here:

• Ensure your site is served over HTTPS with a valid SSL certificate
• No mixed content (especially fonts, images, or scripts)
• Keep all dependencies up to date, especially WordPress core and plugins
• Avoid document.write() and unsafe JS functions
• Prevent console errors: Lighthouse checks your JS for issues

6. SEO: simple, effective, and clean

• Only one h1 per page
• Title tags and meta descriptions set for every page
• Use rel="canonical" properly
• Sitemap submitted to Google Search Console
• Robots.txt in place
• Descriptive link text, not "click here"
• Use schema.org structured data for breadcrumbs, reviews, and services (we use Schema Pro or add it manually)

7. Local development and testing setup

We build locally using Laragon, test with Chrome Lighthouse, and push to staging for real-world tests, using PageSpeed Insights and WebPageTest for deeper analysis.

Other useful tools:

• Query Monitor to spot performance issues
• 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 large enough to tap comfortably
• No hover-only interactions, especially on menus

Final tips

• Test in incognito mode with no browser extensions and a cleared cache
• Don't run Lighthouse from WP Admin: always test front-end pages
• Run multiple audits, since Google averages the scores
• Focus on real-world experience, not just chasing scores

Summary

We build every site with performance in mind from the first line of code. A perfect Lighthouse score is a by-product of doing things properly: clean code, smart architecture, and user-focused design.

Building an ultra-fast WordPress website that both Google and your clients are happy with is entirely achievable. It just takes care and consistency.

Any questions? Get in touch, or follow along on Instagram @theweboliciousway for more WordPress development tips.