Web Sitesi Performans Analizi: Hiz Testi ve Iyilestirme

Web Sitesi Performans Analizi: Lighthouse ve Core Web Vitals Rehberi

Web sitesi performansi, hem kullanici deneyimini hem de arama motoru siralamalarini dogrudan etkileyen kritik bir faktordur. Google, Core Web Vitals metriklerini resmi siralama sinyali olarak kullanmaktadir. Yavas yuklenen bir sayfa, ziyaretcilerin %53'unun siteyi terk etmesine neden olur. Bu rehberde, web sitesi performansini nasil analiz edecegimizi, Lighthouse aracini etkin kullanmayi, Core Web Vitals metriklerini optimize etmeyi ve performans izleme araclarini detayli olarak inceliyoruz.

Core Web Vitals Metrikleri

Core Web Vitals, Google'in kullanici deneyimini olcmek icin belirleidgi uc temel metriktir. Bu metrikler, sayfa yuklenme hizi, etkilesim duyarliligini ve gorsel kararliligi olcer.

Metrik Detaylari ve Esik Degerleri

Lighthouse ile Performans Analizi

Lighthouse, Google tarafindan gelistirilen acik kaynakli bir web sitesi analiz aracidir. Performans, erisilebilirlik, SEO, en iyi uygulamalar ve PWA kategorilerinde detayli raporlar sunar.

Lighthouse Calistirma Yontemleri

1. Chrome DevTools: F12 > Lighthouse sekmesi > "Analyze page load"
2. Komut satiri: npx lighthouse https://example.com --output html --output-path ./report.html
3. PageSpeed Insights: pagespeed.web.dev adresinden online analiz
4. Web Vitals eklentisi: Chrome Web Store'dan indirilebilir

Lighthouse Komut Satiri Ornekleri

# Temel analiz
npx lighthouse https://megis.com.tr --output html

# Sadece performans kategorisi
npx lighthouse https://megis.com.tr --only-categories=performance

# Mobil ve desktop karsilastirma
npx lighthouse https://megis.com.tr --preset=desktop --output json
npx lighthouse https://megis.com.tr --form-factor=mobile --output json

# CI/CD entegrasyonu icin
npx lighthouse https://megis.com.tr --budget-path=budget.json --output json

# Birden fazla sayfa analizi (script)
for url in "/" "/hizmetler" "/iletisim" "/blog"; do
  npx lighthouse "https://megis.com.tr$url"     --output html     --output-path "./reports/$(echo $url | tr '/' '-').html"
done

Lighthouse Puan Agiriklari (Performans)

LCP Optimizasyonu

LCP, sayfanin en buyuk gorsel ogesinin (genellikle hero gorsel veya baslik metni) ne kadar surede yuklendigini olcer.

LCP Sorunlari ve Cozumleri

LCP Optimizasyon Kod Ornekleri

<!-- Gorsel optimizasyonu -->
<img
  src="/hero-image.webp"
  alt="Hero gorsel"
  width="1200"
  height="600"
  loading="eager"
  fetchpriority="high"
  decoding="async"
/>

<!-- Preload kritik kaynaklar -->
<link rel="preload" href="/hero-image.webp" as="image" />
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin />

<!-- Critical CSS inline -->
<style>
  /* Sadece above-the-fold icin gereken stiller */
  .hero { display: flex; align-items: center; min-height: 80vh; }
  .hero img { width: 100%; height: auto; }
</style>

<!-- Geri kalan CSS async yukleme -->
<link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
<noscript><link rel="stylesheet" href="/styles.css" /></noscript>

INP Optimizasyonu

INP (Interaction to Next Paint), kullanici etkilesimlerine (tiklama, dokunma, klavye) sayfanin ne kadar hizli yanit verdigini olcer. FID'in yerini alan bu metrik, tum etkilesimleri olcer.

INP Iyilestirme Yontemleri

