Web Site Performans Analizi: Araçlar ve Yöntemler

Web siteniz ne kadar hızlı? Performans analizi, sunucu yanıt süresinden görsel optimizasyonuna, JavaScript yönetiminden önbellekleme stratejilerine kadar kapsamlı bir değerlendirme gerektirir. Bu rehberde performans analizinin her boyutunu, kullanılacak araçları ve iyileştirme yöntemlerini detaylıca ele alıyoruz.

Performans Neden Kritik?

Web site performansı hem kullanıcı deneyimini hem de iş sonuçlarını doğrudan etkiler. Araştırmalar şunu gösteriyor:

• Sayfa yükleme süresi 1 saniyeden 3 saniyeye çıktığında, terk oranı %32 artar
• 1 saniyeden 5 saniyeye çıktığında ise terk oranı %90 artar
• E-ticaret sitelerinde her 100ms'lik hız iyileştirmesi, dönüşüm oranını ortalama %1 artırır
• Google, sayfa hızını sıralama faktörü olarak kullanır (Core Web Vitals)

Performans optimizasyonu teknik bir konu gibi görünse de sonuçları doğrudan gelire yansır. Amazon'un hesaplamalarına göre, 100ms'lik bir gecikme yıllık gelirin %1'ine mal olmaktadır.

Performans Metrikleri: Neyi Ölçmeli?

Sunucu Tarafı Metrikler

TTFB (Time to First Byte)

Tarayıcının sunucuya istek göndermesi ve ilk baytı alması arasındaki süredir. TTFB, sunucu performansının temel göstergesidir.

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

TTFB'yi etkileyen faktörler: DNS çözümleme süresi, TLS el sıkışma (handshake) süresi, sunucu işleme süresi, coğrafi uzaklık.

Sunucu Yanıt Süresi (Server Response Time)

Sunucunun bir isteği işleme ve yanıt oluşturma süresidir. Veritabanı sorguları, uygulama mantığı ve dosya sistemi erişimi bu süreyi etkiler.

İstemci Tarafı Metrikler (Core Web Vitals)

Google'ın tanımladığı üç temel metrik:

• LCP (Largest Contentful Paint): En büyük içerik öğesinin yüklenme süresi. Hedef: 2.5s altı.
• INP (Interaction to Next Paint): Etkileşimlere yanıt verme süresi. Hedef: 200ms altı.
• CLS (Cumulative Layout Shift): Görsel kayma miktarı. Hedef: 0.1 altı.

Bu metriklerin detaylı açıklaması için Core Web Vitals rehberimize bakabilirsiniz.

Ek Performans Metrikleri

• FCP (First Contentful Paint): İlk içerik öğesinin (metin, görsel) ekranda göründüğü an. Hedef: 1.8s altı.
• TBT (Total Blocking Time): Ana iş parçacığının uzun görevlerle bloklandığı toplam süre. INP'nin laboratuvar karşılığıdır. Hedef: 200ms altı.
• Speed Index: Sayfanın görsel olarak ne kadar hızlı dolduğunu ölçer. Hedef: 3.4s altı.
• Toplam sayfa ağırlığı: Sayfanın yüklemek için indirilen toplam veri miktarı (KB/MB). Hedef: 1.5MB altı (mobil için 1MB altı).
• HTTP istek sayısı: Sayfayı yüklemek için yapılan toplam istek sayısı. Hedef: 50 altı.

Görsel Optimizasyonu

Görseller, çoğu web sayfasının en büyük ağırlık kaynağıdır. HTTP Archive verilerine göre, ortalama bir web sayfasının toplam boyutunun %50'sinden fazlası görsellerdir.

Format Seçimi

Boyutlandırma ve Sıkıştırma

• Responsive görseller: srcset ve sizes öznitelikleri ile farklı ekran boyutları için farklı görsel boyutları sunun
• Boyut sınırı: Görselleri gerçek gösterim boyutlarından büyük yüklemeyin. 300px genişliğinde gösterilen bir alan için 1200px genişliğinde görsel yüklemeyin.
• Sıkıştırma kalitesi: JPEG/WebP için %75-85 kalite genellikle gözle fark edilmez ama dosya boyutunu önemli ölçüde azaltır.
• Lazy loading: Ekranın altındaki görselleri loading="lazy" ile ertelenmiş yükleyin. İlk ekranda görünen görsellere (above-the-fold) lazy loading uygulamayın.

