WordPress için Kümülatif Düzen Kaydırma (CLS) Nasıl İyileştirilir

Çoğu web sitesi, değişen ekran boyutlarına ve çözünürlüklere sahip çeşitli cihazlardan erişilmek üzere oluşturulmuştur. Bu nedenle, aynı deneyimi birden fazla platformda sürdürmek zor olabilir. WordPress, platformlar arası web tasarımını kolaylaştırır. Bununla birlikte, herhangi bir yazılım geliştirme biçiminde, her şeye uyan bir çözüm oluşturmak karmaşık olabilir.

Web geliştirme durumunda, bir web sitesinde sayfadan sayfaya gezinen kullanıcılar bazen Kümülatif Düzen Kayması (CLS) olarak bilinen şeyi deneyimleyebilir. Bir sayfanın görsel öğelerinin ani bir değişikliğe uğraması veya yanlış yüklenmesidir. Aniden metin büyür veya küçülür, resimler konumlarını değiştirir veya tüm sayfa düzeni değişir.

Bu neden oluyor ve nasıl düzeltebiliriz? Bu kılavuzda, CLS'nin ne olduğunu ve web sitenizde bunu nasıl önleyebileceğinizi keşfedeceğiz.

Kümülatif Düzen Kaydırma nedir?

CLS'nin en yaygın algılanabilir biçimi, görüntülerin yüklenmesindeki gecikmedir. Görsel öğelerle dolu karmaşık web sitelerinde, metnin medya öğelerinden önce yüklendiğini sıklıkla fark edeceksiniz. Ayrıca, tüm görsel öğeler nihayet yüklendiğinde web sayfasının düzeni değişir. Bu olaylar, kaydırma yapsanız da olmasanız da meydana gelir.

Bir web sayfasının CLS puanı yüksek olduğunda, tam olarak ne zaman yüklendiğini belirlemek zordur. Web sitesi ne kadar karmaşık ve medya ağırlıklı olursa, deneyim düzenini değiştirme olasılığı o kadar yüksek olur.

Örneğin, çok az görsel öğeye sahip basit arama motoru web sayfalarında çok az CLS vardır veya hiç yoktur. Ancak bu, tüm karmaşık veya özellikli web sitelerinin yüksek CLS puanlarına sahip olduğu anlamına gelmez. Örneğin, Amazon'un çevrimiçi mağazası widget'lar, resimler ve bağlantılarla doludur, ancak algılanabilir herhangi bir kayma olmadan hızlı bir şekilde yüklenir.

Kümülatif Düzen Kaymasının Nedenleri?

CLS, web tarayıcıları öğeleri farklı zamanlarda sırayla yüklediği için ortaya çıkma eğilimindedir. Ek olarak, web sitenizde bilinmeyen özelliklere (boyutlar gibi) sahip medya öğeleriniz olabilir.

Bir medya öğesinin (bir resim gibi) genişliğini veya yüksekliğini belirtmediğiniz durumlarda, web tarayıcınız web sayfası tamamen yüklenene kadar ne kadar alan ayrılacağını bilemez. Bu nedenle, ciddi düzen kayması. Özetle, çoğu CLS'nin birincil nedeni verimsiz yüklemedir.

Düzenin gerçek zamanlı olarak değiştiğini fark etmeseniz bile, bunun mutlaka herhangi bir kayma olmadığı anlamına gelmediğini unutmamak önemlidir. Web tarayıcıları genellikle web sitesi verilerini önbelleğe alır, bu nedenle web sayfalarını tekrar ziyaret ettiğinizde bunları yüklemek daha kolaydır. CLS puanını ölçmek, web sitenizin önemli ölçüde düzen değişikliğine uğrayıp uğramadığını belirlemenin en iyi yoludur.

Web Sitenizin CLS Puanını Nasıl Ölçersiniz?

CLS puanı, bir web sayfasının ömrü boyunca deneyimlediği düzen kaymalarının sayısını belirtir. CLS puanını, oturum penceresi olarak bilinen şeyden türetebiliriz. Bir oturum penceresi, beş saniyelik bir aralıkta meydana gelen düzen kaymalarının sayısını tanımlar. CLS puanını hesaplamak için, mesafe fraksiyonunu etki fraksiyonu ile çarpmamız gerekir:

 CLS Puanı = Uzaklık Kesri x Etki Kesri

Etki oranı, kararsız bir elemanın iki çerçeve arasındaki algılanabilir alanı ne kadar etkilediğini tanımlar. Mesafe fraksiyonu, bir elemanın çerçeveler arasında kaydırdığı miktarı tanımlar. 0.10 ve altı (0.0 – 0.10) bir CLS puanı harikadır. 0,10'un üzerinde, ancak 0,25'in (0,10 -0,25) altındaki bir CLS puanı orta düzeydedir ve iyileştirme gerektirirken, 0,25'in (0,25 <) üzerindeki bir CLS puanı zayıftır.

