Google'ı tamamen mutlu etmek mümkün değildir. Uzun zaman önce vazgeçtim, ancak ele alınması gereken konular var, örneğin CLS
Cumulative Layout Shift Cumulative Layout Shift tasarımın kümülatif değişimidir. Bu metrik önemlidir çünkü şunları analiz eder görsel kararlılık ve ziyaretçilerin beklenmedik tasarım değişiklikleriyle karşılaşma sıklığı.
Özetle, yükleme sırasında sayfanın üst kısmındaki öğelerin yer değiştirmesini ölçer.
Düşük bir CLS elde etmek, sahanın aşağıdaki özelliklere sahip olmasını sağlamaya yardımcı olur güzel ve aynı zamanda okuyucunun önemli navigasyon öğelerini gözden kaçırmasına ve/veya konumunu kaybetmesine neden olabilecek rahatsız edici hareketleri önler.
CLS 0,1'i geçmezse iyi bir kullanıcı deneyimi olarak anlaşılır, 0,25'e kadar iyileştirilmesi gerekir ve o andan itibaren kötü bir puan olarak kabul edilir. Bildiğinizi tahmin ettiğim gibi bu, çeşitli şekillerde ölçülebilir. En yaygın olarak kullanılan PageSpeed Insights
Belgelerinde belirtildiği gibi Core Web Vitals , Kötü bir CLS, boyutları bilinmeyen bir resim veya video, alternatifinden daha büyük veya daha küçük görüntülenen bir yazı tipi veya boyutunu dinamik olarak değiştiren bir üçüncü taraf reklamı veya widget'ı veya animasyon efekti gibi çeşitli unsurlardan kaynaklanabilir.
Paradoksal olarak, CLS'yi fırçalama eğiliminde olan unsurlardan bazıları Google Adsense reklamlarıdır. Özellikle eğer otomati̇k duyurular
Yer değiştirme nasıl tespit edilir İşte meselenin özü: tam olarak neyi aramamız gerekiyor ve onu nasıl bulacağız? Yükleme sırasında boyut değiştiren ve/veya kayan her şey.
Artık Adsense sorununu çözmeye çalıştığımıza göre, CLS'yi şişiren diğer unsurlara bir göz atabiliriz. Bunu yapmanın farklı yolları vardır, işte birkaçı.
Bakmak En rustik yöntem gözle yapılan basit gözlemdir. Yer değiştirme fark edilirse, bunu hemen görürsünüz, ancak daha yakından inceleme gerektiren daha az fark edilir hareketler vardır.
At Search Console GSC'de, "En iyi web metrikleri" altında, CLS ve LCP sorunları olan URL'lerin listesini alabilir ve bunlara tek tek daha yakından bakabilirsiniz.
Cumulative Layout Shift Debugger Cumulative Layout Shift Debugger
Bir Chrome mühendisi tarafından yapılan bu araç, CLS sorunlarını bulmak için en kullanışlı araçlardan biridir.
Sayfadaki metnin çoğu vurgulanmışsa, büyük olasılıkla yazı tipleriniz düzen değişikliklerine neden oluyordur.
Layout Shift GIF Generator Layout Shift GIF Generator
CLS Visualizer En basit araçlardan biri olan bu araç, en iyi yer değiştirmeleri yakalamayı başardığım araçtır.
CLS Visualizer
Bu iblis simgesi, onu içeren bloğun konumunda navigasyonda fark edilemeyecek bir yer değiştirmeye sahipti. Uzantıyı etkinleştirdiğinizde, size CLS ölçümlerini bir listede gösterecek ve her birine tıkladığınızda, buna neden olan öğenin animasyonu kırmızı renkte görünecektir.
Bu uzantı sayesinde birçok sayfada sıfır CLS elde ettim. Buna neden olan o kadar çok şey olabilir ki, url'leri acele etmeden incelemek için yüklü bıraktım.
Chrome Dev Tools ilginç olanaklar sunuyor, CLS'yi kavramak için en yararlı olanlardan biri, sayfanın yüklendiği bant genişliğini azaltma seçeneğidir, böylece tasarım değişikliğinin ne zaman gerçekleştiğini ve hangi öğelerin buna katkıda bulunduğunu açıkça görebilirsiniz.
Bunu yapmak için tarayıcıda Chrome Dev Tools'u açın, web sitenize sağ tıklayın/inceleyin ve Ağ'da resimde gösterilen Wifi simgesini arayın ve yanında özel bir hız ekleyebileceğiniz bir açılır menü bulacaksınız.
Yeni bir profil oluşturun ve "ağır çekimde" test etmek için 100 Kb veya daha az ekleyin.
Şimdi, internetin hızlı bir şekilde çalıştığı zamanlardaki bir hızda gezinirken, yükleme sırasında size neyin sorun çıkarabileceğini belirlemenin çok daha kolay olduğunu göreceksiniz.
Rendering Chrome Geliştirici Araçları'ndaki Düzen Kaydırma Bölgeleri'nde, sayfanızda gerçek zamanlı olarak gezinirken mavi renkle vurgulanan düzen değişikliklerini de görebilirsiniz.
Tasarım değişikliği bölgelerini etkinleştirmek için izlenmesi gereken adımlar şunlardır: Konsolda "Rendering" veya İngilizcesi varsa "renderizado" ifadesini arayın.
Düzen Değiştirme Bölgeleri onay kutusunu ve denemek istediğiniz diğer onay kutularını işaretleyin.
Artık sayfada gezinirken düzen değişiklikleri mavi renkle vurgulanacaktır.
Bir tarayıcı uzantısı ile Chrome'da uzantıyı yükleyebilirsiniz CLS Checker - Journey Further
Webpagetest adresinde test yapabileceğiniz bir başka ölçüm sitesi webpagetest.org
Videoyu duraklatmak küçük yer değiştirmeleri bulmayı kolaylaştırır.
Yakından bakarsanız, hem menü öğeleri hem de başlık ve metinler, yazı tipi boyutunda ve/veya yerleşiminde bir değişiklik gibi görünen bir şeyle biraz sağa kaydırılmıştır, ancak başlığın üzerindeki reklam alanı zaten ayrılmıştır, bu nedenle içeriği aşağı kaydırmaz. H1'i biraz küçülterek ve eşlik eden metinlerin sarılmasını düzelterek çözüldü.
Ancak bu farklı bir konu, biz reklamların davranışlarıyla ilgilenelim.
Reklam bloğu alanlarını rezerve etmek için çözümler En iyi ve en hızlı çözümü ararken, en iyi çözümün, bu alanı ayırmak ve yüklendikten sonra kaydırmayı önlemek için reklam bloklarının her birinin etrafındaki bir sarmalayıcıya (div) minimum yükseklik değeri eklemek olduğunu buldum.
Ancak, bu CSS özelliğine işaret etmek için bir sınıf kullanmak yeterli değil gibi görünüyor, aynı zamanda sarmalayıcı için bir kimlik kullanmak gerekiyor. Görünüşe göre, bilinmeyen bir nedenle Google AdSense JavaScript, herhangi bir üst nesneden minimum yükseklik yönergelerini kaldırıyor. Ancak, CSS hedeflemesi için bir ID kullanıldığında bunlar kaldırılmaz.
Bu durum şu şekilde açıklanmaktadır burada daha detaylı Ad Inserter
Uyarlanabilir reklamların sabit boyuta değiştirilmesi İlk iş, uyarlanabilir reklam bloklarını kullanmayı bırakmak oldu. Tüm blokları sabit boyutlara değiştirdim.
Bu karar, vaka bazında incelenmeli ve değerlendirilmelidir.
Google, özelleştirilebilir reklamların daha fazla gelir getirdiğini iddia etse de (tabii ki farklı boyutlarda gösterilebildiği için), bu oldukça esnektir ve farklı senaryolara göre değişebilir. En popüler boyutları tercih ederseniz her zaman reklam gösteriyor olacaksınız.
Boyut optimizasyonunu devre dışı bırak Blokların zaten sabit bir boyuta sahip olması gerekiyor olsa da, Google'ın mobil reklamların boyutuna kendi başına karar vermesine olanak tanıyan seçeneği devre dışı bırakmalısınız. Bu seçenek Adsense yönetiminde Reklamlar/Global Ayarlar altında bulunabilir.
Bu şekilde, elle yerleştirdiğimiz bazı reklamları unutmuş olmamız durumunda sürprizlerle karşılaşmaktan kaçınıyoruz. Her durumda, sabit boyutta olmaları artık duyarlı olmadıkları anlamına gelmez.
Ad Inserter ile reklam alanları ayırın Ad Inserter, bence reklam yönetimi için en iyi eklentidir ve diğer içerikleri eklemek için bile kullanılabilir.
Her bir reklam için yer ayırmak için "Display" bölümüne gidin ve her bir bloğun genişliğini ve yüksekliğini tanımlayın.
Eğer kendi PRO sürüm
Bazı hususlar Adsense için alan ayırmanın dezavantajları vardır; reklamlar o boyutta sunulmadığı için görüntülenemediğinde veya herhangi bir zamanda siteniz için reklamveren olmadığında, ayrılan alanın boyutunda boş bir alan elde edebilirsiniz.
Reklam Yerleştirici'de, yalnızca sunucu tarafı eklemeler için yüksekliği doğrudan kodla tanımlayabilirsiniz Özel CSS .
Reklamın yüksekliğinin reklam kodu tarafından tanımlandığını unutmayın. Uyarlanabilir reklam kodu, reklamın yüksekliğini mevcut alana göre ayarlayabilir.
Bazı reklam ağları (AdSense gibi) mevcut alandan daha küçük reklamlar da sunabilir. Blok yüksekliği, Reklam Yerleştirici'de tanımlandığı gibi, eklenen bloğun yüksekliğidir, yani onu saran div'in yüksekliğidir. Bu, reklam için ayrılmış alandır. Rezervasyon yaparken aşağıdakiler gerçekleşebilir:
Reklamın yüksekliği ayrılmış alanın yüksekliği ile aynı ise (blok yüksekliği), tasarım değişikliği olmayacak ve CLS'yi etkilemeyecektir. Reklamın yüksekliği ayrılmış alanın yüksekliğinden (blok yüksekliği) fazlaysa, reklamı yerleştirmek ve CLS'yi etkilemek için tasarım aşağı doğru kaydırılabilir. Reklamın yüksekliği ayrılmış alanın yüksekliğinden (blok yüksekliği) azsa, reklamın altında boş bir alan elde edersiniz, ancak düzen değişmez ve CLS'yi etkilemez. AdSense uyarlanabilir reklam kodu gibi bazı reklam kodları, ana kapsayıcıların yüksekliğini geçersiz kılabilir. Bu durumda, blok yüksekliğinin üzerine yazılacak ve uygulanmayacaktır.
Kısacası, tasarım değişikliklerini en aza indirerek çözülmesi gereken acil CLS sorunları söz konusu olduğunda, en hızlı seçenek mümkün olduğunca sabit reklam boyutları kullanmaktır.
Ve bunu yaparken, resimlerde eksik boyutlar olmadığından emin olabilirsiniz, bu da birkaç yolla düzeltilebilir. Bazı hızlı ve kolay yollar şunları kullanmaktır Perfmatters WP Rocket
Veya eklenti Litespeed Cache
Her şey yolunda giderse, birkaç saat içinde saha raporlarında ve birkaç gün içinde de laboratuvar raporlarında CLS düşüşünü göreceksiniz. PageSpeed Insights
