DavidWalshBlog, her ay 50 binden fazla geliştiriciyi ağırlayan popüler bir JavaScript blogudur. Ancak, sitenin Core Web Vitals performansı, özellikle Kümülatif Düzen Kayması (CLS) metriğinde sorunlar yaşıyordu. CLS, sayfa yüklenirken içeriğin ne kadar kaydığını ölçer ve kötü bir CLS, kullanıcı deneyimini olumsuz etkilerken arama motoru sıralamasını da düşürür. Bu nedenle, blogun CLS puanını iyileştirmek hem okuyucular hem de arama trafiği için kritikti.
Sorunu tespit etmek için Google Lighthouse gibi araçlar kullanılsa da, bu testler yalnızca ideal koşulları yansıtır. Gerçek kullanıcılar farklı cihazlar ve ağlar kullandığından, Request Metrics gibi gerçek kullanıcı izleme (RUM) araçlarıyla performans takibi yapmak gerekir. Request Metrics, her sayfa için CLS puanını ve kaymaya neden olan öğeleri gösterdi. Örneğin, ana sayfa iyi bir CLS'ye sahipken, 'Play Grand Poo World' gibi popüler yazılarda CLS sorunu vardı ve kaymanın kaynağı genellikle makalelerin ilk paragrafıydı.
CLS'nin ana nedeni görsellerdi. Tarayıcı, bir görselin boyutunu indirilene kadar bilemediğinden, varsayılan olarak 0x0 kabul eder ve görsel yüklendiğinde etrafındaki içeriği kaydırarak yer açar. Bu sorunu çözmek için, görsellere width ve height nitelikleri eklenerek tarayıcıya boyut ipuçları verilmelidir. Örneğin: . Bu sayede tarayıcı, görsel için alan ayırabilir ve kayma önlenir. WordPress sitelerinde wp_image_src_get_dimensions işlevi, görsel boyutlarını almak için kullanılabilir.
Teknik Analiz
David, bu değişiklikleri uyguladıktan sonra CLS puanı %20 azalarak 0.123'e düştü ve 'İyi' aralığına yaklaştı. Hâlâ yazı tipleriyle ilgili sorunlar olsa da, görsel iyileştirmeleri büyük bir fark yarattı. Core Web Vitals sorunları nedeniyle SEO kaybı yaşamamak ve gerçek kullanıcı performansını artırmak için Request Metrics gibi araçlarla düzenli izleme yapmak önemlidir. Ücretsiz olan bu araç, performansı takip etmek ve somut çözümler sunmak için idealdir.
