Google Lighthouse Nedir? Neden Önemlidir?

Günümüzün rekabetçi dijital ekosisteminde, bir web sitesinin performansı artık sadece teknik bir detay olmaktan çıktı; doğrudan kullanıcı deneyimini, dönüşüm oranlarını ve Google arama sıralamalarını etkileyen kritik bir başarı faktörüne dönüştü.

İnternet kullanıcılarının beklentisi her geçen gün artarken, sitenizin yüklenme hızındaki en ufak bir gecikme bile potansiyel ziyaretçileri kaybetmenize neden olabilir.

Peki, web varlığınızın bu yoğun trafikte ne kadar güçlü bir konumda olduğunu nasıl anlayabiliriz? İşte tam bu noktada, Google tarafından geliştirilen ücretsiz ve açık kaynaklı bir denetim aracı olan Google Lighthouse devreye giriyor.

Bu kapsamlı rehber boyunca, Lighthouse’un sadece yüzeysel bir hız testi aracı olmanın ötesinde, web sitenizin kalitesini, erişilebilirliğini, SEO sağlığını ve genel olarak kullanıcıya sunduğu değeri bütüncül bir bakış açısıyla nasıl değerlendirdiğini derinlemesine inceleyeceğiz.

Sizi, dijital performansınızı optimize etme yolculuğunda Lighthouse’u etkili bir şekilde kullanmaya davet ediyorum.

Google Lighthouse Nedir?

Birçok kişi Lighthouse’u yalnızca hız ölçen bir araç olarak algılasa da, aslında bu araç bir web sayfasının kalitesini çok boyutlu olarak analiz eden bütünleşik bir denetim mekanizmasıdır.

Google Lighthouse, web geliştiricilerin, pazarlamacıların ve SEO uzmanlarının sitelerinin teknik sağlığını kapsamlı bir şekilde incelemeleri için tasarlanmış otomatik bir yazılımdır.

Bu araç, bir web sayfasını beş temel alanda test ederek bir puanlama sistemi oluşturur. Bu beş alanın her biri, kullanıcı deneyiminin (UX) ve arama motoru optimizasyonunun (SEO) farklı bir yönünü temsil eder. Google’ın Doğal Dil İşleme (NLP) yeteneği, bu kategorilerdeki metrikleri yalnızca puan olarak değil, aynı zamanda sayfanın kullanıcıya sunduğu anlam ve değer (Semantic Value) bağlamında da değerlendirir.

Lighthouse’un Beş Temel Denetim Kategorisi

Lighthouse, bir web sitesini tek bir kritere göre değil, aşağıdaki beş kritik kategoriye göre değerlendirerek bütünsel bir performans raporu sunar:

Performans (Performance): Bir sayfanın ne kadar hızlı yüklendiği ve kullanıcı etkileşimlerine ne kadar çabuk tepki verdiği ile ilgilenen en bilinen kategoridir. Bu skor, özellikle Google’ın sıralama faktörleri arasında yer alan Core Web Vitals metrikleri üzerinden şekillenir.
Erişilebilirlik (Accessibility): Web sitesinin engelli veya kısıtlı kullanıcılar (görme, işitme, motor beceri vb. engelleri olanlar) tarafından kolayca kullanılabilir olup olmadığını denetler. Yüksek erişilebilirlik skoru, sitenizin kapsayıcılıkta yüksek bir EEAT standardı taşıdığını gösterir.
En İyi Uygulamalar (Best Practices): Modern web geliştirme standartlarına uygunluğu kontrol eder. Örneğin, HTTPS kullanımı, güvenli bağlantıların varlığı ve doğru kodlama tekniklerinin kullanılıp kullanılmadığı gibi teknik güvenlik ve kod kalitesi konularına odaklanır.
SEO (Search Engine Optimization): Sayfanın arama motorları tarafından doğru bir şekilde taranıp taranamayacağını ve indekslenip indekslenemeyeceğini belirleyen temel kriterleri kontrol eder. Başlık etiketlerinin, meta açıklamalarının ve yapılandırılmış verinin doğru kullanımını kapsar.
Aşamalı Web Uygulaması (Progressive Web App – PWA): Sayfanın, mobil cihazlarda uygulama benzeri bir deneyim sunma potansiyelini değerlendirir. Bu, çevrimdışı çalışma, hızlı yüklenme ve ana ekrana eklenebilme gibi özellikleri içerir.

Kategori	Semantik Üçlü (Özne-Yüklem-Nesne)	Açıklama
Performance (Performans)	Lighthouse → Ölçer → Hız ve Core Web Vitals	Sayfanın ne kadar hızlı yüklendiği ve tepki verdiği.
Accessibility (Erişilebilirlik)	Lighthouse → Değerlendirir → Tüm Kullanıcılar İçin Kullanım Kolaylığı	Engelli veya kısıtlı kullanıcıların siteyi kullanma yeteneği.
Best Practices (En İyi Uygulamalar)	Lighthouse → Kontrol Eder → Modern Web Standartlarına Uygunluk	Güvenlik, HTTPS, kod kalitesi gibi modern standartlar.
SEO (Arama Motoru Optimizasyonu)	Lighthouse → Denetler → Temel Sıralama Kriterlerinin Karşılanması	Arama motorlarının içeriği tarama ve indeksleme yeteneği.
PWA (Aşamalı Web Uygulaması)	Lighthouse → Doğrular → Uygulama Benzeri Deneyimin Sağlanması	Mobil cihazlarda hızlı, güvenilir ve ilgi çekici bir deneyim için gereklilikler.

