Web sitesi performansı, kullanıcı deneyiminin temel taşlarından biridir. Ancak çoğu zaman farkında olmadan yaşadığımız bir sorun var: sayfaların yüklenirken kayması. Bu kaymalar, özellikle metin okurken veya bir butona tıklamaya çalışırken can sıkıcı olabilir. İşte tam da bu noktada Kümülatif Düzen Kayması (CLS) devreye giriyor. CLS, Core Web Vitals'ın önemli bir metriğidir ve sayfanın yüklenirken ne kadar kaydığını ölçer. DavidWalshBlog da bu sorunla karşılaştı ve çözüm yollarını araştırdı.
DavidWalshBlog, her ay 50 binden fazla geliştirici tarafından ziyaret edilen popüler bir JavaScript blogudur. Ancak Request Metrics ile yapılan izleme, CLS skorlarının hem masaüstü hem de mobil kullanıcılar için yavaşladığını ortaya çıkardı. CLS, yalnızca kullanıcı deneyimini etkilemekle kalmaz, aynı zamanda arama motoru sıralamalarını da doğrudan etkiler. Bu nedenle, CLS'yi iyileştirmek hem kullanıcılara daha hızlı bir deneyim sunar hem de SEO performansını artırır.
Peki CLS sorunlarını tespit etmek için hangi araçları kullanmalıyız? Çoğu geliştirici Google Lighthouse'u tercih eder. Ancak Lighthouse, yalnızca tek bir test sonucu verir ve genellikle hızlı bir bilgisayar ve iyi bir internet bağlantısıyla yapılır. Gerçek kullanıcılar ise farklı cihazlar, ağlar ve coğrafyalardan gelir. Bu nedenle, gerçek kullanıcı izleme (RUM) araçları, performans sorunlarını tespit etmek için çok daha güvenilirdir. Request Metrics gibi araçlar, sayfa bazında CLS skorlarını takip ederek sorunlu alanları belirlemenize yardımcı olur.
DavidWalshBlog'da en büyük CLS sorunları, içeriğin ilk paragrafında yaşanıyordu. Bunun nedeni, sayfadaki görsellerin boyutlarının tarayıcı tarafından önceden bilinmemesiydi. Tarayıcı, görseli indirene kadar 0x0 boyutunda varsayar ve indirme tamamlandığında etrafındaki içeriği kaydırarak yer açar. Bu da özellikle çok sayıda görsel içeren yazılarda sürekli kaymalara neden olur. Görsellerin boyutlarını HTML'de width ve height öznitelikleriyle belirterek bu sorunu çözmek mümkündür. Bu sayede tarayıcı, görsel için önceden alan ayırır ve kayma olmaz.
Sonuç ve Değerlendirme
WordPress kullanıcıları için bu işlem daha da kolaydır. WordPress'te wp_image_src_get_dimensions fonksiyonu ile görsellerin boyutlarını alıp HTML çıktısına ekleyebilirsiniz. DavidWalshBlog'da bu değişiklik yapıldıktan sonra CLS skoru %20 iyileşerek 0,123'e düştü. Bu değer, 'iyi' (0,1) sınırına oldukça yaklaştı. Tabii ki yazı tipleri gibi başka sorunlar da olabilir, ancak görsel optimizasyonu CLS için en etkili çözümlerden biridir.
Sonuç olarak, web sitesi performansınızı iyileştirmek ve SEO sıralamanızı korumak için CLS'yi ciddiye almalısınız. Google Lighthouse gibi araçlar yanıltıcı olabilir; gerçek kullanıcı verilerine dayanan RUM araçları kullanarak sorunları tespit edin. Görsellerinizi optimize edin, boyutlarını HTML'de belirtin ve düzenli olarak performansınızı izleyin. Unutmayın, iyi bir kullanıcı deneyimi aynı zamanda iyi bir SEO demektir.
Kaynak: davidwalsh.name
