Lighthouse 90+ skoru nasıl alınır? Adım adım rehber

Lighthouse 90+ skoru almak için görselleri modern formatlarda ve doğru boyutta sunmak, JavaScript miktarını azaltmak, kritik CSS’i önceliklendirmek, fontları verimli yüklemek ve erişilebilirlik ile SEO temel kurallarını eksiksiz uygulamak gerekir. Lighthouse, Google’ın Performance, Accessibility, Best Practices ve SEO olmak üzere dört kategoride puan veren ücretsiz denetim aracıdır. Bu rehberde her kategori için uygulanabilir adımları sırayla anlatıyoruz.

Neden 90+ skor hedeflenmeli?

Lighthouse skorunun kendisi doğrudan bir sıralama faktörü değildir. Ancak Google, gerçek kullanıcı verisine dayanan Core Web Vitals metriklerini sayfa deneyimi sinyalleri arasında değerlendirir ve Lighthouse bu metrikleri laboratuvar ortamında tahmin eder. Lighthouse’ta 90 ve üzeri “iyi” aralık olarak gösterilir.

Asıl önemli olan kullanıcı tarafıdır. Hızlı açılan, kaymadan yüklenen ve kolay kullanılan bir site, ziyaretçinin sayfada kalmasını ve form doldurmasını kolaylaştırır. Hızlı bir site, müşterinizi kapıda bekletmeyen bir sitedir.

Core Web Vitals eşikleri

Google’ın “iyi” kabul ettiği değerler şöyledir:

Metrik	Ne ölçer	İyi değer
LCP (Largest Contentful Paint)	Ana içeriğin yüklenme süresi	2,5 saniye veya altı
INP (Interaction to Next Paint)	Etkileşime yanıt hızı	200 milisaniye veya altı
CLS (Cumulative Layout Shift)	Yükleme sırasında sayfa kayması	0,1 veya altı

Lighthouse laboratuvar testinde INP yerine, ona yakın bir gösterge olan Total Blocking Time (TBT) metriğini ölçer.

1. Performance

Dört kategori arasında iyileştirmesi en çok emek isteyen bölümdür.

Görselleri optimize edin

WebP veya AVIF gibi modern formatlar kullanın; bu formatlar genellikle JPEG’e göre daha küçük dosya boyutu sağlar.
Görselleri gösterildikleri boyuta göre sunun; srcset ile mobil ve masaüstüne farklı boyutlar verin.
Ekranın altında kalan görsellere loading="lazy" ekleyin.
İlk ekrandaki ana görsel (hero) için fetchpriority="high" kullanın ve bu görseli lazy load yapmayın.
Görsellere width ve height değerleri vererek sayfa kaymasını (CLS) önleyin.

JavaScript’i azaltın

Fazla JavaScript, özellikle mobil cihazlarda sayfanın etkileşime hazır hale gelmesini geciktirir.

Kullanmadığınız kütüphanelerden vazgeçin; örneğin jQuery’ye hala gerçekten ihtiyaç var mı, kontrol edin.
Code splitting ile her sayfaya yalnızca ihtiyaç duyduğu kodu yükleyin.
Üçüncü taraf scriptleri async veya defer ile yükleyin.
Sohbet balonu, ısı haritası gibi araçları ziyaretçi etkileşiminden sonra yüklemeyi değerlendirin.

Kritik CSS’i önceliklendirin

İlk ekranın çizimi için gereken CSS’i <head> içine satır içi olarak yerleştirin, geri kalan stilleri sonradan yükleyin. Kullanılmayan CSS kurallarını temizlemek de dosya boyutunu belirgin şekilde küçültür. Hazır tema veya büyük CSS kütüphaneleri kullanan sitelerde bu adım çoğu zaman en kolay kazanımlardan biridir.

Font stratejisi

font-display: swap kullanarak metnin font yüklenmeden görünmesini sağlayın.
Yalnızca kullandığınız font ağırlıklarını yükleyin.
Fontları kendi sunucunuzdan sunun ve en önemli fontu preload ile önceden yükleyin.

Sunucu ve önbellek

Sunucu yanıt süresi tüm metrikleri etkiler. Statik dosyalar için uzun süreli önbellek başlıkları tanımlayın, sıkıştırmayı (Brotli veya Gzip) açın ve mümkünse bir CDN kullanın. CDN, içeriği ziyaretçiye coğrafi olarak yakın sunuculardan ulaştırarak yükleme süresini kısaltır.

2. Accessibility

Erişilebilirlik puanı hem engelli kullanıcılar hem de genel kullanılabilirlik için önemlidir:

Tüm anlamlı görsellerde açıklayıcı alt metni
Form alanlarında ilişkilendirilmiş label etiketleri
Metin ve arka plan arasında en az 4,5:1 renk kontrastı
Klavyeyle eksiksiz gezinme
Dekoratif SVG’lerde aria-hidden="true"
Görünür odak stilleri için focus-visible

Otomatik testler erişilebilirlik sorunlarının yalnızca bir kısmını yakalar. Sayfayı klavyeyle baştan sona gezmek ve bir ekran okuyucuyla kısa bir deneme yapmak, raporun göremediği eksikleri ortaya çıkarır.

3. Best Practices

Tüm sayfaların HTTPS üzerinden sunulması
Konsolda hata olmaması
Kullanımdan kaldırılmış (deprecated) API’lerden kaçınılması
Görsellerin doğru en-boy oranıyla gösterilmesi
Güncel bir Content Security Policy tanımlanması

4. SEO

Lighthouse SEO kategorisi temel teknik kontrolleri yapar:

