DavidWalshBlog, her ay 50 binden fazla geliştirici tarafından ziyaret edilen popüler bir JavaScript kaynağıdır. Ancak, sitenin performansında bazı sorunlar vardı. Özellikle Cumulative Layout Shift (CLS) metriği, hem masaüstü hem de mobil kullanıcılar için yavaş bir eğilim gösteriyordu. CLS, bir sayfanın yüklenirken ne kadar kaydığını ölçen bir Core Web Vital metriğidir. Bu kaymalar, kullanıcı deneyimini olumsuz etkiler ve sayfanın yavaş hissettirmesine neden olur. Ayrıca, CLS ve diğer Core Web Vital metrikleri, Google arama sıralamasını doğrudan etkiler. Bu nedenle, blog yazarları, medya siteleri ve e-ticaret mağazaları için CLS'yi düzeltmek hayati önem taşır.
Geliştiriciler genellikle performans sorunlarını tespit etmek için Google Lighthouse gibi araçları kullanır. DavidWalshBlog için yapılan Lighthouse testi mükemmel bir puan verdi, ancak bu gerçek kullanıcı deneyimini yansıtmıyordu. Lighthouse, yalnızca tek bir testi, hızlı bir bilgisayarda ve hızlı bir bağlantıda simüle eder. Gerçek kullanıcılar dünyanın farklı yerlerinden, farklı cihazlar ve ağlarla siteye erişir. Bu nedenle, performansı gerçek kullanıcı verileriyle izlemek için Request Metrics gibi bir gerçek kullanıcı izleme (RUM) aracı kullanmak gerekir. Aksi takdirde, sorunlar fark edilmeyebilir.
Request Metrics, her sayfanın CLS skorunu takip ederek sorunlu sayfaları belirlemeyi sağlar. DavidWalshBlog'da en çok trafik alan ana sayfa iyi bir CLS skoruna sahipken, birçok blog yazısı (örneğin 'Play Grand Poo World' ve 'Pornhub Interview') yüksek CLS değerleri gösteriyordu. CLS'ye neden olan öğeler incelendiğinde, çoğu yazıda 'main > article > p' etiketinin ilk paragrafın kaymasına neden olduğu görüldü. Peki bunun sebebi neydi?
Ortak nokta: Görseller. Görseller, CLS sorunlarının en yaygın nedenlerinden biridir. Tarayıcı, bir görselin boyutunu indirilene kadar bilemez ve varsayılan olarak 0x0 boyutunda kabul eder. Görsel indirildiğinde, etrafındaki içerik kayarak yer açar. Çok sayıda görsel içeren yazılarda, her görsel indirildiğinde sayfa birden çok kez kayar. Bu durum, kullanıcı deneyimini ciddi şekilde bozar. Bu nedenle, görsellerin doğru kullanımı CLS'yi önlemede kritik öneme sahiptir.
Görsel kaymalarını önlemek için tarayıcıya görselin boyutu hakkında ipuçları vermek gerekir. Bunu, etiketine width ve height niteliklerini ekleyerek yapabiliriz. Örneğin:
. Bu nitelikler, görselin temel boyutunu ve en-boy oranını belirler. CSS ile daha sonra boyutlandırma yapılabilir. Önemli olan, bu niteliklerin stil etiketi içinde değil, doğrudan etikette belirtilmesidir. Ayrıca, px birimi kullanılmamalıdır. WordPress gibi bir platform kullanılıyorsa, wp_image_src_get_dimensions fonksiyonu ile görsel boyutlarını alıp işaretlemeye eklemek mümkündür.
David, bu değişiklikleri yaptıktan kısa bir süre sonra CLS skoru %20 iyileşerek 0.123'e düştü ve 'İyi' aralığına yaklaştı. Hala yazı tipleriyle ilgili bazı sorunlar olsa da, görsel boyutlandırma sayesinde önemli bir ilerleme kaydedildi. Bu örnek, gerçek kullanıcı izleme araçlarının değerini ve CLS'yi düzeltmek için basit ama etkili yöntemleri göstermektedir. Eğer sitenizin gerçek performansını iyileştirmek veya Core Web Vital sorunlarından kaynaklanan SEO kaybını önlemek istiyorsanız, Request Metrics gibi araçlarla performansınızı takip edebilir ve somut çözümler uygulayabilirsiniz.
Kaynak: davidwalsh.name
