Lighthouse 95+ Skoru Çıkarma: Pratik Optimizasyon Rehberi

Lighthouse 95+ skor çıkarmak ego tatmini değil, gerçek conversion impact. LCP 4 saniyeden 2 saniyeye inince bounce rate %25 düştü, conversion %18 arttı — gerçek müşteri verisi. Aşağıda Lighthouse audit'lerini 95+ yapmak için sistemli yaklaşım.

Lighthouse'un 4 kategorisi

Performance

LCP, FCP, TBT, CLS, Speed Index. Core Web Vitals burada.

Accessibility

ARIA, contrast ratio, alt text, semantic HTML.

Best Practices

HTTPS, console errors, deprecated API'lar, image aspect ratio.

SEO

Title, meta description, mobile, viewport, robots, structured data.

Core Web Vitals: 3 ana metrik

• LCP (Largest Contentful Paint) < 2.5sn: En büyük görünür element ne kadar hızlı renderlandı
• INP (Interaction to Next Paint) < 200ms: Kullanıcı etkileşiminin yanıtlanma süresi (FID'in yerini aldı)
• CLS (Cumulative Layout Shift) < 0.1: Sayfa yüklenirken layout shift miktarı

LCP optimizasyonu

LCP genelde hero image veya hero text. Optimizasyon sırası: 1) LCP element'ini preload edin (<link rel='preload' as='image' href='hero.webp'>), 2) WebP/AVIF format kullanın, 3) Responsive images (srcset), 4) CDN üzerinden serve, 5) Above-the-fold içerikleri lazy load etmeyin. Bir e-ticaret'in 4.2sn LCP'sini 1.8sn'ye indirdik — sadece hero image format dönüşümü ve preload ile.

INP optimizasyonu

INP, JavaScript main thread'in ne kadar bloklandığını ölçer. Optimizasyon: 1) Long tasks'leri parçalayın (setTimeout, requestIdleCallback), 2) Üçüncü taraf script'leri defer/async, 3) Reaction debouncing, 4) React/Vue/Angular için useDeferredValue, startTransition. Hot path'lerde 50ms+ task varsa parçalayın.

CLS optimizasyonu

• Image'lara width + height attribute (aspect ratio reserve)
• Web font için font-display: swap + size-adjust
• Dynamic content insertion'da placeholder height
• Cookie banner'lar absolute pozisyonda (layout shift yapmasın)
• Ads ve embed'ler için container reserve

Framework-özel pratikler

Next.js

next/image, next/font, App Router'da Server Components, dynamic imports for heavy libs.

WordPress

Cache plugin (LiteSpeed, WP Rocket), CDN, image optimization (Smush/Imagify), lazy loading native.

Shopify

Theme.liquid optimization, app limit (max 5-10 active), preload critical CSS, lazy load below-fold.

Webflow

Asset minification on, lazy load, preconnect to Webflow CDN, custom code'u defer.

Lighthouse skoru ile gerçek dünya farkı

Lighthouse simüle edilmiş lab data. Gerçek kullanıcılar farklı network, device, location'da. PSI'nin 'Origin Summary' bölümü real user data (CrUX). Skor değil, field data'yı baz alın. Lighthouse 95+ ama CrUX 'Poor' ise asıl problem var demektir.