Lighthouse Skorunun Önemi

Web siteniz görsel olarak ne kadar etkileyici olursa olsun, kullanıcı ilk saniyelerde bir gecikme hissederse o site için zihinsel notu çoktan düşer. Lighthouse skoru tam olarak bu hissi sayısallaştıran araçtır — ve Google bu sayıları sandığınızdan çok daha ciddiye alıyor.

Lighthouse nedir?

Lighthouse, Chrome ve PageSpeed Insights üzerinde çalışan, açık kaynaklı bir performans denetim aracıdır. Bir sayfayı dört ana eksende değerlendirir:

Performance — yükleme hızı, etkileşim gecikmesi, görsel sabitlik
Accessibility — erişilebilirlik standartlarına uyum
Best Practices — güvenlik ve modern web kuralları
SEO — arama motoru taraması için gerekli temel kontroller

Her kategori 0–100 arası bir puan döner. Yeşil bant 90 ve üstü, turuncu 50–89, kırmızı ise 0–49'dur.

Google bu puana ne kadar önem veriyor?

Lighthouse skorunun doğrudan kendisi bir sıralama (ranking) faktörü değildir — ancak skoru oluşturan Core Web Vitals metrikleri, 2021'den itibaren Google'ın resmi sıralama sinyalleri arasındadır. Bu üç metrik şunlardır:

Metrik	Anlamı	İdeal Eşik
LCP (Largest Contentful Paint)	En büyük içerik bloğunun yüklenme süresi	< 2.5 sn
INP (Interaction to Next Paint)	Kullanıcı etkileşimine yanıt süresi	< 200 ms
CLS (Cumulative Layout Shift)	Sayfanın kendiliğinden kayma miktarı	< 0.1

Google, bu metrikleri Chrome User Experience Report (CrUX) üzerinden gerçek kullanıcı verisiyle topluyor. Yani Lighthouse'da aldığınız laboratuvar skoru bir gösterge, ama Google'ın sıralamada baz aldığı şey sahadaki gerçek kullanıcı deneyimi.

Pratikte ne anlama geliyor?

İki rakip sayfa arasında içerik kalitesi benzerse, Core Web Vitals belirleyici fark yaratır.
E-ticaret sayfalarında LCP'nin her saniye artışı dönüşüm oranını ortalama %7 düşürür (Google'ın kendi çalışması).
Mobilde Lighthouse skoru 50'nin altında olan bir sitenin organik tıklama oranı (CTR), 90+ skorlu bir rakipten yaklaşık %30 daha düşük ölçülüyor.

Skoru sadece "geliştiriciye gösterilen güzel bir rapor" olarak görmek, doğrudan ciroya yansıyan bir kayıptır.

Lighthouse skorunu düşüren ana sebepler

En sık karşılaştığımız problemler:

Optimize edilmemiş görseller — 3 MB'lık bir JPG, mobilde LCP'yi tek başına yere serer.
Render-blocking CSS / JS — <head> içine yığılmış üçüncü taraf script'leri.
Web fontlarının yanlış yüklenmesi — font-display: swap kullanılmadığında yazı geç görünür ve CLS artar.
Hidrasyon yükü — kocaman client-side React bundle, ilk etkileşim gecikmesini patlatır.
Eksik cache başlıkları — tekrar ziyaretlerde sıfırdan indirme.
Layout shift — boyutu belirtilmeden yüklenen görseller ve reklamlar.

Skor nasıl arttırılır?

Aşağıdaki adımlar, çoğu projede Lighthouse'u 90+'a taşımaya yetiyor:

1. Görselleri modern formatlara çevirin

WebP ve AVIF, JPG'ye göre %30–50 daha küçük. Next.js'in next/image bileşeni, AVIF/WebP üretimini, lazy loading'i ve srcset oluşturmayı otomatik halleder. LCP elementinin priority prop'unu eklemeyi unutmayın.

2. Statik ve sunucu tarafı render kullanın

CSR (client-side rendering) ile gönderilen HTML boş gelir, FCP ve LCP geç tetiklenir. SSG (static site generation) veya SSR + streaming ile HTML'yi kullanıcıya hazır gönderirsiniz. Next.js App Router bunu varsayılan davranış haline getiriyor.

3. JavaScript'i bölümleyin

Dinamik import (next/dynamic) ile sadece görünür rotanın kodunu yükleyin.
Üçüncü taraf script'leri (analytics, chat widget) next/script'in strategy="lazyOnload" modu ile geciktirin.
Kullanılmayan kütüphaneleri tespit etmek için @next/bundle-analyzer çalıştırın.

4. Fontları doğru yükleyin

next/font ile fontu derleme zamanında host edin, display: 'swap' kullanın, sadece ihtiyaç duyduğunuz subset'i indirin. Bu tek değişiklik CLS'yi neredeyse sıfıra çekebilir.

5. Görsel boyutlarını sabitleyin

Her <img> ve <iframe> için width ve height belirtin. Hero alanında dinamik içerik varsa, yer tutucu yüksekliği CSS ile sabitleyin. Layout shift'in en yaygın kaynağı budur.

6. CDN ve cache başlıkları

Cache-Control: public, max-age=31536000, immutable ile hashlenmiş statik dosyaları yıllarca cache'leyin. Vercel gibi platformlar bunu otomatik yapar; kendi host'unuzda ise Nginx/CDN kuralı olarak yazılmalı.

7. Erişilebilirlik düzeltmeleri

Tüm görsellere anlamlı alt metni.
Buton ve linkler için ayırt edilebilir focus state.
Yeterli kontrast oranı (AA için 4.5:1).
Doğru semantik HTML (<button> yerine <div onClick> kullanmayın).

Sonuç

Lighthouse, müşterinizin sizden önce görmediği bir performans ön denetimi. 90+ skor, sadece geliştiricinin gururu değil; daha hızlı dönüşüm, daha yüksek organik trafik ve daha düşük reklam maliyetidir.

Cezeri olarak her projeyi 90+ Lighthouse hedefiyle teslim ediyoruz. Mevcut sitenizin durumunu görmek için bir denetim ister misiniz?