Bu kavramları kafanıza takmak biraz zor olabilir. Neyse ki, web sitenizin CLS'sini manuel olarak hesaplamanız gerekmiyor. CLS puanını sizin için hesaplayabilecek çok sayıda çevrimiçi (ve çevrimdışı) araç vardır.

Şu anda, web sayfanızın CLS'sini ölçmenin en popüler yolu Google'ın PageSpeed ​​Insights aracıdır. Hem mobil hem de masaüstü yinelemeleri için web sitenizin kullanıcı deneyimi istatistiklerini belirlemenize olanak tanır.

Diğer CLS araçları şunları içerir:

• GT Metrix
• Google Web Vitals CLS Hata Ayıklayıcı
• Google Chrome Web Verileri Uzantısı
• Google Deniz Feneri
• Web Sayfası Testi

Google'ın PageSpeed ​​Insights'ı en tanıdık olduğu için, onu örneğimiz için kullanacağız.

CLS puanınızı ölçmek için, PageSpeed ​​içgörüsü ana sayfasına gidin, Web Sayfanızın URL'sini üstteki metin alanına girin ve ardından Analiz düğmesine tıklayın. Web sitenizin popülerliğine ve internet hızınıza bağlı olarak, PageSpeed ​​Insights size birkaç saniye içinde bir rapor sunmalıdır.

CLS puanınızı bulmak için Temel Web Verileri Değerlendirmesi bölümüne gidin.

Örnek olarak Amazon'un ana sayfasını kullanırsak, büyük olasılıkla 0.10'dan düşük bir CLS puanı buluruz. Testlerimiz sırasında, mobil web sitesinin CLS puanının 0,01 olduğunu, masaüstü sürümünün ise 0,05 puan aldığını tespit ettik.

Ancak siteleri bu kadar kaynak ağırlıklıyken bunu nasıl yapıyorlar? Amazon benzeri bir CLS puanına da nasıl sahip olabileceğinize bakalım.

CLS Nasıl Optimize Edilir

Hangi öğelerin yüksek CLS puanınıza neden olduğunu görmenin en iyi yolu, Google Web Vitals CLS hata ayıklayıcısını kullanmaktır. Size web sitenizdeki tüm değişen özelliklerin bir GIF'ini gösterir. Reklamlar ve medya dosyaları, yüksek CLS puanlarının en yaygın suçlularıdır. Diğer nedenler, yazı tiplerini, eşzamansız CSS'yi, animasyonları ve Iframe'leri içerebilir. CLS puanınızı yükseltmek için bu öğeleri optimize etmeniz gerekir.

Web sitenizin saygın CLS'ye sahip olmasını sağlamak, güçlü yerel SEO'ya ve alakalı içeriğe sahip olmasını sağlamak kadar önemlidir. Google'ın arama motoru, harika bir kullanıcı deneyimi sağlayan ve iyi optimize edilmiş web sitelerini tercih etme eğilimindedir.

Bu amaçla, sitenizin CLS puanını iyileştirmeye yönelik birkaç adımı burada bulabilirsiniz:

Tüm medya dosyalarına boyut özellikleri ekleyin

Bilinmeyen özelliklere sahip medya dosyaları yüklerseniz, web tarayıcınızın görüntünüzün boyutunu bulması ve yüklemeden sonra düzen yönünü belirlemesi gerekeceğinden, düzen kayması riskini artıracaktır. Bu durumların büyük, yüksek çözünürlüklü görüntüler ve dosyalar için ortaya çıkma şansı daha yüksektir.

Boyut özellikleri eksik olan medya dosyalarını yükleyerek, web tarayıcısının eline çok fazla iş bıraktınız. Yüklediğiniz her görsel medya dosyası için yükseklik ve genişlik özelliklerini eklemelisiniz. Bunu, kaynak kodunuzu görüntüleyerek ve genişlik ve yükseklik özelliklerini manuel olarak ekleyerek yapabilirsiniz.

Yazı tiplerinin yerel olarak yüklendiğinden emin olun

Yazı tipi yükleme sırasında metin görünür kalmalıdır. Bunu başarmanın ilk adımı, yazı tiplerinin üçüncü taraf yazı tipi web sitelerinden alınmak yerine yerel olarak yüklenmesini sağlamaktır.