Bu kategorilerin her biri, sitenizin dijital ekosistem içindeki genel sağlığını ve otoritesini tesis etmede kritik roller üstlenir.

Lighthouse Nasıl Kullanılır? Pratik Erişim Yolları ve İpuçları

Birçok kullanıcı, “Google Lighthouse testini nerede çalıştırabilirim?” veya “Hangi kullanım yöntemi bana daha uygun?” gibi sorulara yanıt arar. Lighthouse’a erişmek ve bir denetim raporu oluşturmak için üç temel ve yaygın kullanılan yöntem bulunmaktadır. Yöntem seçimi, denetimin amacına ve sıklığına göre değişir.

Hangi Yöntem Bana Uygun?

Erişim Yolu	Kullanım Amacı	IQQI: Gizli Soru ve Bağlam
Chrome Geliştirici Araçları (DevTools)	Anlık, tekil sayfada geliştirme sırasında yapılan değişikliklerin etkisini hemen görmek.	Kodu değiştirirken anlık olarak performans skorunu nerede görebilirim?
PageSpeed Insights (PSI)	Hem laboratuvar (anlık test) hem de gerçek kullanıcı verilerini (Field Data) aynı anda görmek.	Sitemin gerçek kullanıcılar nezdindeki performansı nedir ve Google’ın kendi araçlarında skor kaç?
Komut Satırı (CLI)	Sürekli Entegrasyon (CI) süreçlerine entegrasyon ve otomasyon ile toplu testler yapmak.	Testleri otomatik olarak, belirli aralıklarla ve sürekli nasıl çalıştırabilirim?

Adım Adım En Kolay Yöntem: Chrome DevTools Kullanımı

Web geliştiricileri ve SEO uzmanları için en pratik ve anlık yöntem, tarayıcıya entegre olan Geliştirici Araçları’dır.

Hedef Sayfayı Açın: Denetlemek istediğiniz URL’yi Google Chrome tarayıcısında açın.
Geliştirici Araçları’nı Başlatın: Klavyenizdeki F12 tuşuna veya Ctrl+Shift+I (Windows/Linux) / Cmd+Opt+I (Mac) kombinasyonuna basarak DevTools panelini açın.
Lighthouse Sekmesine Geçin: Açılan panelin üst kısmında yer alan sekmeler arasından “Lighthouse” sekmesini bulun ve tıklayın. (Bazı yeni sürümlerde “Aydınlatıcı” veya “Audits” olarak görünebilir.)
Denetim Ayarlarını Yapılandırın:
- Kategoriler (Categories): Analiz etmek istediğiniz kategorileri işaretleyin (Genellikle tümü işaretlenir).
- Cihaz (Device): Testin yapılacağı ortamı seçin. Mobil trafik genellikle daha kritik olduğu için “Mobile” seçeneğini kullanmanız şiddetle önerilir.
Raporu Oluşturun: “Analyze page load” (Sayfa yüklemesini analiz et) düğmesine tıklayın. Lighthouse, kısa bir yükleme süresinin ardından size detaylı bir rapor sunacaktır.

Bu basit adımlar sayesinde, o anki sayfanızın durumunu gösteren güncel ve detaylı bir rapora hızla ulaşabilirsiniz.

4. Lighthouse Raporunu Okuma

Google Lighthouse size yalnızca bir puan vermez; bu puanın arkasındaki nedenleri gösteren, karmaşık verilerden oluşan bir harita sunar. Raporun gerçek değeri, bu verileri doğru okuyarak sitenizin zayıf noktalarını tespit etmekten geçer.

4.1. Core Web Vitals Metrikleri: Performansın Kalbi

Performans skorunuzun temelini, Google’ın kullanıcı deneyimi için belirlediği üç hayati metrik olan Core Web Vitals (CWV) oluşturur. Bu metrikler aşağıdaki gibidir:

Metrik	Tanım	Hedef Değer
LCP (Largest Contentful Paint)	Sayfadaki ana içeriğin ekranda görünme süresi.	≤2.5 saniye
FID (First Input Delay) / INP (Interaction to Next Paint)	Kullanıcının ilk etkileşimi (tıklama) ile tarayıcının tepki vermesi arasındaki süre. (Yeni metrik INP, tepki verme süresinin tamamını ölçer).	≤200 milisaniye
CLS (Cumulative Layout Shift)	Sayfa yüklenirken beklenmedik görsel kaymaların toplamı.	≤0.1

Teşhisler ve Fırsatlar: Bağlamı Anlamak

Lighthouse raporunun alt kısımları, puanları neden aldığınızı açıklayan eylem planları sunar. Burada, skorlarla eylem önerileri arasındaki Bağlamsal Bütünlüğü (Contextual Coherence) kurmak kritiktir:

Fırsatlar (Opportunities): Bunlar, genellikle kolayca uygulanabilen ve performans skorunu belirgin ölçüde artıracak eylemlerdir. Örneğin, “Görselleri uygun boyutlandırın” önerisini görüyorsanız, bu, tarayıcının gereğinden büyük bir görseli indirmek zorunda kaldığını ve bunun doğrudan LCP’nizi düşürdüğünü gösterir.
Teşhisler (Diagnostics): Daha teknik ve derinlemesine sorunları işaret eder. Örneğin, “Ana iş parçacığının uzun süreli görevleri var” uyarısı, JavaScript kodunuzun tarayıcıyı uzun süre meşgul ettiğini ve bu durumun FID/INP skorunuzu olumsuz etkilediğini anlamalısınız.

