İçeriğe geç

Kurumsal Sitelerde Core Web Vitals: Pratik Kontrol Listesi

Google sıralamasını ve dönüşüm oranını doğrudan etkileyen üç metrik var: LCP, INP ve CLS. Kurumsal sitelerde en sık karşılaştığımız sorunları ve her biri için uyguladığımız somut çözümleri bir kontrol listesi olarak topladık.

2 dk okumaMühendislik

Kurumsal bir sitenin ilk izlenimi, ziyaretçi tek kelime okumadan oluşur: Sayfa ne kadar hızlı göründü, tıklamalara ne kadar çabuk tepki verdi, içerik yüklenirken yerinden oynadı mı? Google bu üç deneyimi Core Web Vitals adıyla ölçüyor ve sıralamada kullanıyor.

Hedef değerler, gerçek kullanıcıların %75'i için:

  • LCP (en büyük içeriğin görünmesi): 2,5 saniyenin altında

  • INP (etkileşime tepki süresi): 200 milisaniyenin altında

  • CLS (görsel kayma): 0,1'in altında

LCP: Ana görseli ve metni hızlı gösterin

En sık sebep, sayfanın en büyük öğesinin (genellikle hero görseli) geç keşfedilmesidir.

  • Hero görselini öncelikli yükleyin; Next.js'te priority, düz HTML'de fetchpriority="high" kullanın.

  • Görselleri AVIF/WebP formatında ve ekran boyutuna uygun genişlikte sunun. 4000 piksellik bir fotoğrafı telefona göndermek en yaygın hatadır.

  • Ana içeriği istemci tarafında çekmeyin; sunucuda üretilmiş HTML ile gönderin.

  • Statik sayfaları önbellekten sunun ve içerik değiştiğinde yalnızca ilgili sayfayı yenileyin.

INP: Ana iş parçacığını boş tutun

INP, kullanıcının tıklamasıyla ekranın güncellenmesi arasındaki süredir. Asıl düşman ağır JavaScript'tir.

  • Üçüncü taraf betikleri (analitik, sohbet, piksel) onaydan sonra ve ertelenmiş olarak yükleyin. Çerez onayı zaten bunu gerektirir.

  • Etkileşimsiz bölümleri sunucu bileşeni olarak bırakın; tarayıcıya gönderilen JavaScript'i küçültün.

  • Uzun görevleri bölün. 50 milisaniyeyi aşan her iş, bir sonraki tıklamayı bekletir.

CLS: Her şeye önceden yer ayırın

Okurken metnin aşağı kayması hem can sıkıcıdır hem de yanlış tıklamalara yol açar.

  • Görsellere ve gömülü içeriklere genişlik ve yükseklik (ya da aspect-ratio) verin.

  • Web fontlarında font-display: swap ile birlikte boyutu yakın bir yedek font tanımlayın; Next.js'in font modülü bunu otomatik yapar.

  • Çerez bandı gibi sonradan gelen öğeleri içeriği itmeden, sayfanın üstüne yerleştirin.

Ölçmeden iyileştirmeyin

Laboratuvar araçları (Lighthouse) yönlendirir, ama karar gerçek kullanıcı verisiyle verilmeli. Search Console'daki Core Web Vitals raporu ve sitenize ekleyeceğiniz küçük bir web-vitals ölçümü, hangi sayfanın hangi cihazda sorun yaşadığını gösterir.

Performans bir kerelik bir proje değil, bir bütçedir. Her yeni betik ve her yeni görsel o bütçeden harcar.

Kendi kurumsal sitemizi de bu listeyle geliştirdik. Sitenizin bugünkü değerlerini birlikte ölçmek isterseniz bize yazabilirsiniz.