Web Performance: Lighthouse Skoru 100 Alma Rehberi

Fatih Algül

25.03.2026 218 görüntülenme

Lighthouse Nedir ve Neden Önemlidir?

Google Lighthouse, web sayfalarınızın performansını, erişilebilirliğini, SEO uyumluluğunu ve en iyi uygulamalara ne kadar uyduğunu ölçen açık kaynaklı bir araçtır. Chrome DevTools içinde yerleşik olarak gelir ve sayfanızı dört ana kategoride 0-100 arasında puanlar. Lighthouse skoru 100 almak, sayfanızın teknik açıdan mükemmel durumda olduğunun en güçlü göstergesidir. Ayrıca Google'ın Core Web Vitals metrikleri doğrudan sıralama faktörü olarak kullanıldığından, yüksek Lighthouse skoru SEO performansınızı da doğrudan etkiler.

Performans Kategorisinde 100 Puan Almak

Performans skoru en zorlu kategoridir ve şu metriklere dayanır: First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT), Cumulative Layout Shift (CLS) ve Speed Index. Her birini optimize etmek için farklı stratejiler gerekir.

1. Largest Contentful Paint (LCP) Optimizasyonu

LCP, sayfadaki en büyük görsel öğenin ne kadar sürede render edildiğini ölçer. Hedef değer 2.5 saniyenin altıdır. LCP'yi iyileştirmek için şunları yapın:

Kritik kaynakları önceden yükleyin: Hero image veya LCP öğesi için <link rel="preload"> kullanın.
Sunucu yanıt süresini düşürün: TTFB (Time to First Byte) değerini CDN ve sunucu tarafı önbellekleme ile minimize edin.
Render-blocking kaynakları eleyin: Kritik olmayan CSS ve JS dosyalarını asenkron yükleyin.

Hero image için preload örneği:

<link rel="preload" as="image" href="/images/hero.webp" fetchpriority="high">

2. Cumulative Layout Shift (CLS) Optimizasyonu

CLS, sayfadaki beklenmeyen görsel kaymaları ölçer. Hedef değer 0.1'in altıdır. Layout shift'i önlemek için:

Tüm görsellere width ve height nitelikleri ekleyin.
Dinamik olarak eklenen içerikler (reklamlar, embed'ler) için sabit alan ayırın.
Web fontları yüklenirken font-display: swap kullanın ve size-adjust ile fallback font boyutunu eşleştirin.

<img src="photo.webp" width="800" height="600" alt="Açıklama" loading="lazy">

3. Total Blocking Time (TBT) ve JavaScript Optimizasyonu

TBT, ana iş parçacığının (main thread) ne kadar süre bloke edildiğini ölçer. Bu metrik, kullanıcı etkileşiminin ne kadar hızlı yanıt verdiğiyle doğrudan ilişkilidir. Hedef: 200ms altı.

Code splitting uygulayın: Webpack, Vite veya esbuild ile her sayfa için yalnızca gerekli JavaScript'i yükleyin.
Üçüncü parti scriptleri erteleyin: Analytics, chat widget'ları ve reklam scriptlerini defer veya async ile yükleyin.
Uzun görevleri parçalayın: 50ms'den uzun süren görevleri requestIdleCallback veya scheduler.yield() ile bölerek main thread'i serbest bırakın.

Dinamik import ile code splitting örneği:

const module = await import('./heavy-module.js');

Görsel Optimizasyonu

Görseller genellikle sayfanın en ağır bileşenidir. Doğru optimizasyon, hem LCP hem de Speed Index'i dramatik şekilde iyileştirir.

Modern formatlar kullanın: JPEG ve PNG yerine WebP veya AVIF formatına geçin. AVIF, WebP'ye göre %20-30 daha küçük dosya boyutu sağlar.
Responsive görseller sunun: <picture> etiketi ve srcset niteliğiyle cihaza uygun boyutlar sunun.
Lazy loading uygulayın: Ekranın altında kalan görsellere loading="lazy" ekleyin. Ancak LCP öğesine asla lazy loading uygulamayın.

Responsive görsel örneği:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero" width="1200" height="630" fetchpriority="high">
</picture>

CSS ve Font Optimizasyonu

CSS, render-blocking bir kaynak olduğundan doğrudan FCP'yi etkiler.

Kritik CSS'i inline edin: Above-the-fold içeriğin stillerini <style> etiketi içinde doğrudan HTML'e gömün.
Kullanılmayan CSS'i kaldırın: PurgeCSS veya benzeri araçlarla kullanılmayan kuralları eleyin. Özellikle Tailwind CSS gibi utility framework'lerde bu adım kritiktir.
Font yükleme stratejisi belirleyin: font-display: swap kullanarak FOIT (Flash of Invisible Text) yerine FOUT (Flash of Unstyled Text) tercih edin ve fontları <link rel="preload"> ile önceden yükleyin.

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

Sunucu Tarafı Optimizasyonlar

HTTP/2 ve Sıkıştırma

Sunucu yapılandırmanız Lighthouse skoru üzerinde büyük etkiye sahiptir:

HTTP/2 veya HTTP/3 kullanın: Multiplexing sayesinde paralel kaynak yükleme hızlanır.
Brotli sıkıştırma etkinleştirin: Gzip'e göre %15-20 daha iyi sıkıştırma oranı sunar.
Önbellekleme başlıklarını doğru ayarlayın: Statik kaynaklar için uzun süreli Cache-Control başlıkları ayarlayın.

Nginx'te Brotli örneği:

brotli on;
brotli_types text/html text/css application/javascript application/json image/svg+xml;

CDN Kullanımı

Cloudflare, Fastly veya AWS CloudFront gibi bir CDN kullanarak statik kaynaklarınızı kullanıcılara en yakın sunucudan sunun. Bu, özellikle TTFB değerini iyileştirerek LCP'yi doğrudan etkiler.

Erişilebilirlik ve SEO Skorlarını 100'e Çıkarmak

Performans dışındaki kategoriler nispeten daha kolay optimize edilir:

Erişilebilirlik: Tüm görsellere alt niteliği ekleyin, renk kontrast oranlarını WCAG AA standartlarına uygun tutun (minimum 4.5:1), form elemanlarına <label> etiketleri ekleyin ve semantik HTML kullanın.
SEO: <meta name="description"> ekleyin, <title> etiketini benzersiz tutun, canonical URL belirleyin ve robots.txt ile sitemap.xml dosyalarını oluşturun.
En İyi Uygulamalar: HTTPS kullanın, konsol hatalarını temizleyin, güvenlik başlıklarını (Content-Security-Policy, X-Content-Type-Options) yapılandırın ve güncel JavaScript API'lerini tercih edin.

Ölçüm ve Sürekli İzleme

Lighthouse skorunu bir kez yükseltmek yetmez; sürekli izlemeniz gerekir. Bunun için şu araçları kullanabilirsiniz:

Lighthouse CI: CI/CD pipeline'ınıza entegre ederek her deploy öncesi otomatik performans testi çalıştırın.
PageSpeed Insights API: Gerçek kullanıcı verilerini (CrUX) ve lab verilerini bir arada görün.
Web Vitals kütüphanesi: Gerçek kullanıcı metriklerini (RUM) toplayarak lab ile saha verilerini karşılaştırın.

Lighthouse CI yapılandırma örneği (lighthouserc.js):

module.exports = {
  ci: {
    collect: { url: ['http://localhost:3000/'] },
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.95 }],
        'categories:accessibility': ['error', { minScore: 1 }],
        'categories:seo': ['error', { minScore: 1 }],
      },
    },
  },
};

Sonuç

Lighthouse skoru 100 almak tek seferlik bir görev değil, sürekli bir süreçtir. Öncelik sıralaması olarak LCP → CLS → TBT yolunu izleyin çünkü bu metrikler performans skoruna en çok katkıda bulunan ağırlıklara sahiptir. Her optimizasyon adımını tek tek uygulayarak ölçün, hangi değişikliğin ne kadar etki yarattığını analiz edin ve bu süreci deployment pipeline'ınıza entegre ederek kalıcı hale getirin. Unutmayın: en hızlı kaynak, hiç yüklenmesi gerekmeyen kaynaktır.

Paylaş: Twitter LinkedIn

İlgili Yazılar

htmx ile Modern Web: JavaScript Olmadan Dinamik Sayfalar

Modern Web Geliştirme: Jamstack Mimarisi

SEO Temelleri: Teknik SEO Rehberi

Yazar Hakkında

Fatih Algül

TechSoft Solutions

Proje mi var?

Yazılım, IoT veya otomasyon konularında destek almak ister misiniz?

İletişime Geç