DavidWalshBlog, her ay 50 binden fazla geliştiriciye JavaScript ipuçları sunan popüler bir site. Ancak, bazı ziyaretçiler yavaş bir deneyim yaşıyordu. Bunun sebebi, Core Web Vitals metriklerinden biri olan Cumulative Layout Shift (CLS) skorunun düşük olmasıydı. CLS, sayfa yüklenirken içeriğin ne kadar kaydığını ölçer ve kullanıcı deneyimini doğrudan etkiler. Ayrıca Google arama sıralamasında da önemli bir faktördür. Bu yazıda, DavidWalshBlog'da CLS sorunlarını nasıl tespit ettiğimizi ve çözdüğümüzü adım adım anlatacağız.
CLS, sayfa yüklenirken görsellerin, fontların veya reklamların aniden yer değiştirmesiyle oluşur. Kullanıcı bir butona tıklamaya çalışırken içerik kayar ve yanlış yere tıklanmasına neden olur. Bu, sitenin yavaş ve güvensiz hissedilmesine yol açar. Google, CLS'yi Core Web Vitals'ın bir parçası olarak değerlendirir ve düşük CLS skorları arama sıralamasında düşüşe neden olabilir. DavidWalshBlog'un CLS skoru 0.2 civarındaydı, yani 'kötü' kategorisindeydi. Bu sorunu çözmek için önce gerçek kullanıcı verilerine ihtiyacımız vardı.
Birçok geliştirici, performans sorunlarını bulmak için Google Lighthouse gibi araçları kullanır. Ancak Lighthouse, yalnızca tek bir test cihazından ve ideal koşullarda veri sağlar. DavidWalshBlog'da Lighthouse mükemmel bir skor verse de, gerçek kullanıcılar farklı cihazlar, ağlar ve coğrafyalardan geldiği için performans deneyimleri farklıydı. Bu nedenle, Request Metrics gibi gerçek kullanıcı izleme (RUM) araçları kullanarak sayfa bazında CLS skorlarını analiz ettik.
Request Metrics ile en çok trafik alan sayfaların CLS skorlarını inceledik. Ana sayfa iyi durumdayken, 'Play Grand Poo World' ve 'Pornhub Interview' gibi popüler yazılar yüksek CLS değerlerine sahipti. Hatta CLS'ye neden olan öğeleri de tespit ettik: Çoğu yazıda, ilk paragrafın içindeki
etiketleri kaymaya neden oluyordu. Peki neden? Çünkü bu yazılar çok sayıda görsel içeriyordu ve tarayıcı, görselin boyutunu indirilene kadar bilmiyordu. Varsayılan olarak 0x0 kabul eden tarayıcı, görsel yüklendiğinde etrafındaki içeriği kaydırarak yer açıyordu.
Görsel kaynaklı CLS sorunlarını çözmek için en etkili yöntem, tarayıcıya görselin boyutunu önceden bildirmektir. HTML'de etiketine width ve height öznitelikleri ekleyerek, tarayıcının görsel için yer ayırmasını sağlayabiliriz. Örneğin:
. Bu öznitelikler, görselin en boy oranını da belirler. CSS ile daha sonra boyutlandırma yapılabilir. Önemli olan, bu değerlerin piksel birimi olmadan yazılmasıdır.
Detaylar ve Etkileri
DavidWalsh.name WordPress üzerinde çalıştığı için, görsel boyutlarını otomatik olarak eklemek için wp_image_src_get_dimensions fonksiyonunu kullandık. Bu fonksiyon, medya kütüphanesindeki görsellerin boyutlarını alır ve HTML çıktısına width/height özniteliklerini ekler. Değişiklikleri yaptıktan birkaç gün sonra CLS skoru %20 iyileşerek 0.123'e düştü. Bu, 'iyi' kategorisine oldukça yakın bir değer. Fontlarla ilgili hâlâ bazı sorunlar olsa da, görsel kaynaklı kaymalar büyük ölçüde çözüldü.
Eğer sitenizin Core Web Vitals skorlarını iyileştirmek ve SEO sıralamanızı korumak istiyorsanız, gerçek kullanıcı verilerine dayalı bir izleme aracı kullanmanız şart. Request Metrics gibi araçlar, hangi sayfaların sorunlu olduğunu ve hangi öğelerin CLS'ye neden olduğunu gösterir. Ayrıca, çözüm için eyleme dönüştürülebilir ipuçları sunar. Unutmayın: CLS sadece kullanıcı deneyimini değil, aynı zamanda Google'daki görünürlüğünüzü de etkiler. Hemen harekete geçin ve sitenizi optimize edin!
Kaynak: davidwalsh.name
