DavidWalshBlog, her ay 50 binden fazla geliştirici tarafından ziyaret edilen popüler bir JavaScript kaynağı. Ancak, sitenin performansı her ziyaretçi için aynı derecede hızlı değil. David, sitenin Core Web Vitals performansını Request Metrics ile takip ediyordu ve kısa süre önce Kümülatif Düzen Kayması (CLS) puanının hem masaüstü hem de mobil kullanıcılar için tehlikeli bir şekilde yavaşladığını fark etti. Bu, sitenin kullanıcı deneyimini olumsuz etkileyen ve arama motoru sıralamasını düşüren bir sorundu.
CLS, bir sayfanın yüklenirken ne kadar kaydığını ölçen bir performans metriğidir. Kullanıcılar, sayfa yüklenirken içeriklerin aniden kaymasından rahatsız olur ve bu durum siteyi yavaş hissettirir. Core Web Vitals, sadece kullanıcı deneyimini ölçmekle kalmaz, aynı zamanda Google'ın sayfa sıralama algoritmasında da önemli bir rol oynar. Blogcular, medya siteleri ve e-ticaret mağazaları için arama trafiği hayati önem taşır. CLS sorununu çözmek, hem kullanıcılara daha hızlı bir deneyim sunacak hem de arama sıralamasını yükselterek David'in daha fazla kişiye ulaşmasını sağlayacaktı.
Birçok geliştirici performans sorunlarını tespit etmek için Google Lighthouse gibi araçlar kullanır. David'in sitesinde Lighthouse testi yaptığımda mükemmel bir puan aldım. Ancak sorun şu ki, Lighthouse gerçek kullanıcı deneyimini yansıtmaz. Bu test, yalnızca hızlı bir bilgisayarda, ABD'de ve yüksek hızlı bir bağlantıda yapılan tek bir testi temsil eder. David'in gerçek kullanıcıları dünyanın her yerinden, farklı cihazlardan ve ağlardan gelir. Bu nedenle, gerçek kullanıcı izleme (RUM) araçları kullanarak performansı takip etmek hayati önem taşır. Aksi takdirde, sorunun varlığından bile haberdar olmayabiliriz.
Detaylar ve Etkileri
Request Metrics, her sayfa için CLS puanını takip ederek sorunlu sayfaları belirlememizi sağladı. En yüksek trafiğe sahip ana sayfa iyi bir CLS puanına sahipken, 'Play Grand Poo World' ve 'Pornhub Interview' gibi birçok yazıda CLS puanları endişe vericiydi. Ayrıca, CLS'ye neden olan öğeleri de takip edebildik. Çoğu yazıda, CLS'nin kaynağı 'main > article > p' yani makalenin ilk paragrafıydı. Peki, bu neden kayıyordu?
Uzmanların Görüşleri
Ortak nokta neydi? Görseller. Görseller, CLS sorunlarının çok yaygın bir nedenidir çünkü tarayıcı, bir görselin boyutunu indirilene kadar bilemez. Tarayıcı, görseli 0x0 olarak varsayar ve görsel indirildiğinde etrafındaki her şeyi kaydırarak yer açar. Çok sayıda görsel içeren yazılar, her görsel indirildiğinde ve makale yeni içeriğe yer açmak için kaydığında defalarca kayma yaşardı.
Teknik Analiz
Görsel kaynaklı düzen kaymalarını önlemek için tarayıcıya görselin ne kadar büyük olacağına dair ipuçları vermemiz gerekir. Bunu, img etiketine width ve height niteliklerini ekleyerek yapabiliriz. Örneğin: . Bu nitelikler, görselin hem temel boyutunu hem de kullanılacak en-boy oranını belirler. CSS ile görseli daha büyük veya küçük yapmaya devam edebilirsiniz. Ayrıca, px birimi belirtilmemesine dikkat edin. DavidWalsh.name WordPress üzerinde olduğu için, wp_image_src_get_dimensions işlevini kullanarak görsel boyutlarını alıp işaretlemeye ekleyebildik.
David, birkaç gün önce görsel değişikliklerini yaptı ve şimdiden iyileşme görüyoruz. CLS puanı %20 düşerek 0.123'e indi. Bu, 'İyi' aralığa oldukça yakın. Hâlâ yazı tipleriyle ilgili çözülmesi gereken bazı sorunlar var, ancak bu başka bir yazının konusu. Sitenizin gerçek performansını iyileştirmek veya Core Web Vitals sorunlarından kaynaklanan SEO kaybını önlemek istiyorsanız, Request Metrics gibi bir gerçek kullanıcı izleme aracı kullanmanızı öneririm. Performansınızı takip etmek ve sorunları gerçekten çözmek için eyleme dönüştürülebilir ipuçları sunar. Üstelik ücretsiz.
Kaynak: davidwalsh.name
