Frontend Academy · Ders

Otomatik Lighthouse Denetimleri

Lighthouse CI GitHub Action eklemeyi, performans ve erişilebilirlik puanı eşiklerini belirlemeyi ve Core Web Vitals değerlerini gerileten birleştirmeleri engellemeyi öğrenin.

Otomatik Lighthouse Denetimleri, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. 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'u Neden Otomatikleştirmelisiniz?

Elle çalıştırılan Lighthouse, performans gerilemelerini geç yakalar — genellikle gerçek bir kullanıcı şikâyet ettikten sonra. Otomatik Lighthouse CI her PR'da çalışır, temel ölçümlerde gerilemeye neden olan derlemeleri başarısız kılar ve puanları zaman içinde izler. Performansı bir sınama paketi gibi ele alın.

Lighthouse CI

Google tarafından geliştirilen açık kaynaklı Lighthouse CI (lhci) araç seti: Lighthouse'u birden çok kez çalıştırır, ortancayı alır, eşiklere göre doğrulama yapar ve sonuçları yükler.

npm install -D @lhci/cli

# Run locally:
npx lhci autorun

lighthouserc.json — Yapılandırma

Sınanacak URL'leri, çalıştırma sayısını ve doğrulamaları yapılandırın.

// lighthouserc.json
{
  "ci": {
    "collect": {
      "url": [
        "http://localhost:3000",
        "http://localhost:3000/blog",
        "http://localhost:3000/pricing"
      ],
      "numberOfRuns": 5,
      "startServerCommand": "npm run start"
    },
    "assert": {
      "assertions": {
        "categories:performance":   ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "categories:seo":            ["warn", { "minScore": 0.9 }],
        "largest-contentful-paint":  ["error", { "maxNumericValue": 2500 }],
        "total-blocking-time":       ["error", { "maxNumericValue": 200 }],
        "cumulative-layout-shift":   ["error", { "maxNumericValue": 0.1 }]
      }
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}

GitHub Actions Tümleştirmesi

Resmî treosh/lighthouse-ci-action, her PR'da lhci'yi çalıştırır ve bir durum denetimi yayınlar.

# .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
        with: { node-version: '20', cache: 'npm' }
      - run: npm ci && npm run build
      - uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: ./lighthouserc.json
          uploadArtifacts: true
          temporaryPublicStorage: true

Birden Çok Çalıştırmanın Ortancası

Lighthouse puanları zamanlama gürültüsü nedeniyle çalıştırmalar arasında değişir. numberOfRuns: 5, buna karşı doğrulama yapmaya yetecek kadar kararlı olan ortancayı alır. 3'ten az çalıştırma kararsız sonuçlar verir.

Performans Bütçeleri

Puanların yanı sıra kaynak boyutu ve sayısı için kesin bütçeler belirleyin. Bütçeler aşılırsa derleme başarısız olur.

// budget.json
[
  {
    "resourceSizes": [
      { "resourceType": "script", "budget": 300 },
      { "resourceType": "image", "budget": 100 }
    ],
    "resourceCounts": [
      { "resourceType": "third-party", "budget": 10 }
    ]
  }
]

// lighthouserc.json:
"collect": {
  "settings": { "budgetsPath": "./budget.json" }
}

Lighthouse CI Sunucusu

Geçmiş verileri saklamak, eğilim grafiklerini görmek ve dalları zaman içinde karşılaştırmak için LHCI sunucusunu kendiniz barındırın. Alternatif olarak, tek seferlik PR sonuçları için geçici herkese açık depolamayı kullanın.

Kimlik Doğrulamalı Sayfaları Sınama

Lighthouse çalışmadan önce oturum açmak için Puppeteer betikleri kullanın.

// lighthouserc.json
"collect": {
  "puppeteerScript": "./lighthouse-login.js",
  "url": ["http://localhost:3000/dashboard"]
}

// lighthouse-login.js
module.exports = async (browser, context) => {
  const page = await browser.newPage();
  await page.goto('http://localhost:3000/login');
  await page.fill('#email', 'test@example.com');
  await page.fill('#password', 'test123');
  await page.click('button[type=submit]');
  await page.waitForNavigation();
};

Slack/Discord Bildirimleri

LHCI sonuçlarını ekip sohbetinize aktarın — performans gerilemeleri, sınama başarısızlıklarıyla aynı ilgiyi hak eder.

Mobil ve Masaüstü

Lighthouse varsayılan olarak mobil ayarları kullanır (yavaş 4G + orta seviye CPU). Masaüstü için preset: 'desktop' ayarını yapın. Üretimdeki çoğu uygulama her ikisini de denetlemelidir — CI'da ayrı işler kullanın.

Eşikleri Ayarlama

Mevcut puanları temel değer olarak kullanarak başlayın. İlk gün PR'ları başarısız kılmayın — önce günlüğe kaydedip uyarın. Ekibiniz iş akışına alıştıktan sonra eşikleri kademeli olarak yükseltin.

Lighthouse'un Ötesinde

Lighthouse laboratuvar verisidir. Gerçek kullanıcı izlemeyle (RUM) birlikte kullanın: web-vitals npm paketi ve analizleriniz ya da SpeedCurve ve Calibre gibi hizmetler, gerçek kullanıcı performans eğilimlerini gösterir.

Hızlı Kontrol

Lighthouse CI, tek bir çalıştırma yerine neden genellikle birden çok çalıştırmanın (örneğin 5 çalıştırmanın) ortancasını alır?

Özet: Otomatik Lighthouse

lhci autorun, CI ile tümleşir. lighthouserc.json dosyasında URL'leri, çalıştırmaları (5+), kategoriler ve ölçümler üzerindeki doğrulamaları ve performans bütçelerini yapılandırın. GitHub için treosh/lighthouse-ci-action kullanın. Eğilimleri izlemek için LHCI sunucusunu kendiniz barındırın. Kimlik doğrulamalı sayfalar için Puppeteer betikleri kullanın. Mobil ve masaüstünü denetleyin. Uyarılarla başlayın; eşikleri zaman içinde sıkılaştırın. Kapsamlı bir görünüm için RUM ile birlikte kullanın.

Sıkça Sorulan Sorular

“Otomatik Lighthouse Denetimleri” dersi ücretsiz mi?

Evet — “Otomatik Lighthouse Denetimleri” 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.

“Otomatik Lighthouse Denetimleri” dersinde ne öğreneceğim?

Lighthouse CI GitHub Action eklemeyi, performans ve erişilebilirlik puanı eşiklerini belirlemeyi ve Core Web Vitals değerlerini gerileten birleştirmeleri engellemeyi öğrenin. 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 4. dersidir.

“Otomatik Lighthouse Denetimleri” 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

Ön Uç için GitHub Actions: Lint, Test ve Derleme
Vercel, Netlify ve Cloudflare Pages'e Dağıtım
CI'da Ortam Değişkenleri
Otomatik Lighthouse Denetimleri

← Frontend Academy Sayfasına Dön