Bỏ qua để vào nội dung chính
← Trang chủ
Lighthouse Score 100: A Practical Step-by-Step Guide

Lighthouse Score 100: A Practical Step-by-Step Guide

Bởi Isabella Chen
07 thg 3, 20267 phút đọc

Getting a perfect Lighthouse score isn't magic. It's a systematic process of eliminating render-blocking resources, optimizing assets, and fixing accessibility gaps.

Mục lục

A perfect Lighthouse score isn't the goal — a fast, accessible website is. But Lighthouse 100 is a useful forcing function that makes you address every category: Performance, Accessibility, Best Practices, and SEO. I've hit 100 across all four on three production Next.js sites, and the process is more systematic than you'd think.

Performance: The Hardest 100

Performance scoring is weighted: Largest Contentful Paint (25%), Cumulative Layout Shift (25%), Total Blocking Time (30%), First Contentful Paint (10%), Speed Index (10%). Focus on TBT and LCP first — they account for 55% of the score.

Eliminate render-blocking resources. Move non-critical CSS to async loading. Defer third-party scripts. Inline critical CSS for above-the-fold content:

// next.config.ts — enable CSS optimization
const config: NextConfig = {
  experimental: {
    optimizeCss: true, // Inlines critical CSS
  },
};

// layout.tsx — defer non-critical scripts
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        {/* Analytics loaded after page is interactive */}
        <Script
          src="https://analytics.example.com/script.js"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

Optimize LCP. Identify your LCP element (usually the hero image or main heading). Add priority to hero images. Preconnect to external image domains. Ensure the LCP element doesn't depend on JavaScript to render.

Fix CLS. Set explicit dimensions on images and embeds. Use CSS aspect-ratio for responsive containers. Reserve space for dynamic content (ads, lazy-loaded components) with min-height.

Accessibility: Often Overlooked, Easy to Fix

Most accessibility issues are mechanical fixes:

  • Add alt text to every image (decorative images get alt="")
  • Ensure color contrast ratio of 4.5:1 for normal text, 3:1 for large text
  • Add aria-label to icon-only buttons
  • Ensure all interactive elements are keyboard-navigable
  • Use semantic HTML: <main>, <nav>, <article>, <section> with headings
// ❌ Accessibility failures
<div onClick={handleClick}>Click me</div>
<img src="/hero.jpg" />
<button><SearchIcon /></button>

// ✅ Accessible equivalents
<button onClick={handleClick}>Click me</button>
<img src="/hero.jpg" alt="Developer workspace with dual monitors" />
<button aria-label="Search"><SearchIcon aria-hidden="true" /></button>

Best Practices: Quick Wins

  • Serve all assets over HTTPS
  • Add CSP headers and other security headers
  • Avoid document.write() and deprecated APIs
  • Ensure no console errors in production
  • Use HTTP/2 or HTTP/3

SEO: The Easiest 100

Next.js handles most SEO requirements through the Metadata API:

  • Export metadata or generateMetadata from every page
  • Include title, description, Open Graph, and canonical URL
  • Add structured data (JSON-LD) for articles and organization
  • Generate sitemap.xml and robots.txt
  • Ensure every page is reachable via internal links

The Process

  1. Run Lighthouse in Incognito mode (extensions affect scores)
  2. Address Performance issues first — they're the hardest
  3. Fix Accessibility — usually 10–15 mechanical fixes
  4. Clean up Best Practices — mostly security headers
  5. Verify SEO — metadata and structured data
  6. Re-run and iterate — some fixes affect multiple categories

Takeaways

  • Focus on TBT and LCP — they're 55% of the Performance score
  • Defer all non-critical scripts and inline critical CSS
  • Accessibility fixes are mechanical — semantic HTML and ARIA attributes
  • Use the Next.js Metadata API for SEO — it handles most requirements automatically
  • Run Lighthouse in Incognito to get accurate, reproducible scores

Không spam, hủy đăng ký bất kỳ lúc nào.

Bài viết liên quan