Web Sitenizi Hızlandırmanın 10 Yolu: Görsel Optimizasyonundan Core Web Vitals'a

Neden Web Sitesi Hızı Bu Kadar Önemli?

Google, 2021'den itibaren Core Web Vitals (CWV) metriklerini arama sıralama algoritmasına resmi olarak dahil etti. Bu, yavaş bir web sitesinin rakiplerine kıyasla daha alt sıralarda yer alacağı anlamına gelir. Bunun yanı sıra, Amazon ve Google'ın yaptığı araştırmalar şunu gösteriyor:

• Sayfa yüklenme süresi 1 saniye uzadığında dönüşüm oranı %7 düşüyor
• Kullanıcıların %53'ü 3 saniyeden yavaş yüklenen mobil sayfayı terk ediyor

Core Web Vitals Nedir?

Google'ın resmi olarak ölçtüğü 3 temel metrik:

10 Uygulanabilir Hız Optimizasyon Tekniği

1. Görselleri WebP Formatına Dönüştürün

JPG ve PNG görsellerinizi WebP formatına dönüştürerek dosya boyutunu %25-35 azaltın. WebP, Chrome, Firefox, Safari ve Edge'in tümü tarafından desteklenmektedir.

Görsel Format Dönüştürücü aracımızla tek tıkla JPG/PNG'yi WebP'ye dönüştürebilirsiniz.

2. Görsel Sıkıştırma (Lossy Compression) Uygulayın

%80-85 kalite ayarıyla sıkıştırılmış görseller, %100 kaliteli görsellerle insan gözüyle neredeyse ayırt edilemez; ancak dosya boyutu yarı yarıya küçülür.

3. Görsellere width ve height Attributeları Ekleyin

YANLIŞ (CLS sorununa yol açar):

img src="banner.webp" alt="Banner"

DOĞRU (Layout shift önlenir):

img src="banner.webp" alt="Banner" width="1200" height="630"

4. lazy Loading Kullanın

Ekranın altındaki görseller için loading="lazy" ekleyin. Bu, başlangıçta yalnızca görüntülenen görsellerin yüklenmesini sağlar.

img src="alt-gorsel.webp" alt="Alt bölüm" loading="lazy" width="800" height="450"

5. Kritik CSS'i Satır İçine Alın

İlk görünümde (above the fold) kullanılan CSS'i `` içinde inline olarak yerleştirin. Geri kalan CSS'i asenkron yükleyin.

6. Fontları Önceden Yükleyin (Preload)

link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin

7. JavaScript'i Erteleyerek Yükleyin

Kritik olmayan JavaScript dosyaları için defer veya async kullanın.

script src="analytics.js" defer (Sayfa yüklenip DOM hazır olduktan sonra çalışır)

8. Önbellek (Cache) Politikası Belirleyin

Statik dosyalar (görseller, fontlar, CSS) için uzun süreli cache header'ları ayarlayın:

• Görseller ve fontlar: 1 yıl (31536000 saniye)
• CSS ve JS: 1 hafta (hashing ile)

9. CDN (Content Delivery Network) Kullanın

Cloudflare, AWS CloudFront veya Vercel gibi CDN hizmetleri statik dosyalarınızı dünya genelindeki sunuculardan dağıtarak gecikmeyi azaltır.

10. Sunucu Yanıt Süresini İzleyin (TTFB)

Time to First Byte (TTFB) değeriniz 600ms'nin üzerindeyse hosting altyapınızı gözden geçirin. Türkiye kullanıcılarına hizmet veriyorsanız Türkiye veya Frankfurt lokasyonlu sunucular tercih edin.

Hızınızı Test Edin

• Google PageSpeed Insights: pagespeed.web.dev
• WebPageTest: webpagetest.org
• GTmetrix: gtmetrix.com

Görselleri Optimize Etmek İçin Araçlarımız

• Görsel Sıkıştırıcı (MB Düşürücü) — JPG, PNG, WebP sıkıştırma
• Görsel Format Dönüştürücü — WebP'ye dönüştürme
• Görsel Boyut Değiştirici — Piksel yeniden boyutlandırma

Tüm işlemler tarayıcınızda, sunucuya yükleme yapılmadan gerçekleştirilir.