DavidWalshBlog'da Kümülatif Düzen Kaydırma Sorunlarını Düzeltme
Dünyanın dört bir yanından 50 binin üzerinde geliştirici, JavaScript püf noktalarını öğrenmek ve kodlarındaki sorunları düzeltmek için her ay DavidWalshBlog'u ziyaret ediyor. Ne yazık ki, bazılarının sitede yavaş bir deneyimi var.
David, Önemli Web Verilerinin performansını ve genel performansını İstek Metrikleri ile izliyor. Son zamanlarda CLS performans puanının hem masaüstü hem de mobil kullanıcılar için oldukça yavaş bir seyir izlediğini fark ettik.
Sonuç ve Değerlendirme
Kümülatif Düzen Kayması (CLS), Temel Web Vital performans ölçümlerinden biridir. Yükleme süresini doğrudan ölçmez, bunun yerine sayfanın yüklenirken ne kadar kaydığını ölçer. Bunu mutlaka görmüşsünüzdür ve bundan rahatsız olmuşsunuzdur. Bu değişiklikler sitenin kullanıcıya yavaş gelmesine neden olur.
CLS ve Önemli Web Verilerinin geri kalanı son derece önemlidir. Yalnızca kullanıcı deneyimini ölçtükleri için değil, aynı zamanda bir sitenin aramadaki sayfa sıralamasını da etkiledikleri için. Arama trafiği ise blogcular, medya siteleri, e-ticaret mağazaları ve web sitesi olan hemen hemen herkes için hayattır.
Sitenin CLS sorununu çözebilirsek okuyuculara daha hızlı bir deneyim sunacağız ve arama sıralamasını yükselteceğiz, böylece David daha fazla insana yardımcı olabilir. Harika bir teşvik gibi görünüyor, hadi çözelim.
Performans sorununu bulmak için birçok geliştirici Google Lighthouse gibi bir araç kullanacak. David'in sitesinde Lighthouse'un raporunu araştırdım ve şu sonuca vardım.
Gelecekte Ne Bekleniyor?
Mükemmel bir skor! Hadi toplayalım ve eve gidelim.
Sorun şu ki Google Lighthouse bir yalan. Gerçek kullanıcılar bu performansa sahip olmayacaktır. Bu puan yalnızca ABD'deki ışık hızındaki bilgisayarımdan hızlı geniş bant bağlantısıyla yapılan tek bir testi temsil ediyor.
David'in gerçek kullanıcıları dünyanın her yerinden, çeşitli cihazlar ve ağlar üzerinden ve günün her saatinde geliyor. Performans deneyimleri mükemmel olmaktan uzaktır. Bu nedenle performans için gerçek kullanıcı takibine ihtiyacımız var, aksi takdirde bir sorun olduğunu asla bilemeyebiliriz.
CLS sorunları nerede?
David uzun zamandır yazıyor ve sitesinde yüzlerce gönderi var. İstek Metrikleri, sorunlara odaklanabilmemiz için sayfa başına CLS puanını izler.
En büyük trafik sayfası kök sayfadır ve iyi bir CLS'ye sahiptir. Ancak Play Grand Poo World ve Pornhub Röportajı gibi gönderilerinin çoğunun CLS puanları sıkıntılı. Ayrıca CLS'den sorumlu unsurları ve gönderilerin çoğunu ana > makale > p olarak takip edebiliriz. Bu, makalenin ilk paragrafının değişen şey olduğu anlamına gelir. Bunu neden yapsın?
Teknik Analiz
En kötü CLS puanlarına sahip bu gönderilerin ortak noktası nedir? Resimler. Resimler, CLS sorunlarının çok yaygın bir nedenidir çünkü tarayıcı, indirilene kadar bir resmin ne kadar büyük olduğunu her zaman bilemez. Tarayıcı, görüntüyü elde edene kadar 0x0 olduğunu varsayar, ardından yer açmak için etrafındaki her şeyi kaydırır.
Çok sayıda görsel içeren gönderiler, her görsel indirildikçe ve makale yeni içeriğe yer açacak şekilde kaydırıldıkça birçok kez değişiyordu.
CLS için görüntüleri doğru kullanma
Görselleri kullanırken sayfa düzeninin değişmesini önlemek için tarayıcıya görsellerin ne kadar büyük olacağına dair ipuçları vermemiz gerekiyor. Tarayıcı, indirme işlemi tamamlandığında görüntünün düzeninde yer ayırmak için bu ipuçlarını kullanacaktır.
= "300" height = "100" />
Genişlik ve yüksekliğin bir stil etiketinin parçası değil, kendi nitelikleri olarak belirtildiğine dikkat edin. Bu nitelikler hem görüntünün temel boyutunu hem de kullanılacak en boy oranını belirler. Buradan görüntüyü büyütmek veya küçültmek için CSS'yi kullanmaya devam edebilirsiniz.
Sistem Güvenliği
Ayrıca herhangi bir piksel biriminin belirtilmediğine dikkat edin.
WordPress'te Resim Boyutları
DavidWalsh.name, bunu yapmak için bazı yerleşik araçların bulunduğu WordPress'te barındırılmaktadır. Kullandığı görsellerin boyutlarını almak ve işaretlemeye eklemek için wp_image_src_get_dimensions'ı kullanabiliriz.
Nasıl Önlem Alınmalı?
İşe yaradığını kanıtlamak
Uzmanların Görüşleri
David birkaç gün önce görüntüde değişiklik yaptı ve şimdiden bir gelişme görüyoruz. CLS %20 düşüşle 0,123'e geriledi. Artık CLS'nin “İyi” aralığına gerçekten çok yakınız.
Hala yazı tipleriyle ilgili çözülmesi gereken bazı sorunlar var, ancak bu başka bir zamanın ve başka bir yazının konusu olacak.
Detaylar ve Etkileri
Sitenizin gerçek performansını artırmak istiyorsanız veya Core Web Vital sorunları nedeniyle SEO potansiyelinizi kaybetmekten endişeleniyorsanız İstek Metrikleri'ne göz atın. Performansınızı takip edecek araçlara ve sorunları gerçekten çözmeye yönelik uygulanabilir ipuçlarına sahiptir.
Üstelik ücretsizdir, bu yüzden bunun için de geçerli.