Yazı tiplerinizin üçüncü taraf bir web sitesinden alındığını tespit ederseniz, bunları yerel olarak barındırmak ve daha hızlı yüklemek için OMGF gibi bir eklenti kullanabilirsiniz. Bu yalnızca CLS puanınızı artırmakla kalmaz, aynı zamanda çevre dostu tasarıma doğru bir adımdır.

FOIT ve FOUT'tan kaçının

Bir geri dönüş yazı tipi belirlemede başarısız olduğunuzda görünmez metin parlaması (FOIT) oluşur. Web tarayıcınız yazı tipinizi yüklemeye veya bir alternatif bulmaya çalışırken, kullanıcılara metnin olması gereken yerde boş bir alan sunulur.

Biçimlendirilmemiş metnin flash (FOUT) sırasında, belirtilen yazı tipini yükleyene kadar web tarayıcısının varsayılan yedek yazı tipiyle karşılaşacaksınız. Bunu düzeltmek için font-display: takas özelliğini ekleyebilirsiniz.

Google'dan yazı tipi indirdiyseniz, bu etiketi her URL'nin sonuna eklediğini fark edeceksiniz. Bu özelliği kendiniz eklemenin en kolay yolu, WP'de Swap Google Fonts Display eklentisini kullanmaktır.

Ancak, bu eklentinin yalnızca Google yazı tipleri için çalıştığını ve görüntü değiştirme özelliğini bu URL'lere otomatik olarak eklediğini unutmayın. Yazı tiplerini yerel olarak barındırıyorsanız, tüm yazı tipi dosyalarınızı bulmak ve değiştirmek için String Locator eklentisini kullanabilirsiniz. Yazı tipi stil sayfasını WP'de açmanız ve değiştirmeniz gerekecek.

Alternatif olarak, font takas özelliğini ekleyerek fontları sizin için otomatik olarak optimize edecek olanlar gibi önbelleğe alma eklentilerini kullanabilirsiniz.

Yazı tiplerini önceden yükle

Yazı tiplerini yerel olarak barındırdığınızdan emin olmak için yazı tiplerinizi aşağıdaki gibi eklentilerle önceden yükleyebilirsiniz:

• WP Roketi
• * Parti Öncesi Kaynak İpuçları
• izin verilenler

Bu eklentileri kullanmayı göze alamıyorsanız, header.php dosyanızı düzenleyerek yazı tiplerinizi önceden yükleyebilirsiniz. Yazı tiplerini önceden yükledikten sonra sitenizi iyice test ettiğinizden emin olun. Çok fazla yazı tipinin önceden yüklenmesi web sitenize zarar verebilir. Bu nedenle, herhangi bir büyük arka uç şansında olduğu gibi, WordPress sitenizi önceden yedeklemenizi öneririz.

CSS dağıtım optimizasyonunu devre dışı bırak

CSS dağıtımını optimize etmek veya CSS'yi LiteSpeed ​​Cache ile eşzamansız olarak yüklemek için WP Rocket kullanıyorsanız, bu, stillenmemiş içeriğin (FOUC) flaşına neden olabilir. CLS puanınızı yükseltmek istiyorsanız, ilgili eklentilerinde bu seçenekleri devre dışı bırakmanızı öneririz.

Alternatif olarak, geri dönüş kritik CSS olarak bilinen şeyi ayarlayabilirsiniz. Bu, Critical Path CSS Generator gibi bir araç kullanarak kritik bir yedek komut dosyası oluşturmayı içerir.

Oluşturmayı engelleyen komut dosyalarının kaldırılması da CLS puanınızı düşürebilir. Önce CLS'nizi CSS dağıtım optimizasyonu etkinken test etmenizi, ardından karşılaştırmak için devre dışı bıraktığınızda test etmenizi öneririz.

Animasyonları devre dışı bırak

Animasyon kullanıyorsanız, animasyonlar web sitenizin yükleme sürelerini bozabileceğinden, bunları web sitenizin mobil sürümü için devre dışı bırakmanızı öneririz. Web siteniz için animasyonlara sahip olmakta ısrar ediyorsanız, CSS dönüştürme ve çevirme seçeneklerini kullanmanızı öneririz.

Alternatif olarak, Happy Addons Elementor eklentisini kullanabilirsiniz. Bu, düzen kaymalarına neden olmadan öğeleri canlandırmanıza olanak tanır.

Çoğu düzen kaymasını ortadan kaldırmanın en iyi yolu, web sayfanızın nasıl yüklendiğini değiştirmektir. Buna karşılık, WordPress sitenizin hızını ve verimliliğini artırabilirsiniz. Her zaman olduğu gibi, kullanıcı deneyimini geliştirmekle ilgilidir. Web siteniz ne kadar duyarlı olursa, kullanıcıların siteyi işaretleme ve tekrar ziyaret etme olasılığı o kadar yüksek olur.