CLS Başımıza ne işler açtı

Geçenlerde önemli web verilerinde sorun olunca buradan bir arkadaş anydeskle bağlandı 5-10 dk bir ayar yaptı tamam oldu dedi. Sonra rapor bekleyeceksin dedi. Önceden mobil sorunluydu sadece şimdi masaüstü url ler de cls 0.25 sorununa takıldı.

Yine buradan bir arkadaştan wp rocket lisans aldım. Tabi lisans aldım diye ona ayarlamaları da yap diyemedim. Bu cls zıkkımı için "JavaScript dosyalarının yüklenmesini, kullanıcı etkileşimine (örn. kaydırma, tıklama) kadar geciktir" olayı var. Yani site açıldığı gibi kalıyor siteye dokunmadığınızda sorun yok. Google da bunu istiyor açıldığı gibi kalsın diyor. Oraya buraya kaymasın.

Aslında temadan (publisher) olduğunu biliyorum, ancak tema üzerine çok işlem yaptım yeni tema şu an bana sıfırdan site gibi birşey.

Neyse sonuca gelecek olursak javascript geciktir dediğimde site açılıyor ama bir yerlere tıklayamıyorum. Tıklanınca ölü taklidi yapıyor hiç hareket etmiyor. Sonra firefox ta bağlantı üzerine gelip "Denetle" dedim. İşte orada bir olay gördüm. Event diye birşey çıkıyor ordan da click diye barın sonunda mavi tik ✔ var. O tiki kaldırıp tıklayınca link açılıyor. Resimleri aşağıya ekliyorum. Bu konuda yardımcı olacak arkadaş varsa memnun olurumm.

- Javascript Geciktir Dediğimde


- Javascript Geciktirme Dediğimde

Burada da birşeyler anlatılmış."Yürütmeyi geciktirmenin dışında bırakılacağı satır içi veya JavaScript dosyalarını tanımlayabilecek URL’leri veya anahtar kelimeleri belirtin (her satıra bir tane). " Buraya girilecek kodlarla alakalı.
Buraya kodlar yazmam lazım ama hangi kodlar.

Öncelikle kullandığın js geciktiriciyi kaldırmanızı öneririm. Ayarları yanlış olabilir yada sıkıntılı bir eklenti olabilir.

Onu kaldırınca hocam sorun yok, site düzeliyor. Ancak kayma olduğu için CLS den sınıfta kalıyoruz.

2 saatlik uğraş sonunda buldum birşeyler. Belki aynı sorunu yaşayan olur.

Wp Rocket ve Perfmatters eklentisi kurulu bende. Nedense ikiside kurulu. Perfmatters pasif yaptığım zaman düzeldi. Ama perfmatters pasif olunca site skorları yerle bir oldu. Gtmterix E oldu, A iken.

WP rocket js geciktirmeyi iptal edip perfmatters den js geciktir dedim. Aynı işlev onda da var. CLS iyi gibi bu seferde FCP yükseldi Neyse ona da sonra bakacağım

Ancak perfmatters aktif olduğu zaman siteden bir haberi paylaştığımda öne çıkan görseli göstermiyor. Örneğin whatsappta birine atıyorum. Resim görünmüyor. Perfmatters pasif olunca resim görünüyor daha havalı

Perfmatters kullanan varsa biliyordur muhakkak bir ayarı vardır yardımcı olursanız

jquery taglarını öne alın, javascript ve sonradan gereken js taglarının sıralamasını oynayın.




<script>jQuery(function($){
});
</script>

Header bölümüne aldım yine aynı. Önizleme resmi jquery ile mi alakalı hocam. Kodları incelediğimde rankmath aslında olayı ele alıyor gibi. Yani en üstte ki kodlar onun. Onun öncesine uğraştım alamadım. Rank math yazı başlığı önizleme resmi meta gibi tüm içerikleri en üste alıyor.

Perfmatters pasif yapar yapmaz resim geliyor paylaşırken ayarlarına baktım bulamadım.

Perfmatters ayarlarını buldum internetten şimdi önizleme de geldi. Belki sorun yaşayan olursa Google dan arattım önerilen ayarları.

Sırada fcp var ama bu CLS lab üzerinde skor güzel fakat Google bunu istemiyor kesinlikle öğrendim. Lighthouse ile baktığımda CLS düşük çıkıyordu. Bana Hizmeti veren arkadaşta Google buna bakar dedi ama CLS den geçemedi. Yani bence Google ona bakmıyor lab verilerini önemsemiyor. Peki bu CLS yi gerçek skorunu nasıl öğreneceğiz?

JS geciktirmek, defer yapıp sıraya alarak yükleme yapmak demektir. Eğer JS kütüphanesi ve o kütüphaneye bağlı eklentiler ona göre modifiye edilmemişse, büyükten küçüğe yüklediği için sitenizde bozulmalar meydana gelebilir.

Örneğin jQuery dosyası 85KB, main.js dosyası 100KB yani yapıları böyle diyelim. Defer büyükten küçüğe yüklediği için siteniz bozulur çünkü önce jQuery kütüphanesinin yüklenmesi gerekir. Defer yapmak için bu sistemin ona göre oturtulması gerekiyor. Onun dışında preload yapabilirsiniz ama sayfa yapısına göre FCP sorununa neden olabilir. Bu durumda en iyisi hiçbirini yapmamaktır.

CLS sorunu, içeriğin kullandığı kaynaklara ve yapıya bağlıdır. Çözmek için bu kısımlarda epey uğraşmak gerekir. Bu şekilde eklentilerle her zaman istediğiniz sonuca ulaşamayabilirsiniz.

İlginize bilginize teşekkürler hocam.

wp rocket ile Js delay yaptığımda dediğiniz gibi site bozuldu, perfmatters ile yapınca sitede sorun oluşmadı. Sadece bu fcp sorunu çıktı. Bunu araştıramadım henüz.

Ama CLS çözüldüğünü düşünüyorum onu nasıl anlarız bilmiyorum lab olarak değil de ben siteyi açtığımda kayma olmuyor sitede. Zaten CLS de bu olay diye öğrendim.