JavaScript Optimizasyonu

JavaScript, modern web sitelerinin en büyük performans darboğazıdır. Yalnızca indirme boyutu değil, parsing ve çalıştırma süresi de performansı etkiler.

Yükleme Stratejileri

• defer: HTML parsing'i bitene kadar script çalıştırılmaz. Sıra korunur. Çoğu script için en iyi seçenek.
• async: Script indirilir indirilmez çalışır. Bağımsız scriptler (analitik, reklam) için uygundur.
• Dinamik import: import() ile modülleri ihtiyaç anında yükleyin (code splitting).

Bundle Optimizasyonu

• Tree shaking: Kullanılmayan kodları build sürecinde kaldırın (webpack, Rollup, esbuild).
• Code splitting: Uygulamayı route/sayfa bazlı parçalara bölün.
• Minification: Boşlukları ve yorumları kaldırarak dosya boyutunu azaltın.
• Gzip/Brotli sıkıştırma: Sunucu tarafında metin bazlı dosyaları sıkıştırın. Brotli, Gzip'den %15-20 daha iyi sıkıştırır.

Üçüncü Parti Scriptler

Analitik, reklam, chat widget'ları, sosyal medya butonları gibi üçüncü parti scriptler performansı ciddi şekilde etkileyebilir. Her eklediğiniz script ana iş parçacığını bloklar ve sayfa ağırlığını artırır.

• Her üçüncü parti scriptin performans etkisini ölçün (Chrome DevTools > Coverage ile kullanılmayan kod miktarını görün)
• Gereksiz scriptleri kaldırın
• Kritik olmayan scriptleri async veya defer ile yükleyin
• Mümkünse sunucu tarafı alternatifleri kullanın (ör. analytics için server-side tagging)

CSS Optimizasyonu

• Kritik CSS: İlk ekranda görünen (above-the-fold) içerik için gereken CSS'i inline olarak <head>'e ekleyin. Geri kalanını async yükleyin.
• Kullanılmayan CSS'i kaldırın: PurgeCSS gibi araçlarla kullanılmayan kuralları temizleyin. Büyük CSS framework'leri (Bootstrap, Tailwind) varsayılan olarak çok fazla kullanılmayan CSS içerir.
• CSS Containment: contain özelliğini kullanarak tarayıcının render hesaplamalarını optimize edin.
• Minification: CSS dosyalarını minify edin (cssnano, clean-css).

CDN (Content Delivery Network)

CDN, içeriğinizi dünya genelindeki sunuculara dağıtarak kullanıcılara en yakın konumdan sunar. Özellikle coğrafi olarak dağınık kitleniz varsa CDN kullanımı şarttır.

CDN Avantajları

• Azaltılmış gecikme (latency): İçerik kullanıcıya fiziksel olarak daha yakın
• Sunucu yükü azalması: Statik dosyalar CDN'den sunulur
• DDoS koruması: Çoğu CDN sağlayıcısı DDoS koruması dahil eder
• Otomatik görsel optimizasyonu: Cloudflare, Vercel gibi CDN'ler görselleri otomatik optimize eder

CDN Sağlayıcıları

• Cloudflare: Ücretsiz planı cömert, DNS yönetimi, WAF, görsel optimizasyonu dahil
• Vercel Edge Network: Next.js projeleri için ideal, otomatik CDN
• AWS CloudFront: AWS ekosistemiyle entegre, kullandıkça öde
• Fastly: Yüksek performanslı, gerçek zamanlı purge, edge computing

Önbellekleme (Caching) Stratejileri

Önbellekleme, aynı kaynağı tekrar tekrar indirmek yerine saklanmış kopyasını kullanarak performansı artırır. İki seviyede uygulanır:

Tarayıcı Önbellekleme

HTTP yanıt başlıkları ile tarayıcıya kaynakları ne kadar süre saklaması gerektiğini söylersiniz:

