Kümülatif Düzen Değiştirme Açıklaması: Puanınızı Nasıl Düzeltirsiniz?

Yayınlanan: 2023-01-05

Web sitenizde Kümülatif Düzen Kayması sorunlarıyla mı mücadele ediyorsunuz? Ya da Kümülatif Düzen Kaydırmanın ne anlama geldiğinden emin değil misiniz?

Kümülatif Düzen Kayması veya kısaca CLS, Google'ın Önemli Web Verileri girişiminin bir parçası olan bir ölçümdür.

Özetle, bir web sayfasının içeriğinin ne kadarının “beklenmedik şekilde” değiştiğini ölçer. Yüksek bir CLS puanı, kötü bir kullanıcı deneyimine işaret edebilir ve ayrıca sitenizin SEO'sunda bir engel oluşturabilir.

Bu yazıda, Toplu Düzen Kayması hakkında bilmeniz gereken her şeyi ve bunun WordPress sitelerini (ve genel olarak web'i) nasıl etkilediğini öğreneceksiniz.

Kümülatif Düzen Kayması (CLS) Nedir? Kümülatif Düzen Kaydırma Anlamını Açıklama

Kümülatif Düzen Kayması, standart bir performans testi API'si olan Layout Instability API tarafından ölçüldüğü üzere, bir kullanıcının ziyareti sırasında sitenizdeki bir sayfanın beklenmedik bir şekilde ne kadar hareket ettiğinin ölçüsüdür.

Kümülatif Düzen Kayması (CLS), Google'ın Önemli Web Verileri girişimindeki En Büyük İçerikli Boyama (LCP) ve İlk Giriş Gecikmesi (FID) ile birlikte üç metrikten biridir.

Kümülatif Düzen Kaydırmasının anlamını anlamak için, genel olarak düzen kaymasını tartışmak önemlidir.

Sitenizdeki içerik beklenmedik bir şekilde "hareket ettiğinde" veya "kaydığında" bir düzen kayması meydana gelir.

Veya teknik terimlerle ifade edecek olursak, görüntü alanında görünen herhangi bir öğenin başlangıç konumunu iki çerçeve arasında değiştirmesidir.

Yaygın bir örnek, bir metin bloğunu okumanın ortasında olmanızdır… ancak sonra aniden geç yüklenen bir reklam belirir ve metin içeriğini sayfanın aşağısına iter.

İşte Google'dan bunun olduğunu gösteren başka bir örnek resim:

Google'dan Kümülatif Düzen değişikliğine bir örnek.

Web'de gezinirken, onları bu isimle tanımıyor olsanız bile, neredeyse kesin olarak düzen değişiklikleriyle karşılaştınız.

Tek bir ziyarette birden çok ayrı düzen değişikliği olayı olabilir. Bu nedenle, Kümülatif Düzen Kayması metriği, bir sayfadaki beklenmedik düzen kaymalarının toplam miktarını ölçerek resmin tamamını yakalamayı amaçlar*.

*Tam ölçü, Google tarafından yapılan bazı değişikliklerden sonra biraz daha tekniktir, ancak yine de temel fikir budur. Nitelikli ayrıntılarla ilgileniyorsanız, burada okuyabilirsiniz .

Web sitenizde Kümülatif Düzen Kayması sorunlarıyla mı mücadele ediyorsunuz? Bu kılavuzda puanınızı (ve SEO'nuzu!) nasıl artıracağınızı öğrenin Tweet için Tıklayın

Kümülatif Düzen Kayması Neden Kötü?

Kümülatif Düzen Kaydırmasının kötü olmasının ana nedeni, sitenizde kötü bir kullanıcı deneyimi yaratmasıdır.

En iyi ihtimalle, ziyaretçileriniz için biraz can sıkıcıdır. En kötüsü, ziyaretçilerin yapmak istemedikleri eylemleri gerçekleştirmelerine neden olabilir.

Örneğin, bir kullanıcının "İptal"i tıklamak istediğini, ancak yanlışlıkla "Onayla"yı tıkladığını, çünkü bir yerleşim düzeninin, düğmelerin konumunu tam kişi tıkladığı sırada hareket ettirdiğini hayal edin.

Kötü Kümülatif Düzen Değiştirme puanlarına sahip olmak, insan ziyaretçilerinizin deneyimlerini etkilemenin ötesinde, sitenizin arama motoru sıralamalarında da bir engel olabilir.

Google'ın (Ağustos 2021'de kullanıma sunulması tamamlanan) Sayfa Deneyimi güncellemesinden itibaren Google, SEO sıralama faktörlerinden biri olarak Önemli Web Verilerini kullanıyor. Kümülatif Düzen Kayması, Core Web Vitals'ın bir parçası olduğu için bu, sitenizin arama performansını etkileyebileceği anlamına gelir.

Temel olarak, sitenizdeki Kümülatif Düzen Kayması sorunlarını düzeltmek sitenizi hem insan ziyaretçiler hem de arama motorları için daha iyi hale getirmeye yardımcı olacaktır.

Peki, Kümülatif Düzen Kaymasına ne sebep olabilir? Bunu sonra ele alalım…

Kümülatif Düzen Kaymasına Ne Sebep Olur?

İşte düzen kaymasının en yaygın nedenleri hakkında kısa bir özet:

Resimler, iframe'ler, videolar veya diğer yerleştirmeler için boyut belirlememek.
Metnin görünmez olmasına veya özel yazı tipleri yüklenirken boyutunun değişmesine neden olabilecek özel yazı tipi yükleme sorunları.
Farklı boyutlarda duyarlı reklamlar (ör. AdSense) sunmak (ve bu reklamlar için yer ayırmamak).
Eklentilerle dinamik olarak içerik enjekte etme (çerez onay bildirimleri, olası satış oluşturma formları vb.).
Animasyonları CSS Dönüştürme özelliği olmadan kullanma.

Bu yazının ilerleyen kısımlarında, her bir yaygın sorunu nasıl çözeceğinizi gösterirken bu sorunları çok daha derinlemesine ele alacağız.

Kümülatif Düzen Kayması Nasıl Ölçülür: En İyi Test Araçları

Sitenizin Toplu Düzen Değiştirme puanını test etmek için kullanabileceğiniz bir dizi araç vardır.

Kümülatif Düzen Kayması, Lighthouse denetiminin bir parçasıdır, dolayısıyla denetiminin bir parçası olarak Lighthouse'u kullanan herhangi bir hız testi aracı, CLS verilerini içerecektir - buna PageSpeed Insights, GTmetrix, Chrome Geliştirici Araçları ve diğer birçok popüler test aracı dahildir.

İşte kullanışlılıkları ile öne çıkan en iyi Kümülatif Düzen Kaydırma test araçlarından bazıları...

Sayfa Hızı Bilgileri

PageSpeed Insights, size iki veri kaynağı sağladığı için sitenizin düzen değişikliğinin durumunu değerlendirmek için en yararlı araçlardan biridir:

Saha verileri – Chrome UX raporundan gerçek kullanıcı verileri (sitenizin rapora dahil edilecek kadar trafiği olduğu varsayılarak). Bu, gerçek insan ziyaretçileriniz için gerçek Kümülatif Düzen Kayması verilerini görmenizi sağlar. Bu aynı zamanda Google'ın sıralama sinyali olarak kullandığı verilerdir.
Laboratuvar verileri – Lighthouse tarafından toplanan simüle edilmiş test verileri (PageSpeed Insights'ın performans analizi raporlarını oluşturmak için kullandığı veriler).

Ayrıca sekmeler arasında geçiş yaparak hem masaüstü hem de mobil cihazlar için verileri görüntüleyebilirsiniz.

PageSpeed Insights'ta Kümülatif Düzen Kaydırma puanları.

Not – laboratuvar verileri yalnızca sayfa yükleme sırasında oluşan düzen kaymalarını ölçebilir, bu nedenle sayfa yüklemeden sonra oluşan düzen kaymalarınız varsa gerçek kullanıcı sonuçlarınız biraz daha yüksek olabilir.

Chrome Geliştirici Araçları

Chrome Geliştirici Araçları, hem CLS'yi ölçmek hem de sitenizde meydana gelen tek tek düzen kaymalarında hata ayıklamak için bazı yararlı kaynaklar sunar.

İlk olarak, sitenizin CLS puanını görmek için bir Lighthouse denetimi çalıştırabilirsiniz. İşte nasıl:

Chrome Geliştirici Araçları'nı açın.
Deniz Feneri sekmesine gidin.
Testinizi yapılandırın.
Testi çalıştırmak için Sayfa yüklemesini analiz et düğmesine tıklayın.

Kısa bir bekleyişin ardından normal Lighthouse denetim arayüzünü (PageSpeed Insights'a çok benzeyen) görmelisiniz.

Geliştirici Araçları'nda Lighthouse denetimi nasıl çalıştırılır?

Ancak Chrome Geliştirici Araçları, Oluşturma analiziyle CLS'yi daha derinlemesine incelemenize de olanak tanır. Bu, sitenizdeki tek tek düzen kaydırma bölgelerini vurgulamanıza olanak tanır ve bu, hatalarını ayıklamanıza yardımcı olur.

İşte nasıl:

Chrome Geliştirici Araçları arayüzünün sağ üst köşesindeki "üç nokta" simgesini tıklayın.
Alt kısımda yeni bir arayüz açması gereken Diğer Araçlar → İşleme öğesini seçin.
Düzen Kaydırma Bölgeleri kutusunu işaretleyin.

Geliştirici Araçları'nda CLS oluşturma nasıl görüntülenir?

Şimdi, test etmek istediğiniz sayfayı yeniden yükleyin; Chrome, mavi bir kutu kullanarak düzen kaymaları olan tüm alanları vurgulamalıdır. Bu vurgular, içerik yüklenirken asıl sayfada görünecek ve vardiya bittikten sonra kaybolacaktır.

Öne çıkanlar takip edemeyeceğiniz kadar hızlı gerçekleşiyorsa, Performans sekmesini kullanarak sitenizi yavaşlatabilir ve kare kare yüklenmesini izleyebilirsiniz.

Google Arama Konsolu

Google Arama Konsolu, Kümülatif Düzen Kaymasını belirlemek için laboratuvar testleri yapmanıza izin vermese de, Chrome UX raporuyla ölçüldüğü üzere, sitenizdeki Toplu Düzen Kayması ile ilgili sorunları görmeniz için kolay bir yol sağlar.

Google Search Console'u kullanmanın diğer araçlara göre avantajı, sorunları sayfa sayfa test etmek yerine tüm sitenizdeki sorunları hızlı bir şekilde görmenize olanak sağlamasıdır.

Sitenizdeki olası sorunları şu şekilde görüntüleyebilirsiniz:

Google Search Console'a gidin. Sitenizi henüz doğrulamadıysanız, Google Search Console'u nasıl doğrulayacağınızla ilgili kılavuzumuzu takip edebilirsiniz.
Deneyim altında Önemli Web Verileri raporunu açın.
Neyi analiz etmek istediğinize bağlı olarak Mobil veya Masaüstü öğesinin yanındaki Raporu Aç seçeneğine tıklayın.

Search Console'daki Önemli Web Verileri raporu.

Mümkünse Google, sorunlu Kümülatif Düzen Kaydırma puanları olan URL'leri vurgulayacaktır.

Search Console'da CLS sorunları olan URL'leri nasıl görebilirim?

Not – burada verileri yalnızca sitenizin Chrome UX raporuna dahil edilmeye yetecek kadar aylık trafiği varsa görürsünüz.

Düzen Değiştirme GIF Oluşturucu

Adından da anlaşılacağı gibi, Layout Shift GIF Generator, hangi içeriğin sorunlara neden olduğunu tam olarak görebilmeniz için sitenizdeki mizanpaj değişimlerinin bir GIF'ini oluşturur. Ayrıca, aracın ana odak noktası bu olmasa da size puanınızı verecektir.

Tek yapmanız gereken, test etmek istediğiniz URL'yi eklemek ve mobil veya masaüstü arasında seçim yapmak. Ardından, sitenizin tam olarak değişen öğeleri gösteren yeşil vurgularla bir GIF'i oluşturacaktır.

Hangi öğelerin değiştiğini görerek ve Kümülatif Düzen Kaydırma puanınıza katkıda bulunarak, sitenizin puanlarını iyileştirmek söz konusu olduğunda tam olarak nereye odaklanacağınızı bilebilirsiniz.

Araç, münferit düzen kaydırmalarını yeşil renkle vurgular.

İyi Bir Toplam Yerleşim Puanı Nedir?

Google'ın Core Web Vitals girişimine göre, iyi bir Kümülatif Düzen Kaydırma puanı 0,1 veya daha azdır .

Kümülatif Düzen Kaydırma puanınız 0,1 ile 0,25 arasındaysa, Google bunu "İyileştirme Gerekiyor" olarak tanımlar.

Ve Kümülatif Düzen Kaydırma puanınız 0,25'in üzerindeyse, Google bunu "Kötü" olarak tanımlar.

İşte Google'ın Önemli Web Verileri web sitesinden bu puanları görsel olarak gösteren bir grafik:

WordPress'te (veya Diğer Platformlarda) Kümülatif Düzen Kayması Nasıl Onarılır

Artık Toplu Düzen Kayması ile neler olduğunu anladığınıza göre, WordPress'te Toplu Düzen Kayması'nın nasıl düzeltileceğine dair eyleme geçirilebilir bazı ipuçlarına geçmenin zamanı geldi.

Bu ipuçları bir WordPress açısından gelse de hepsi evrenseldir ve bunları diğer web sitesi oluşturma araçlarına uygulayabilirsiniz.

Görüntüler İçin Her Zaman Boyutları Belirtin

Düzen kaymasının en yaygın nedenlerinden biri, özellikle geç yükleme gibi taktikler kullanıyorsanız, içeriği hareket ettiren geç yüklenen resimlerdir.

Bunu önlemek için, gömdüğünüzde bir görselin boyutlarını kodda belirleyebilirsiniz. Bu şekilde, görüntü henüz yüklenmemiş olsa bile ziyaretçinin tarayıcısı bu alanı ayıracaktır, bu da görüntünün içeriği taşımasına gerek kalmayacağı anlamına gelir.

Görüntüleri WordPress düzenleyici (Gutenberg blok düzenleyici veya klasik TinyMCE düzenleyici) aracılığıyla gömüyorsanız, görüntü boyutlarını manuel olarak belirtmenize gerek yoktur çünkü WordPress bunu sizin için otomatik olarak yapacaktır.

Aynısı Elementor, Divi, Beaver Builder ve benzeri popüler sayfa oluşturucu eklentileri için de geçerlidir.

Bununla birlikte, görüntüleri kendi kodunuzu kullanarak manuel olarak gömüyorsanız, bir eklentiye içerik eklerken, alt temanızın şablon dosyalarını düzenlerken vb. sorunlar ortaya çıkabilir.

Temel bir resim yerleştirme için HTML kodu şöyle görünür:

<img src="https://kinsta.com/example-image.jpg" alt="An example image">

Boyutlarını belirlemek için yükseklik ve genişlik parametreleri ekleyebilirsiniz. 600x300 piksellik bir resim için bunun nasıl görünebileceğine dair bir örnek:

<img src="https://kinsta.com/example-image.jpg" alt="An example image" width="600" height="300" >

Birçok WordPress performans eklentisi, WP Rocket veya Perfmatters'taki Eksik Görüntü Boyutlarını Ekleme özellikleri gibi bunu otomatikleştiren özellikler de içerir.

Videolar, iframe'ler ve Diğer Yerleştirmeler İçin Her Zaman Boyutları Belirtin

Tıpkı resimlerde olduğu gibi, videolar, iframe'ler veya başka yerleştirmeler eklediğinizde de boyutları belirtmek isteyeceksiniz.

Çoğu web sitesinin yerleştirme araçları, yerleştirme için boyutları otomatik olarak belirtmelidir.

Örneğin, YouTube yerleştirme koduna bakarsanız boyutları içerdiğini görürsünüz:

Gömme kodundaki iframe boyutlarına bir örnek.

Aynı şey diğer birçok hizmet için de geçerlidir.

Ancak yerleştirme kodunuz yükseklik ve genişliği belirtmiyorsa, bu boyutları manuel olarak yerleştirme koduna ekleyebilirsiniz.

Yazı Tipi Yüklemesini Düzeltin ve Optimize Edin

Yazı tipi yükleme ve optimizasyonla ilgili sorunlar, iki potansiyel sorun nedeniyle düzen kaymalarının başka bir yaygın kaynağı olabilir:

Görünmez metnin flaşı (FOIT) – sayfa başlangıçta herhangi bir metin içeriği görünmeden yüklenir. Özel yazı tipi yüklendikten sonra metin aniden görünür (bu, mevcut içeriğin kaymasına neden olabilir).
Stilsiz metin flaşı (FOUT) – metin içeriği, bir sistem yazı tipi (stilsiz) kullanılarak yüklenir. Özel yazı tipi yüklendikten sonra, metin o özel yazı tipine dönüşür ve bu, metin boyutu ve aralığı farklı olabileceğinden içeriğin kaymasına neden olabilir.

Bu sorunlardan kaçınmak için, sitenize yazı tiplerini yükleme biçiminizi optimize etmeniz gerekir (bunun sitenizin performansına da bazı faydaları olabilir).

Yazı Tiplerini Yerel Olarak Barındırın ve Yazı Tiplerini Ön Yükleyin

Yazı tiplerini yerel olarak barındırarak ve ön yüklemeyi kullanarak, ziyaretçilerin tarayıcılarına özel yazı tipi dosyalarını yüklemeye daha yüksek öncelik vermelerini söylersiniz.

Yazı tipi dosyalarını diğer kaynaklardan önce yükleyerek, tarayıcı içeriğinizi işlemeye başladığında yazı tipi dosyalarının zaten yüklenmiş olduğundan emin olabilirsiniz, bu da FOUT ve FOIT ile ilgili sorunları önleyebilir.

Yazı tiplerini WordPress'te yerel olarak nasıl barındıracağınızı öğrenmek için, yazı tiplerini yerel olarak WordPress'te barındırmaya yönelik eksiksiz kılavuzumuzu okuyabilirsiniz.

Oradan, yazı tipi ön yüklemesini manuel olarak veya bir eklenti kullanarak ayarlayabilirsiniz. Çoğu performans eklentisi, WP Rocket, Perfmatters, Autoptimize ve diğerleri dahil olmak üzere yazı tiplerini önceden yüklemek için seçenekler içerir.

Google Yazı Tiplerini kullanıyorsanız, yazı tiplerini yerel olarak barındırmak ve önceden yüklemek için ücretsiz OMGF eklentisini de kullanabilirsiniz.

Kodu sitenizin <head> bölümüne ekleyerek yazı tiplerini manuel olarak da önceden yükleyebilirsiniz.

İşte koda bir örnek – onu önceden yüklemek istediğiniz yazı tipi dosyasının gerçek adı/konumu ile değiştirdiğinizden emin olun:

<link rel="preload" href="https://kinsta.com/fonts/roboto.woff2" as="font/woff2" crossorigin>

Doğrudan bir WordPress alt teması kullanarak ekleyebilir veya wp_head kancası ve Kod Parçacıkları gibi bir eklenti ile enjekte edebilirsiniz.

Font-Display'i İsteğe Bağlı veya Değiştir olarak ayarlayın

CSS Font-Display özelliği, sitenizdeki yazı tiplerinin oluşturma davranışını kontrol etmenize ve FOIT'den kaçınmanıza olanak tanır.

Kesinti süresi ve WordPress sorunlarıyla mı mücadele ediyorsunuz? Kinsta, size zaman kazandırmak için tasarlanmış barındırma çözümüdür! Özelliklerimize göz atın

Temel olarak, özel yazı tipinizin henüz yüklenmediği durumlarda bir yedek yazı tipi kullanmanıza olanak tanır.

CLS'yi ele almak için kullanabileceğiniz iki ana seçenek vardır:

Değiştir - özel yazı tipi yüklenirken bir yedek yazı tipi kullanır ve yazı tipi yüklendikten sonra onu özel yazı tipinizle değiştirir.
İsteğe bağlı – tarayıcının, bir ziyaretçinin bağlantı hızına göre özel bir yazı tipi kullanıp kullanmayacağını belirlemesine olanak tanır.

Swap ile, tarayıcı yüklendikten sonra her zaman özel yazı tipine geçer.

Swap , FOIT'i tamamen çözerken, FOUT'a yol açabilir. Bunu en aza indirmek için, yedek yazı tipinin özel yazı tipiyle aynı aralığı kullandığından emin olmalısınız (en azından mümkün olduğunca çok). Bu şekilde, yazı tipi stili değişse bile, aralık aynı olacağından düzen kaymalarına yol açmaz.

İsteğe Bağlı ile tarayıcı, özel yazı tipine yüklenmesi için 100 ms verir. Ancak, özel yazı tipi o zamana kadar mevcut değilse, tarayıcı yedek yazı tipini kullanmaya devam edecek ve onu asla söz konusu sayfa görüntüleme için özel yazı tipine değiştirmeyecektir ( sonraki sayfa görüntülemeleri için özel yazı tipini kullanacaktır, çünkü büyük ihtimalle yazı tipi dosya o zamana kadar indirilmiş ve önbelleğe alınmıştır ).

İsteğe Bağlı hem FOIT hem de FOUT'u çözebilse de dezavantajı, ziyaretçinin ilk sayfa görüntülemelerinde yedek yazı tipine takılıp kalabilmesidir.

CSS ile çalışırken kendinizi rahat hissediyorsanız, alt temanızın stil sayfasında Font-Display özelliğini manuel olarak düzenleyebilirsiniz.

Bunu yapmaktan çekiniyorsanız, yardımcı olacak bazı eklentiler de bulabilirsiniz:

Google Fonts Ekranını Değiştirin – Google Fonts için Font-Display Swap'ı kolayca etkinleştirir.
Asset CleanUp – Pro sürümüyle ücretsiz ve özel yerel yazı tipleri için Google Yazı Tiplerini destekler.
Perfmatters - Google Yazı Tipleri için bir özellik sunar.

Elementor kullanıyorsanız, Elementor ayrıca bunu yapmak için yerleşik bir seçenek içerir. Elementor → Ayarlar → Gelişmiş seçeneğine gidin. Daha sonra Google Fonts Load açılır menüsünü tercihlerinize göre Değiştir veya İsteğe Bağlı olarak ayarlayabilirsiniz:

Elementor Yazı Tipi Görüntüleme seçenekleri.

Çok karmaşık? Bir Sistem Yazı Tipi Yığını düşünün!

Önyükleme ve Yazı Tipi Görüntüleme ile ilgili tüm bu konuşmalar biraz kafa karıştırıcıysa, kolay bir düzeltme, özel bir yazı tipi yığını yerine yalnızca bir sistem yazı tipi yığını kullanmaktır.

Bu, tasarım seçeneklerinizi sınırlasa da Kümülatif Düzen Kaydırma yazı tipi sorunlarını, FOIT ve FOUT'u tamamen çözecektir. Ayrıca, sitenizin çok daha hızlı yüklenmesine de yardımcı olacaktır.

Bununla ilgileniyorsanız, Brian'ın WordPress'te bir sistem yazı tipi yığını kullanma kılavuzuna bakın.

Reklamlar İçin Yer Ayırın (Görüntülü Reklamlar Kullanılıyorsa)

Görüntülü reklamlar kullanıyorsanız, sitenizin kodunda bu reklamlar için yer ayırmanız önemlidir. Bu, resimler, videolar ve yerleştirmeler için yer ayırmakla aynı fikri izler.

Ancak, herhangi bir teklif verme teknolojisi kullanıyorsanız geç yüklenen görüntülü reklamlara sahip olmak çok yaygın olduğundan, görüntülü reklamlar özel olarak anılmayı hak ediyor. Bunun nedeni, teklif verme teknolojisinin çalışması ve hangi reklamın gösterileceğini anlaması için zamana ihtiyaç duymasıdır.

AdSense, teklif verme sorununa ek olarak farklı boyutlarda reklamlar da yükleyeceğinden (bu nedenle, reklamın boyutunu önceden bilemeyebilirsiniz), dinamik reklam alanlarınız varsa AdSense otomatik reklamlarında da sorun olabilir.

Mediavine veya AdThrive gibi popüler görüntülü reklam ağlarından birini kullanıyorsanız, bu ağların reklamlarınızda düzen değişikliklerinden kaçınmanıza yardımcı olacak araçlar sunması gerekir. Örneğin, Mediavine'in Reklam Ayarları alanını açarsanız, Reklamları CLS İçin Optimize Etme anahtarını etkinleştirebilirsiniz :

Mediavine Reklamları CLS için Optimize Et ayarı.

AdSense'i Kümülatif Düzen Değiştirme için optimize etmek biraz daha zordur.

Yaygın bir düzeltme, min-height CSS özelliğini kullanarak minimum bir yükseklik belirten her reklam biriminin etrafına bir <div> sarmalayıcı öğesi eklemektir. Bir kullanıcının cihazına göre minimum yüksekliği değiştirmek için medya sorgularını da kullanabilirsiniz.

Google, minimum yüksekliği mümkün olan en büyük reklam boyutuna eşit olarak ayarlamanızı önerir. Bu, daha küçük bir reklam sunulursa alanın boşa harcanmasına neden olsa da, herhangi bir düzen değişikliği olasılığını ortadan kaldırmak için en iyi seçenektir.

Bu sarmalayıcı öğeyi ayarlarken, bir sınıf yerine bir CSS kimliği kullandığınızdan emin olun, çünkü AdSense genellikle CSS sınıfını üst nesnelerden ayırır.

CSS şöyle görünebilir:

Bir reklam sarmalayıcı için bazı örnek CSS.

Ve AdSense yerleştirme şu şekilde görünebilir:

AdSense reklam kodunu bir div içine sarın.

Ön uçta, artık boş olsa bile sitenizin o reklam için yer ayırdığını göreceksiniz:

Siteniz artık ön uçta o reklam için yer ayıracak.

Eklentilerle Dinamik Olarak İçerik Enjekte Ederken Akıllı Olun

Pek çok WordPress sitesi, çerez onay bildirimleri, ilgili içerik, e-posta katılım formları vb. gibi işlevler için içeriği dinamik olarak enjekte edecektir.

Bunu yapmak iyi olsa da, bunu düzen kaymalarına neden olacak şekilde yapmaktan kaçınmak isteyeceksiniz.

Burada iyi bir web tasarımı en iyi uygulaması, kullanıcı özellikle bir etkileşimde bulunmadıkça (örn. bir düğmeyi tıklamak), mevcut içeriğin üzerine asla içerik enjekte etmemek.

Örneğin, bir tanımlama bilgisi onay bildirimi ekliyorsanız, bunu sayfanızın üst kısmına eklemek istemezsiniz çünkü bu, içeriğin aşağı itilmesine neden olur ( çerez onayı başlığı için zaten yer ayırmıyorsanız ). .

Bunun yerine, görünür içeriğin aşağı kaydırılmasını önleyecek olan bildirimi sayfanın alt kısmında göstermelisiniz.

Soruna dinamik içeriğin neden olup olmadığını görmek için yukarıdan görselleştirme araçlarını kullanabilirsiniz (örn. Layout Shift GIF Generator).

Belirli bir eklentiden gelen içeriğin düzen değişikliklerini tetiklediğini görürseniz, o eklentinin ayarlarını değiştirmeyi veya farklı bir eklentiye geçmeyi düşünebilirsiniz.

Örneğin, düzen değişiklikleri söz konusu olduğunda bazı çerez izni eklentileri diğerlerinden daha iyidir, bu nedenle sorun yaşıyorsanız farklı eklentileri denemeye değer.

Eklenti davranışını daha da derinlemesine incelemek istiyorsanız, bir uygulama performansı izleme aracı kullanabilirsiniz. Kinsta ile ev sahipliği yapıyorsanız, Kinsta'nın APM aracı MyKinsta panonuzda ücretsiz olarak bulunur veya diğer APM araçlarını bulabilirsiniz.

Eklentileri test etmenize yardımcı olması için Kinsta'nın hazırlık sitelerini veya DevKinsta yerel geliştirme aracını da kullanabilirsiniz.

Animasyonlar için Mümkün Olduğunda CSS Dönüştürme Özelliğini Kullanın

Sitenizde animasyonlar kullanıyorsanız, bunlar düzen kaymalarının başka bir yaygın suçlusu olabilir.

Animasyonlarda düzen kaymalarına neden olan sorunlardan kaçınmak için animasyonlar için diğer taktikler yerine CSS Dönüştürme işlevini kullanmalısınız:

Yükseklik ve genişlik özelliklerini kullanmak yerine transform kullanın: ölçek()
Öğeleri hareket ettirmek istiyorsanız top , bottom , right veya left yerine transform: translate() kullanın.

Bu daha çok teknik bir ipucudur, bu nedenle kendi CSS'nizi eklemediğiniz sürece bunu yapmanız gerekmeyecektir. Daha fazla bilgi edinmek için Google'ın CLS ve animasyonlar/geçişler hakkındaki sayfasını okuyabilirsiniz.

(Öyle değil) eğlenceli gerçek: Yüksek bir CLS puanı, kötü bir kullanıcı deneyimine işaret edebilir ve ayrıca sitenizin SEO'sunda bir engel oluşturabilir. Sizinkini nasıl düzelteceğinizi buradan öğrenin ️ Tweetlemek için tıklayın

Özet

Web sitenizin Kümülatif Düzen Değiştirme puanı yüksekse, hem insan ziyaretçileriniz için daha iyi bir deneyim oluşturmak hem de sitenizin Google'ın arama sonuçlarındaki performansını en üst düzeye çıkarmak için bunu düzeltmeniz önemlidir.

En yaygın sorunlardan ikisi, görüntüler/yerleştirmeler için eksik boyutlar ve yazı tipi yükleme sorunlarıdır. Bunları düzeltirseniz, çok daha iyi bir puan alma yolunda olmalısınız.

Diğer sitelerin daha da ileri gitmesi ve reklam yükleme, dinamik içerik ve animasyonları araştırması gerekebilir. Bu tür optimizasyonları kendiniz uygulamakta zorlanıyorsanız, bir WordPress ajansı veya serbest çalışan ile çalışmayı düşünebilirsiniz.

Genel olarak Önemli Web Verileri hakkında daha fazla bilgi edinmek için Kinsta'nın Önemli Web Verileri kılavuzunun tamamını okuyabilirsiniz.

Ayrıca, Core Web Vitals'ta başarılı olan yüksek performanslı bir site oluşturmanıza yardımcı olabilecek bir WordPress ana bilgisayarı istiyorsanız, Kinsta'nın yönetilen WordPress barındırma hizmetini kullanmayı düşünün – WordPress sitelerinizi ücretsiz olarak taşıyacağız!