WordPress için Kümülatif Düzen (CLS) kayması nasıl artırılır
Çoğu web sitesi, çeşitli boyutlardaki çeşitli cihazlardan ve ekran çözünürlüğünden erişilecek şekilde yapılır. Bu nedenle, aynı deneyimi çeşitli platformlarda sürdürmek zor olabilir. WordPress, platformlar arası web tasarımlarını kolaylaştırır. Bununla birlikte, her türlü yazılım geliştirmede, herkes için uygun olan çözümler bina karmaşık olabilir. Web geliştirme durumunda, web sitelerindeki sayfalardan sayfalara giden kullanıcılar bazen kümülatif düzen (CLS) vardiyası olarak bilinen şeyi yaşarlar. Bu, sayfanın görsel öğesi ani değişiklikler yaşadığında veya yanlış yüklendiğinde olur. Aniden metin büyür veya daha küçük hale gelir, görüntü konumunu değiştirir veya sayfanın tüm düzeni değişir.
Bu neden oldu ve nasıl düzeltebiliriz? Bu kılavuzda, CLS’nin ne olduğunu ve web sitenizde nasıl önleyebileceğinizi keşfedeceğiz. Kümülatif düzen kayması nedir? CLS’nin en yaygın şekli, yüklemede bir yavaşlamadır. Görsel öğelerle dolu karmaşık bir web sitesinde, metnin medya öğesinden önce yayınlandığını göreceksiniz. Ayrıca, tüm görsel öğeler nihayet yüklendiğinde web sayfalarının düzeni değişir. Bu olay yuvarlanıp yuvarlanmasanız da ortaya çıkar. Bir web sayfası yüksek CLS puanı olduğunda, sayfanın ne zaman tam olarak yüklendiğini belirlemek zordur. Web sitesi medyası ne kadar karmaşık ve ağır olursa, deneyim düzeninde bir değişim olasılığı o kadar yüksek olur.
Örneğin, çok az görsel öğeli basit bir arama motoru web sayfasının biraz CLS’si vardır. Bununla birlikte, bu, karmaşık veya özelliklerle dolu tüm web sitelerinin yüksek CLS puanlarına sahip olduğu anlamına gelmez. Örneğin, Amazon Online mağazası widget’lar, görüntüler ve bağlantılarla doludur, ancak görünür değişiklikler olmadan hızlı bir şekilde içerir. Kümülatif düzen kaymasının nedeni nedir? CLS, web tarayıcısının farklı zamanlarda sıralı öğeler içerdiğinden ortaya çıkma eğilimindedir. Buna ek olarak, web sitenizde bilinmeyen mülklere sahip (Boyutlar gibi) medya öğeleriniz olabilir.
Web sitenizin nasıl ölçülür CLS puanları CLS puanları, zaman boyunca web sayfalarının yaşadığı düzende değişim miktarını gösterir. Oturum penceresi olarak bilinen bir CLS puanı alabiliriz. Oturum penceresi, beş saniye aralığında ortaya çıkan düzen kaymasının sayısını açıklar. CLS skorunu hesaplamak için, mesafe fraksiyonunu çarpışma fraksiyonu ile çarpmamız gerekir: CLS = mesafenin fraksiyonu x Çarpışma fraksiyonunun etkisi, kararsız elementin iki kare arasında görülebilen alanı ne kadar etkilediğini gösterir. Mesafe fraksiyonu, çerçeve arasında değişen eleman sayısını gösterir. CLS puanları 0.10 ve altındaki (0.0 – 0.10) çok iyidir. 0.10’un üzerindeki CLS skorları, ancak 0.25’in (0.10 -0.25) altında ılımlı ve iyileştirme gerektirirken, 0.25’in (0.25 <) üzerindeki CLS skorları oldukça kötüdür. Bu kavramların anlaşılması oldukça zordur. Neyse ki, web sitenizi manuel olarak saymanız gerekmez. CLS puanlarını sizin için hesaplayabilecek birçok çevrimiçi (ve çevrimdışı) araç vardır. Şu anda, web sayfalarınızı CLS'yi ölçmenin en popüler yolu Google'ın PageSpeed Insights'tır. Bu, hücresel ve masaüstü yinelemeleri için web siteniz kullanıcı deneyiminiz için istatistikler sağlamanızı sağlar. Diğer CLS araçları şunları içerir:
GT Metrik
Hata Ayıklayıcı CLS Google Web Vitals
Google Chrome'un hayati web uzantısı
Google'ın Deniz Feneri
Web Sayfası Testi
Google'ın PagesPeed Insights en tanıdık olduğundan, bunu örnek olarak kullanacağız.
CLS puanınızı ölçmek için PagesPeed Insight ana sayfasına gidin, web sayfası URL'nizi üst metin alanına girin, ardından analiz düğmesine tıklayın. Web sitenizin popülaritesine ve internet hızına bağlı olarak, PagePeed Insights size birkaç saniye içinde bir rapor verecektir. CLS puanınızı bulmak için, çekirdek web'in hayati değerlendirmesine gidin. Örneğin Amazon evini kullanırsak, büyük olasılıkla 0.10'dan az bir CLS puanı bulacağız. Testimiz sırasında, hücresel web sitesinin 0.01 CLS skoru olduğunu, masaüstü sürümünün 0.05 puanı olduğunu bulduk.
Ancak siteleri bu kadar çok kaynak olduğunda bunu nasıl yapıyorlar? Bakalım Amazon gibi bir CLS puanı nasıl olabilir.
CLS nasıl optimize edilir Hangi öğelerin yüksek CLS puanlarınızın hata ayıklayıcı CLS Google Web Vitals'ı kullanmasına neden olan en iyi yol. Bu, web sitenizdeki tüm vardiya özelliklerinin GIF'sini gösterir. Reklamlar ve medya dosyaları, yüksek CLS puanları için en yaygın nedendir. Diğer nedenler yazı tipleri, eşzamansız CSS, animasyon ve IFrame olabilir. CLS puanınızı artırmak için bu öğeleri optimize etmelisiniz. Web sitenizin, sitenin güçlü bir yerel SEO ve ilgili içeriğe sahip olmasını sağlamak kadar önemli bir CLS’ye sahip olmasını sağlamak. Google arama motorları, olağanüstü kullanıcı deneyimi sağlayan ve iyi optimize edilmiş web sitelerine tercihler verme eğilimindedir. Bu nedenle, sitenizin CLS puanını artırmak için bazı adımlar var: Boyutsal özelliği tüm medya dosyalarına ekleyin, bilinmeyen özelliklere sahip medya dosyalarını yüklerseniz, düzende kayma riskini artıracaktır, çünkü web tarayıcınızın bilmesi gerektiği için Görüntünüzün boyutu ve yüklendikten sonra oryantasyon düzenini belirleyin. Bu durum, büyük yüksek çözünürlüklü görüntülerde ve dosyalarda daha büyük bir fırsata sahiptir. Kayıp boyut özelliklerine sahip medya dosyalarını yükleyerek, web tarayıcısının ellerine çok fazla iş koydunuz. Yüklediğiniz her görsel medya dosyasına yüksek ve geniş özellik eklemeniz gerekir. Bunu kaynak kodunuza bakarak ve manuel olarak geniş ve yükseklik özellikleri ekleyerek yapabilirsiniz. Yazı tipinin yazı tipi yüklemesi sırasında yerel olarak kilitlendiğinden emin olun. Bunu başarmanın ilk adımı, üçüncü taraf yazı tipi web sitesinden çekilmek yerine yazı tipinin yerel olarak yayınlanmasını sağlamaktır. Yazı tipinizin üçüncü bir web sitesinden çekildiğini görürseniz, yerel olarak barındırmak ve daha hızlı içermek için OMGF gibi bir eklenti kullanabilirsiniz. Bu sadece CLS puanınızı değil, aynı zamanda çevre dostu bir tasarıma doğru bir adım da artıracaktır.
Yedekleme yazı tipini belirleyemediğinizde görünmez metnin (FOIT) foit ve fout fout flaşlarından kaçının. Web tarayıcınız yazı tipinizi yüklemeye veya alternatifler aramaya çalıştığında, kullanıcılara metnin olması gereken boş bir alan verilecektir. Stilsiz Flash Metin (Fout) sırasında, belirttiğiniz yazı tipini yükleyebilmesi için varsayılan geri dönüş yazı tipi tarayıcısı web ile sunulacaktır. Bunu düzeltmek için Font-Display özellikleri ekleyebilirsiniz: takas. Google’dan bir yazı tipi indirdiyseniz, bu etiketi her URL’nin sonuna eklediğini göreceksiniz. Bu özelliğin kendisini eklemenin en kolay yolu, WP’de Google Fonts Ekran Takas eklentisini kullanmaktır. Ancak, bu eklentinin yalnızca Google yazı tipine çalıştığını ve URL’ye otomatik olarak bir takas ekranı özelliği eklediğini unutmayın. Yazı tiplerini yerel olarak gönderiyorsanız, tüm yazı tipi dosyalarınızı bulmak ve değiştirmek için Dize Konumlandırıcı eklentisini kullanabilirsiniz. WP’de yazı tipi stili sayfasını açmanız ve değiştirmeniz gerekir. Veya, takas yazı tipi özelliği ekleyerek yazı tiplerini sizin için otomatik olarak optimize edecek bir eklenti gibi bir önbellek eklentisi kullanabilirsiniz. Pramuian yazı tipi Yazı tiplerini yerel olarak yayınladığınızdan emin olmak için, daha sonra yazı tiplerinizi önce Rocket WP gibi eklentilerle yükleyebilirsiniz.
PRA* Parti Kaynak Talimatları
Permatters
Bu eklentiyi kullanamıyorsanız, önce header.php dosyasını düzenleyerek yazı tipini yükleyebilirsiniz. Önceki yazı tipini yükledikten sonra sitenizi iyice test ettiğinizden emin olun. Çok fazla yazı tipi yüklemek web sitenizi tehlikeye atabilir. Ana arka uç fırsatları gibi, önceki WordPress sitenizin bir yedeklemesini yapmanızı öneririz. CSS gönderiminin optimizasyonunu devre dışı bırakın CSS teslimatını optimize etmek veya Litespeed önbelleğiyle eşzamansız CSS yüklemek için WP roketini kullanırsanız, stil olmadan bir içerik flaşlarına neden olabilir (FoUC). CLS puanınızı artırmak istiyorsanız, bu seçeneği her eklentide devre dışı bırakmalısınız. Veya kritik CSS olarak bilinen şeyi geriye doğru düzenleyebilirsiniz. Bu, kritik yol CSS jeneratörleri gibi cihazları kullanarak kritik bir rezerv komut dosyası yapmayı içerir. Nöbeti engelleyen komut dosyasının kaldırılması, CLS puanınızı da azaltabilir. CLS’nizi önce etkinleştirilen CSS nakliyesinin optimizasyonu ile test etmenizi ve ardından karşılaştırmak için devre dışı bıraktığınızda test etmenizi öneririz. Animasyonu devre dışı bırak animasyon kullanıyorsanız, web siteniz hücresel sürümü için devre dışı bırakmalısınız, çünkü animasyon web sitenizin yükleme süresini engelleyebilir. Web siteniz için bir animasyon olması konusunda ısrar ediyorsanız, CSS Dönüşümü ve Çeviri seçeneğini kullanmalısınız. Veya Happy Addons Elementor eklentisini kullanabilirsiniz. Bu, düzende bir kaymaya neden olmadan öğeleri canlandırmanıza olanak tanır.