Raporun bu bölümlerini yorumlamak, teknik problemin ne olduğunu anlamanın ötesinde, bu problemin kullanıcı deneyimini nasıl ve ne kadar bozduğunu kavramak anlamına gelir. Yüksek bir CLS, kullanıcının yanlış bir şeye tıklamasına neden olabilecek güvensiz bir deneyim yarattığı için, doğrudan sitenizin EEAT güvenilirliğine zarar verebilir.

İyileştirme Stratejileri: Lighthouse Raporundan EEAT ve Semantik Otoriteye Giden Yol

Lighthouse raporu bir kontrol listesi değil, bir yol haritasıdır. Raporda tanımlanan teknik iyileştirmeleri uygulamak, yalnızca puanlarınızı yükseltmekle kalmaz; aynı zamanda Google’ın ve kullanıcıların sitenize olan güvenini, yani EEAT (Expertise, Experience, Authoritativeness, Trustworthiness) değerini doğrudan artırır.

Teknik İyileştirmelerin Stratejik Karşılığı

Uygulanan her teknik iyileştirme, sitenizin Semantik SEO çerçevesinde daha iyi anlaşılmasına ve konu otoritesinin pekişmesine hizmet eder:

Lighthouse İyileştirmesi	Odak Noktası	Stratejik SEO/EEAT Bağlantısı
Görsel Optimizasyonu (Boyutlandırma ve Next-gen Formatlar)	Performans (LCP)	Deneyim (Experience): Hızlı yüklenen içerik, kullanıcıya “zahmetsiz” bir okuma deneyimi sunar ve memnuniyeti artırır.
Kullanılmayan CSS/JavaScript’i Kaldırma	Performans (Total Blocking Time – TBT)	Uzmanlık (Expertise): Temiz, optimize edilmiş kod, sitenizin teknik altyapısının profesyonelce yönetildiğini gösterir.
Erişilebilirlik Sorunlarını Giderme (Örn: Alt etiketleri, kontrast)	Erişilebilirlik	Otorite ve Güvenilirlik (A&T): Kapsayıcılık standartlarına uymak, sitenin etik ve teknik açıdan yüksek bir otorite taşıdığını kanıtlar.
HTTPS/SSL Kullanımı ve Güvenlik Başlıkları	En İyi Uygulamalar	Güvenilirlik (Trustworthiness): Kullanıcı verilerinin güvende olduğunu göstermek, sitenin güvenilir bir kaynak olarak algılanmasını sağlar.
Meta Etiket ve Yapısal Veri Düzeltmeleri	SEO	Semantik SEO: Google’ın içeriği ve amacını tam olarak anlamasını (NLP) sağlayarak, sitenizin ilgili konuda otorite olarak konumlanmasına yardımcı olur.

Sürekli İyileştirme Döngüsü

İçerik üretiminde olduğu gibi, web performansında da Discourse Integration (Söylem Bütünlüğü) şarttır. Yani, sitenizin teknik söylemi (kod kalitesi, hız) ile içerik söylemi (kaliteli bilgi) birbiriyle tutarlı olmalıdır.

Tek Seferlik Görev Değil: Web sitesi performansı, yayımlanan her yeni içerikle, eklenen her yeni görselle veya kullanılan her yeni eklentiyle değişebilir. Bu nedenle Lighthouse denetimi, sitenin gelişim sürecinin sürekli bir parçası olmalıdır.
İzleme ve Ölçme: DevTools veya PSI’dan aldığınız raporlar, anlık “Laboratuvar Verisi”dir. Gerçek performansınızı yansıtan “Alan Verisi” (Field Data – PSI’da gösterilir) ile bu sonuçları sürekli olarak karşılaştırmalı, böylece uyguladığınız iyileştirmelerin gerçek kullanıcılar üzerindeki etkisini izlemelisiniz.

Lighthouse Bir Süreçtir, Tek Seferlik Bir Görev Değil

Bu kapsamlı rehber boyunca gördüğümüz gibi, Google Lighthouse sadece bir puan tablosu sunmanın çok ötesindedir; o, dijital varlığınızın genel sağlığını gösteren kritik bir teşhis aracıdır. Başlangıçta sorduğumuz gibi, “Neden Lighthouse?” sorusunun cevabı artık netleşmiştir: Hız, sadece bir metrik değil, bir SEO zorunluluğu, bir EEAT güvenilirlik göstergesi ve en önemlisi, kusursuz bir kullanıcı deneyiminin temelidir.

Web sitenizdeki her yeni kod satırı, her yeni görsel ve her yeni içerik, Lighthouse skorunuzu potansiyel olarak etkiler.

Lighthouse’u düzenli olarak kullanarak, performansınızı sürekli bir döngü içinde optimize ederek ve raporun önerilerini sadece teknik bir görev değil, bir iş stratejisi olarak benimseyerek, hem arama motorlarının tarama botlarını memnun eden hem de kullanıcıların geri gelmek isteyeceği hızlı, güvenilir ve alanında otorite sahibi bir web sitesi inşa etme hedefinize ulaşabilirsiniz.

Google Lighthouse Hataları Nelerdir?

Google Lighthouse hataları site hızı ve teknik açıdan optimize edilmesi gereken bölümleri göstermektedir. Buradaki sorunlar, düşük skorun doğrudan nedenleridir.

Insights Hataları Nelerdir?

