Kümülatif düzen kayması tam olarak nedir?
Mayıs 2020’nin sonunda Google, web sitesi sayfasında kullanıcı deneyimini geliştirme girişimini duyurdu. Önümüzdeki aylarda kullanıcı deneyimi, Google arama motorunda bir sıralama faktörü olarak hareket etmeye başlayacaktır. Bu yeni geliştirme doğrultusunda, Google PagesPeed Insights Aracı, kümülatif düzen kayması adı verilen yeni bir metrik ekledi. Bu kılavuzda, kümülatif bir düzen kaymasının ne olduğunu, puanınızı neyin etkileyebileceğini ve kümülatif düzeni değiştiren düşük puanın tam olarak ne olduğunu tartışacağız.
Kümülatif düzen kayması nedir? Kümülatif düzen kaymasının tam olarak ne olduğunu anlamak için gerçek terimi açıklayalım. Düzen kayması, yüklendikten sonra web sayfalarının hareketini ifade eder. Google tarafından verilen örnek, bir makale okuyorsanız, yarı okuduğunuzda herhangi bir metin veya öğenin aniden değişmesini istemediğinizdir, çünkü yer kaybedecek ve nerede olduğunuzu öğrenmeniz gerekir. Başka bir örnek, düğmeyi tıklayacak ve aniden bir inç ekranda kaydıracaksanız, düğmeye tıklamayı özleyerek kötü bir kullanıcı deneyimi üreteceksiniz.
Bu, Google tarafından yapılan olumsuz kullanıcı deneyimlerine neden olan düzende iyi bir örnektir: Web sayfasında talep edilmeyen öğelerin ve düğmelerin hareketi gerçekten oldukça yaygındır ve bugün internette keşfederken deneyimleyebilirsiniz. Düzendeki değişim zayıf kullanıcı deneyimi üretir ve Google PagePeed Insights’taki kümülatif bir düzen kaymasında yüksek puan elde etmek için mümkün olduğunca en aza indirir. Artık düzende bir değişimin ne olduğunu ve kullanıcının deneyimine neden zarar verebileceğini anladığımıza göre, kümülatif bir düzen kaymasının ne olduğunu anlayalım. Kullanıcı girişinden sonra 500 MD’de gerçekleşmeyen kaydırma. Bu, görünüm alanında ne kadar içeriğin değiştiği ve etkilenen elemanın mesafesi değiştiği görülebilir. Açıklığa kavuşturmak için Google, sayfadaki hareketleri değiştirecek ve ardından kaç bireysel öğenin değiştiğini ölçecek. Bu, her beklenmedik vardiya için bir düzen vardiya puanı ile sonuçlanır. Google’ın bu metriği gerçekten nasıl hesapladığı konusunda teknik olmak istiyorsak, bu denklemi kullanarak:
Katman kayması skoru = darbe fraksiyonu * Her bir fraksiyonun mesafe fraksiyonu, görüntülerin boyutuna göre elemanların hareketine göre hesaplanır. Daha fazla bilgi edinmek istiyorsanız, Google’ın CLS hakkındaki belgelerini buradan okuyabilirsiniz https://web.dev/cls/. Unutmayın, cep telefonu ekranı daha küçük olduğundan, düzendeki değişiklikler genellikle cep telefonunu etkiler. Google ilk hücresel gündemi gerçekten teşvik ettiğinden, insanlar mobil cihazlarda tam bir kümülatif düzen kayması almanın çok önemli olduğunu umabilir, böylece Google size bir puan verir. Google her bir öğe için bir kaydırma puanı verir ve daha sonra her şeyi ekler. Kümülatif Düzen Değişimi Alın. Aşağıda, Google’ın kümülatif düzen kaymasını nasıl hesapladığını açıklayan iyi bir grafik bulunmaktadır.
Kümülatif Düzen Değişimi Skoru CL’leri yazdırırken, herhangi bir puan 0.1’in altında, 0.25’in üzerindeki puanlar kötüdür.
Düzendeki değişikliklerin her zaman kötü olmadığını anlamak için iyi bir düzen değişimi önemlidir. Açıkçası, kullanıcı girişi olmadan ekranda bir şey hareket ederse, web sitenizdeki okumalarını veya deneyimlerini rahatsız ederse, o zaman kötüdür. Ancak, kullanıcı tarafından düzen değişiklikleri başlatılırsa (kullanıcı düğmeyi tıkladıktan sonra sayfanın üstünden kayan bıçakları yükleme gibi, içeriği ekranın altına iterken düzende bir kaymaya neden olur), o zaman Kullanıcının deneyimi ile gerçekten yararlı olabilir, çünkü onlara ilgili bilgiler verir.
Bu, Google tarafından yapılan olumsuz kullanıcı deneyimlerine neden olan düzende iyi bir örnektir: Web sayfasında talep edilmeyen öğelerin ve düğmelerin hareketi gerçekten oldukça yaygındır ve bugün internette keşfederken deneyimleyebilirsiniz. Düzendeki değişim zayıf kullanıcı deneyimi üretir ve Google PagePeed Insights’taki kümülatif bir düzen kaymasında yüksek puan elde etmek için mümkün olduğunca en aza indirir. Artık düzende bir değişimin ne olduğunu ve kullanıcının deneyimine neden zarar verebileceğini anladığımıza göre, kümülatif bir düzen kaymasının ne olduğunu anlayalım. Kullanıcı girişinden sonra 500 MD’de gerçekleşmeyen kaydırma. Bu, görünüm alanında ne kadar içeriğin değiştiği ve etkilenen elemanın mesafesi değiştiği görülebilir. Açıklığa kavuşturmak için Google, sayfadaki hareketleri değiştirecek ve ardından kaç bireysel öğenin değiştiğini ölçecek. Bu, her beklenmedik vardiya için bir düzen vardiya puanı ile sonuçlanır. Google’ın bu metriği gerçekten nasıl hesapladığı konusunda teknik olmak istiyorsak, bu denklemi kullanarak:
Katman kayması skoru = darbe fraksiyonu * Her bir fraksiyonun mesafe fraksiyonu, görüntülerin boyutuna göre elemanların hareketine göre hesaplanır. Daha fazla bilgi edinmek istiyorsanız, Google’ın CLS hakkındaki belgelerini buradan okuyabilirsiniz https://web.dev/cls/. Unutmayın, cep telefonu ekranı daha küçük olduğundan, düzendeki değişiklikler genellikle cep telefonunu etkiler. Google ilk hücresel gündemi gerçekten teşvik ettiğinden, insanlar mobil cihazlarda tam bir kümülatif düzen kayması almanın çok önemli olduğunu umabilir, böylece Google size bir puan verir. Google her bir öğe için bir kaydırma puanı verir ve daha sonra her şeyi ekler. Kümülatif Düzen Değişimi Alın. Aşağıda, Google’ın kümülatif düzen kaymasını nasıl hesapladığını açıklayan iyi bir grafik bulunmaktadır.
Kümülatif Düzen Değişimi Skoru CL’leri yazdırırken, herhangi bir puan 0.1’in altında, 0.25’in üzerindeki puanlar kötüdür.
Düzendeki değişikliklerin her zaman kötü olmadığını anlamak için iyi bir düzen değişimi önemlidir. Açıkçası, kullanıcı girişi olmadan ekranda bir şey hareket ederse, web sitenizdeki okumalarını veya deneyimlerini rahatsız ederse, o zaman kötüdür. Ancak, kullanıcı tarafından düzen değişiklikleri başlatılırsa (kullanıcı düğmeyi tıkladıktan sonra sayfanın üstünden kayan bıçakları yükleme gibi, içeriği ekranın altına iterken düzende bir kaymaya neden olur), o zaman Kullanıcının deneyimi ile gerçekten yararlı olabilir, çünkü onlara ilgili bilgiler verir.
Google bunu anlar ve kullanıcı girişinden sonra 0,5 saniye içinde meydana gelen düzendeki değişiklikleri hariç tutar. Örneğimize geri dönersek, kullanıcı sayfadaki düğmeyi tıklarsa, yükleme çubuğumuzun görüntülemek için yarım saniye vardır. O yarım saniyede görüntülenirse, bu düzenin kayması puanımızdan çıkarılır. 0,5 saniyelik çok önemli hız ve duyarlılığı not edilmesi gereken önemlidir. Yavaş performans gösteren bir web siteniz varsa, kullanıcınız düzeni değiştirse bile, ancak bu 0,5 saniyede gerçekleşmez, bunun için cezalandırılırsınız. Bu, önümüzdeki aylarda, web sitenizin hızını optimize etmenin temelde Google PagesPeed’de iyi bir kümülatif düzen kayması puanı puanı almak için önemli olduğu anlamına gelir. Animasyon ve CLS merak ediyor olabilirsiniz, ama animasyon ne olacak? Animasyon, web sitesine doğru girilirse kullanıcı deneyimini kesinlikle geliştirebilir. Bir kez daha Google bunu anlıyor, ancak bu sefer nasıl uygulanacağı konusunda daha sınırlayıcı bir kılavuz sağlıyor. Google Devletleri:
Yüksek ve geniş özelliği değiştirmek yerine, Dönüşüm: Scale () kullanın.
Elemanları taşımak için, üst, sağ veya sol özellikleri değiştirmekten kaçının ve bunun yerine dönüşüm: tercüme () kullanın.
Bu kılavuz bölümü, kümülatif bir düzen kaymasının ne olduğunu, kümülatif düzen kaymasında iyi bir puan ve bu yeni metriği Google’ın sayfalarında hesaplamak için kullanılan faktörleri yanıtlamış olmalıdır.
Şimdi özellikle yüksek bir kümülatif düzen kaydırma puanı elde etmek için ne yapmanız gerektiği hakkında konuşalım. Kümülatif Düzen Değişimi ile Yüksek Skorun Nasıl Alınacağını Anlamak için CLS ile Yüksek Skor Nasıl Alınırsa, öncelikle kötü puanların ana nedenini anlamamız gerekir. Bu nedeni belirledikten sonra, web sitenizi çalıştırabilir ve gerekli iyileştirmeleri yapabilirsiniz. Bu kötü kümülatif düzen kayması puanının genel nedenini iyileştirin, kullanıcınızın deneyimini, sayfa zevkini ve değerlendirmesini derhal iyileştirecektir. Bu bölümü okumak istemiyorsanız, yüksek puan almak için yapabileceğiniz en önemli şey PageSpeed’deki Düzen Değişimi Kümülatifinde Metrik Değişme ile şu şekildedir: Web sayfanızdaki her şey için görünüm alanındaki alan rezervleri. Boyutsuz Görüntüleri Geliştirme Kontrol etmek istediğiniz ilk şey boyutsuz bir görüntüdür. Görüntünün genişliğini ve yüksekliğini belirlemezseniz, sayfanız yüklendiğinde, tarayıcı her görüntü için herhangi bir alan tahsis etmez. Görüntünüz yüklendikten sonra, CSS ve HTML’den çok daha büyük bir dosya boyutuna sahip olduğu için daha yavaş zaman alır.
Bu örnek grafikte, sayfa önce tüm metni içerir.Görüntü daha sonra, metnin ortasında yayınlanır, bu da içeriğin bölünmesine ve yukarı ve aşağı itilmesine neden olur, çünkü resme yer vermek gerekir.Bu, düzendeki kayma hakkındaki ders kitaplarının tanımıdır ve kullanıcı girişinden kaynaklanmadığı için kümülatif düzen kaydırma puanınız üzerinde olumsuz bir etkisi olacaktır.Metnin görüntülerden daha hızlı yükleneceği gerçeğini değiştiremezsiniz, ancak görüntü yüklenmeden önce bile bir arıza metnine girebilirsiniz.Görüntü yüklemek için yer varsa, içeriği sayfada yukarı ve aşağı itmeniz gerekmez.
Not: Çoğu WordPress uygulamasıyla, görüntünün genişliği ve yüksekliği belirlenir/en boy oranı ve düzende değişikliklere neden olmaz. WP kullanmıyorsanız, görüntünün neden olduğu düzendeki değişimden nasıl kurtulacağını öğrenmeye devam edin. Bunu geniş ve yükseklik etiketlerini belirlemek için CSS kullanarak yapabilirsiniz. Bununla birlikte, bu duyarlı tasarım için zararlı olabilir. İyi bir alternatif, sayfa yüklemesindeki görüntünün genişliğini ve yüksekliğini hesaplamak için tarayıcı tarafından kullanılacak olan yönlerin oranını belirlemektir. Bu, görüntünün yüklenecek bir yeri olacağı ve düzende değişikliklere neden olmayacağı anlamına gelir. CSS kullanarak görüntünüz için standart en boy oranını belirleyin: görüntü {en boy oranı: attr (genişlik) / attr (yükseklik); } Bununla tek yapmanız gereken bir boyut (yükseklik veya genişlik) ve diğer boyutlar en boy oranına göre hesaplanacaktır. Buna ek olarak, bir görüntü bir kap içine yerleştirirseniz, bunu sorguya göre ölçebilirsiniz: Image {Height: Automatic; Genişlik:%100; } Yavaş yükleme görüntülerinin düzende kaymaya neden olmamasını sağlamanın birçok özel yolu vardır, ancak yukarıda belirtilen CSS iyi bir başlangıç noktasıdır. Bir kez daha, çoğu WordPress uygulamasıyla, görüntünün genişliği ve yüksekliği belirlenir ve düzende bir kaymaya neden olmaz. Iframe’ye odaklanın ve
Iframe reklamları ve reklamlar çalışmaları görüntülere çok benzer ve sökmek için gereken alanı tahsis etmek için tarayıcının genişliğini ve yüksekliğini belirlemeniz gerekir.Genişliği ve yüksekliği belirlemezseniz, sayfanın içeriğinden ve yapısından daha yavaş içeren bu öğe düzende değişikliklere neden olur.Bir adım önde, dinamik reklamcılık, standart bir formu korumaya zorlamadığınız sürece boyutlarını değiştirebilir.Temel olarak, gerçek sayfadan daha yavaş veya dinamik olarak değişen herhangi bir sayfa öğesi için, yapmanız gereken tek şey, içeriği yoldan dışarı itmemek için CSS aracılığıyla onun için yer sipariş etmektir.Element yüklemek için yeterli alana sahip olduğu sürece, CLS için endişelenmenize gerek yoktur.Daha hızlı yükleme yazı tipleri (doğal olarak gerekli bir fout &
FOIT) kullanılamayan metin yanıp sönmeleri ve görünür olmayan gösterişli metin hem düzende bir kaymaya neden olur hem de toplu yerleşim kaydırma puanınıza zarar verir. Bunun nedeni, her harf ve dökülmenin varsayılan tarayıcı yazı tipi ile web sitenizde kullanmayı seçtiğiniz yazı tipi arasında farklı olmasıdır. Yazı tipiniz yavaşça yüklenirse, gerçekleştiğinde, sayfa boyunca düzende bir kaymaya neden olur (çünkü daha fazla alan gerektirir). Bunu bilmeniz gereken en önemli şey, bunu mümkün olduğunca en aza indirebilmenizdir, ancak yazı tiplerinin yüklenmesinin neden olduğu düzendeki değişimi asla ortadan kaldıramazsınız. Bunun nedeni, yazı tipinin markanız için gerekli olmasıdır (sadece Times New Roman’ı kullanamazsınız) ve yüklediklerinde sayfa düzenini değiştirecektir. Bir yazı tipi ön planı yaparsanız (rel = preload), yazı tipi oluştururken sayfanın yüklenmesi sırasına göre daha yüksek itilir. Diğer unsurlardan önce yüklendikleri için, düzende kayma çok en aza indirildi. Bu nedenle, yazı tipleriyle başa çıkmanın en iyi yolu önce yüklemek ve yazı tipi ekranını kullanmaktır: isteğe bağlı. Oyun Adı: Yazı Tipi Yazı Tipi = Daha İyi Kümülatif Düzen Puanları. Mükemmel animasyon Düşünmeniz gereken son şey animasyon. Google, CSS animasyonunda Dönüştürme Özellikleri (Ölçek) kullanmayı önerir, bu nedenle gelecekte bununla ilgili başka blog yayınları yazacağız. Tüm animasyonları ve bunların düzen üzerindeki etkilerini görmek istiyorsanız, Google tarafından yapılan bu pratik kılavuzu açın: https://csstiggers.com/
Elemanları taşımak için, üst, sağ veya sol özellikleri değiştirmekten kaçının ve bunun yerine dönüşüm: tercüme () kullanın.
Bu kılavuz bölümü, kümülatif bir düzen kaymasının ne olduğunu, kümülatif düzen kaymasında iyi bir puan ve bu yeni metriği Google’ın sayfalarında hesaplamak için kullanılan faktörleri yanıtlamış olmalıdır.
Şimdi özellikle yüksek bir kümülatif düzen kaydırma puanı elde etmek için ne yapmanız gerektiği hakkında konuşalım. Kümülatif Düzen Değişimi ile Yüksek Skorun Nasıl Alınacağını Anlamak için CLS ile Yüksek Skor Nasıl Alınırsa, öncelikle kötü puanların ana nedenini anlamamız gerekir. Bu nedeni belirledikten sonra, web sitenizi çalıştırabilir ve gerekli iyileştirmeleri yapabilirsiniz. Bu kötü kümülatif düzen kayması puanının genel nedenini iyileştirin, kullanıcınızın deneyimini, sayfa zevkini ve değerlendirmesini derhal iyileştirecektir. Bu bölümü okumak istemiyorsanız, yüksek puan almak için yapabileceğiniz en önemli şey PageSpeed’deki Düzen Değişimi Kümülatifinde Metrik Değişme ile şu şekildedir: Web sayfanızdaki her şey için görünüm alanındaki alan rezervleri. Boyutsuz Görüntüleri Geliştirme Kontrol etmek istediğiniz ilk şey boyutsuz bir görüntüdür. Görüntünün genişliğini ve yüksekliğini belirlemezseniz, sayfanız yüklendiğinde, tarayıcı her görüntü için herhangi bir alan tahsis etmez. Görüntünüz yüklendikten sonra, CSS ve HTML’den çok daha büyük bir dosya boyutuna sahip olduğu için daha yavaş zaman alır.
Bu örnek grafikte, sayfa önce tüm metni içerir.Görüntü daha sonra, metnin ortasında yayınlanır, bu da içeriğin bölünmesine ve yukarı ve aşağı itilmesine neden olur, çünkü resme yer vermek gerekir.Bu, düzendeki kayma hakkındaki ders kitaplarının tanımıdır ve kullanıcı girişinden kaynaklanmadığı için kümülatif düzen kaydırma puanınız üzerinde olumsuz bir etkisi olacaktır.Metnin görüntülerden daha hızlı yükleneceği gerçeğini değiştiremezsiniz, ancak görüntü yüklenmeden önce bile bir arıza metnine girebilirsiniz.Görüntü yüklemek için yer varsa, içeriği sayfada yukarı ve aşağı itmeniz gerekmez.
Not: Çoğu WordPress uygulamasıyla, görüntünün genişliği ve yüksekliği belirlenir/en boy oranı ve düzende değişikliklere neden olmaz. WP kullanmıyorsanız, görüntünün neden olduğu düzendeki değişimden nasıl kurtulacağını öğrenmeye devam edin. Bunu geniş ve yükseklik etiketlerini belirlemek için CSS kullanarak yapabilirsiniz. Bununla birlikte, bu duyarlı tasarım için zararlı olabilir. İyi bir alternatif, sayfa yüklemesindeki görüntünün genişliğini ve yüksekliğini hesaplamak için tarayıcı tarafından kullanılacak olan yönlerin oranını belirlemektir. Bu, görüntünün yüklenecek bir yeri olacağı ve düzende değişikliklere neden olmayacağı anlamına gelir. CSS kullanarak görüntünüz için standart en boy oranını belirleyin: görüntü {en boy oranı: attr (genişlik) / attr (yükseklik); } Bununla tek yapmanız gereken bir boyut (yükseklik veya genişlik) ve diğer boyutlar en boy oranına göre hesaplanacaktır. Buna ek olarak, bir görüntü bir kap içine yerleştirirseniz, bunu sorguya göre ölçebilirsiniz: Image {Height: Automatic; Genişlik:%100; } Yavaş yükleme görüntülerinin düzende kaymaya neden olmamasını sağlamanın birçok özel yolu vardır, ancak yukarıda belirtilen CSS iyi bir başlangıç noktasıdır. Bir kez daha, çoğu WordPress uygulamasıyla, görüntünün genişliği ve yüksekliği belirlenir ve düzende bir kaymaya neden olmaz. Iframe’ye odaklanın ve
Iframe reklamları ve reklamlar çalışmaları görüntülere çok benzer ve sökmek için gereken alanı tahsis etmek için tarayıcının genişliğini ve yüksekliğini belirlemeniz gerekir.Genişliği ve yüksekliği belirlemezseniz, sayfanın içeriğinden ve yapısından daha yavaş içeren bu öğe düzende değişikliklere neden olur.Bir adım önde, dinamik reklamcılık, standart bir formu korumaya zorlamadığınız sürece boyutlarını değiştirebilir.Temel olarak, gerçek sayfadan daha yavaş veya dinamik olarak değişen herhangi bir sayfa öğesi için, yapmanız gereken tek şey, içeriği yoldan dışarı itmemek için CSS aracılığıyla onun için yer sipariş etmektir.Element yüklemek için yeterli alana sahip olduğu sürece, CLS için endişelenmenize gerek yoktur.Daha hızlı yükleme yazı tipleri (doğal olarak gerekli bir fout &
FOIT) kullanılamayan metin yanıp sönmeleri ve görünür olmayan gösterişli metin hem düzende bir kaymaya neden olur hem de toplu yerleşim kaydırma puanınıza zarar verir. Bunun nedeni, her harf ve dökülmenin varsayılan tarayıcı yazı tipi ile web sitenizde kullanmayı seçtiğiniz yazı tipi arasında farklı olmasıdır. Yazı tipiniz yavaşça yüklenirse, gerçekleştiğinde, sayfa boyunca düzende bir kaymaya neden olur (çünkü daha fazla alan gerektirir). Bunu bilmeniz gereken en önemli şey, bunu mümkün olduğunca en aza indirebilmenizdir, ancak yazı tiplerinin yüklenmesinin neden olduğu düzendeki değişimi asla ortadan kaldıramazsınız. Bunun nedeni, yazı tipinin markanız için gerekli olmasıdır (sadece Times New Roman’ı kullanamazsınız) ve yüklediklerinde sayfa düzenini değiştirecektir. Bir yazı tipi ön planı yaparsanız (rel = preload), yazı tipi oluştururken sayfanın yüklenmesi sırasına göre daha yüksek itilir. Diğer unsurlardan önce yüklendikleri için, düzende kayma çok en aza indirildi. Bu nedenle, yazı tipleriyle başa çıkmanın en iyi yolu önce yüklemek ve yazı tipi ekranını kullanmaktır: isteğe bağlı. Oyun Adı: Yazı Tipi Yazı Tipi = Daha İyi Kümülatif Düzen Puanları. Mükemmel animasyon Düşünmeniz gereken son şey animasyon. Google, CSS animasyonunda Dönüştürme Özellikleri (Ölçek) kullanmayı önerir, bu nedenle gelecekte bununla ilgili başka blog yayınları yazacağız. Tüm animasyonları ve bunların düzen üzerindeki etkilerini görmek istiyorsanız, Google tarafından yapılan bu pratik kılavuzu açın: https://csstiggers.com/
Özet Öyleyse bu blog yazısında belirtilen her şeyi özetleyelim. İlk şey, kümülatif düzen kaymasının sayfadaki düzendeki tüm değişikliklerin toplam puanı olmasıdır. Düzendeki değişim, öğenin sayfada istenmeyen içerik hareketlerine neden olduğu zamandır. Kötü puanlar 0.25’in üzerinde bir şeydir, yani sayfanızdaki düzende birçok değişiklik vardır ve kullanıcı deneyimi bundan olumsuz etkilenir. Aynı zamanda Google, kullanıcı tarafından tetiklenen düzendeki değişiklikleri belirleyebilir ve değişiklik kullanıcı girişinin yarım saniyesinde gerçekleştiği sürece bu puandan hariç tutabilir. Kümülatif bir düzen vardiyası puanının arttırılması önemlidir, çünkü sadece daha iyi bir sayfa hız puanına yol açmakla kalmaz, aynı zamanda önümüzdeki aylarda Google bunu sayfa kullanıcılarının deneyimini saymalarına yardımcı olmak için kullanacaktır. Kullanıcı deneyimi yakında Google’ın web siteniz için sıralamasını ve arama makinelerinin yerleştirilmesini etkileyecektir, bu nedenle bunu şimdi ele almak önemlidir. Asıl şey şu:
