On yıl önce web tasarımcısı (UI/UX) ile SEO uzmanı birbirinden tamamen bağımsız ve habersiz çalışırdı. Ancak Google'ın devreye soktuğu Core Web Vitals (Önemli Web Metrikleri) güncellemesiyle beraber UI ve SEO ayrılmaz bir algoritmik bütün (Page Experience) haline geldi. Kullanıcının iğrendiği tasarımı Google sıralamadan siler.
Core Web Vitals 3 Mahşer Atlısı
1. LCP (Largest Contentful Paint - En Büyük İçerik Boyanması)
Nedir? Sayfaya tıklandığı an, ekrandaki en büyük alan kaplayan öğenin (Bu genelde en zirvedeki Hero Resmi veya bir Video Headline olur) YÜKLENME SÜRESİDİR. Genel PageSpeed skoru değil, doğrudan Ziyaretçinin o ilk büyük resmi gördüğü andır.
Çözüm: LCP öğeniz 2.5 Saniyenin altında (Yeşil) açılmalıdır. O tepeki dev resmi WebP ye çevirin, Lazy Load (Tembel yükleme) KESİNLİKLE YAPMAYIN (Tepe olduğu için). Doğrudan Preload tagiyle (<link rel="preload" href="hero.webp" as="image">) sunucu önbelleğinden fişekleyin.
2. CLS (Cumulative Layout Shift - Kümülatif Düzen Kayması)
Nedir? İnternette bir makale okurken tam bir butona / linke tıklayacakken SAYFANIN ÜSTÜNDEN DEV BİR REKLAM/GÖRSEL YÜKLENİR ve Sayfa aniden AŞAĞI KAYAR (Ve siz yanlış yere tıklarsınız). İnsanı çıldırtan bu Tasarımsal Kayma Bozukluğuna CLS denir.
Çözüm: Sitenize koyduğunuz her AdSense reklam kutusuna ve her görseline koddan Sabit Boyut Verin (width="600" height="400" veya min-height). Resim yüklenmese bile tarayıcı orada o boyut kadar kutuyu şeffaf olarak "REZERVE" edeceğinden dolayı, sonradan yüklenince aşağı itme / kayma yaşanmayacaktır.
3. INP (Interaction to Next Paint) - Eski adıyla FID
Nedir? Sitedeki "Sepete Ekle" Veya "Menüyü Aç" düğmesine tıkladığınızda, sitenin o olaya (JavaScript) kaç milisaniyede görsel yanıt/tepki verdiğinin testidir.
Çözüm: Çok bekletip donma yapan JS scriptlerini küçültün veya ana threadden (web workers) dışarı çıkartın. Reaksiyon süresi 200 ms altında olmalıdır.