Görselleri uygun boyutta yayınlayın (Properly size images): Sunucunuzdan, ekranda kapladığı alandan çok daha büyük (yüksek çözünürlüklü) görsel dosyaları indiriliyor. Bu durum, hem indirme hem de yeniden boyutlandırma (render) süresini uzatarak ciddi zaman kaybına yol açar.
Gelecek nesil biçimlerdeki görsellerle hizmet verin (Serve images in next-gen formats): Geleneksel JPEG veya PNG formatları yerine, WebP, AVIF gibi modern sıkıştırma teknolojilerini kullanan formatlara geçilmelidir. Bu formatlar, aynı görsel kalitesini daha az bayt ile sunarak veri transferini hafifletir.
Oluşturma engelleme kaynaklarını ortadan kaldırın (Eliminate render-blocking resources): Sayfanın ilk görselini (LCP) oluşturmak için kritik olmayan CSS ve JavaScript dosyalarını beklemek, tarayıcının ekranı boyama işini geciktirir. Bu kritik olmayan kaynakları erteleyerek veya satır içine alarak ana yükleme yolunu temizlemelisiniz.
Kullanılmayan CSS’i erteleyin (Defer unused CSS): İndirilen büyük CSS dosyasının çoğunluğu, o anki görünüm alanını boyamak için gerekmiyor. Gereksiz stili indirmek ve işlemek yerine, yalnızca “katlama üstü” (above-the-fold) içeriği şekillendiren kritik CSS’i önceliklendirin.
Kullanılmayan JavaScript’i ortadan kaldırın (Remove unused JavaScript): İndirilen JavaScript kod paketinin önemli bir kısmı kullanılmadığı halde indirilip ayrıştırılıyor. Bu fazla kod yükü, cihazların işlem gücünü boş yere tüketir ve ana iş parçacığını meşgul eder.
Statik varlıklar için etkili önbellek politikası kullanın (Serve static assets with an efficient cache policy): Tarayıcıya, sitenizin yazı tipi, CSS, görseller gibi dosyalarını ne kadar süre boyunca yerel belleğinde saklaması gerektiğini bildirmiyorsunuz. Bu ihmal, tekrar ziyaret eden kullanıcıların her seferinde aynı dosyaları yeniden indirmesine neden olur.
Sunucu yanıt süresini (TTFB) azaltın (Reduce server response times): Sunucunuz, tarayıcıdan gelen isteği aldıktan sonra verinin ilk baytını göndermekte yavaş kalıyor. Bu gecikme (TTFB), tüm yükleme sürecini baştan aşağı olumsuz etkiler ve performansın tabanını oluşturur.
Metin sıkıştırmayı etkinleştirin (Enable text compression): HTML, CSS ve JavaScript gibi metin tabanlı kaynaklar, Gzip veya Brotli gibi sıkıştırma algoritmaları kullanılarak küçültülmeden gönderiliyor. Bu, gereksiz büyük ağ yüklerine neden olur.
Gerekli kaynaklara ön bağlantı yapın (Preconnect to required origins): Kritik bir kaynak (örneğin bir yazı tipi sunucusu veya CDN) kullanmadan önce, tarayıcının DNS çözümlemesi ve TCP el sıkışması gibi işlemler için zaman harcamasına neden oluyorsunuz. Kritik kaynaklara önceden bağlantı (preconnect) kurarak bu süreyi kısaltın.
Kritik istekleri zincirlemekten kaçının (Avoid chaining critical requests): Sayfa yüklemesi sırasında birden fazla kaynağın birbirini beklemesi gerekiyor (A kaynağı için B’ye ihtiyaç duyulması gibi). Bu, kritik yükleme yolunu uzatarak LCP’yi geciktirir. Zincirdeki halka sayısını azaltarak önceliklendirme yapın.
CSS’i küçültün (Minify CSS): CSS dosyalarınızda boşluklar, yorum satırları ve gereksiz karakterler bırakılmış. Bu fazlalıklar dosya boyutunu artırır. Minify işlemi ile bu gereksiz karakterleri kaldırarak indirme süresini azaltın.
JavaScript’i küçültün (Minify JavaScript): JavaScript dosyalarınızda geliştirme sırasında kullanılan boşluklar ve yorumlar temizlenmemiş. Dosyanın boyutunu düşürmek için küçültme (minification) ve karıştırma (uglification) işlemlerini uygulayın.
Önceden yükleme (Preload) ile önemli istekleri hızlandırın: Tarayıcıya, HTML’i taramadan önce bile belirli kaynakların (örneğin kritik bir yazı tipi veya arka plan görseli) çok önemli olduğunu ve hemen indirmeye başlaması gerektiğini belirtmiyorsunuz. Bu, kritik kaynakların keşfedilmesini geciktirir.
Yavaş 3G bağlantılarında 10 saniyeden az kalın (Keep the total byte weight low): Sayfanızın tüm varlıklarının (HTML, CSS, JS, görseller) toplam bayt ağırlığı, özellikle yavaş mobil ağlarda indirilmesi için çok büyük. Toplam veri transferini minimumda tutarak kullanıcı kotasını ve bekleme süresini azaltın.

Teşhisler Bölümü Nelerdir?

Bu teşhisler, performans sorunlarının ardındaki nedenleri ortaya koyar ve genellikle daha karmaşık, sistemik kodlama veya altyapı değişiklikleri gerektirir.

