Web Sitesi Hızlandırma Rehberi: Core Web Vitals İçin Pratik Adımlar

Yavaş açılan bir sayfa, ziyaretçinin sabrını ve arama motorlarındaki görünürlüğünüzü aynı anda zorlar. Google, sayfa deneyimini ölçmek için Core Web Vitals adını verdiği üç metriği kullanıyor. Bu rehberde bu metriklerin ne anlama geldiğini, nasıl ölçüldüğünü ve sunucudan tarayıcıya kadar hangi katmanda neyi iyileştirebileceğinizi adım adım anlatıyoruz.

Core Web Vitals metrikleri

LCP (Largest Contentful Paint)

Sayfadaki en büyük görünür içerik öğesinin (genellikle kapak görseli veya büyük bir başlık bloğu) ekrana çizilme süresidir. Google'ın "iyi" kabul ettiği eşik 2,5 saniye veya altıdır.

INP (Interaction to Next Paint)

Kullanıcının tıklama, dokunma veya klavye etkileşiminden sonra sayfanın görsel olarak tepki vermesine kadar geçen süreyi ölçer. 2024'te FID metriğinin yerini almıştır. İyi eşik 200 milisaniye veya altıdır.

CLS (Cumulative Layout Shift)

Sayfa yüklenirken öğelerin beklenmedik şekilde kaymasını ölçen, birimsiz bir skordur. İyi eşik 0,1 veya altıdır.

Bu eşikler, gerçek kullanıcı verilerinin 75. yüzdelik dilimi üzerinden değerlendirilir. Yani ziyaretçilerinizin büyük çoğunluğunun iyi bir deneyim yaşaması hedeflenir.

Önce ölçün

İyileştirmeye başlamadan önce mevcut durumu kaydedin. Kullanabileceğiniz araçlar:

• PageSpeed Insights: Hem laboratuvar verisi (Lighthouse) hem de, siteniz yeterli trafiğe sahipse, gerçek kullanıcı verisi (CrUX) sunar.
• Google Search Console, Core Web Vitals raporu: Sitenin tamamındaki sorunlu URL gruplarını gösterir.
• Tarayıcı geliştirici araçları: Network ve Performance sekmeleri, hangi kaynağın ne zaman yüklendiğini ayrıntılı gösterir.
• WebPageTest: Farklı konum ve bağlantı hızlarından test imkanı verir.

Laboratuvar testleri tek seferlik ölçümlerdir ve dalgalanabilir. Değişikliklerin etkisini görmek için aynı koşullarda birkaç kez test edip ortalamaya bakın.

1. Sunucu yanıt süresi (TTFB)

LCP'nin ilk bileşeni, sunucunun ilk baytı göndermesine kadar geçen süredir (Time to First Byte). TTFB yüksekse ön yüzde yapılan optimizasyonlar sınırlı fayda sağlar.

Komut satırından basit bir ölçüm:

curl -o /dev/null -s -w "TTFB: %{time_starttransfer}s\nToplam: %{time_total}s\n" https://ornekfirma.com/

TTFB'yi düşürmek için:

• Sayfa önbelleği kullanın. WordPress gibi dinamik sistemlerde her istek için PHP çalıştırmak ve veritabanı sorgulamak yerine hazır HTML'i sunmak, yanıt süresini ciddi oranda kısaltır.
• Nesne önbelleği ekleyin. Redis veya Memcached, sık kullanılan veritabanı sorgu sonuçlarını bellekte tutar.
• PHP'nin güncel bir sürümünü kullanın ve OPcache'in açık olduğundan emin olun.
• Yavaş sorguları bulun. MySQL/MariaDB'de yavaş sorgu günlüğünü açıp en çok süren sorguları inceleyin, eksik indeksleri ekleyin.
• Kaynak limitlerini kontrol edin. Paylaşımlı hosting'de işlemci veya süreç limitine takılan bir site, kodu ne kadar iyi olursa olsun yavaş yanıt verir.

2. Sıkıştırma ve HTTP sürümü

Metin tabanlı dosyalar (HTML, CSS, JS, JSON, SVG) sıkıştırılarak gönderilmelidir. Brotli, gzip'e göre genellikle daha iyi sıkıştırma oranı sağlar. Bir dosyanın sıkıştırılıp sıkıştırılmadığını şöyle kontrol edebilirsiniz:

curl -s -I -H "Accept-Encoding: br, gzip" https://ornekfirma.com/ | grep -i content-encoding

HTTP/2 ve HTTP/3, tek bağlantı üzerinden çok sayıda dosyanın paralel indirilmesine izin verir. Web sunucunuzda veya CDN'inizde bu protokollerin açık olup olmadığını kontrol edin.

3. Tarayıcı önbelleği

