Example Optimized Page

This page demonstrates all Lighthouse optimization best practices. Follow these patterns to achieve 90+ scores in Performance, Accessibility, SEO, and Best Practices.

Properly Optimized Images

Above-the-Fold Image

Use priority for images visible immediately.

Example hero image showing optimized content layout
Best Practices:
  • Uses fill with proper container sizing
  • Includes priority for LCP image
  • Descriptive alt text
  • Responsive sizes attribute

Fixed Dimensions Image

Specify exact width/height for predictable layout (prevents CLS).

Example icon demonstrating fixed dimensions
Best Practices:
  • Explicit width=400 and height=300
  • Prevents layout shift (CLS)
  • Auto lazy-loads (below fold)
  • Responsive via CSS

Accessibility Best Practices

Icon Buttons

Always provide accessible names for icon-only buttons:

<Button 
  aria-label="Toggle security settings"
>
  <Shield aria-hidden="true" />
</Button>

Color Contrast

✅ Good: gray-700 / gray-300 (4.5:1 ratio)

❌ Bad: gray-400 in light mode (insufficient contrast)

Touch Targets

All interactive elements should be at least 48x48px:

SEO Best Practices

Key SEO Elements

  • Unique Metadata: Each page has unique title & description (see metadata export above)
  • Heading Hierarchy: Single H1, followed by H2, H3 in order
  • Semantic HTML: Proper use of section, article, nav
  • Alt Text: Descriptive alt text for all images
  • Canonical URL: Set via metadata alternates
  • OpenGraph: Social media preview images and descriptions

Performance Optimization

Optimization Checklist

Images: Next.js Image component with WebP/AVIF formats
Fonts: Next.js font optimization with display: swap
Code Splitting: Automatic via Next.js
Lazy Loading: Images below fold load on scroll
Compression: Enabled in next.config.js