Kümülatif Düzen Kayması (CLS): Nedir ve Web Sitenizi Bunun İçin Nasıl Optimize Edersiniz?

Şunu hayal edin: Bir web sitesi yüklüyorsunuz ve kullanıma hazır görünüyor. Makaleyi okumak için blog özellikli bir resme tıklarsınız ve aniden başka bir şey yüklendiğinden tüm sayfa değişir. Ve tamamen farklı bir şeye tıklarsınız ve hiç istemediğiniz bir sayfa yüklersiniz. Bu sorunu kendiniz yaşadıysanız, Kümülatif Düzen Kaymasının (CLS) bir sitenin Kullanıcı Deneyimini (UX) nasıl olumsuz etkileyebileceğini bilirsiniz.

Kümülatif Mizanpaj Kayması, bir sayfanın düzeninin yüklenirken ne kadar değiştiğine ilişkin bir terimdir ve bu makalede bunun ne anlama geldiğini biraz daha inceleyeceğiz. Size CLS'yi nasıl ölçeceğinizi göstereceğiz ve iyi bir puanın ne olduğunu açıklayacağız. Ardından, web sitenizin CLS puanını nasıl optimize edeceğinizi tartışacağız. Hadi çalışalım!

Youtube Kanalımıza Abone Olun

Kümülatif Düzen Kaydırma (CLS) Nedir?

