Lighthouse 100: How to Achieve Perfect Performance

How Lighthouse Works

Lighthouse is Google's audit tool that evaluates websites across five categories: Performance, Accessibility, Best Practices, SEO, and PWA. For an overall score of 100, you need maximum points in all categories.

The Performance category (30% weight) is based on Core Web Vitals [^1^]:

• LCP (Largest Contentful Paint) — main content load time. Target: < 2.5 sec
• INP (Interaction to Next Paint) — interaction response time. Target: < 200 ms [^5^]
• CLS (Cumulative Layout Shift) — visual stability. Target: < 0.1 [^1^]
• TTFB (Time to First Byte) — time to first byte. Target: < 800 ms
• FCP (First Contentful Paint) — first content. Target: < 1.8 sec

LCP Optimization: Main Content in 2.5 Seconds

LCP measures when users see the main content of the page. Usually, this is a large image or text block.

1. Image Optimization

Images cause 70% of slow LCP [^4^]. Actions:

• Use WebP (30% savings) or AVIF (50% savings) [^4^]
• Specify width and height to prevent CLS
• Use fetchpriority="high" for LCP images [^8^]
• Compress via Squoosh, ImageOptim, or Sharp

<!-- Correct: priority + dimensions -->
<img 
  src="hero.avif" 
  width="1200" 
  height="630" 
  fetchpriority="high"
  alt="Description"
>

2. Eliminating Render-Blocking Resources

CSS and JavaScript block rendering. Solutions [^4^]:

• Inline critical CSS (< 14KB)
• Defer non-critical CSS via media="print" with onload
• Use defer or async for scripts

<!-- Critical CSS inline -->
<style>/* critical.css */</style>

<!-- Deferred CSS -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

<!-- Non-blocking JavaScript -->
<script src="app.js" defer></script>

3. Improving TTFB

Slow server kills LCP. Optimizations [^4^]:

• Use CDN (Cloudflare, Fastly) — up to 600ms improvement
• Enable server caching (Redis, Memcached)
• Optimize database queries
• Consider Edge Computing (Cloudflare Workers, Vercel Edge)

4. Server-Side Rendering

SSR speeds up LCP by 1000ms by sending ready HTML [^4^]. For React/Next.js:

// Next.js App Router — Server Component by default
export default async function Page() {
  const data = await fetchData(); // On server
  return <Hero data={data} />;
}

INP Optimization: Response in 200ms

INP replaced FID in 2024 and measures the delay of all interactions on the page [^5^]. Poor INP = frustrated users.

Breaking Up Long Tasks

JavaScript blocks the main thread. Solutions [^4^]:

• Split code into chunks (code splitting) [^7^]
• Use setTimeout to yield to the main thread
• Web Workers for heavy computations
• Remove unused code (tree shaking)

// Bad: blocks for 500ms
function processItems(items) {
  return items.map(heavyCalculation);
}

// Good: yields main thread
async function processItems(items) {
  const results = [];
  for (const item of items) {
    results.push(heavyCalculation(item));
    await new Promise(r => setTimeout(r, 0)); // Yield
  }
  return results;
}

Optimizing Event Handlers

• Debouncing/throttling for scroll and resize [^4^]
• Passive listeners: { passive: true }
• Avoid forced synchronous layouts

Reducing DOM Size

Large DOM slows down rendering. Targets [^4^]:

• Fewer than 1500 nodes total
• Depth no more than 32 levels
• No more than 60 child elements per parent

CLS Optimization: Zero Shifts

CLS measures how much content "jumps" during loading. Even small shifts annoy users [^1^].

Fixed Dimensions for Media

Always specify dimensions for images and videos [^4^]:

/* CSS: space reservation */
.image-container {
  aspect-ratio: 16 / 9;
  background: #f0f0f0; /* Placeholder color */
}

img {
  width: 100%;
  height: auto;
}

Fonts Without Shifts

Web fonts cause FOIT/FOUT. Solutions [^4^]:

• font-display: swap — show fallback immediately
• Preload critical fonts: <link rel="preload">
• Use system fonts for maximum speed
• Variable fonts instead of multiple files

Space Reservation for Ads

Never insert content above existing without interaction [^4^]. Use:

.ad-slot {
  min-height: 250px; /* Reserve for banner */
  background: #f5f5f5;
}

Accessibility: 100 Points Without Compromises

Accessibility is mandatory in 2026. The European Accessibility Act (EAA) has been in effect since 2025.

Semantic HTML

• Use correct tags: nav, main, article, aside
• One h1 per page, logical heading hierarchy
• ARIA attributes only when necessary

Contrast and Readability

• Text contrast 4.5:1 minimum (WCAG AA)
• Font size at least 16px for body
• Line height 1.5

Keyboard Navigation

• All interactive elements accessible via Tab
• Visible focus: outline: 2px solid
• Logical focus order

Best Practices: Security and Modernity

Security

• HTTPS mandatory
• Content Security Policy (CSP) headers
• No deprecated APIs (document.write)

Modern Standards

• No outdated libraries (jQuery, old polyfills)
• Using HTTP/2 or HTTP/3
• Correct MIME types for all resources

SEO: Technical Excellence

Meta Tags

• Unique <title> (50-60 characters)
• Unique meta description (150-160 characters)
• Canonical URL on every page

Structured Data

JSON-LD markup for Article, BreadcrumbList, FAQ [^2^]:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Lighthouse 100: How to Achieve Perfect Performance",
  "author": { "@type": "Person", "name": "Pavel Levdin" },
  "datePublished": "2026-03-31"
}
</script>

Mobile Optimization

Google uses mobile-first indexing. Check [^2^]:

• Viewport meta tag
• Clickable elements at least 48×48px
• Readable text without zoom

Checklist for 100 Points

Analysis Tools

• Lighthouse CI — automated audit in CI/CD
• PageSpeed Insights — lab + field data
• Chrome DevTools — Performance, Coverage tabs
• WebPageTest — detailed loading analysis
• DebugBear — Core Web Vitals monitoring [^1^]

Conclusion

100 points in Lighthouse is not an accident, but the result of a systematic approach. Key principles:

• Measure — use lab and field data
• Prioritize — start with the biggest problems
• Automate — Lighthouse CI in the pipeline
• Monitor — performance degrades over time

Remember: perfect performance is an investment in user experience and SEO. Every millisecond of loading affects conversion.

Good luck with optimization! ⚡