Google'ın araştırmalarına göre, bir sayfanın yüklenme süresi 1 saniyeden 3 saniyeye çıktığında, ziyaretçi kaybetme oranı %32 artıyor. 5 saniyeye çıktığında ise bu oran %90'a ulaşıyor. Web sitenizin hızı, doğrudan gelirinizi etkiliyor.
Hız ve İşletme Performansı Arasındaki İlişki
Kullanıcılar hızlı sonuç bekliyor. Konuyla ilgili araştırmalar çarpıcı veriler ortaya koyuyor:
- Kullanıcıların %53'ü 3 saniyeden uzun sürede yüklenmeyen mobil siteleri terk ediyor (Google, 2023)
- Sayfa yükleme süresindeki her 1 saniyelik gecikme, dönüşüm oranını %7 düşürüyor (Akamai)
- Walmart, sayfa hızını 1 saniye artırdığında dönüşüm oranında %2'lik artış gözlemlemiştir
- Vodafone, LCP metriğini %31 iyileştirdiğinde satışlarda %8 artış sağlamıştır
Hız artık bir teknik detay değil, doğrudan gelire bağlı bir iş metriğidir.
Core Web Vitals: Google'ın Hız Ölçüm Standartları
Google, 2021'den itibaren Core Web Vitals metriklerini sıralama faktörü olarak kullanmaktadır. Bu metrikler, kullanıcı deneyimini ölçülebilir hale getirir:
LCP (Largest Contentful Paint)
Sayfadaki en büyük görsel veya metin bloğunun render edilme süresidir. Kullanıcının sayfanın yüklendiğini hissettiği anı ölçer.
- İyi: 2,5 saniye altı
- İyileştirme gerekli: 2,5 - 4,0 saniye arası
- Kötü: 4,0 saniye üzeri
INP (Interaction to Next Paint)
2024'te FID'in yerini alan INP, kullanıcının sayfayla etkileşime geçtiğinde (tıklama, dokunma, klavye) yanıt süresini ölçer. Tüm etkileşimlerin en kötüsünü dikkate alır.
- İyi: 200 milisaniye altı
- İyileştirme gerekli: 200 - 500 milisaniye arası
- Kötü: 500 milisaniye üzeri
CLS (Cumulative Layout Shift)
Sayfa yüklenirken görsel öğelerin beklenmedik şekilde kayma miktarını ölçer. Kullanıcının yanlış yere tıklamasına neden olan bu kaymaları önlemek önemlidir.
- İyi: 0,1 altı
- İyileştirme gerekli: 0,1 - 0,25 arası
- Kötü: 0,25 üzeri
Web Sitesi Hızını Artırmanın 10 Yolu
1. Görselleri Optimize Edin
Görseller genellikle bir web sayfasının toplam boyutunun %50'sinden fazlasını oluşturur (HTTP Archive, 2024).
- WebP veya AVIF formatı kullanın: WebP, JPEG'e göre %25-35, AVIF ise %50'ye kadar daha küçük dosya boyutu sunar
- Lazy loading uygulayın: Viewport dışındaki görselleri erteleyerek ilk yüklemeyi hızlandırın
- Responsive görseller sunun:
srcsetvesizesattribute'larıyla cihaza uygun boyut sunun - CDN kullanın: Görselleri kullanıcıya en yakın sunucudan sunun
2. Kritik Render Yolunu Optimize Edin
Tarayıcının sayfayı görüntüleyebilmesi için HTML, CSS ve JavaScript'i işlemesi gerekir. Bu süreç "Critical Rendering Path" olarak adlandırılır.
- Kritik CSS'i inline ekleyin: İlk ekranda görünen içerik için gereken CSS'i
<head>içine yerleştirin - Render-blocking kaynakları azaltın: CSS ve JS dosyalarını async/defer ile yükleyin
- Kullanılmayan CSS'i temizleyin: Chrome DevTools'un Coverage sekmesiyle kullanılmayan kodları tespit edin
3. JavaScript Yükünü Azaltın
- Gereksiz kütüphaneleri kaldırın — her eklenen kütüphane sayfa boyutunu artırır
- Code splitting ile sadece gerekli kodu yükleyin
- Tree shaking ile kullanılmayan fonksiyonları otomatik olarak çıkarın
- Ağır işlemleri Web Worker'lara taşıyın
4. Sunucu Yanıt Süresini İyileştirin (TTFB)
Time to First Byte (TTFB), sunucunun ilk yanıtı gönderme süresidir. 800ms altında olmalıdır.
- Kaliteli hosting seçin (paylaşımlı hosting yerine VPS veya bulut)
- Veritabanı sorgularını optimize edin
- Sunucu tarafı önbellek (Redis, Memcached) kullanın
- CDN ile statik içerikleri dağıtın
5. Tarayıcı Önbelleğini Aktif Kullanın
Cache-Control başlıklarıyla sık değişmeyen dosyalar için uzun süreli önbellek ayarlayın:
- Görseller, fontlar: 1 yıl (
max-age=31536000, immutable) - CSS, JavaScript: Dosya adında hash kullanarak sonsuz önbellek
- HTML: Kısa süreli veya no-cache
6. Gzip/Brotli Sıkıştırma Kullanın
Sunucu tarafında sıkıştırma aktifleştirin. Brotli, Gzip'e göre %15-20 daha iyi sıkıştırma oranı sağlar. HTML, CSS ve JavaScript dosyalarında %70-90 boyut azaltımı mümkündür.
7. Fontları Optimize Edin
- Sadece kullanılan font ağırlıklarını ve karakter setlerini yükleyin (
unicode-range) font-display: swapkullanarak metin gecikmesini önleyin- Fontları kendi sunucunuzda barındırın veya preconnect kullanın
- Değişken fontlar (variable fonts) ile birden fazla ağırlığı tek dosyada sunun
8. HTTP/2 veya HTTP/3 Kullanın
Modern HTTP protokolleri, tek bağlantı üzerinden birden fazla kaynağı paralel olarak aktarır. Bu, özellikle çok sayıda küçük dosya içeren sitelerde büyük hız artışı sağlar.
9. Üçüncü Parti Scriptleri Kontrol Edin
Analytics, reklam, sohbet widget'ları ve sosyal medya butonları gibi üçüncü parti scriptler, sayfa hızını ciddi şekilde etkileyebilir.
- Her script'in performans etkisini Chrome DevTools ile ölçün
- Gereksiz olanları kaldırın
- Gerekli olanları
deferveyaasyncile yükleyin - Facade pattern ile lazy load edin (örn: YouTube embed yerine önce thumbnail gösterin)
10. Modern Framework ve Araçlar Kullanın
Next.js gibi modern frameworkler performans optimizasyonlarını yerleşik olarak sunar:
- Otomatik code splitting: Her sayfa sadece kendi kodunu yükler
- Yerleşik görsel optimizasyonu:
next/imageile otomatik boyutlandırma ve format dönüşümü - Statik sayfa üretimi (SSG): Build zamanında HTML oluşturarak anında yükleme
- Streaming SSR: Sayfanın parçalarını hazır oldukça gönderme
Sitenizin Hızını Nasıl Test Edersiniz?
Performans ölçümü için aşağıdaki ücretsiz araçları kullanabilirsiniz:
| Araç | Özellik | Kullanım |
|---|---|---|
| Google PageSpeed Insights | Core Web Vitals puanı ve öneriler | Hem lab hem alan verisi |
| Chrome DevTools (Lighthouse) | Detaylı performans profilleme | Geliştirici odaklı |
| WebPageTest | Farklı lokasyon ve cihazlardan test | Karşılaştırmalı analiz |
| Chrome UX Report (CrUX) | Gerçek kullanıcı verisi | 28 günlük gerçek dünya verisi |
Performans Kontrol Listesi
- Core Web Vitals hedeflerine ulaşıldı mı?
- Görseller WebP/AVIF formatında mı?
- Lazy loading aktif mi?
- Gzip/Brotli sıkıştırma açık mı?
- Tarayıcı önbelleği yapılandırıldı mı?
- Kullanılmayan CSS ve JS temizlendi mi?
- Font yüklemesi optimize edildi mi?
- TTFB 800ms altında mı?
KuloBayt Performans Yaklaşımı
KuloBayt olarak her projeyi performans öncelikli geliştiriyoruz:
- Next.js ile yerleşik optimizasyon
- Görsel optimizasyonu dahili olarak yapılır
- Core Web Vitals hedeflerine uygun geliştirme
- Teslim öncesi performans testi ve raporlama
Web sitenizin hız analizi için bizimle iletişime geçin.