DavidWalshBlog, her ay 50 binden fazla geliştiriciye JavaScript ipuçları sunuyor. Ancak, bazı ziyaretçiler yavaş bir deneyim yaşıyordu. Core Web Vitals performansını takip eden David, CLS (Kümülatif Düzen Kayması) skorunun hem masaüstü hem de mobil kullanıcılar için düşük olduğunu fark etti. CLS, sayfa yüklenirken öğelerin kaymasını ölçer ve bu da kullanıcı deneyimini olumsuz etkiler. Ayrıca, CLS ve diğer Core Web Vitals, arama motoru sıralamasını da etkilediği için blog sahipleri için hayati öneme sahiptir.
Sorunu çözmek için ilk olarak Google Lighthouse kullanıldı, ancak bu araç mükemmel bir skor verdi. Oysa gerçek kullanıcılar farklı cihazlar ve ağlar kullandığından, Lighthouse tek başına yeterli değildi. Bu nedenle, gerçek kullanıcı izleme (RUM) ile sayfa bazında CLS skorları incelendi. En kötü CLS'ye sahip sayfaların ortak özelliği, çok sayıda görsel içermeleriydi. Görseller, tarayıcı boyutlarını bilmediği için yüklendikten sonra kaymalara neden oluyordu.
Çözüm, görsellere width ve height nitelikleri ekleyerek tarayıcıya boyut ipuçları vermek oldu. Bu sayede tarayıcı, görsel yüklenmeden önce yer ayırabildi. WordPress kullanan David, wp_image_src_get_dimensions fonksiyonunu kullanarak görsel boyutlarını otomatik olarak ekledi. Değişikliklerden birkaç gün sonra CLS skoru %20 iyileşerek 0.123'e düştü ve 'İyi' aralığa yaklaştı.
Hâlâ font kaynaklı bazı sorunlar olsa da, bu iyileştirme sayesinde kullanıcı deneyimi ve SEO performansı önemli ölçüde arttı. Eğer siz de sitenizin gerçek performansını artırmak istiyorsanız, Request Metrics gibi araçlarla CLS ve diğer metrikleri takip edebilirsiniz. Unutmayın, gerçek kullanıcı verileri olmadan performans sorunlarını tespit etmek zordur.
