Lighthouse resmi sayfası
Lighthouse resmi belgeleri
Giriş: Google Lighthouse ve Web Kalitesi
Google Lighthouse, web geliştiricilere ve site sahiplerine web sayfalarının performansını, erişilebilirliğini, en iyi uygulamalarını ve arama motoru optimizasyonunu (SEO) otomatik olarak denetleyen güçlü bir araç sunar. Chrome Geliştirici Araçları'na entegre edilmiş olan Lighthouse, bir web sayfasını kapsamlı bir şekilde analiz ederek, iyileştirme alanlarını belirlemek ve daha kullanıcı odaklı, erişilebilir ve etkili web siteleri oluşturmak için değerli bilgiler sunar. Bu konuda, Lighthouse'un nasıl kullanılacağını ve tarayıcı konsolunda sunulan temel çıktıların akademik bir bakış açısıyla nasıl yorumlanacağını detaylı olarak inceleyeceğiz.
Lighthouse'u Kullanmaya Başlamak
Lighthouse'u kullanmak oldukça basittir ve doğrudan Google Chrome tarayıcısı üzerinden gerçekleştirilir:
- Geliştirici Araçlarını Açma: İncelemek istediğiniz web sayfasını Chrome'da açın. Ardından, sayfada herhangi bir yere sağ tıklayın ve açılan menüden "İncele" seçeneğini seçin. Alternatif olarak, Windows'ta
Ctrl + Shift + Iveya macOS'taCmd + Option + Iklavye kısayolunu kullanabilirsiniz. Bu işlem, Chrome Geliştirici Araçları panelini açacaktır.
- Lighthouse Sekmesine Gitme: Geliştirici Araçları panelinin üst kısmında yer alan sekmeler arasında "Lighthouse" (eski adıyla "Audits") sekmesini bulun ve tıklayın. Eğer bu sekmeyi göremiyorsanız, sağ taraftaki "»" simgesine tıklayarak gizli sekmeleri görüntüleyebilirsiniz.
- Denetim Yapılandırması: Lighthouse sekmesine tıkladığınızda, bir denetim yapılandırma paneliyle karşılaşacaksınız. Bu panelde aşağıdaki seçenekleri belirleyebilirsiniz:
- Kategoriler: Hangi kategorilerde denetim yapmak istediğinizi seçebilirsiniz. Bunlar genellikle "Performans", "Erişilebilirlik", "En İyi Uygulamalar", "SEO" ve isteğe bağlı olarak "Aşamalı Web Uygulaması (PWA)" şeklindedir. İhtiyaçlarınıza göre bir veya birden fazla kategori seçebilirsiniz. Örneğin, sadece performans sorunlarını analiz etmek istiyorsanız, sadece "Performans" kutucuğunu işaretleyebilirsiniz.
- Cihaz: Denetimi hangi cihaz emülasyonuyla yapmak istediğinizi seçebilirsiniz: "Masaüstü" veya "Mobil". Mobil emülasyon, sayfanın mobil cihazlardaki performansını ve kullanıcı deneyimini değerlendirmek için önemlidir.
- Seçenekler: Gelişmiş seçenekler altında, örneğin "Yavaş 4G'yi simüle et" gibi ağ koşullarını simüle edebilirsiniz. Bu, gerçek dünya koşullarında sayfanızın nasıl performans göstereceğini anlamanıza yardımcı olabilir.
- Raporu Oluşturma: Yapılandırmayı tamamladıktan sonra, "Rapor Oluştur" (veya "Run audit") düğmesine tıklayın. Lighthouse, belirtilen yapılandırmaya göre web sayfasını analiz etmeye başlayacaktır. Bu süreç, sayfanın karmaşıklığına ve seçilen denetimlere bağlı olarak birkaç saniye veya dakika sürebilir.
- Raporu İnceleme: Denetim tamamlandığında, Lighthouse sonuçları detaylı bir rapor halinde sunacaktır. Bu rapor genellikle tarayıcı konsolunun ana bölümünde görüntülenir. Raporun en üst kısmında, her bir kategori için genel bir performans puanı (0-100 arasında) yer alır. Bu puan, ilgili kategorideki tüm denetimlerin ağırlıklı ortalaması alınarak hesaplanır.
Lighthouse raporu, beş ana kategori altında toplanan bir dizi metrik ve denetimden oluşur. Her bir kategorinin ne anlama geldiğini ve bu bilgilerin web sitenizi iyileştirmek için nasıl kullanılabileceğini inceleyelim:
- Performans (Performance): Bu kategori, sayfanın yüklenme hızı ve kullanıcı etkileşimi için optimizasyonunu nicel metrikler aracılığıyla değerlendirir. Bu metrikler, kullanıcı deneyimini doğrudan etkileyen kritik faktörlerdir.
- Metrikler:
- İlk İçerikli Boyama (FCP): Sayfanın ilk anlamlı içeriğinin (metin, resim, tuval vb.) ekranda göründüğü zamanı ölçer. Düşük bir FCP (ideal olarak 1.8 saniye veya altında), kullanıcının sayfanın yüklendiğine dair erken bir görsel geri bildirim almasını sağlar. Bu metrik, özellikle "Görünür İçeriğin Önceliğini Verme" ve "Bloke Eden Kaynakları Kaldırma" gibi denetimlerle ilişkilidir.
- Büyük İçerikli Boyama (LCP): Görüntü alanındaki en büyük içerik öğesinin (genellikle bir resim veya metin bloğu) oluşturulduğu zamanı ölçer. LCP (ideal olarak 2.5 saniye veya altında), sayfanın ana içeriğinin ne kadar hızlı yüklendiğini gösterir ve kullanıcıların sayfanın faydalı olduğuna dair algısını etkiler. "Büyük Öğeleri Optimize Etme" ve "Sunucu Yanıt Süresini İyileştirme" gibi denetimler LCP'yi iyileştirmeye odaklanır.
- İlk Etkileşim Gecikmesi (FID): Kullanıcının sayfayla ilk etkileşimde bulunduğu (örneğin, bir bağlantıya tıklama, bir düğmeye basma) andan tarayıcının bu etkileşime yanıt vermeye başlayabildiği ana kadar geçen süreyi ölçer. Düşük bir FID (ideal olarak 100 milisaniye veya altında), sayfanın etkileşim için hızlı bir şekilde hazır olduğunu gösterir. "JavaScript Yürütme Süresini Azaltma" ve "Ana İş Parçacığını Engellemeyi En Aza İndirme" bu metriği iyileştirmeye yardımcı olur.
- Kümülatif Düzen Kayması (CLS): Sayfa yüklenirken beklenmedik düzen kaymalarının görsel kararlılığını ölçer. Düşük bir CLS (ideal olarak 0.1 veya altında), daha kararlı ve öngörülebilir bir görsel deneyim sunar. "Boyutsuz Resimleri Önleme" ve "Dinamik Olarak Eklenen İçeriğe Dikkat Etme" CLS'yi azaltmaya yardımcı olur.
- Etkileşim İçin Süre (TTI): Sayfanın görsel olarak oluşturulduğu ve ana iş parçacığının çoğu kullanıcı girdisini güvenilir bir şekilde işleyebildiği zamanı ölçer. TTI (ideal olarak 5 saniye veya altında), sayfanın tam olarak etkileşimli hale gelme süresini gösterir.
- Toplam Engelleme Süresi (TBT): FCP ile Etkileşim İçin Süre arasındaki, ana iş parçacığının uzun görevler tarafından engellendiği toplam süreyi ölçer. Yüksek bir TBT, FID'yi olumsuz etkileyebilir.
- Kullanımı: Performans raporundaki her bir metrik için bir puan ve iyileştirme önerileri sunulur. Örneğin, LCP değeriniz yüksekse, Lighthouse "Büyük Öğeleri Optimize Etme" başlığı altında resimleri sıkıştırma, yeni nesil formatları kullanma veya kritik olmayan CSS'yi erteleme gibi öneriler sunabilir. Bu önerileri dikkate alarak ve uygulayarak sayfanızın yüklenme hızını ve kullanıcı deneyimini önemli ölçüde iyileştirebilirsiniz.
- Metrikler:
- Erişilebilirlik (Accessibility): Bu kategori, web sayfasının engelli kullanıcılar için ne kadar erişilebilir olduğunu WCAG (Web Content Accessibility Guidelines) gibi standartlara göre inceler. Erişilebilirlik, tüm kullanıcıların web içeriğinize eşit şekilde erişebilmesini sağlamak için etik ve yasal bir zorunluluktur.
- Denetimler:
- ARIA Özellikleri: Uygun ARIA (Accessible Rich Internet Applications) özelliklerinin (örneğin,
aria-label,aria-describedby,rolegibi) semantik HTML elemanlarıyla birlikte kullanılması, ekran okuyucular gibi yardımcı teknolojilerin içeriğin amacını ve işlevini doğru bir şekilde yorumlamasına yardımcı olur. Lighthouse, eksik veya hatalı ARIA kullanımlarını tespit eder. - Resim Alt Metinleri (Alt Text):
<img>etiketlerinde açıklayıcı ve bağlamsal olarak uygunaltmetinlerinin bulunması, görme engelli kullanıcıların resmin içeriğini anlamasını sağlar. Lighthouse, eksik veya genel alt metinleri (örneğin, "resim") işaret eder. - Renk Kontrastı: Metin ve arka plan arasındaki yeterli renk kontrastının (WCAG AA veya AAA standartlarına göre) sağlanması, görme bozukluğu olan kullanıcıların içeriği okumasını kolaylaştırır. Lighthouse, yetersiz kontrast oranlarını tespit eder.
- Klavye Erişilebilirliği: Tüm etkileşimli öğelerin (bağlantılar, düğmeler, form elemanları) sadece klavye kullanılarak (sekme tuşu, ok tuşları, enter/space tuşları) gezilebilir ve kullanılabilir olması gereklidir. Lighthouse, klavye tuşlarıyla erişilemeyen öğeleri belirler.
- Semantik HTML: İçeriğin yapısını ve anlamını doğru bir şekilde yansıtan semantik HTML5 etiketlerinin (
<article>,<nav>,<aside>,<footer>,<main>vb.) kullanılması, yardımcı teknolojilerin içeriği daha iyi anlamasına yardımcı olur. Lighthouse, semantik olmayan yapısal etiketlerin aşırı kullanımını veya yanlış kullanımını tespit edebilir.
- ARIA Özellikleri: Uygun ARIA (Accessible Rich Internet Applications) özelliklerinin (örneğin,
- Kullanımı: Erişilebilirlik raporundaki denetimler, genellikle "Başarılı Denetimler" ve "İyileştirilmesi Gereken Denetimler" şeklinde listelenir. İyileştirilmesi gereken denetimler için, sorunun ne olduğu ve nasıl çözülebileceği hakkında detaylı açıklamalar ve bağlantılar sunulur. Bu önerileri uygulayarak web sitenizi daha kapsayıcı hale getirebilirsiniz.
- Denetimler:
- En İyi Uygulamalar (Best Practices): Bu kategori, modern web geliştirme standartlarına, güvenliğe ve kullanıcı deneyimine odaklanır. Bu denetimler, teknik borcu azaltmaya ve daha sürdürülebilir bir web sitesi oluşturmaya yardımcı olur.
- Denetimler:
- HTTPS Kullanımı: Web sitesinin güvenli bir bağlantı (HTTPS) üzerinden sunulması, kullanıcı verilerinin gizliliğini ve bütünlüğünü korumak için zorunludur. Lighthouse, HTTP üzerinden sunulan sayfaları işaret eder.
- Tarayıcı Hataları: Tarayıcı konsolunda oluşan JavaScript hatalarının olmaması, daha kararlı ve öngörülebilir bir kullanıcı deneyimi sağlar. Lighthouse, konsoldaki hataları raporlar.
- Eski API'lerin Kullanımı: Güncel ve standartlara uygun web API'lerinin kullanılması önerilir. Eski ve potansiyel güvenlik açıkları içeren API'lerin kullanımı işaretlenir.
- Güvenlik Açıkları: Bilinen güvenlik açıkları içeren kütüphanelerin veya uygulamaların kullanımı tespit edilebilir.
- Boyut Optimizasyonu: Büyük boyutlu CSS, JavaScript ve resim dosyalarının sıkıştırılması ve optimize edilmesi, sayfa yüklenme hızını artırır ve bant genişliği kullanımını azaltır. Lighthouse, sıkıştırılmamış veya aşırı büyük kaynakları belirler.
- Görünüm Alanı Meta Etiketi (Viewport Meta Tag): Mobil cihazlarda sayfanın doğru şekilde ölçeklenmesini sağlayan
<meta name="viewport">etiketinin doğru yapılandırılması önemlidir. Lighthouse, bu etiketin eksikliğini veya yanlış yapılandırılmasını tespit eder.
- Kullanımı: En iyi uygulamalar raporundaki öneriler, genellikle teknik iyileştirmeler ve güvenlik önlemleri hakkındadır. Bu önerileri uygulayarak web sitenizin güvenliğini, performansını ve uzun vadeli sürdürülebilirliğini artırabilirsiniz.
- Denetimler:
- SEO (Search Engine Optimization): Bu kategori, web sayfasının arama motorları tarafından daha iyi anlaşılması ve sıralanması için gerekli temel optimizasyonları değerlendirir. İyi bir SEO, web sitenizin organik arama trafiğini artırmaya yardımcı olur.
- Denetimler:
- Meta Açıklaması (Meta Description): Her sayfa için benzersiz ve açıklayıcı
<meta name="description">etiketlerinin bulunması, arama sonuçlarında daha çekici snippet'ler oluşturmaya ve tıklama oranını artırmaya yardımcı olur. Lighthouse, eksik veya çok kısa meta açıklamalarını işaret eder. - Başlık Etiketi (Title Tag): Sayfa içeriğini doğru bir şekilde yansıtan ve hedef anahtar kelimeleri içeren
<title>etiketlerinin bulunması önemlidir. Lighthouse, eksik veya anlamsız başlık etiketlerini tespit eder. - Dizine Ekleme (Indexability): Sayfanın arama motorları tarafından engellenmediğinden (örneğin,
noindexmeta etiketi veyarobots.txtdirektifleri ile) emin olunması gerekir. Lighthouse, dizine eklemeyi engelleyen durumları kontrol eder. - Mobil Uyumluluk (Mobile-Friendly): Web sayfasının farklı ekran boyutlarına (mobil, tablet vb.) uyum sağlaması, mobil kullanıcılar için iyi bir deneyim sunar ve Google sıralamalarında önemli bir faktördür. Lighthouse, mobil uyumluluk sorunlarını (örneğin, metnin çok küçük olması, tıklanabilir öğelerin birbirine çok yakın olması) tespit eder.
- URL Yapısı: Anlaşılır ve mantıklı URL yapılarının kullanılması, hem kullanıcılar hem de arama motorları için sayfanın içeriğini anlamayı kolaylaştırır. Lighthouse, bu konuda genel bir denetim sunmaz ancak en iyi uygulamalar kapsamında değerlendirilebilir.
- Canonical Bağlantılar (Canonical Links): Yinelenen içeriği önlemek için
<link rel="canonical">etiketlerinin doğru kullanımı önemlidir. Lighthouse, bu etiketlerin varlığını kontrol eder. - Hreflang Etiketleri: Çok dilli web siteleri için doğru
hreflangetiketlerinin kullanımı, arama motorlarının doğru dil ve bölge için doğru sayfayı göstermesine yardımcı olur. Lighthouse bu etiketleri kontrol eder.
- Meta Açıklaması (Meta Description): Her sayfa için benzersiz ve açıklayıcı
- Kullanımı: SEO raporundaki önerileri uygulayarak web sitenizin arama motorlarında daha iyi sıralanmasına ve daha fazla organik trafik çekmesine yardımcı olabilirsiniz.
- Denetimler:
- Aşamalı Web Uygulaması (Progressive Web App - PWA): Bu kategori, web sayfanızın modern web uygulaması yeteneklerini (çevrimdışı çalışma, anlık bildirimler, ana ekrana yükleme vb.) ne kadar iyi kullandığını değerlendirir. PWA'lar, web sitelerine yerel uygulama benzeri bir deneyim sunar.
- Denetimler:
- Hizmet Çalışanı (Service Worker): Çevrimdışı çalışma, arka plan senkronizasyonu ve anlık bildirimler gibi gelişmiş özellikler için bir hizmet çalışanının (service worker) kaydedilmiş ve doğru şekilde yapılandırılmış olması gerekir.
- Web Uygulaması Manifestosu (Web App Manifest): Uygulamanın adı, kısa adı, simgeleri, tema rengi ve başlangıç URL'si gibi meta verilerini içeren bir
manifest.jsondosyasının bulunması ve doğru şekilde yapılandırılması önemlidir. Bu dosya, uygulamanın ana ekrana nasıl ekleneceğini tanımlar. - Telefona Yükleme (Installability): Uygulamanın kullanıcılar tarafından ana ekrana yüklenebilir olması (manifest dosyası ve HTTPS gerektirir) PWA deneyimini iyileştirir. Lighthouse, yükleme kriterlerinin karşılanıp karşılanmadığını kontrol eder.
- HTTP Trafiğini HTTPS'ye Yönlendirme: Güvenli bir deneyim için tüm HTTP trafiğinin HTTPS'ye yönlendirilmesi önemlidir.
- Hızlı ve Güvenilir: Uygulamanın hızlı yüklenmesi ve kararlı bir şekilde çalışması PWA'nın temel gereksinimlerindendir.
- Kullanımı: PWA raporundaki önerileri uygulayarak web sitenizi bir PWA'ya dönüştürebilir ve kullanıcılara daha ilgi çekici ve yerel uygulama benzeri bir deneyim sunabilirsiniz.
- Denetimler:
- Puanlara Odaklanmayın, İyileştirmelere Odaklanın: Genel puanlar bir bakışta performans hakkında fikir verse de, asıl değerli olan her bir denetimin detayları ve sunulan iyileştirme önerileridir.
- Önceliklendirme: Tüm önerileri aynı anda uygulamak mümkün olmayabilir. İş önceliklerinize ve kullanıcı etkisi potansiyeline göre en önemli iyileştirmelere odaklanın. Örneğin, düşük performans kullanıcı kaybına neden oluyorsa, performans optimizasyonlarına öncelik verebilirsiniz.
- Tekrarlı Denetimler: İyileştirmeler yaptıktan sonra, Lighthouse'u tekrar çalıştırarak değişikliklerinizin etkisini ölçün ve yeni sorunların ortaya çıkıp çıkmadığını kontrol edin.
- Bağlamsal Değerlendirme: Lighthouse bir araçtır.