Yüksek bir CLS puanının (Google'ın PageSpeed ​​Insights'ından 0,10'un üzerindeki herhangi bir şey anlamına gelir) neyi temsil ettiğini görsel bir örnekle göstermekten daha iyi bir yol yoktur. İşte sayfa yüklendikçe değişmeye devam eden bir düzene sahip bir web sitesi. Bunu yakalarken hiç kaydırma yapmadığımızı unutmayın. Görünüm alanımız aynı kalıyor, ancak sayfa kendi kendine büyük ölçüde değişiyor:

Bu web sitesini ziyaret eden bir kullanıcı olarak, gerçekten ne zaman yüklendiğinden emin olamayabilirsiniz. Bir habere tıklamayı deneyebilirsiniz, yalnızca sayfa düzeninin büyük ölçüde değişmesi için. Sonuç olarak yanlış sayfadasınız ve geri dönmek için zaman harcamanız gerekiyor. Sayfaya bağlı olarak, bu birden çok kez olabilir. Eğer öyleyse, sadece ayrılmanız için iyi bir olasılık var.

Kullanıcılarınız da öyle.

Bir web sitesi ne kadar karmaşıksa, CLS puanının yüksek olması o kadar olasıdır. İkonik Google ana sayfası gibi basit düzenlerde, çok az öğe içerdiğinden CLS yoktur:

Bu, tüm karmaşık web sitelerinin yüksek CLS puanlarına sahip olduğu anlamına gelmez. Örneğin Amazon'u düşünün. Kimse e-ticaret devinin basit bir web tasarımı kullandığını söyleyemez. Yine de, kataloğuna göz atarken görülecek düzen değişikliği çok az veya hiç yok.

Düzen kaymaları, tarayıcıların sayfa öğelerini eşzamansız olarak yükleme eğiliminde olmasından kaynaklanır. Daha da önemlisi, sayfanızda başlangıçta boyutları bilinmeyen medya öğeleri olabilir. Bu kombinasyon, tarayıcının, yükleme bitene kadar tek tek öğelerin ne kadar yer kaplayacağını bilmediği anlamına gelir. Bu nedenle ciddi düzen kayması.

CLS, çeşitli araçlar kullanılarak nesnel olarak ölçülebilmesi açısından ilginçtir, ancak aynı zamanda, her kullanıcının cihazının sitenizin düzeninin nasıl değişebileceğini etkileyebileceği için kullanıcı merkezlidir. Bu yönü kontrol edemeseniz de, mümkün olan en az etkiye sahip olması için kesinlikle önlem alabilirsiniz.

CLS, web sitenizin güçlü bir kullanıcı deneyimi (UX) sunup sunmadığını belirlemesine yardımcı olmak için Google'ın ölçtüğü üç Önemli Web Verisinden biridir. Diğer Önemli Web Verileri, optimize etmek için harcadığınız her türlü çabaya kesinlikle değecek İlk Giriş Gecikmesi (FID) ve En Büyük İçerikli Boyamadır (LCP).

CLS Nasıl Ölçülür?

Web sitenizin belirgin düzen değişiklikleri gösterip göstermediğini anlamak nispeten basittir. Öncelikle, web sitenize çeşitli cihazlardan erişmeyi denemenizi ve başkalarından da aynısını yapmalarını istemenizi öneririz. Bunu yaparken, sayfalar yüklenirken mizanpajın tutarlı kalıp kalmadığını gözlemleyebilirsiniz.

Muhtemelen bulacağınız şey, CLS deneyiminin çok değişken olabileceğidir . Bu yalnızca web sitenizin ne kadar optimize edildiğine değil, aynı zamanda hangi cihazı kullandığınıza da bağlıdır. Bunu akılda tutarak, web sitenizin CLS'sini ölçmek için en iyi araç PageSpeed ​​Insights'tır. Bu, doğrudan Google'ın Önemli Web Verileri ile bağlantılıdır, böylece CLS puanınızın Google'ın sitenizi nasıl gördüğünü nasıl etkilediğini doğrudan görebilirsiniz.

Bu hizmet, bir URL girmenize ve Google'ın topladığı son 28 günlük verilere dayanarak bunun için genel bir performans puanı almanıza olanak tanır. Bu puan, CLS, FCP ve LCP dahil olmak üzere çeşitli ölçümleri dikkate alır.

Bu test için, fark edilebilir CLS'si olmayan bir web sitesi seçtik. PageSpeed ​​Insights, güçlü bir CLS puanı ile ezici bir çoğunlukla olumlu sonuçlar verdiği için şüphelerimizi doğruladı.

PageSpeed ​​Insights'ın her puan için bir yüzde dökümü sunduğuna dikkat edin. Bu durumda, kullanıcıların %91'i test web sitesini yüklerken sıfır düzen kayması yaşadı. Ancak, kalan ziyaretçiler bir miktar düzen değişikliği yaşadılar.

CLS ve diğer Önemli Web Verileri söz konusu olduğunda bu beklenebilir. Kullanıcı deneyimi, hangi cihazdan ziyaret ettiklerine, internet bağlantılarına ve diğer birçok faktöre bağlı olarak büyük ölçüde değişecektir. CLS yaşayan hiçbir kullanıcıyı hesaba katmanın neredeyse hiçbir yolu yoktur, ancak yüzdeyi mümkün olduğunca düşük olacak şekilde optimize etmek için kesinlikle önlemler alabilirsiniz.

Saha verilerinin yanı sıra PageSpeed ​​Insights, Lab verileri olarak adlandırdığı şeyi de sunar. Bunlar, uzun bir süre boyunca toplanan veriler ( Saha verileri olarak kabul edilir) yerine tek bir teste dayalı performans puanlarıdır.

Testimizde sıfır CLS puanı aldık, bu da düzen değişikliği olmadığı anlamına geliyor. Bu özel test için. Şimdi bunu, bu kadar güçlü bir CLS puanı almayan başka bir web sitesiyle karşılaştıralım.

Google standartlarını karşılamak için CLS puanınızın 0,10'un altında olması gerekir. Bunun üzerindeki herhangi bir şey, düzende kötü bir kullanıcı deneyimine yol açan önemli, fark edilir değişiklikler olduğu anlamına gelir.

Mizanpaj Değişimlerinin Neden Olduğu Nasıl Belirlenir?

Web sitenizde hangi öğelerin mizanpaj değişikliklerine neden olduğunu belirlemek istiyorsanız, bunu Chrome Geliştirme Araçları'nı kullanarak yapabilirsiniz. Araçları (CTRL-SHIFT-I) açar ve Performans sekmesine atlarsanız, web'de gezinirken performans testlerini kaydedebilirsiniz.

Kaydı durdurduktan sonra Chrome Geliştirme Araçları, yükleme sürelerini, bireysel istekleri ve Önemli Web Verilerini gösteren bir zaman çizelgesi döndürür. Bu zaman çizelgesinden, Deneyim altında listelenen ayrı Düzen Kaydırma olaylarını seçebilirsiniz. Bu şekilde, hangi elementlere karşılık geldiklerini görebilirsiniz.

Hangi öğelerin düzen kaymalarına neden olduğunu öğrendikten sonra sorunu çözmek için adımlar atabilirsiniz. Bir sonraki bölümde bunun hakkında konuşacağız.

Web sitenizin Önemli Web Verilerini izlemek istiyorsanız, bir Google Arama Konsolu hesabı oluşturmanızı öneririz. Arama Motoru Optimizasyonu (SEO) söz konusu olduğunda bir nimet olan Search Console'dan performans ölçümlerini ve Önemli Web Verilerini izleyebileceksiniz. Ne olursa olsun, Search Console'u düzenli olarak izlemenin sizin yararınıza olduğunu düşünüyoruz, ancak izlediğiniz belirli bir metriğe sahip olmanın zararı olmaz.

CLS Puanınızı Nasıl Optimize Edebilirsiniz?

Genel olarak, yüksek CLS puanları söz konusu olduğunda iki büyük suçlu vardır: medya dosyaları ve reklamlar. Örneğin, çok yüksek çözünürlüklü bir resim dosyası yükler ancak yüksekliğini ve genişliğini belirtmezseniz, sayfanızın düzenini bozabilir.

Web sitesi performansı açısından, zaten görüntüleyeceğiniz kesin boyutlara sahip resimleri kullanmak en iyisidir. Bu şekilde, tarayıcının bunları uygun şekilde yeniden boyutlandırmak için işlem gücü (ve zaman) harcaması gerekmez. Ancak, bu her zaman mümkün değildir. Değilse, görüntülediğiniz her resim için genişlik ve yükseklik niteliklerini ayarlamalısınız. Bu şekilde, kullanıcının tarayıcısı görüntünün tam olarak nereye sığdığını bilecek ve düzeni mümkün olan son saniyede değiştirmesine gerek kalmayacak.

Bu özelliklerin HTML'de nasıl göründüğü aşağıda açıklanmıştır:

<img src="http://imageurl.com" width="120" height="90" alt="Image Alt Text">

WordPress kullanıyorsanız, bazı görüntü optimizasyon eklentileri, dosyaları yüklerken otomatik olarak yeniden boyutlandırabilir, bu da gerekli genişlik ve yükseklik özniteliklerinin ayarlanmasıyla ilgilenir.

Duyarlı görüntüler söz konusu olduğunda, genişlik ve yüksekliği manuel olarak bildirmek yerine CSS'ye güvenebilirsiniz. CSS, tarayıcılara görüntünün görüntünün yüzde kaçını alması gerektiğini söylemek için max-width özelliğini kullanmanızı sağlar:

img {
max-width: 90vw;
height: auto;
}

Bu örnekte, tarayıcıya görüntüyü, kullanıcının görüntüleme alanının %90'ını kaplayacak şekilde ölçeklendirmesini söylüyoruz. Aynı zamanda, height niteliğini auto olarak ayarladık, böylece tarayıcı, görüntünün yeni genişliğine ve en boy oranına göre ideal yüksekliği hesaplar.

Aynı temel ilkeler, görseller için geçerli olduğu gibi reklamlar için de geçerlidir. Genellikle iframe'lerle çalışırsınız ve bazen reklam ağları dinamik olarak boyutlandırılmış öğeler kullanır. Bu, sayfalarınızın düzenine zarar verebilir.

Reklam ağlarının web sitenizdeki reklamların ne kadar büyük olacağına karar vermesine izin vermek yerine, onlar için alanlar ayırabilirsiniz. Bu, reklam alanları için genişlik ve yükseklik niteliklerinin bildirilmesi ve yüklenmemeleri durumunda yedeklerin ayarlanması anlamına gelir, böylece boş alan bir düzen değişikliğine neden olmaz.

Hangi reklamların sunulduğundan bağımsız olarak, istediğiniz herhangi bir reklam kapsayıcı için aynı türde CSS ve satır içi stili kullanabilirsiniz.

Kümülatif Düzen Kaydırma (CLS) Sık Sorulan Sorular

CLS'yi kavramak, LCP ve FCP metriklerinden biraz daha karmaşık olabilir. Bunu akılda tutarak, herhangi bir önemli bilgiyi kaçırmadığınızdan emin olmak için, kullanıcıların CLS hakkında sahip olduğu bazı genel soruları gözden geçirelim.

CLS Web Sitemin Performansını Nasıl Etkiler?

Teoride, hala nispeten düşük bir CLS puanı alan çok hızlı bir web siteniz olabilir. Diğer Önemli Web Verilerinde olduğu gibi, CLS puanları genel site performansıyla doğrudan ilişkili olmayabilir. Siteniz hızla parlıyor olabilir, ancak yüklendikçe bir akordeon gibi açılır. O zaman bile, büyük yerleşim değişikliklerinin sitenin UX'i üzerinde kesinlikle olumsuz bir etkisi vardır. Google bunu inanılmaz derecede önemli buluyor. Bu nedenle Google bu veri noktasını bu kadar ağırlaştırıyor.

CLS, FCP veya LCP Puanlarından Daha mı Az Önemli?

Birçok kullanıcı FCP ve LCP puanlarına CLS'den daha fazla dikkat eder. Bunun nedeni, bu iki ölçümün web sitesi performansıyla ilişkilendirilmesinin daha kolay olmasıdır. FCP de özellikle kullanıcı merkezli bir metrik olsa da, CLS'nin çok sayıda kullanıcı arasında tutarlı bir şekilde ölçülmesi daha zordur.

Üç ölçümün tümü, Google Temel Web Verilerini oluşturur. Bu, bunlardan birini görmezden gelirseniz, alakalı arama sonuçlarında daha alt sıralarda yer alma riskiniz olduğu anlamına gelir. Sitenizin düşük bir CLS için optimize edildiğinden emin olmak, genellikle LCP ve FCP gibi site performansı üzerinde olumlu bir etkiden başka bir şeye sahip değildir. En Büyük İçerikli Boya, kullanıcı görür görmez ekrandan aşağı itilirse, bu hızlı yükleme süresi ne kadar faydalıdır?

İyi Bir CLS Puanı Nedir?

Rakamlarla Google, 0.10'ın altındaki herhangi bir şeyi iyi bir CLS puanı olarak görüyor. Ancak, doğru adımları atarsanız, 0 CLS puanı almak söz konusu değildir ve iyi optimize edilmiş web siteleri arasında nispeten normaldir. Bununla birlikte, düzenli olarak 0 puan alan sitelerin bile, değişim yaşayan kullanıcıların küçük bir yüzdesine sahip olabileceğini unutmayın. Bu sizin kontrolünüz dışındadır ve yapabileceğiniz tek şey, kullanıcılarınızın çoğunun 0 CLS'ye sahip olmasını hesaba katmaktır.

Çözüm

Web sitenizde güçlü bir UX sunmaya giden birçok faktör var. İdeal olarak hızlı yüklenmelidir. Etkileşimi kolay olmalıdır. Öğeler göründüğünde düzen konumunu değiştirmemelidir. Büyük düzen değişiklikleri, hayal kırıklığına ve yanlış tıklamalara yol açar. Bunlar daha yüksek bir hemen çıkma oranına yol açar. Hangi herhangi bir web sitesi için iyi değil.

CLS, Google'ın sitenizin genel kullanıcı deneyimini ölçmek için kullandığı Önemli Web Verilerinden biridir. Ve kullanıcılar, ilk etapta bir web sitenizin olmasının tüm nedenidir. Deneyimleri önceliklidir 1. Düşük bir CLS puanı (0,10'un altında) web sitenizin akıcı bir şekilde yüklenmesi gerektiği ve düzeninin her yönünün en baştan doğru yerde görüneceği anlamına gelir.

CLS veya sizinkini nasıl azaltacağınız hakkında sorularınız mı var? Aşağıdaki yorumlar bölümünde onlar hakkında konuşalım!

Older Brother / Shutterstock.com aracılığıyla Öne Çıkan Görsel