• Uzun gorevleri bolme: 50ms'den uzun JavaScript gorevlerini kucuk parcalara bolun
• requestIdleCallback kullanin: Onceliksiz islemleri bosta kalma surelerine erteleyin
• Event handler optimizasyonu: Event handler'larda agir islemleri debounce/throttle ile sinirlandir
• Web Worker kullanin: CPU yogun islemleri arka plan thread'ine tasiyun
• Gereksiz yeniden renderlari onleyin: React.memo, useMemo, useCallback kullanin

// Uzun gorevi kucuk parcalara bolme
function processLargeList(items) {
  const CHUNK_SIZE = 50;
  let index = 0;

  function processChunk() {
    const end = Math.min(index + CHUNK_SIZE, items.length);
    for (; index < end; index++) {
      // Her ogeyi isle
      processItem(items[index]);
    }
    if (index < items.length) {
      // Sonraki parcayi bir sonraki frame'e ertele
      requestAnimationFrame(processChunk);
    }
  }
  processChunk();
}

// Debounce ornegi
function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

const handleSearch = debounce((query) => {
  // Arama islemini gerceklestir
  fetchSearchResults(query);
}, 300);

CLS Optimizasyonu

CLS, sayfa yuklenirken iceriklerin beklenmedik sekilde kaymasini olcer. Gorsel kararlilik, kullanici deneyimi icin kritik oneme sahiptir.

CLS Sorunlari ve Cozumleri

• Boyutsuz gorseller: Tum img etiketlerine width ve height ozelligi ekleyin
• Gec yuklenen reklamlar: Reklam alanlari icin sabit boyutlu konteyner ayin
• Dinamik icerik enjeksiyonu: Icerik alanlari icin minimum yukseklik belirleyin
• Web fontlari: font-display: swap kullanin ve font dosyalarini preload edin
• Ust kisima eklenen banner: Sticky veya sabit pozisyonlu bannerlar kullanin

/* CLS onleme: gorsel boyut belirleme */
img, video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* veya uygun oran */
}

/* Reklam alani icin sabit boyut */
.ad-container {
  min-height: 250px;
  width: 300px;
  contain: layout;
}

/* Font yuklenene kadar layout kaymasi onleme */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 20%;
}

Performans Izleme Araclari

Performans Butcesi Olusturma

// performance-budget.json
{
  "budgets": [
    {
      "resourceSizes": [
        { "resourceType": "document", "budget": 50 },
        { "resourceType": "script", "budget": 300 },
        { "resourceType": "stylesheet", "budget": 100 },
        { "resourceType": "image", "budget": 500 },
        { "resourceType": "font", "budget": 100 },
        { "resourceType": "total", "budget": 1000 }
      ],
      "resourceCounts": [
        { "resourceType": "script", "budget": 15 },
        { "resourceType": "stylesheet", "budget": 5 },
        { "resourceType": "image", "budget": 25 }
      ],
      "timings": [
        { "metric": "first-contentful-paint", "budget": 1500 },
        { "metric": "largest-contentful-paint", "budget": 2500 },
        { "metric": "cumulative-layout-shift", "budget": 0.1 },
        { "metric": "total-blocking-time", "budget": 200 }
      ]
    }
  ]
}

Sonuc

Web sitesi performansi, kullanici deneyiminin ve SEO basarisinin temel taslarindan biridir. Lighthouse ile duzenli analizler yapin, Core Web Vitals metriklerini surekli izleyin ve performans butcesi belirleyerek standartlarinizi koruyun. LCP, INP ve CLS optimizasyonlarina sistematik olarak yaklastiginizda, hem kullanici memnuniyetinde hem de arama siralamalarinda olculebilir iyilesmeler goreceksiniz. Megis olarak, gelistirdigimiz tum web sitelerinde performansi oncelikli bir kriter olarak ele aliyor ve Core Web Vitals uyumlulugunu garanti ediyoruz.