Ana iş parçacığını engelleyen uzun görevler var (Long tasks on the main thread): JavaScript yürütülmesi sırasında tarayıcının kullanıcı arayüzünü (UI) işleyen ana iş parçacığı, 50 milisaniyeden uzun süren kod blokları tarafından kilitlenmiştir. Bu durum, sayfanın kullanıcı etkileşimine (tıklama, kaydırma) tepki verme süresini (FID/INP) doğrudan olumsuz etkiler.
DOM boyutunu koruyun (Avoid an excessive DOM size): Sayfanızın Düğüm Nesne Modeli (Document Object Model) aşırı derecede karmaşık ve derin (çok fazla iç içe geçmiş HTML etiketi var). Bu karmaşık yapı, tarayıcının stil hesaplamalarını ve düzen (layout) işlemlerini yavaşlatarak render süresini uzatır.
Üçüncü taraf kodların etkisini azaltın (Reduce the impact of third-party code): Sitenizin temel işlevselliği için gerekli olmayan harici betikler (reklamlar, analiz araçları, sosyal medya widget’ları) toplam yükleme süresinin ve ana iş parçacığı meşguliyetinin önemli bir kısmını oluşturuyor. Bu dış kodların sayfanızın kritik performansına hükmetmesini engellemelisiniz.
Ağ yükleri için yüksek maliyetli kalma süresinden kaçının (Avoid large layout shifts): Ağdan indirilen tüm kaynakların (HTML, CSS, JS, görseller) toplam boyutu, özellikle mobil kullanıcılar için aşırı yüksektir. Bu durum, veri planı maliyetini ve indirme süresini artırarak kullanıcı deneyimini zedeler.
Gereksiz ağ gidiş-dönüşlerinden kaçının (Avoid multiple page redirects): Kullanıcı bir URL’ye tıkladığında, tarayıcının asıl içeriğe ulaşmadan önce bir veya daha fazla yönlendirme (redirect) zincirinden geçmesi gerekiyor. Her yönlendirme, ek bir ağ gecikmesi yaratarak performansı düşürür.
Pasif işleyiciler kullanın (Does not use passive listeners to improve scrolling performance): Bazı olay dinleyicileriniz (touchstart, wheel gibi), varsayılan tarayıcı davranışını (örneğin kaydırma) engelleme ihtimaline karşı tarayıcının tepki vermesini yavaşlatıyor. Bu olay dinleyicilerini “pasif” olarak işaretleyerek kaydırma akışkanlığını (smooth scrolling) artırmanız gerekir.
Yüksek CLS puanına yol açan kaynaklar var (Elements that contribute to a high CLS score): Sayfadaki hangi belirli öğelerin yükleme sırasında aniden hareket ettiğini ve kullanıcının göz hizasını bozduğunu listeler. Bu genellikle boyutsuz görseller, dinamik olarak eklenen reklamlar veya yazı tipleri yüklendiğinde boyut değiştiren metinler nedeniyle olur.
JavaScript yürütme süresi çok yüksek (Minimize main-thread work): Ana iş parçacığında JavaScript dosyalarını ayrıştırmak, derlemek ve çalıştırmak için harcanan toplam süre gereğinden fazladır. Bu, özellikle düşük güçlü mobil cihazlarda sitenin yavaş ve hantal hissedilmesine neden olur.
Görseller kodlamada verimsiz (Image elements do not have explicit width and height): Görsel etiketlerinde (<img>) width ve height özelliklerini belirtmiyorsunuz. Bu, tarayıcının görseli indirmeden önce ne kadar yer ayıracağını bilememesine ve dolayısıyla yükleme sırasında görsel kaymalara (CLS) yol açmasına neden olur.
Arama motoru dizine ekleme engellenmiş (Page is blocked from indexing): Robots.txt dosyası veya meta etiketleri aracılığıyla Google’ın sayfayı taraması veya dizine eklemesi engelleniyor. Bu, doğrudan SEO performansını sıfırlayan kritik bir hatadır.

Erişilebilirlik Hataları Nelerdir?

Bu denetimler, sitenizin engelli kullanıcılar için (ekran okuyucular, klavye navigasyonu, renk körlüğü vb.) ne kadar kolay ve kullanılabilir olduğunu değerlendirir. Yüksek bir erişilebilirlik skoru, sitenizin etik standartlara ve kapsayıcılığa verdiği önemi gösterir.

Görsellerin açıklayıcı alternatif metni (alt text) yok (Image elements do not have [alt] attributes): Görselin ne anlama geldiğini veya neyi temsil ettiğini açıklayan bir alt metni eksik. Bu durum, ekran okuyucu kullanan görme engelli kullanıcıların görselin içeriğini anlamasını imkansız hale getirir.
Yetersiz renk kontrastı var (Background and foreground colors do not have a sufficient contrast ratio): Metin rengi ile arka plan rengi arasındaki parlaklık farkı, WCAG standartlarının gerektirdiği minimum eşiğin altındadır. Bu durum, özellikle renk körlüğü veya düşük görme yetisine sahip kullanıcıların metni okumasını zorlaştırır.
Düğmelerin ve bağlantıların erişilebilir isimleri yok (Buttons and links do not have accessible names): Form kontrolleri, düğmeler ve köprüler gibi etkileşimli öğeler, ekran okuyucular tarafından anlamlandırılabilecek bir metin etiketine sahip değil. Kullanıcı, nereye tıklayacağını veya bu öğenin ne işe yaradığını anlayamaz.
Klavye odağı yönetimi düzgün değil (Elements with an [id] that is not unique): Sitede, klavye odağının (tab tuşu ile gezinme) nereye gittiği veya hangi öğelerin etkileşimli olduğu açıkça belirtilmiyor. Bu durum, fare kullanamayan kullanıcıların sayfada gezinmesini engeller.
Giriş alanlarının etiketleri (label) yok (Form elements do not have associated labels): Kullanıcının veri girmesi gereken form alanları (input, textarea), ne için kullanıldığını açıklayan bir label etiketi ile ilişkilendirilmemiş. Ekran okuyucular, alanın amacını kullanıcıya iletemez.
Sayfa başlığı (title) eksik veya açıklayıcı değil (Document does not have a title element): HTML belgesinin <title> etiketi eksik veya sayfanın içeriği hakkında yeterince bilgi vermiyor. Bu, özellikle tarayıcı sekmeleri arasında gezinen veya yer imi oluşturan kullanıcılar için kafa karıştırıcıdır.
Yetersiz başlık yapısı (Heading elements are not in a sequentially-descending order): Sayfa üzerindeki başlık etiketleri (<h1>, <h2>, <h3> vb.) mantıksal ve hiyerarşik bir sıra takip etmiyor. Ekran okuyucular, sayfa içeriğini anlamak için bu başlık yapısını kullandığından, düzensiz yapı içeriğin anlaşılmasını engeller.
ARIA nitelikleri doğru kullanılmıyor (Uses an invalid [aria-*] attribute): ARIA (Accessible Rich Internet Applications) nitelikleri, standart HTML öğelerinin erişilebilirliğini artırmak için kullanılır, ancak yanlış veya geçersiz bir şekilde uygulanmıştır. Yanlış ARIA kullanımı, ekran okuyucu kullanıcıları için standart HTML’den daha kötü sonuçlar doğurabilir.
Viewport ölçeklemesi devre dışı bırakılmış (The user cannot zoom in to see the page): Mobil cihazlarda kullanıcıların sayfayı yakınlaştırması (zoom yapması) engellenmiş durumda. Düşük görme yetisine sahip veya küçük metinleri büyütmesi gereken kullanıcıların içeriği okuması imkansız hale gelir.

