Lighthouse Denetimleri ve Puanlama
Lighthouse'u DevTools veya CI içinde çalıştırın, performans puanını ve tanılamaları okuyun ve en yüksek kazanımı sağlayacak fırsatlara öncelik verin.
Lighthouse Denetimleri ve Puanlama, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Lighthouse Nedir?
Lighthouse, sayfa yüklemesini benzeten ve sayfayı Performans, Erişilebilirlik, En İyi Uygulamalar, arama motoru optimizasyonu ve PWA kategorilerinde puanlayan, Google'ın açık kaynaklı denetim aracıdır. Chrome DevTools'a yerleşiktir ve CLI veya sürekli tümleştirme ortamından çalıştırılabilir.
DevTools'ta Lighthouse Çalıştırma
DevTools'u açın, Lighthouse sekmesine tıklayın, kategorileri ve cihazı (mobil/masaüstü) seçin, ardından 'Sayfa yüklemesini analiz et' düğmesine tıklayın. Benzetimli sınama yaklaşık 30 saniye sürer.
Performans Puanının Dağılımı
Performans puanı (0–100), şu değerlerin ağırlıklı ortalamasıdır: LCP (%25), Toplam Engelleme Süresi (%30), CLS (%25), FCP (%10), Hız Endeksi (%10). Ölçüt oldukça yüksektir; 90 ve üzeri puan 'İyi' sayılır.
İlk İçerikli Boyama (FCP)
FCP, ilk içerik parçasının (metin veya görsel) ekrana çizildiği anı gösterir. LCP'den farklıdır: FCP herhangi bir içerikle ilgilenirken LCP en büyük öğeyle ilgilenir. İyi: 1,8 saniyenin altında.
Toplam Engelleme Süresi (TBT)
TBT, ana iş parçacığının 50 ms'den uzun JavaScript görevleri tarafından ne kadar süre engellendiğini ölçer. TBT'nin yüksek olması, sayfa hazır görünüyor olsa bile yanıt vermiyormuş gibi hissettirmesine neden olur.
Fırsatlar Bölümünü Okuma
Lighthouse, tahmini kazanımlarla birlikte 'Fırsatlar' listesini gösterir (örneğin 'Çizimi engelleyen kaynakları ortadan kaldırın: 1,2 saniye'). En büyük etkiyi elde etmek için kazanımlara göre sıralayın ve en büyük öğeleri önce düzeltin.
Yaygın Fırsatlar
Sık kullanılan düzeltmeler şunlardır: kritik olmayan betikleri ertelemek/asenkron yüklemek, kritik CSS'yi satır içine yerleştirmek, temel istekleri önceden yüklemek, CDN kullanmak, metin sıkıştırmasını etkinleştirmek (Brotli/gzip) ve modern görsel biçimleri sunmak.
Lighthouse CLI
Betikli denetimler gerçekleştirmek için Lighthouse'u komut satırından çalıştırın.
npm install -g lighthouse
lighthouse https://example.com \
--output html \
--output-path ./report.html \
--chrome-flags="--headless"GitHub Actions'ta Lighthouse CI
Her çekme isteğinde denetimleri çalıştırın ve puanlar eşiklerin altına düşerse derlemeyi başarısız kılın.
# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [pull_request]
jobs:
audit:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- run: npm ci && npm run build
- uses: treosh/lighthouse-ci-action@v11
with:
configPath: ./lighthouserc.jsonLighthouse Yapılandırması: Puan Doğrulamaları
Puanları geriye götüren çekme isteklerini başarısız kılmak için lighthouserc.json içinde doğrulamalar tanımlayın.
{
"ci": {
"assert": {
"assertions": {
"categories:performance": ["error", { "minScore": 0.9 }],
"categories:accessibility": ["error", { "minScore": 0.95 }],
"largest-contentful-paint": ["error", { "maxNumericValue": 2500 }]
}
}
}
}Ağ ve Cihaz Benzetimi
Lighthouse, varsayılan olarak yavaş bir 4G ağını ve orta sınıf bir mobil CPU'yu benzetir. Bu kasıtlıdır; üretimdeki gerçek cihazları kullanan kişiler, geliştirme makinenizden daha yavaştır.
Puan Değişkenliği — Neden Dalgalanır?
Lighthouse puanları, JavaScript zamanlamasının değişken olması nedeniyle çalıştırmalar arasında dalgalanır. Denetimleri 3-5 kez çalıştırıp ortancayı alın. Ortancayı otomatik olarak hesaplamak için Lighthouse CI'nin numberOfRuns seçeneğini kullanın.
Hızlı Kontrol
Hangi Lighthouse ölçümü, ana iş parçacığının uzun JavaScript görevleri tarafından ne kadar süre engellendiğini ölçer?
Özet: Lighthouse
Lighthouse; Performans, Erişilebilirlik, En İyi Uygulamalar, arama motoru optimizasyonu ve PWA'yı denetler. Performans puanı, LCP, TBT, CLS, FCP ve Hız Endeksi'nin ağırlıklı ortalamasıdır. Fırsatlar bölümü, düzeltmeleri tahmini kazanıma göre sıralar. DevTools, CLI veya treosh/lighthouse-ci-action ile sürekli tümleştirme ortamında çalıştırın. Puan değişkenliğinde birden fazla çalıştırmanın ortancasını alın.
Sıkça Sorulan Sorular
“Lighthouse Denetimleri ve Puanlama” dersi ücretsiz mi?
Evet — “Lighthouse Denetimleri ve Puanlama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Lighthouse Denetimleri ve Puanlama” dersinde ne öğreneceğim?
Lighthouse'u DevTools veya CI içinde çalıştırın, performans puanını ve tanılamaları okuyun ve en yüksek kazanımı sağlayacak fırsatlara öncelik verin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Lighthouse Denetimleri ve Puanlama” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Temel Web Verileri: LCP FID CLS
- Lighthouse Denetimleri ve Puanlama
- Görsel Optimizasyonu: tembel yükleme biçimleri WebP
- Kod Bölme ve Tembel Rotalar