Önemli Web Verileri: Hızı ve Kullanıcı Deneyimini İyileştirme

Geçmişte, "hız" belirsiz bir kavramdı. Site hızlı yüklendi mi? Bugün Google, bir kullanıcı için "hızlı" ve "pürüzsüz" hissinin tam olarak ne anlama geldiğini nicelleştirdi. Bu metriklere Önemli Web Verileri (Core Web Vitals - CWV) denir.

Bir sıralama sinyali haline geldiğinden beri, CWV odağı ham sunucu hızından algılanan kullanıcı deneyimine kaydırdı. Bu sadece kodun ne kadar hızlı yüklendiği ile ilgili değil; kullanıcının sayfayı ne kadar sürede gerçekten kullanabildiği ile ilgilidir.

Üç belirli metrik Önemli Web Verilerini oluşturur. Değerlendirmeyi geçmek için bir sayfanın üçünde de "İyi" puan alması gerekir.

1. LCP (Largest Contentful Paint) – Yükleme Performansı

"Ana şeyler ne kadar hızlı görünüyor?"

LCP, en büyük görünür öğenin (genellikle bir kahraman görseli, video veya ana başlık) tamamen yüklenip ekranda görünmesi için geçen süreyi ölçer. Kullanıcıya şunu söyler: "Bu sayfa gerçekten gerçekleşiyor."

Eşikler

• İyi: ≤ 2.5 saniye
• İyileştirilmesi Gerekiyor: ≤ 4.0 saniye
• Zayıf: > 4.0 saniye

Zayıf LCP'nin Yaygın Nedenleri

• Yavaş Sunucu Yanıt Süreleri: Barındırma hizmetiniz ucuzsa veya aşırı yüklüyse, tarayıcı veri almak için çok uzun süre bekler.
• Kaynak Yükleme Gecikmesi: Kahraman görseli optimize edilmemiştir veya lazy-loading ile yüklenmektedir (bu, üst görsel için kaçınılması gereken bir durumdur).
• Oluşturmayı Engelleyen JavaScript: Tarayıcı, bir komut dosyası dosyasını okumak için sayfayı oluşturmayı duraklatır.

Nasıl İyileştirilir

• Görselleri Optimize Edin: Görselleri sıkıştırın (WebP formatı) ve kahraman görselinin lazy-load edilmediğinden emin olun.
• CDN Kullanın: Bir İçerik Dağıtım Ağı, görselleri fiziksel olarak kullanıcıya daha yakın bir sunucudan sunar.

2. INP (Interaction to Next Paint) – Etkileşim

"Tıkladığımda sayfa donuyor mu?"

Not: INP, Mart 2024'te temel metrik olarak İlk Giriş Gecikmesi'nin (FID) yerini resmen aldı.

INP, bir kullanıcının tüm ziyareti boyunca bir sayfayla yaptığı tüm etkileşimlerin (tıklamalar, dokunmalar ve tuş basışları) gecikmesini gözlemler. Kullanıcının eylemi ile tarayıcının sonucu gösteren bir sonraki kareyi boyama yeteneği arasındaki süreyi ölçer (örneğin, bir menüyü açmak veya bir akordiyonu genişletmek).

Eşikler

• İyi: ≤ 200 milisaniye
• İyileştirilmesi Gerekiyor: ≤ 500 milisaniye
• Zayıf: > 500 milisaniye

Zayıf INP'nin Yaygın Nedenleri

• Ağır JavaScript Yürütmesi: Tarayıcının "ana iş parçacığı", kullanıcının tıklamasına yanıt veremeyecek kadar kod işlemekle meşguldür.
• Karmaşık Düzenler: Tarayıcının etkileşimden sonra sayfayı yeniden çizmesi çok uzun sürer.

Nasıl İyileştirilir

• Uzun Görevleri Bölün: Geliştiriciler, tarayıcının nefes alabilmesi için büyük JavaScript parçalarını daha küçük parçalara bölebilir.
• Olay İşleyicileri Optimize Edin: Bir tıklama ile tetiklenen kodun hafif ve hızlı olduğundan emin olun.

3. CLS (Cumulative Layout Shift) – Görsel Kararlılık

"İçerik beklenmedik bir şekilde etrafta zıplıyor mu?"

Bunu hepimiz yaşadık: Bir düğmeye tıklamak üzeresinizdir, ancak aniden üzerine bir reklam yüklenir, içeriği aşağı iter ve yanlışlıkla yanlış şeye tıklarsınız. Bu bir düzen kaymasıdır. CLS, sayfanın ömrü boyunca meydana gelen tüm beklenmedik düzen kaymalarının toplamını ölçer.

Eşikler

• İyi: ≤ 0.1
• İyileştirilmesi Gerekiyor: ≤ 0.25
• Zayıf: > 0.25

Zayıf CLS'nin Yaygın Nedenleri

• Boyutları Olmayan Görseller: Tarayıcıya width="800" ve height="600" demezseniz, ne kadar yer ayıracağını bilemez.
• Reklamlar ve Gömülü İçerikler: Dinamik olarak yeniden boyutlandırılan reklam afişleri genellikle içeriği aşağı iter.
• Web Yazı Tipleri: Bazen metin, özel yazı tipi indirilene (FOIT) veya stilleri değiştirilene (FOUT) kadar gizlenir ve bu da satır yüksekliğinin değişmesine neden olur.

Nasıl İyileştirilir

• Boyutları Ayarlayın: Görsel ve video öğelerine her zaman genişlik ve yükseklik özniteliklerini ekleyin.
• Yer Ayırın: Dinamik bir reklam alanınız varsa, reklam yüklendiğinde içeriğin hareket etmemesi için CSS'de belirli bir kutu boyutu ayırın.

Özet Tablosu: Bir Bakışta Metrikler

Puanınızı Nasıl Ölçersiniz

Tahmin etmenize gerek yok. Google, sitenizi bu standartlara göre test etmek için ücretsiz araçlar sağlar:

• PageSpeed Insights: Hızlı bir anlık görüntü için başvurulacak araç. Hem "Laboratuvar Verileri" (simüle edilmiş) hem de "Saha Verileri" (gerçek kullanıcı verileri) sağlar.
• Google Search Console: "Önemli Web Verileri" raporu, sitenizdeki hangi URL'lerin başarısız olduğunu gösterir ve bunları sorun türüne göre gruplandırır.
• Lighthouse: Yerel testler için Chrome tarayıcısında yerleşik bir geliştirici aracı (Sağ tık > İncele > Lighthouse).