En İyi Uygulamalar Hataları Nelerdir?

Bu denetimler, sitenizin güvenlik, performans altyapısı ve kodlama kalitesi açısından modern web gerekliliklerini karşılayıp karşılamadığını kontrol eder. Yüksek bir skor, sitenizin teknik güvenilirliğini (EEAT’nin Güvenilirlik bileşeni) artırır.

Güvenli olmayan kaynaklar yüklü (Uses HTTPS): HTTPS yerine HTTP ile yüklenmiş kaynaklar (resimler, betikler, stil dosyaları) bulunuyor. Bu, kullanıcıların bilgilerinin güvensiz olduğu anlamına gelir ve tarayıcılarda “Güvenli Değil” uyarısına neden olarak site güvenilirliğini zedeler.
Güvenlik başlıkları eksik (Does not use passive listeners to improve scrolling performance): Sunucunuz, tarayıcıya güvenlik önlemlerini belirten kritik HTTP başlıklarını (örneğin X-Content-Type-Options, X-Frame-Options) göndermiyor. Bu durum, sitenizi XSS (Cross-Site Scripting) veya tıklama kaçırma (clickjacking) gibi yaygın web saldırılarına karşı savunmasız bırakır.
Tarayıcı hataları konsolda mevcut (Browser errors were logged to the console): Geliştirici konsolunda, sitenin düzgün çalışmadığını gösteren, çözülmesi gereken JavaScript veya ağ hataları (örneğin 404 bulunamadı hataları) kaydedilmiş. Bu, sitenin kod kalitesinde veya bağlantılarında sorun olduğunu gösterir.
Terk edilmiş API’ler kullanılıyor (Avoids deprecated APIs): Kodunuzda, tarayıcı üreticileri tarafından kullanımdan kaldırılmış (deprecated) eski veya güncel olmayan programlama arayüzleri (API’ler) kullanılıyor. Bu API’ler gelecekte desteklenmeyeceği için sitenizin işlevselliğinin bozulma riski taşır.
Application Cache kullanılıyor (Avoids Application Cache): Güncel olmayan ve güvenli olmayan bir önbellekleme mekanizması olan Application Cache kullanılıyor. Bunun yerine modern web standartlarına uygun Service Worker tabanlı önbellekleme (PWA) çözümlerine geçilmelidir.
Kritik çapraz kökenli kaynaklar için CORS kullanılmıyor (Uses a valid [rel=noopener] on external links): Farklı bir kökenden (domain) yüklenen kritik kaynaklar için uygun Çapraz Köken Kaynak Paylaşımı (CORS) başlıkları ayarlanmamış. Bu durum, kaynakların düzgün yüklenmesini veya tarayıcının güvenlik kontrollerini geçmesini engelleyebilir.
Harici hedeflere giden bağlantılar güvensiz (Links to cross-origin destinations are safe): Harici, yeni bir sekmede açılan bağlantılar için rel="noopener" veya rel="noreferrer" nitelikleri kullanılmamış. Bu eksiklik, sekme kaçırma (tab-napping) olarak bilinen bir güvenlik açığı yaratarak hedef sitenin, sizin sitenizin penceresini manipüle etmesine izin verebilir.
Sayfa izinleri isteniyor (Allows users to paste into password fields): Siteniz, kullanıcı deneyimini ve güvenliğini olumsuz etkileyebilecek gereksiz veya tehlikeli tarayıcı izinleri (örneğin, konum, bildirimler) istiyor. İzinler yalnızca kesinlikle gerekli olduğunda talep edilmelidir.
Ağ bağlantı durumu kötüye kullanılıyor (Avoids requesting the geolocation permission on page load): Tarayıcının ağ bağlantı durumu (çevrimiçi/çevrimdışı) ile ilgili API’leri yanlış veya verimsiz bir şekilde kullanmak, uygulamanın performansını veya güvenilirliğini zedeleyebilir.

Google Lighthouse Ağaç Grafiği Nedir?

