21.07.2022
Cumulative Layout Shift (CLS) yani kümülatif düzen kayması, core web vitals metriklerinden biridir. CLS, bir web sitesi indirilmeye devam ederken öğelerin konumlarının kaymasını yani görsel kararlılığını ölçen bir metriktir. Düzen kaymasına sebep olabilecek öğeler; videolar, resimler, formlar, düğmeler ve farklı içerik türleridir.
Cumulative Layout Shift birçok sebepten olabilir:
Bunların dışında, site hızının çok düşük olması ve HTML üzerinde width ve height değerlerinin girilmemesi görsel kararlılığı kötü yönde etkiler bu da CLS’ in yükselmesine sebep olur.
CLS metriğini ölçmek için kullanabileceğimiz toollardan biri Google PageSpeed Insights’tır. Bunun dışında kullanabileceğimiz bir diğer tool ise Google Chrome Lighthouse eklentisidir. Peki CLS’in varlığını tool kullanmadan anlayabilir miyiz? Evet, sitemizi ilk yüklemeye başladığımızda büyük öğelerdeki kaymaları fark edebiliriz daha net bir şekilde fark edebilmek için, siteyi yüklemeyi düşük internet hızında başlatmak yeterlidir.
CLS sorununu ortadan kaldırmak için öncelikle sitemizde görsel kararlılığı korumamız gerekmektedir. Örnek olarak görsellerden bahsedecek olursak, eğer width ve height değerlerini HTML üzerinde belirlemezseniz sayfa yüklenene kadar görselin olduğu kısıma görselden önce gelen öğe yüklenecektir. Görsel yüklendikten sonra, görsel kendi yerine geçecek ve onun yerine gelen öğe aşağı kayacaktır. Peki görsellerin width height değerlerini HTML üzerinde belirlersek responsive açıdan sıkıntı yaratmayacak mı? diye herkes düşünmeye başladı. Doğru bir düşünce, sadece HTML üzerinden belirlersek mobilde görseller sorun yaratacak. Bundan dolayı img etiketleri için aşağıdaki css kullanmamız gerekli;
img
{
width: 100%;
height: auto;
}
Detaylı bilgi için aşağıdaki videoyu izleyebilirsiniz.
CLS değerini düşürmek ve bu sorunları onarmak için CSS’in font-display özelliğini ve auto, optional, swap gibi kodları kullanabilirsiniz.
font-display: auto;
0.0 – 0.1 | 0.1 – 0.25 | 0.25++ |
Başarılı | Geliştirmeye Açık & Kabul Edilebilir | Başarısız |
SEO sadece doğru içerik planlaması ve anahtar kelime optimizasyonu ile sıralama elde edilen bir konumdan çıkalı uzun yıllar oldu. Artık Google Anahtar kelime üzerinden doğru hedefleme ve kullanıcı deneyimi iyi olan sayfaları ilk sıralara çıkarıyor. Kullanıcı deneyimini ölçümlemek için core web vitals gibi çekirdek güncellemesi ile hayatımıza CLS metriği girdi. Eğer siteniz hızlı yükleniyor ve görsel kararlılığı yüksek ise sitemize giren kullanıcı daha fazla oturum süresi geçiriyor ve buda hemen çıkma (Bounce Rate) oranlarımıza yansıyor.
Perfist Blog
Benzer Yazılar
Google Ads kampanyalarınızın hedef URL’lerini düzenli olarak kontrol etmek, reklam bütçenizi korumanın en etkili yollarından biridir. Çünkü kırık veya yönlendirmeyen sayfalar, reklam tıklamalarını boşa harcar, kalite puanını düşürür ve dönüşüm oranlarınızı etkiler. Bu yazıda, Google Ads hedef URL verilerini otomatik olarak Google Sheets’e aktaran, ardından bu URL’lerin çalışıp çalışmadığını kontrol eden ve eğer sorun tespit […]
Devamını Oku
Senior Level Performans PazarlamasıGEO (Generative Engine Optimization) Nedir? GEO, yapay zekâ tabanlı arama motorlarında içeriğin daha görünür olması için yapılan optimizasyon çalışmalarıdır. Amacı, yapay zekâların verdiği cevaplarda içeriğin daha sık önerilmesini sağlamaktır. Klasik arama motoru sıralamalarından farklı olarak, yapay zekâ modellerinin içerik okuma ve anlamlandırma biçimine göre içerik üretilir. GEO ve SEO Arasındaki Farklar SEO, Google gibi arama […]
Devamını Oku
Mid Level SEOAnswer Engine Optimization, arama motorlarının ötesinde yapay zekâ destekli yanıt motorlarına içerik uyarlama sürecidir. Kullanıcıların sorularına en net ve doğru yanıtı vermeyi amaçlar. Bu sayede içerikler yalnızca Google’da değil, aynı zamanda ChatGPT, Perplexity gibi yapay zekâ platformlarında da öne çıkar. Geleneksel SEO, web sitelerinin arama motoru sonuç sayfalarında görünürlüğünü artırmaya odaklanır. AEO ise içeriklerin doğrudan […]
Devamını Oku
Mid Level SEOGoogle Analytics 4’te oturumun ne olduğu, oturum sürelerinin neden önemli olduğu, hangi oturum metriklerinin bulunduğu ve bu ayarların nasıl yapılandırılacağını açıklayacağız. GA4’te Oturum Nedir? Oturum, bir kullanıcının web siteniz veya mobil uygulamanızla belirli bir zaman aralığında gerçekleştirdiği tüm etkileşimlerin bütünüdür. Kullanıcı sitenize geldiğinde bir oturum başlar ve belirli bir süre boyunca etkileşim olmazsa (örneğin […]
Devamını Oku
Beginner Level Web/App Analitiği