Lighthouse ile Performans Analizi ve İyileştirme

Lighthouse ile Performans Analizi ve İyileştirme

Lighthouse, Google tarafından geliştirilen açık kaynaklı bir web sayfası denetleme aracıdır. Performans, erişilebilirlik, SEO, best practices ve Progressive Web App (PWA) kategorilerinde kapsamlı analiz sunar. Chrome DevTools'a entegre olmasının yanı sıra CLI, Node.js modülü ve CI/CD entegrasyonu olarak da kullanılabilir. Bu rehberde Lighthouse'u etkili bir şekilde kullanmayı ve sonuçları yorumlayarak performans iyileştirmeleri yapmayı öğreneceksiniz.

Lighthouse Nasıl Çalışır?

Lighthouse, sayfanızı kontrollü bir ortamda yükleyerek çeşitli metrikleri toplar. Throttled bir ağ bağlantısı ve CPU simülasyonu kullanarak tutarlı ve tekrarlanabilir sonuçlar üretir. Analiz süreci şu adımlardan oluşur:

• Sayfa yükleme: Belirlenen URL throttled koşullarda yüklenir
• Metrik toplama: FCP, LCP, TBT, CLS gibi metrikler kaydedilir
• Denetim çalıştırma: 150+ audit kuralı uygulanır
• Skor hesaplama: Ağırlıklı puanlama ile 0-100 arası skor üretilir

Chrome DevTools ile Lighthouse Kullanımı

En kolay yol Chrome DevTools üzerinden analiz yapmaktır:

1. Chrome'da analiz edilecek sayfayı açın
2. F12 veya Ctrl+Shift+I ile DevTools'u açın
3. "Lighthouse" sekmesine geçin
4. Analiz kategorilerini seçin (Performance, Accessibility, vb.)
5. "Analyze page load" butonuna tıklayın

Ancak daha tutarlı sonuçlar için CLI kullanımı önerilir:

# Lighthouse CLI kurulumu
npm install -g lighthouse

# Temel performans analizi
lighthouse https://example.com --output html --output-path ./report.html

# Sadece performans kategorisi, mobil
lighthouse https://example.com \
  --only-categories=performance \
  --form-factor=mobile \
  --throttling-method=devtools \
  --output json \
  --output-path ./perf-report.json

# Desktop analizi
lighthouse https://example.com \
  --only-categories=performance \
  --preset=desktop \
  --output html \
  --output-path ./desktop-report.html

# Birden fazla çalıştırma ile medyan alma (daha güvenilir)
lighthouse https://example.com \
  --only-categories=performance \
  -n 5 \
  --output json \
  --output-path ./median-report.json

Lighthouse Raporunu Yorumlama

Lighthouse raporu üç ana bölümden oluşur: metrikler, fırsatlar (opportunities) ve tanılar (diagnostics). Fırsatlar bölümü, potansiyel kazanımları tahmini süre tasarrufu ile birlikte gösterir.

En sık karşılaşılan fırsatlar ve çözümleri:

Lighthouse CI ile Otomatik Performans Testi

Lighthouse CI, her pull request'te otomatik performans testi çalıştırmanızı sağlar. Bu sayede performans regresyonlarını erken yakalarsınız:

// lighthouserc.js - Lighthouse CI konfigürasyonu
module.exports = {
  ci: {
    collect: {
      url: [
        'http://localhost:3000/',
        'http://localhost:3000/about',
        'http://localhost:3000/blog'
      ],
      numberOfRuns: 3,
      startServerCommand: 'npm run start',
      startServerReadyPattern: 'ready on'
    },
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'categories:accessibility': ['warn', { minScore: 0.9 }],
        'categories:seo': ['warn', { minScore: 0.9 }],
        'first-contentful-paint': ['error', { maxNumericValue: 1800 }],
        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
        'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
        'total-blocking-time': ['error', { maxNumericValue: 300 }]
      }
    },
    upload: {
      target: 'temporary-public-storage'
    }
  }
};

GitHub Actions ile entegrasyon:

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [pull_request]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/cli
          lhci autorun
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

Node.js API ile Programatik Kullanım

Lighthouse'u kendi araçlarınıza entegre etmek için Node.js API'sini kullanabilirsiniz:

// lighthouse-runner.js
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

async function runLighthouse(url) {
  const chrome = await chromeLauncher.launch({
    chromeFlags: ['--headless', '--no-sandbox']
  });

  const options = {
    logLevel: 'info',
    output: 'json',
    port: chrome.port,
    onlyCategories: ['performance'],
    formFactor: 'mobile',
    throttling: {
      rttMs: 150,
      throughputKbps: 1638.4,
      cpuSlowdownMultiplier: 4
    }
  };

  const result = await lighthouse(url, options);
  const report = JSON.parse(result.report);

  console.log('Performance Score:', report.categories.performance.score * 100);
  console.log('LCP:', report.audits['largest-contentful-paint'].numericValue, 'ms');
  console.log('TBT:', report.audits['total-blocking-time'].numericValue, 'ms');
  console.log('CLS:', report.audits['cumulative-layout-shift'].numericValue);

  await chrome.kill();
  return report;
}

// Birden fazla URL için toplu analiz
async function batchAnalysis(urls) {
  const results = [];
  for (const url of urls) {
    const report = await runLighthouse(url);
    results.push({ url, score: report.categories.performance.score * 100 });
  }
  return results;
}

batchAnalysis([
  'https://example.com/',
  'https://example.com/products',
  'https://example.com/contact'
]).then(results => console.table(results));

Performans Skorunu İyileştirme Adımları

Lighthouse raporuna göre sistematik iyileştirme yapmak için şu sırayı takip edin:

1. En yüksek etkili fırsatları belirleyin: Rapordaki "Opportunities" bölümünde tahmini süre tasarrufuna göre sıralayın.
2. Render-blocking kaynakları ele alın: Critical CSS inline edin, JS'leri defer/async ile yükleyin.
3. Görsel optimizasyonu yapın: WebP/AVIF formatları, responsive images, lazy loading.
4. JavaScript optimizasyonu: Code splitting, tree shaking, kullanılmayan kodu temizleyin.
5. Caching stratejisi uygulayın: Agresif cache headerları, Service Worker.
6. Her değişiklikten sonra tekrar ölçün: İyileştirmenin etkisini doğrulayın.

Lighthouse vs PageSpeed Insights vs WebPageTest

Her araç farklı güçlü yönlere sahiptir. PageSpeed Insights hem lab (Lighthouse) hem de field (CrUX) verilerini birleştirir. WebPageTest daha detaylı waterfall analizi sunar ve farklı lokasyonlardan test yapabilir. Lighthouse CI ise geliştirme sürecine entegrasyon için idealdir. En etkili strateji, bu araçları birlikte kullanmaktır.

Sonuç

Lighthouse, web performansı analizi ve iyileştirmesi için vazgeçilmez bir araçtır. DevTools'tan hızlı analizler yapabilir, CLI ile detaylı raporlar alabilir ve CI/CD pipeline'ına entegre ederek sürekli izleme sağlayabilirsiniz. Önemli olan sadece skoru yükseltmek değil, gerçek kullanıcı deneyimini iyileştirmektir. Lighthouse skorlarını field verilerle (CrUX, RUM) karşılaştırarak doğrulamayı unutmayın.

Kaynaklar

• Chrome Developers - Lighthouse
• Lighthouse CI GitHub
• PageSpeed Insights
• WebPageTest