Lighthouse raporunun “Teşhisler” bölümünde “Kullanılmayan JavaScript’i ortadan kaldırın” veya “JavaScript yürütme süresi çok yüksek” gibi uyarılar gördüğünüzde, sorunun tam olarak hangi dosyalardan kaynaklandığını görmek istersiniz. İşte bu noktada, Lighthouse’un raporunda yer almasa da, geliştirme araçlarının ayrılmaz bir parçası olan Ağaç Grafiği (Treemap) Analizi devreye girer.

Ağaç Grafiği Nedir ve Neden Önemlidir?

Ağaç Grafiği, web sitenizin toplam dosya boyutunun (özellikle JavaScript ve CSS) görsel bir haritasını çıkaran analiz aracıdır. Bu grafik, sitenizin performansını etkileyen her bir dosyanın veya kod paketinin, toplam büyüklük içindeki oransal ağırlığını ve kapladığı alanı gösteren, iç içe geçmiş dikdörtgenlerden oluşur.

Önemi: Bu görselleştirme, sitenizin en şişman ve gereksiz bileşenlerinin, yani gizli performans düşmanlarının nerede saklandığını anında tespit etmenizi sağlar.

Ağaç Grafiği Nasıl Yorumlanır?

Grafiği yorumlarken şu temel noktalara odaklanılmalıdır:

En Büyük Dikdörtgenler: Grafikteki en büyük dikdörtgenler, dosya boyutunun en büyük bölümünü oluşturan kaynaklardır. Bu genellikle ana JavaScript paketi (main.js) veya büyük bir üçüncü taraf kütüphanesidir (Örn: React, Vue, jQuery).
- Çözüm Odaklı Yaklaşım: Eğer bir dikdörtgen kullanılmayan kod (Lighthouse uyarısı) içeriyorsa, bu kodun Code Splitting (Kod Parçalama) tekniğiyle bölünmesi veya tamamen kaldırılması gerektiğini gösterir.
Renk Kodlaması: Çoğu Ağaç Grafiği aracı, dosyaları türlerine (JavaScript, CSS, Font) veya yüklenme biçimlerine göre renklendirir. Farklı renklerin hangi kaynaklara ait olduğunu belirleyerek optimizasyon hedefinizi netleştirirsiniz.
Üçüncü Taraf Bağımlılıkları: Büyük, harici kütüphaneler (örneğin bir tarih kütüphanesi veya bir animasyon framework’ü) genellikle tek bir büyük kutu olarak belirir. Eğer bu kütüphanelerin yalnızca küçük bir bölümünü kullanıyorsanız (Tree Shaking), bu büyük kutu, kodunuzun verimsiz olduğunu işaret eder.
Kullanılmayan Alanlar: Bazen bir dosya çok büyük görünse de, analizin yanında yer alan ‘kullanılmayan baytlar’ yüzdesi yüksek olabilir. Bu görsel alan, “Kullanılmayan JavaScript’i ortadan kaldırın” uyarısının kaynağını somutlaştırır.

Ağaç grafiği, Lighthouse raporunun neden bu uyarıları verdiğini görselleştiren bir kök neden analiz aracıdır ve en zorlu performans sorunlarına nokta atışı çözümler bulmanızı sağlar.

Lighthouse Skorunuz Düşük Çıktıysa Hangi Hatalara Odaklanmalı?

Lighthouse raporunda onlarca potansiyel hata listelendiğinde, geliştiriciler genellikle hepsini düzeltme baskısı hisseder. Oysa, 90+ gibi yüksek bir skora ulaşmak ve bu skoru korumak, tüm hataları düzeltmekten ziyade, en kritik olanları doğru sırayla ele almaktan geçer.

Unutmayın: Google, kusursuz bir 100/100 skorunu değil, iyi bir kullanıcı deneyimini (Core Web Vitals hedefleri) ödüllendirir.

Öncelik 1: Mutlaka Düzeltilmesi Gereken Kritik Hatalar (Core Web Vitals’ı Vuranlar)

Bu hatalar, skorunuzu en çok düşüren ve kullanıcı deneyimini en çok zedeleyen sorunlardır. Bunları düzeltmek, 90+ skoruna ulaşmanın ilk ve en önemli adımıdır.

Lighthouse Hata Kategorisi	Neden Kritik?	Etkilediği Metrikler
Görsel Boyutlandırma ve Formatı	LCP’yi ve genel sayfa ağırlığını doğrudan etkileyen en büyük faktördür. Optimizasyonsuz görseller, sitenizin en ağır yüküdür.	LCP (Largest Contentful Paint), Sayfa Ağırlığı
Oluşturma Engelleme Kaynakları	Tarayıcının ana içeriği göstermesini engelleyen CSS ve JS’lerdir. Bunlar çözülmeden hiçbir performans kazancı elde edilemez.	LCP ve Performans Skoru
Uzun Ana İş Parçacığı Görevleri	JavaScript’in tarayıcıyı kilitlemesi nedeniyle kullanıcı etkileşimini (tıklama, kaydırma) anında bozar. Kötü bir FID/INP, kullanıcıyı hızlıca siteden uzaklaştırır.	FID / INP (Interaction to Next Paint)
Sunucu Yanıt Süresi (TTFB)	Tüm yüklemenin başlangıç noktasıdır. TTFB yavaşsa, LCP otomatik olarak gecikir. Bu, genellikle barındırma veya sunucu tarafı önbellekleme sorunudur.	LCP ve Genel Hız
Layout Shift’e Neden Olan Öğeler	Anlık görsel kaymalar (CLS) kullanıcıyı rahatsız eder, yanlış tıklamalara neden olur ve sitenizin güvenilirlik algısını zedeler.	CLS (Cumulative Layout Shift)

