WordPress Sitelerde CLS Problemi Nasıl Giderilir?

Cls problemi, seo için artık ölümcül seviyede kritik bir konu. Çünkü Google’ın tarama botları mobil olarak siteleri ziyaret ediyor ve mobilde bir problem ile karşılaştığında siteyi indexlemeden geri çıkıyor. İndexlenmiş sayfalarda bu problemler nedeniyle geriliyor ve hit almak zorlaşıyor.

Günümüzde zaten arama motorlarının pabucu dama atılmış durumda. O nedenle bütün kartları açık oynayarak sitemizi mobil olarak en iyi performans ve görünüme hazırlamalıyız. Gelelim ana konuya, cls problemi sitedeki kullanıcı deneyimini kötü etkileyen kaymalara neden olan problemlerdir.

Örnek vermek gerekirse, bir reklam yerleştirdik diyelim içeriğin üst kısmına. Mobilde bu reklam 100piksel veya 300 piksel genişliğinde gelebilir. Yerleştirdiğimiz reklamda esnek değil sabit olsun. 728×90. Eğer bu reklamın muadili mobilde 320×100 piksel genişliğinde gelirse cls problemi kritik seviyede olmaz ve sorun yaratmaz. Ama 250×300 gibi bir boyutta gelirse önemli içeriği geriye doğru atarak kullanıcı deneyimini kötü etkileyecek. Öyleyse bunu çözmek gerekiyor.

.reklam {
    display: block;
    margin: 20px auto;
    text-align: center;
    background-color: #f8f9fa; 
    overflow: hidden;
}

.reklam-ust-alt {
    width: 100%;
    max-width: 336px;
    min-height: 250px;
}

@media screen and (min-width: 768px) {
    .reklam-ust-alt {
        width: 728px;
        max-width: 728px;
        height: 90px;
        min-height: 90px;
    }
}

Bir reklam kodunu reklam reklam-ust-alt classları ile sarılı bir divin içerisine koyduğumuzda artık minimum bir yükseklik belirtmiş oluyoruz. Reklamın ne geleceğine bakmaksızın mobilde minimum 250px yükseklik değerine sahip olacak. Böylece kayma oranı neredeyse sıfıra inecek.

Zaten kullanıcı siteye girdiğinde reklam alanı için bir yükseklik atanmış olacağı için ekran hiçbir şekilde kaymayacak.

CLS Problemine neden olan detaylar;

• Reklam, cls probleminin başlıca nedenlerinden en önemlisidir. Yukardaki çözüm mantığı bunun üzerine anlatılmıştır.
• Görseller, gecikmiş şekilde yükleniyor ve yerine boş bir görsel kullanmıyorsanız cls problemine neden olur. Görsellerde lazyload eklentisi seçerken mutlaka boş bir görsel atamaya izin verecek bir eklenti tercih edin.
• Yükseklik ve genişlik atanmamış divler kaymaya neden olur. Örneğin bir yazar kutusuna sahipseniz ve burada bir yazar resmi varsa (genelde resim, video, iframe gibi içerikler daraldıkça şekil değiştirir) mobile geçtiğinde resim hizamalası değişebilir ve kaymaya neden olur.

Yukarıdaki css kodunu nasıl kullanacağınıza deyinelim. WordPress admin girişi yapıp, Görünüm > Özelleştir bölümüne ilerleyin. Burada Custom CSS bölümünü bulun ve oraya yapıştırın. Reklam kodlarını gösterdiğiniz widget gibi alanlarda reklam kodunuzu div içerisine alın.

<div class="reklm reklam-ust-alt">
REKLAM KODUNUZ
</div>

Böylece artık CLS problemleri yaşamazsınız, çünkü büyük oranda bu problemi giderdiniz.