Her sayfada benzersiz ve yaklaşık 60 karakteri aşmayan title
Yaklaşık 155 karakterlik meta description
Mobil viewport meta etiketi
Doğru lang özelliği
Dizine eklenebilirlik: robots.txt engeli veya yanlışlıkla bırakılmış noindex olmaması
Yapısal veri (Schema.org)

Lighthouse’un SEO puanı yalnızca temel kontrolleri kapsar. İçerik ve site mimarisi tarafını SEO uyumlu web site nasıl yapılır yazımızda ayrıntılı olarak bulabilirsiniz.

Bugün uygulayabileceğiniz hızlı iyileştirmeler

Görselleri WebP’ye dönüştürün: Squoosh gibi ücretsiz araçlarla birkaç dakikada yapılabilir.
Lazy load uygulayın: İlk ekran dışındaki görsellere loading="lazy" ekleyin.
Üçüncü taraf scriptleri erteleyin: Analytics ve sohbet araçlarını defer ile yükleyin.
Render’ı engelleyen CSS’i azaltın: Kritik olmayan stilleri sonradan yükleyin.
CDN ve önbelleği etkinleştirin: Statik dosyaların ziyaretçiye daha hızlı ulaşmasını sağlayın.

Ölçümleme

Skoru bir kez ölçüp bırakmak yerine düzenli olarak izleyin:

PageSpeed Insights: Hem laboratuvar sonucunu hem de gerçek kullanıcı verisini tek ekranda gösterir.
Search Console: Core Web Vitals raporunda sitenizin gerçek kullanıcı (CrUX) verisini sayfa grupları halinde sunar.
Lighthouse CI: Her yayında otomatik test yaparak skorun gerilemesini erken fark etmenizi sağlar.

Laboratuvar skorları ağ ve cihaz koşullarına göre her testte birkaç puan oynayabilir. Bu nedenle tek bir sonuca değil, birkaç testin ortalamasına ve zaman içindeki eğilime bakın.

Hangi sırayla ilerlemelisiniz?

Lighthouse raporu çok sayıda öneri listeler ve hepsini aynı anda uygulamaya çalışmak zaman kaybına yol açabilir. Daha verimli bir yaklaşım, raporun “Opportunities” ve “Diagnostics” bölümlerinde tahmini kazancı en yüksek görünen maddelerden başlamaktır. Projelerimizde genellikle şu sırayı izliyoruz:

İlk ekrandaki ana görseli ve LCP öğesini hızlandırmak
Render’ı engelleyen CSS ve JavaScript dosyalarını azaltmak
Üçüncü taraf scriptleri ertelemek veya kaldırmak
Sayfa kaymasına yol açan görsel, reklam ve font sorunlarını gidermek
Erişilebilirlik ve SEO uyarılarını tek tek kapatmak

Her adımdan sonra testi yeniden çalıştırmak, hangi değişikliğin ne kadar etki yarattığını görmenizi sağlar. Böylece hangi iyileştirmenin kalıcı olarak sürdürülmesi gerektiğine veriye dayanarak karar verebilirsiniz.

Sık yapılan hatalar

Yalnızca masaüstünde test etmek: Mobil test daha zorlu koşullarda yapılır ve skor genellikle daha düşük çıkar.
Bir kez ölçüp bırakmak: Yeni görseller, eklentiler ve scriptler zamanla skoru düşürür; düzenli ölçüm gerekir.
Her üçüncü taraf scripti vazgeçilmez saymak: Birçoğu ertelenebilir, sadeleştirilebilir veya kaldırılabilir.
“Sonra optimize ederiz” demek: Performans sonradan eklenen bir katman değil, tasarım ve geliştirme aşamasından itibaren gözetilmesi gereken bir hedeftir.

Mevcut altyapınız bu iyileştirmeleri kaldırmıyorsa, kapsamlı bir yenilemeyi değerlendirmek gerekebilir. Bu konuda web sitesi yeniden tasarım rehberimiz yol gösterebilir.

Sonuç

90+ skora ulaşmak çoğu site için mümkündür; zor olan, bu seviyeyi düzenli takip ederek korumaktır. Kayacı Media’da web site projelerimizde mobil Lighthouse skorunda 90 ve üzerini hedefliyoruz. Sitenizin mevcut durumunu görmek için yazılı fiyat talep edebilirsiniz.

Sık sorulan sorular

Lighthouse skoru Google sıralamasını etkiler mi?

Lighthouse skorunun kendisi bir sıralama faktörü değildir. Google, gerçek kullanıcı verisine dayanan Core Web Vitals metriklerini sayfa deneyimi sinyallerinin parçası olarak değerlendirir. Lighthouse ise bu metrikleri laboratuvar ortamında tahmin eden bir teşhis aracıdır. Yüksek skor, sitenin hızlı ve sağlıklı olduğuna dair iyi bir işarettir.

PageSpeed Insights ile Lighthouse aynı şey mi?

PageSpeed Insights, arka planda Lighthouse kullanır ve buna ek olarak gerçek kullanıcılardan toplanan Chrome UX Report verisini gösterir. Lighthouse’u Chrome geliştirici araçlarından da çalıştırabilirsiniz. Laboratuvar sonucu sayfayı iyileştirmek için, saha verisi ise kullanıcıların gerçek deneyimini anlamak için kullanılır.

Mobil Lighthouse skoru neden masaüstünden düşük çıkar?

Mobil test, daha yavaş bir işlemci ve ağ bağlantısı simüle edilerek yapılır. Bu yüzden ağır JavaScript, büyük görseller ve üçüncü taraf scriptler mobilde skoru daha belirgin şekilde düşürür. Ziyaretçilerin önemli bir kısmı telefondan geldiği için optimizasyonda mobil skoru esas almanızı öneririz.