Web Performansını Ölçme: Araçlar ve Metrikler

Web performansı doğrudan kullanıcı deneyimini, dönüşüm oranlarını ve arama motoru sıralamalarını etkiler. Amazon'un yaptığı araştırmaya göre sayfa yükleme süresindeki her 100 milisaniyelik artış, satışlarda %1 düşüşe neden olur. Ancak "sitenim yavaş" demek yeterli değildir — hangi metriğin kötü olduğunu bilmeden iyileştirme yapmak, karanlıkta ok atmaya benzer.

Temel Performans Metrikleri

TTFB — Time to First Byte

Tarayıcının sunucuya istek göndermesinden ilk baytın alınmasına kadar geçen süredir. Sunucu performansını, DNS çözümleme süresini ve ağ gecikmesini yansıtır.

• İyi: 200ms altı
• Kabul edilebilir: 200–600ms
• Kötü: 600ms üzeri

İyileştirme: CDN kullanın, sunucu tarafı önbellekleme uygulayın, veritabanı sorgularını optimize edin, HTTP/2 veya HTTP/3 kullanın.

FCP — First Contentful Paint

Sayfanın ilk metin, görsel veya SVG içeriğini ekrana çizdiği andır. Kullanıcı ilk kez "bir şey yükleniyor" hissini bu noktada alır.

• İyi: 1.8 saniye altı
• Kötü: 3.0 saniye üzeri

İyileştirme: Render-engelleyici kaynakları azaltın, kritik CSS'i satır içi yapın (<style> içinde), yazı tiplerini önceden yükleyin.

LCP — Largest Contentful Paint

Görüntü alanındaki en büyük içerik öğesinin render edildiği andır. "Sayfa yüklendi" algısını en doğru yansıtan metriktir.

• İyi: 2.5 saniye altı
• Kötü: 4.0 saniye üzeri

TTI — Time to Interactive

Sayfanın tamamen etkileşimli hale geldiği andır — yani ana thread 5 saniye boyunca uzun görev olmadan boşta kaldığı ve tüm içerik görüntülendiği nokta.

• İyi: 3.8 saniye altı
• Kötü: 7.3 saniye üzeri

İyileştirme: JavaScript paket boyutunu azaltın, kod bölme uygulayın, üçüncü parti scriptleri erteleyin.

TBT — Total Blocking Time

FCP ile TTI arasında ana thread'in 50ms'den uzun süren görevlerle meşgul olduğu toplam süredir. Kullanıcının tıklama ve yazma gibi etkileşimlerinin ne kadar geciktiğini gösterir.

• İyi: 200ms altı
• Kötü: 600ms üzeri

CLS — Cumulative Layout Shift

Sayfa yüklenirken içerik öğelerinin beklenmedik kaymasını ölçer. 0.1 altı değerler iyi kabul edilir.

Performans Ölçme Araçları

Google Lighthouse

Chrome DevTools'a entegre olan Lighthouse, sayfanızın performansını, erişilebilirliğini, SEO'sunu ve en iyi uygulamalarını değerlendirir.

# Komut satırından Lighthouse çalıştırma
npx lighthouse https://sitescripti.com --output=html --output-path=rapor.html

# Yalnızca performans kategorisi
npx lighthouse https://sitescripti.com --only-categories=performance

Önemli: Lighthouse sonuçları cihaz performansına, ağ durumuna ve arka plan işlemlerine göre değişir. En az 3 kez çalıştırıp ortalamasını alın.

PageSpeed Insights

Google'ın ücretsiz çevrimiçi aracıdır. Lighthouse verilerinin yanı sıra CrUX (Chrome User Experience Report) verileri ile gerçek kullanıcı deneyimini de gösterir.

• Laboratuvar verileri: Kontrollü bir ortamda simülasyon sonuçları
• Saha verileri: Son 28 güne ait gerçek kullanıcı metrikleri

Saha verileri, gerçek kullanıcı deneyimini yansıttığı için çok daha değerlidir.

WebPageTest

Farklı lokasyonlar, cihazlar ve ağ koşullarından detaylı performans testi yapabilirsiniz. Waterfall diyagramı, filmstrip görünümü ve karşılaştırmalı test gibi gelişmiş özellikleri sunar.

Chrome DevTools Performance Paneli

Flame chart ile JavaScript yürütme süresini, layout ve paint işlemlerini mikrosaniye düzeyinde analiz edebilirsiniz. Darboğazları tespit etmek için en güçlü araçtır.

Performans Bütçeleri

Performans bütçesi, projeniz için belirlediğiniz üst sınırlardır. Bu sınırlar aşıldığında uyarı alırsınız:

// Örnek performans bütçesi
{
  "budgets": [
    {
      "resourceType": "script",
      "budget": 300    // JS toplam 300 KB
    },
    {
      "resourceType": "stylesheet",
      "budget": 100    // CSS toplam 100 KB
    },
    {
      "resourceType": "image",
      "budget": 500    // Görseller toplam 500 KB
    },
    {
      "metric": "lcp",
      "budget": 2500   // LCP 2.5 saniye
    }
  ]
}

Performans bütçelerini CI/CD pipeline'ınıza entegre ederek, her dağıtımdan önce otomatik kontrol yapabilirsiniz.

Performans İzleme Stratejisi

• Sürekli izleme: web-vitals kütüphanesi ile gerçek kullanıcı metriklerini (RUM) toplayın
• Karşılaştırma: Rakip sitelerle performansınızı düzenli olarak karşılaştırın
• Düzenli denetim: Her sprint sonunda Lighthouse denetimi çalıştırın
• Uyarı sistemi: Metrikler belirlenen eşikleri aştığında bildirim alın