DavidWalshBlog, her ay 50 binden fazla geliştiriciyi ağırlayan popüler bir JavaScript kaynağı. Ancak, sitenin performansı bazı kullanıcılar için yavaş kalıyordu. Request Metrics ile yapılan izleme, özellikle masaüstü ve mobil kullanıcılar için CLS (Cumulative Layout Shift) puanının kötüleştiğini ortaya çıkardı. Bu durum, kullanıcı deneyimini olumsuz etkilemenin yanı sıra arama motoru sıralamalarını da düşürebilir. Peki CLS nedir ve nasıl düzeltilir?
CLS, bir sayfanın yüklenirken ne kadar kaydığını ölçen bir Core Web Vital metriğidir. Sayfa yüklenirken öğelerin aniden yer değiştirmesi, kullanıcıların yanlış bağlantılara tıklamasına veya okuma akışının bozulmasına neden olur. Bu da siteyi yavaş hissettirir. CLS, kullanıcı deneyimini doğrudan etkilediği gibi Google arama sıralamalarında da önemli bir faktördür. Blog yazarları, medya siteleri ve e-ticaret mağazaları için bu metrik hayati önem taşır.
DavidWalshBlog'daki CLS sorununu çözmek için ilk adım, doğru performans ölçümünü yapmaktı. Google Lighthouse gibi araçlar yanıltıcı olabilir; çünkü bunlar yalnızca tek bir testi, hızlı bir bağlantıdan ve güçlü bir bilgisayardan yansıtır. Gerçek kullanıcılar farklı cihazlar, ağlar ve coğrafyalardan geldiği için performans deneyimleri çok daha farklıdır. Bu nedenle, Request Metrics gibi gerçek kullanıcı izleme (RUM) araçları kullanarak sorunları tespit etmek kritik öneme sahiptir.
CLS sorunlarının kaynağını bulmak için sayfa bazında CLS puanları incelendi. Ana sayfa iyi durumdayken, özellikle çok sayıda görsel içeren yazılarda CLS puanlarının yüksek olduğu görüldü. Örneğin, 'Play Grand Poo World' ve 'Pornhub Interview' gibi yazılar sorunluydu. CLS'ye neden olan öğelerin çoğu 'main > article > p' yani ilk paragraftı. Bunun sebebi, tarayıcının görsellerin boyutunu indirilene kadar bilememesi ve varsayılan olarak 0x0 kabul etmesiydi. Görsel indirildiğinde ise etrafındaki içerik kayarak yer açıyordu.
Gelecekte Ne Bekleniyor?
Görsel kaynaklı CLS sorunlarını çözmek için en etkili yöntem, tarayıcıya görselin boyutu hakkında ipuçları vermektir. HTML'de etiketine width ve height öznitelikleri eklenerek (px birimi olmadan) hem taban boyut hem de en-boy oranı belirtilir. Bu sayede tarayıcı, görsel indirilirken sayfa düzeninde yer ayırır ve kayma önlenir. CSS ile bu boyutlar daha sonra esnetilebilir. DavidWalshBlog WordPress altyapısını kullandığı için, wp_image_src_get_dimensions fonksiyonu kullanılarak görsel boyutları otomatik olarak alınıp işaretlemeye eklendi.
Teknik Analiz
Değişiklikler yapıldıktan birkaç gün sonra CLS puanı %20 düşerek 0.123'e geriledi ve 'iyi' aralığına yaklaşıldı. Hâlâ font kaynaklı bazı sorunlar olsa da, bu adım büyük bir iyileşme sağladı. Eğer siz de sitenizin gerçek performansını iyileştirmek ve Core Web Vitals kaynaklı SEO kayıplarını önlemek istiyorsanız, Request Metrics gibi araçlarla performansınızı izleyebilir ve somut çözüm önerileri alabilirsiniz. Üstelik ücretsiz!
Sonuç olarak, CLS sorunları genellikle görsel boyutlandırma, font yükleme ve dinamik içerik ekleme gibi faktörlerden kaynaklanır. Doğru ölçüm ve müdahale ile kullanıcı deneyimini önemli ölçüde artırabilir, arama motoru sıralamanızı koruyabilirsiniz. Unutmayın, gerçek kullanıcı verileri her zaman laboratuvar testlerinden daha değerlidir.
Kaynak: davidwalsh.name
