WordPress’te Kümülatif Düzen Değişimi Nasıl Optimize Edilir (CLS) – Çekirdek Web Vitalleri
WordPress’te kötü bir kümülatif düzende bir değişimle kavga mı ediyorsunuz? Kümülatif düzen kayması veya CLS olarak kısaltılmış, Google’ın yeni web Vitals projesindeki üç metrikten biridir. Sitenizde iyi kullanıcı deneyiminin bir ölçüsü olarak genel olarak, Google, temel web verilerini Mayıs 2021’den itibaren bir sıralama faktörü olarak kullanmaya başlayacaklarını açıkladı. Yani, kümülatif düzen kaydırma puanınız önerilen Google aralığına ulaşmazsa , Google’ın eşiğinin altında olabilmek ve herhangi bir sorundan kaçınmak için şimdi düzeltmeniz gerekir (ve ayrıca ziyaretçileriniz için daha iyi bir deneyim yaratmalıdır).
Bu yazıda, kümülatif bir düzen kaymasının ne olduğunu ve WordPress’inize nasıl bağlanacağınızı açıklayacağım. Ardından, kümülatif düzen kaydırma puanınızı artırmak için bazı özel WordPress ipuçlarını paylaşacağım. WordPress’teki kümülatif düzende bir değişim nedir? Hiç yayıncı web sitesinde (örneğin haberler) makaleleri okudunuz mu ve yeni reklamlar yayınlandığında makale içeriği aşağı itilmeye devam ediyor mu? Sadece sinir bozucu değil, bu kümülatif bir düzen kaymasının mükemmel bir örneğidir! Kümülatif düzen kayması, sitenizin içeriğinin yüklendiğinde “kaydırıldığı” zamandır. Kendi hayatınızda deneyimlemiş olabileceğiniz gibi, bu çok can sıkıcıdır, bu yüzden Google Web yöneticisini dikkat etmeye ve bu metriği geliştirmeye teşvik eder.
Kümülatif düzen kayması aynı zamanda Core Web Vitals Google Girişimi’ndeki üç metrikten biridir – Core Web Vitals ve WordPress hakkında daha fazla bilgi edinin. İyi bir kümülatif düzen vardiyası puanı nedir? Sitenizin kümülatif düzenindeki değişimi anlamak için Google üç olası değer sağlar: iyi – 0,1’in altında
İyileştirilmesi gerekiyor – 0.1 ile 0.25 arasında
Kötü – 0.25’ten yüksek
Sitenizde hangi öğelerin değişimi nasıl bulunur, WordPress sitenizin kümülatif düzenindeki kaymayı artırmak için takip edilebilecek ipuçlarına geçmeye başlayalım.
Aşağıda bağlı makaleler
Ancak, puanınızı artırmadan önce, sorunun ne olduğunu teşhis etmeniz gerekir. Neyse ki, Google bunu PagePeed Insights aracılığıyla yapmayı kolaylaştırıyor. PageSpeed Insight Başlamak için Insight, PagePeed Insights ve Site URL’lerinizden birini, örneğin ana sayfanızdan birini analiz edin. En üstte, kümülatif düzen kaydırma puanınızın özetini göreceksiniz:
Bununla birlikte, sayfa içgörüler de daha derine inmenize ve “değişen” belirli unsurları bulmanıza olanak tanır. Bu analizi bulmak için, teşhis bölümüne gidin ve büyük bir düzen kaymasını önlemek için kılavuzu genişletin:
Portföy sitemin başlığının, düzenin kaymasına en büyük katkıda bulunduğunu görebilirsiniz (hala oldukça küçük olmasına rağmen).Hücresel ve masaüstü sonuçlarının analizini gördüğünüzden emin olun.Örneğin, sitemin hücresel sonuçlar gördüğümde Google tarafından işaretlenmiş üç öğesi olmasına rağmen, masaüstü sonuçlarında işaretlenmiş hiçbir öğe yok.Benzer bir şey görebilirsiniz veya hücresel ve masaüstü için farklı kaydırma öğelerinden oluşan bir koleksiyonunuz olabilir.Düzenlerin kaymasını görselleştirmenin başka bir yolu, sitenizin içeriğinin nasıl değiştiğini görmenin başka bir yolu, yapay bağlantınızı yavaşlatmak için bir Chrome geliştiricisi kullanmaktır (bu da subtonly kaydırılmış içeriği tespit etmeyi kolaylaştırır).Chrome geliştiricisindeki doku sekmesini açın ve çok yavaş özel değeri ayarlamak için çevrimiçi gerililer kullanın.
Ardından, sitenizi yeniden yükleyin ve yüklendiğinde içeriğinizin nasıl değiştiğini daha net bir şekilde görebilirsiniz. Neyin değiştiğini bildikten sonra, sorunu çözme çabalarınızı odaklayabilirsiniz. Bununla birlikte, site genelinde sorunlardan kaçınmak için başvurmanız gereken genel kümülatif düzeni değiştiren en iyi uygulamalardan bazıları da vardır. WordPress’teki kümülatif düzen kaymasının nasıl iyileştirileceği maalesef, WordPress’teki en büyük içerik boyasını arttırmanın aksine, kümülatif düzen kayağınızı iyileştirmek biraz teknik olabilir. Bu iyileştirmelerin çoğu kod kazısını içerir. Ne yazık ki, kodu burada görmekten kaçınmak zor, ancak mümkünse bir eklenti çözümü eklemek için elimden geleni yapacağım. Site kodunuzdaki görüntünün boyutlarını ayarlamazsanız, görüntünün boyutlarını daima ayarlayın. yüklendiğinde içeriğinizin geri kalanının değişmesine neden olabilir.
Neyse ki, WordPress düzenleyicisi aracılığıyla resim eklerseniz, WordPress bunu otomatik olarak sizin için yapar (ve ayrıca SRCSET ile duyarlı görüntüler ayarlar). Ancak, kod üzerinden sitenize manuel olarak resim eklerseniz, her zaman boyutları eklediğinizden emin olmanız gerekir. HTML görüntüsünde yüksek ve geniş özellikleri göreceksiniz. Örneğin:
Her zaman aynı görüntü ile aynı boyutları belirleyin, ayrıca kullandığınız her gömme/iframe için boyutları ayarladığınızdan emin olmak istersiniz. Örneğin, YouTube videolarını veya Google Haritaları gömüyorsanız, yüksekliği ve genişliği belirlediğinizden emin olun. Ayrıca, genel olarak performans için iyi bir uygulama olan gömme işleminden önce yer tutucuları yüklemeyi de düşünebilirsiniz. Seman YouTube’u yer tutucu görüntülerle değiştirmenize izin veren birçok çözüm bulabilirsiniz (kullanıcı video oynamak için tıklayana kadar). Bazı iyi seçenekler WP Rocket (incelememiz) veya Rocket WP ekibinden ücretsiz tembel yük eklentisidir.
Reklam reklamcılığı için uzay rezervleri temel olarak sadece diğer gömme türleridir, ancak reklamcılık kümülatif bir düzen kaymasının en büyük katkıda bulunanlarından biri olduğu için özellikle belirtilmeyi hak ederler. Daha önce de belirttiğim gibi, geç kalmış reklamlar nedeniyle içeriği yukarı ve aşağı atlamaya devam eden bir sitede olduğunuzdan eminim. Buradaki çözüm, site kodunuzda reklamınız için alan sipariş etmektir. Örneğin, yanınızda 160×600 gökdelen görüntülemek istersiniz. Sadece reklam kodunu doğrudan eklemek yerine, reklam boyutlarıyla
içine yerleştirebilirsiniz. Bu şekilde, reklam içeriği yüklenmemiş olsa bile alan mevcuttur. Reklam içeriği yüklendiğinde, herhangi bir değişikliğe neden olmaz.
Ayrıca, ziyaretçinin görüş alanının tepesine yakın reklamlar yerleştirerek dikkatli olmalısınız, çünkü bu yerleşim düzende değişikliklere neden olma olasılığı en yüksektir. Düzendeki kayma ile büyük bir sorun yükleyerek sorunu geliştirin, özel yazı tipinizin nasıl yüklendiğidir. Örneğin, Google yazı tiplerinden veya Adobe yazı tiplerinden yazı tipleri kullanıyorsanız, düzende iki şekilde değişikliklere neden olabilir: Flit Metin Flash (FOIT)
Metinsiz metin flaşları (Fout)
Temel olarak, sorun, ziyaretçinin tarayıcısının özel yazı tipi yüklenmeden önce metni görüntülemeye çalışabilmesidir. Özel yazı tipi yüklendikten sonra, metin stilini günceller, bu da özel yazı tipinize stilsiz metinden değiştiğinde değişmesine neden olabilir.
Bu sorunun üstesinden gelmenin birkaç yolu vardır. Bir seçenek önce önemli bir yazı tipi dosyası yüklemektir. Bu, ziyaretçinin tarayıcısını FOIT/Fout olasılığını ortadan kaldıran yazı tipi dosyasını hemen indirmeye zorlar. Bununla birlikte, dikkatli olun, çünkü yalnızca en önemli kaynakları yüklersiniz (örneğin üst yarım içeriğiniz için yazı tipleri). Çok fazla önceden yükleme kullanmak sitenizi yavaşlatacaktır. Ekstra bölümdeki Ücretsiz Otomatik Otomatik Eklenti ile daha önce yayınlanacak yazı tipi varlıklarının bir listesini ayarlayabilirsiniz:
Google yazı tipi için, yazı tipleri yerel olarak yayınlamayı ve böyle bir erken yapmayı da düşünebilirsiniz. Bunu, üst yarı yazı tipini otomatik olarak yüklemek için iyi bir özellik içeren ücretsiz bir OMGF eklentisi ile ayarlayabilirsiniz. Gerçekten kazmak istiyorsanız, Google’ın ön yüklemeyi Fonts-Display ile birleştirme konusunda iyi bir makalesi var:
Yazı tipi yüklemenizi tamamen optimize etmek ve düzende kaymayı önlemek için isteğe bağlı. Ve gerçekten sorunlardan kaçınmak istiyorsanız, birçok sitem için yaptığım bir sistem yazı tipi yığını kullanmayı düşünün. Bu sadece yazı tipi yükleme sorununu çözmekle kalmaz, aynı zamanda HTTP isteklerinin sayısını da azaltır ve sitenizi hızlandırır. GeneratePress gibi bazı temalar, bir sistem yazı tipi yığını kullanmayı çok kolaylaştırır. Bununla birlikte, zayıflık, stil/tasarım açısından çok daha az esnekliğe sahip olduğunuz açıktır. Bir e -posta katılım formu, ilgili içerik, GDPR bildirimi vb. Gibi şeyler için içerik dinamik olarak girerseniz dinamik içerik enjekte ederek dikkatli olun. Genel olarak, burada iyi bir uygulama, içerik kullanıcı etkileşiminden gelmedikçe (örneğin kullanıcı düğmeyi tıklatır) mevcut içeriğin üzerindeki dinamik içeriği asla girmez. Örneğin, bazı CTA öğelerini dinamik olarak enjekte edecekseniz, üstte veya ortada değil, blog yayınınızın altına koymaya çalışın. WordPress Kümülatif Düzen Değiştirme Skorunuzu bugün artırın Bu yazıda ipuçlarıyla, WordPress Kümülatif Düzen Değişimi (CLS) puanınızı artırabilmeniz ve Google’dan iyi olabilmeniz gerekir. Tabii ki, kümülatif düzen kayması temel web verilerindeki üç metrikten sadece biridir – ayrıca diğer metriklere de dikkat etmeniz gerekir.