90+ Skoru İçin Gerekli, İkincil İyileştirmeler

Kritik sorunları çözdükten sonra, bu adımlar skorunuzu 90 ve üzerine taşımak için gereken ince ayar ve temizlik işleridir:

Kullanılmayan CSS/JavaScript’i Kaldırma: Bu, temiz koda giden yoldur. Tek başına çok büyük bir etki yaratmasa da, toplam dosya boyutunu azaltarak genel performansa önemli katkı sağlar.
Küçültme (Minify) İşlemleri: CSS/JS dosyalarındaki boşlukları ve yorumları temizler. Zorunlu bir adım olmasa da, 95+ gibi skorları hedefleyenler için gereklidir.
Önbellekleme Politikaları: Tekrar eden ziyaretçiler için sitenizi süper hızlı hale getirir. Yeni ziyaretçiler için LCP’yi etkilemese de, genel kullanıcı deneyimi (Experience) açısından kritiktir.
Erişilebilirlik ve En İyi Uygulamalar Hataları: Bu kategoriler, doğrudan performans skorunu etkilemez, ancak SEO sağlığı, güvenilirlik ve kapsayıcılık (EEAT) için zorunludur. Düzeltilmeleri, sitenizin arama motorları nezdindeki otoritesini artırır.

Hangi Hatalar Şimdilik Göz Ardı Edilebilir (100 Takıntısı Olmayanlar İçin)?

Ticari hedefleri olan web siteleri için, bazı küçük veya karmaşık hatalar, sağladığı faydaya kıyasla aşırı zaman ve maliyet gerektirebilir.

Pasif İşleyiciler (Passive Listeners): Kaydırma akışkanlığı için ideal olsa da, genellikle JavaScript çerçeveleri (frameworks) tarafından kontrol edilen ve düzeltilmesi zaman alabilen karmaşık kod yapılarıdır. 90+ skoru için engelleyici değildir.
Terk Edilmiş API’ler veya Tarayıcı Hataları: Eğer bu hatalar sitenin temel işlevselliğini bozmadığı sürece, arka plandaki küçük konsol hataları veya eski API uyarıları, Core Web Vitals skorunuzu doğrudan etkilemeyecektir. Bunları, büyük bir yeniden yapılandırma (refactoring) projesine bırakmak daha stratejik olabilir.

Sonuç: Amacınız, en çok etkiyi en az çabayla sağlamak olmalıdır. Her zaman Öncelik 1 hatalarını düzeltmekle başlayın; bu, skorunuzu hızla yeşil bölgeye (90+) taşıyacaktır.

Bonus: WordPress’te Lighthouse Skorlarını Artırmak İçin En İyi Eklentiler

WordPress kullanıcıları için kodlamaya derinlemesine dalmadan, kritik Lighthouse hatalarını hızla çözebilecek güçlü ve popüler eklentiler mevcuttur. Bu eklentiler, özellikle Önbellekleme, CSS/JS Küçültme ve Görsel Optimizasyonu (Lighthouse Fırsatlarının ana kaynakları) konusunda uzmanlaşmıştır.

Lighthouse Sorunu	Önerilen Eklenti(ler)	Eklentinin Temel Katkısı (Nasıl Çözülür?)
Kritik Hız ve Önbellekleme	WP Rocket (Ücretli) veya LiteSpeed Cache (Ücretsiz)	Oluşturma Engelleme Kaynaklarını Ortadan Kaldırma ve Sunucu Yanıt Süresini Azaltma (TTFB) konusunda en etkili çözümdür. Sayfa ve tarayıcı önbelleklemesi, CSS/JS küçültme ve erteleme işlevlerini tek bir arayüzde toplar.
Görsel Optimizasyonu	Imagify (WP Rocket ile birlikte kullanılır) veya Smush	Gelecek Nesil Formatlar (WebP dönüşümü) ve Görselleri Uygun Boyutlandırma sorunlarını çözer. Görselleri sıkıştırır ve tembel yüklemeyi (Lazy Load) etkinleştirir.
CSS/JS Erteleme ve Küçültme	Asset CleanUp: Page Speed Booster	Kullanılmayan CSS/JS’i Kaldırma konusunda nokta atışı çözümler sunar. Belirli sayfalarda ihtiyacınız olmayan eklenti dosyalarını ve stillerini devre dışı bırakmanıza olanak tanır.
Core Web Vitals Ayarları	Perfmatters (Ücretli)	Komut dosyalarını seçmeli olarak yükleme, veritabanını temizleme ve WooCommerce gibi ağır eklentilerin yalnızca gerektiği yerlerde yüklenmesini sağlama gibi mikro optimizasyonlar yaparak Uzun Ana İş Parçacığı Görevlerini hafifletir.
Aşırı DOM Boyutu ve Temizleme	WP Optimize	Veritabanınızdaki gereksiz taslakları, revizyonları ve spam yorumları temizleyerek sitenizin arka plan performansını ve dolaylı olarak yüklenme hızını artırır.

Uzman Tavsiyesi: Bu eklentileri kullanırken dikkatli olun. Birden fazla eklentinin aynı işlevi (örneğin CSS küçültmeyi) yerine getirmesi çakışmalara neden olabilir. Genellikle, tüm optimizasyon işlevlerini tek bir güçlü eklentiye (örn. WP Rocket) bırakmak, en temiz ve tutarlı sonucu almanızı sağlar. Her eklenti ayarını değiştirdikten sonra Lighthouse’u yeniden çalıştırmayı asla ihmal etmeyin!