Değişmeyen statik dosyalar için uzun süreli önbellek başlıkları tanımlayın. Dosya adlarına sürüm veya içerik özeti (hash) ekleyerek, güncelleme yaptığınızda tarayıcının yeni dosyayı indirmesini sağlayabilirsiniz.

Nginx için örnek yapılandırma:

location ~* \.(css|js|woff2|png|jpg|jpeg|webp|avif|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

4. Görseller

Görseller çoğu sitede en büyük veri yükünü oluşturur ve LCP öğesi genellikle bir görseldir.

• Doğru boyutta sunun. 400 piksel genişliğinde gösterilecek bir alana 3000 piksellik görsel yüklemeyin. srcset ile farklı ekran boyutlarına uygun sürümler sunun.
• Modern formatlar kullanın. WebP ve AVIF, aynı görsel kalitede JPEG ve PNG'ye göre genellikle daha küçük dosya boyutu sağlar.
• Ekranın altındaki görselleri geç yükleyin. loading="lazy" özelliğini sayfanın aşağısındaki görsellere ekleyin; ancak LCP görseline asla eklemeyin.
• LCP görseline öncelik verin. İlk ekranda görünen ana görsel için fetchpriority="high" kullanmak tarayıcının bu görseli erken indirmesini sağlar.
• Genişlik ve yükseklik belirtin. Görsellere width ve height değerleri vermek, tarayıcının yer ayırmasını sağlar ve CLS'yi önler.

5. JavaScript

INP sorunlarının büyük kısmı ana iş parçacığını uzun süre meşgul eden JavaScript kodundan kaynaklanır.

• Kullanılmayan kodu kaldırın. Geliştirici araçlarındaki Coverage sekmesi, yüklenen ama çalışmayan kod oranını gösterir.
• Üçüncü taraf betikleri gözden geçirin. Canlı destek, sosyal medya, reklam ve izleme betikleri ciddi yük getirebilir. Gerçekten ihtiyaç duyulmayanları kaldırın, kalanları gecikmeli yükleyin.
• defer veya async kullanın. Sayfanın çizilmesini engelleyen betikler LCP'yi geciktirir.
• Uzun görevleri bölün. 50 milisaniyeyi aşan işlemleri daha küçük parçalara ayırmak, tarayıcının araya kullanıcı etkileşimlerini almasına imkan verir.

6. CSS ve yazı tipleri

• İlk ekran için gereken kritik CSS'i satır içi verip geri kalanını sonradan yüklemek, ilk çizimi hızlandırabilir.
• Kullanılmayan CSS kurallarını temizleyin; özellikle hazır temalar ve sayfa oluşturucular gereksiz CSS üretebilir.
• Web yazı tiplerinde font-display: swap kullanın ve yalnızca gerçekten kullandığınız ağırlıkları yükleyin.
• Yazı tiplerini WOFF2 formatında sunun ve kritik olanları önceden yükleyin (preload).

7. Düzen kaymalarını (CLS) önleyin

• Görsel, video ve iframe öğelerine boyut verin.
• Reklam, banner ve çerez bildirimi gibi sonradan eklenen öğeler için önceden yer ayırın.
• Mevcut içeriğin üstüne dinamik olarak yeni içerik eklemekten kaçının.
• Yazı tipi değişiminden kaynaklanan kaymaları azaltmak için yedek yazı tipinin ölçülerini ayarlayın.

8. CDN kullanımı

İçerik dağıtım ağı (CDN), statik dosyalarınızı ziyaretçilere coğrafi olarak yakın sunuculardan sunar. Ziyaretçileriniz geniş bir coğrafyaya dağılmışsa gecikmeyi belirgin şekilde azaltır. Ziyaretçilerinizin büyük çoğunluğu sunucunuza yakın bir bölgedeyse CDN'in hız kazancı daha sınırlı olur; ancak önbellekleme ve güvenlik avantajları yine de değerlidir.

Özet: Hızlandırma kontrol listesi

• PageSpeed Insights ve Search Console ile mevcut durumu kaydedin.
• TTFB'yi ölçün; sayfa ve nesne önbelleğini devreye alın.
• Brotli veya gzip sıkıştırmasını ve HTTP/2 veya HTTP/3'ü açın.
• Statik dosyalar için uzun süreli önbellek başlıkları tanımlayın.
• Görselleri doğru boyutta ve modern formatta sunun, boyutlarını belirtin.
• LCP görseline öncelik verin, ona lazy loading uygulamayın.
• Gereksiz JavaScript ve üçüncü taraf betikleri kaldırın.
• Sonradan yüklenen öğeler için yer ayırarak CLS'yi önleyin.
• Her değişiklikten sonra yeniden ölçün.

Sunucu kaynakları ve hosting altyapısı, hız optimizasyonunun temelini oluşturur. Projenize uygun altyapıyı değerlendirmek için Web Hosting ve VPS sayfalarımıza göz atabilir, sorularınız için iletişim sayfamızı kullanabilirsiniz.