• Cache-Control: max-age=31536000, immutable — Değişmeyen dosyalar (hash'li JS/CSS) için 1 yıl.
• Cache-Control: no-cache — HTML dosyaları için. Her zaman sunucuya doğrulama yapar ama değişmemişse yeniden indirmez (304 yanıtı).
• ETag — Dosya parmak izi. Tarayıcı, dosyanın değişip değişmediğini kontrol eder.

Sunucu Tarafı Önbellekleme

• Sayfa önbellekleme: Dinamik sayfaların HTML çıktısını önbelleğe alın (Redis, Varnish).
• Veritabanı sorgu önbellekleme: Sık çalışan sorguların sonuçlarını önbelleğe alın.
• Nesne önbellekleme: API yanıtları ve hesaplama sonuçlarını önbelleğe alın.
• Edge önbellekleme: CDN seviyesinde sayfa yanıtlarını önbelleğe alın (stale-while-revalidate).

Performans Analiz Araçları

Ücretsiz Araçlar

• Google PageSpeed Insights: Hızlı Core Web Vitals kontrolü, hem laboratuvar hem alan verileri.
• GTmetrix: Detaylı waterfall analizi, farklı lokasyonlardan test.
• WebPageTest: En detaylı performans testi. Farklı cihazlar, bağlantılar, lokasyonlar. Video karşılaştırma.
• Chrome DevTools: Network sekmesinde waterfall, Performance sekmesinde detaylı profiling, Coverage ile kullanılmayan kod tespiti.
• Lighthouse: Chrome'da yerleşik. Performans, SEO, erişilebilirlik denetimi.

Ücretli/Profesyonel Araçlar

• SpeedCurve: Sürekli performans izleme, RUM verileri, rakip karşılaştırma.
• Calibre: Performans bütçeleri, uyarılar, ekip raporları.
• DebugBear: Core Web Vitals izleme, Lighthouse CI, performans trendleri.

Performans Analizi Metodolojisi

Sistematik bir performans analizi için şu adımları takip edin:

1. Mevcut durumu ölçün: PageSpeed Insights ve GTmetrix ile temel metrikleri kaydedin. Bu başlangıç noktanız (baseline) olacak.
2. Darboğazları belirleyin: Waterfall analizinde en uzun süren istekleri ve Chrome DevTools'ta en büyük JavaScript yüklerini tespit edin.
3. Önceliklendirin: En büyük etkiyi yaratacak iyileştirmelerden başlayın. Genellikle sıra: görsel optimizasyonu > JavaScript azaltma > önbellekleme > CDN > CSS optimizasyonu.
4. Uygulayın ve ölçün: Her iyileştirmeden sonra tekrar test edin. Etkiyi ölçmeden bir sonrakine geçmeyin.
5. Sürekli izleyin: Performans bütçeleri belirleyin ve düzenli aralıklarla kontrol edin. Yeni özellikler performansı bozabilir.

Performans Bütçesi Örneği

• Toplam sayfa ağırlığı: maksimum 1.5MB (mobil: 1MB)
• JavaScript: maksimum 300KB (sıkıştırılmış)
• LCP: maksimum 2.5 saniye
• INP: maksimum 200ms
• CLS: maksimum 0.1
• HTTP istekleri: maksimum 50

Performans ve Kullanıcı Deneyimi

Performans ve kullanıcı deneyimi birbirinden ayrılmaz iki konudur. Hızlı ama kullanışsız bir site başarılı olamaz, iyi tasarlanmış ama yavaş bir site de kullanıcıları kaybeder.

Microsoft Clarity gibi davranış analiz araçları, performans sorunlarının kullanıcıları nasıl etkilediğini görsel olarak gösterir. Yavaş yüklenen bir sayfada kullanıcıların rage click yapması, sayfayı terk etmesi veya öğeler kayarken yanlış yere tıklaması gibi durumları oturum kayıtlarında gözlemleyebilirsiniz.

Önerilen yaklaşım: Teknik performans metriklerini (PageSpeed, Core Web Vitals) davranış verileriyle (Clarity ısı haritaları, oturum kayıtları) birlikte değerlendirin. Rakamların arkasındaki gerçek kullanıcı deneyimini görün.

Sonuç

Web site performans analizi çok boyutlu bir süreçtir: sunucu hızı, görsel optimizasyonu, JavaScript/CSS yönetimi, CDN ve önbellekleme. Her boyut kendi araçlarını ve yöntemlerini gerektirir.

Başlangıç için: PageSpeed Insights ile mevcut durumunuzu ölçün, en büyük sorunları belirleyin ve etki sırasına göre iyileştirin. Düzenli izleme ile performansı koruyun.