Perfect 100s: How We Achieved Top Lighthouse Scores Across All Categories
We just hit a milestone worth celebrating: perfect 100 scores across all four Google Lighthouse categories. Performance. Accessibility. Best Practices. SEO. All green. All perfect.
Here’s exactly how we got there.
What is Google Lighthouse?
Google Lighthouse is an open-source, automated tool for improving the quality of web pages. Built directly into Chrome DevTools, it audits your site across four critical dimensions:
- Performance - How fast your page loads and becomes interactive
- Accessibility - How usable your site is for people with disabilities
- Best Practices - Security, modern web standards, and code quality
- SEO - Search engine optimization fundamentals
Each category scores from 0-100. Anything above 90 is considered “good” (green). But we weren’t satisfied with good—we wanted perfect.
Our Final Scores
| Category | Score | Key Metrics |
|---|---|---|
| Performance | 100 | FCP: 0.9s, LCP: 0.9s, TBT: 0ms, CLS: 0 |
| Accessibility | 100 | 21 audits passed, WCAG AA compliant |
| Best Practices | 100 | CSP effective, 13 audits passed |
| SEO | 100 | 13 audits passed, structured data valid |
Performance: Speed That Matters
Getting a perfect 100 in performance required obsessive attention to every millisecond.
Core Web Vitals
Our metrics tell the story:
- First Contentful Paint (FCP): 0.9 seconds
- Time to Interactive (TTI): 0.9 seconds
- Largest Contentful Paint (LCP): 0.9 seconds
- Total Blocking Time (TBT): 0 milliseconds
- Cumulative Layout Shift (CLS): 0
- Speed Index: 1.5 seconds
How We Achieved It
1. Static Site Generation with Astro
We built this blog on Astro, which ships zero JavaScript by default. Every page is pre-rendered at build time, eliminating server-side processing delays.
2. Critical CSS Inlining
Above-the-fold styles load immediately in the <head>, preventing render-blocking. Our critical.css contains only what’s needed for initial paint:
/* Critical CSS - Above-the-fold styles for faster initial render */
:root {
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI"...
--bg-primary: #0d1117;
--text-primary: #e6edf3;
}3. Minimal Request Count
We keep requests low: 19 total requests transferring only 186 KiB. No bloated frameworks. No unnecessary dependencies.
4. Zero Layout Shift
A CLS of 0 means nothing moves unexpectedly. We achieve this by:
- Setting explicit
widthandheighton all images - Reserving space for dynamic content
- Using CSS aspect-ratio boxes for media
Accessibility: Built for Everyone
Accessibility isn’t a feature—it’s a requirement. Our 100 score comes from deliberate, standards-compliant design.
WCAG AA Compliance
We fixed contrast issues that many sites overlook:
/* High contrast color for light backgrounds */
--accent-primary-on-light: #0550ae; /* 7:1 contrast ratio */
/* Dark theme accent */
--accent-primary: #58a6ff; /* Passes on dark backgrounds */Key Accessibility Features
Skip Navigation Link
<a href="#main-content" class="skip-to-main">Skip to main content</a>Keyboard users can bypass the header and jump straight to content.
Semantic HTML Structure
- Proper heading hierarchy (h1 → h2 → h3)
<main>,<article>,<nav>,<section>landmarks- ARIA labels where needed
Color Contrast
Every text element meets the 4.5:1 minimum contrast ratio. We created a dedicated CSS variable --accent-primary-on-light specifically for elements appearing on light backgrounds.
Focus States
*:focus-visible {
outline: 2px solid var(--accent-primary);
outline-offset: 2px;
border-radius: 4px;
}Every interactive element has a visible focus indicator.
Best Practices: Security and Standards
A perfect Best Practices score means following modern web standards and security protocols.
Content Security Policy (CSP)
Our CSP headers protect against XSS attacks:
Content-Security-Policy: default-src 'self';
script-src 'self' 'unsafe-inline' https://www.googletagmanager.com;
style-src 'self' 'unsafe-inline';
img-src 'self' data: https:;HTTPS Everywhere
All resources load over HTTPS. No mixed content warnings.
Modern Image Formats
We serve WebP images with proper fallbacks, reducing file sizes by 25-35% compared to JPEG/PNG.
No Console Errors
Zero JavaScript errors in the console. Clean execution every time.
SEO: Discoverable by Design
Search engines need to understand your content. We make it easy for them.
Meta Tags Done Right
<title>Page Title | ry-ops</title>
<meta name="description" content="Compelling description under 160 chars" />
<meta name="robots" content="index, follow, max-image-preview:large" />
<link rel="canonical" href="https://ry-ops.com/current-page" />Structured Data (JSON-LD)
Every blog post includes rich structured data:
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "Article Title",
"author": { "@type": "Person", "name": "Ryan Dahlberg" },
"datePublished": "2025-12-10",
"image": "https://ry-ops.com/og-image.jpg"
}This enables rich snippets in search results.
Open Graph & Twitter Cards
Social sharing looks polished with proper OG tags:
<meta property="og:title" content="Article Title" />
<meta property="og:description" content="Description" />
<meta property="og:image" content="https://ry-ops.com/og-image.jpg" />
<meta name="twitter:card" content="summary_large_image" />XML Sitemap & RSS
Automated sitemap generation ensures search engines find every page. RSS feeds keep subscribers updated.
The Tech Stack
Our performance comes from choosing the right tools:
| Component | Choice | Why |
|---|---|---|
| Framework | Astro | Zero JS by default, islands architecture |
| Styling | Tailwind + Scoped CSS | Utility-first with component isolation |
| Hosting | Cloudflare Pages | Global CDN, edge caching |
| Images | WebP + SVG | Optimized formats, vector graphics |
| Analytics | Google Analytics 4 | Async loading, minimal impact |
Lessons Learned
1. Measure First, Optimize Second
Run Lighthouse before making changes. Know your baseline. Target specific failures rather than guessing.
2. Accessibility Fixes Often Improve UX for Everyone
Better contrast doesn’t just help visually impaired users—it helps everyone reading in sunlight. Keyboard navigation helps power users too.
3. Performance is a Feature
Users notice speed. A 0.9-second load time feels instant. A 3-second load time feels broken.
4. Small Files Win
Our entire page transfers in 186 KiB. That’s smaller than most hero images on other sites.
Run Your Own Audit
Want to test your site? Here’s how:
- Open Chrome DevTools (F12)
- Go to the “Lighthouse” tab
- Select categories and device type
- Click “Analyze page load”
Or use the web version at PageSpeed Insights.
What’s Next
Perfect scores don’t mean we’re done. We’re continuing to:
- Monitor Core Web Vitals in production
- Test on real devices and slow connections
- Add more accessibility features beyond WCAG AA
- Explore edge computing for even faster delivery
A 100 score is a snapshot. Maintaining it requires continuous attention.
Building a fast, accessible, well-optimized site isn’t magic—it’s methodology. Start with good foundations, measure relentlessly, and fix what the audits tell you to fix.