Farsça Sitede CLS Düzen Kaymasını Düzeltme; Fonttan Görsele

Farsça Sitenizin CLS Değeri Neden 0.1'in Üzerinde ve Google Neden Negatif Puan Veriyor

Ürün sayfasını açıyorsunuz, metin henüz yüklenmemiş ve aniden her şey birkaç piksel kayıyor. Nişan aldığınız "Sepete Ekle" butonu artık başka bir yerde. Gerçek kullanıcının deneyimlediği an budur ve Google bunu CLS (Cumulative Layout Shift) metriğiyle ölçer. Google'ın CLS için kabul eşiği 0.1'dir. Bunun üzeri, sayfanızın Core Web Vitals raporunda başarısız olduğu ve arama sonuçlarındaki sıralamanızın düştüğü anlamına gelir.

Farsça sitelerde, düzen kaymasının üç kaynağı en yaygın olanlarıdır. Geç yüklenen Farsça font, içerikten sonra gelen reklam ve boyutları belirtilmemiş görsel. Her birinin ayrı bir çözümü var. İşte burada hata yapıyorlar: Çoğu kişi sorunun hosting'den kaynaklandığını düşünüp hız artırma yoluna gidiyor. Oysa CLS'in yükleme hızıyla bir ilgisi yok. Bir sayfa 0.5 saniyede yüklenebilir ancak CLS değeri 0.4 olabilir. Sorun render sırasıyla ilgilidir, hızla değil.

Farsça Font; Düzenin Sessiz Katili

Vazirmatn ve IRANSans gibi Farsça fontlar yüksek boyutlara sahiptir. Farklı ağırlıklara sahip bir Vazir dosyası bazen 200 kilobayta ulaşır. Tarayıcı, font yüklenene kadar metni sistemin varsayılan fontuyla gösterir. Farsça harflerin yükseklik ve genişlik farkı, varsayılan fontla bazen 15 piksele kadar dikey kaymaya neden olur. Bu sayı CLS için felakettir.

Çözüm: Hassas Ölçümle Birlikte font-display: swap Kullanımı

İlk adım, font tanımında font-display: swap kullanmaktır. Bu, tarayıcının önce varsayılan fontla metni göstermesini ve ardından ana fontu değiştirmesini sağlar. Ancak bu yolun sadece yarısıdır. Sorun şu ki swap tek başına kaymayı ortadan kaldırmaz, sadece geciktirir.

Gerçek çözüm, @font-face kuralında size-adjust ve ascent-override kullanmaktır. Bu özellikler tarayıcıya, yedek fontun ana fonttan farklı olmaması için ne kadar yer kaplaması gerektiğini söyler. Pratik örnek:

@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/vazirmatn.woff2') format('woff2');
  font-display: swap;
  size-adjust: 98%;
  ascent-override: 90%;
  descent-override: 25%;
}

Kesin sayıları ölçüm aracıyla bulmalısınız. Chrome DevTools'un Performance sekmesinde, kayma bölgelerini kırmızıyla gösteren "Layout Shift Regions" adlı bir seçenek vardır. İşte burada hata yapıyorlar: Çoğu kişi sadece font-display: swap ekleyip işin bittiğini sanıyor. Sonuç, laboratuvar raporunda CLS'in düşmesi ancak gerçek kullanıcı verilerinde (CrUX) hâlâ yüksek olmasıdır. Çünkü gerçek kullanıcı fontu önbellekten almaz ve kayma meydana gelir.

Hassas projelerde tercih ettiğim ikinci yol ise font-display: optional kullanmaktır. Bu değer tarayıcıya, font ilk 100 milisaniyede yüklenmezse hiç kullanmamasını ve varsayılan fontla kalmasını söyler. Düzen kayması sıfıra iner ancak sitenin görünümü sistemin varsayılan fontuyla gösterilir. Hızın birinci öncelik olduğu haber siteleri için bu doğru seçimdir. Görsel kimliğin önemli olduğu marka odaklı siteler için size-adjust ile swap daha doğrudur. İkisini de test edin ve verilerle karar verin.

Reklamlar; Kontrolünüz Dışındaki Kayma Kaynağı

Google AdSense veya İran reklam ağlarının reklamları, CLS'in en kötü düşmanıdır. Reklam script'i ana içerikten sonra yüklenir ve banner boyutlarını aniden belirler. Sonuç? Reklamın altındaki içerik birkaç piksel aşağı kayar. Bu kayma her görüntülemede tekrarlanır ve Google bunu CrUX raporunda kaydeder.

Çözüm: CSS ile Alan Rezerve Etme

Reklam script'i yüklenmeden önce, HTML'de belirli boyutlara sahip bir kap yerleştirin. Reklam o kapta yüklenmezse, bir yedek mesaj veya boş alan gösterin. Örnek:

<div class="ad-slot" style="width: 728px; height: 90px;">
  <!-- Reklam script'i buraya yerleştirilir -->
</div>

Sorun şu ki reklam boyutları her zaman sabit değildir. Google AdSense, boyutları sayfa genişliğine göre değişen responsive reklamlar sunar. Bu durum için min-height kullanın ve belirli bir aralık verin:

.ad-slot {
  min-height: 90px;
  max-height: 250px;
}

İşte burada hata yapıyorlar: Reklamı, "okuyucuyu rahatsız etmesin" diye makalenin sonuna yerleştiriyorlar. Ancak CLS açısından sayfanın sonu en kötü yerdir. Çünkü kullanıcı kaydırma yapıyor ve ani kayma, nişan aldığı bağlantıyı kaybetmesine neden olur. Reklamı, rezerve edilmiş alanla içeriğin ortasına yerleştirin. Evet, tıklama oranı düşebilir. Ancak SEO sıralaması yükselir ve organik trafik artar. Bu, her zaman yaptığım bir takastır.

Boyutsuz Görseller; Hâlâ Tekrarlanan Hata

width ve height özellikleri olmayan bir <img> etiketi, tarayıcının görselin ne kadar yer kaplayacağını bilmediği anlamına gelir. Görsel yüklenene kadar yüksekliği sıfırdır. Yüklendikten sonra aniden alan açılır ve içerik aşağı kayar. Bu, kaymanın en basit kaynağıdır ve en kolay çözüme sahiptir.

Çözüm: aspect-ratio ile width ve height Özellikleri

Modern HTML'de, boyutları etikette belirtmeniz yeterlidir ve CSS gerisini halleder:

<img src="product.jpg" width="800" height="600" alt="Ürün">

img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}

Tarayıcı, aspect-ratio kullanarak en-boy oranını anlar ve görsel yüklenmeden önce gerekli alanı rezerve eder. Bu teknik, 2021'den beri tüm modern tarayıcılarda desteklenmektedir. CSS arka plan görselleri için de üst kapta aspect-ratio kullanın.

Önemli bir not: Görseliniz CSS ile ölçekleniyorsa ve görüntülenen boyutlar gerçek boyutlardan farklıysa, aspect-ratio'yu dosya oranıyla değil, görüntülenme oranıyla ayarladığınızdan emin olun. İşte burada hata yapıyorlar: Dosya oranını koyuyorlar, tarayıcı alanı yanlış rezerve ediyor ve kayma daha da kötüleşiyor. Görüntülenme oranını dosya özelliklerinden değil, ölçüm aracından alın.

CLS Ölçümü; Her Değişiklikten Önce

Herhangi bir çözümü uygulamadan önce mevcut sayıyı bilmelisiniz. Bunun için üç aracınız var:

• PageSpeed Insights — Laboratuvar raporunu ve CrUX verilerini yan yana gösterir. Yüksek laboratuvar ve düşük CrUX değeri, sorunun gerçek koşullarda meydana geldiği anlamına gelir.
• Chrome DevTools — Performance sekmesi ve Layout Shift Regions seçeneği. Kaymanın yerini görmenin en kesin yöntemi.
• web-vitals JavaScript kütüphanesi — Gerçek ortamda ölçüm yapmak ve verileri Analytics'e göndermek için.

Her değişiklikten sonra tekrar ölçün. CLS kümülatif bir metriktir ve sayının değeri sayfanın ömrü boyunca birikir. Yüklemenin başlangıcındaki büyük bir kayma, sayfanın geri kalanı temiz olsa bile tüm sayıyı bozabilir.

Sunucu altyapısıyla ilgili sorun yaşıyorsanız ve kaymanın nereden kaynaklandığını bilmiyorsanız, alan adı ve DNS teknik kontrolü yapın. Bazen sorun, sunucu düzeyinde çözülebilen önbellek başlıkları veya kaynak yükleme sırasından kaynaklanır. Sitede yapısal değişiklikler için ServerNet web tasarımı uygun bir seçenek olabilir, ancak önce ücretsiz araçlarla teknik sorunu bulun.

Ayrıca site hızını artırma konusundaki kapsamlı rehberimizde LCP ve INP gibi diğer Core Web Vitals metriklerini de ele aldık. CLS üç metrikten yalnızca biridir ve diğer ikisini göz ardı ederseniz sıralamanız hâlâ düşük kalır.

Uygulama Sırası; Nereden Başlamalı

Sitenizin CLS değeri 0.1'in üzerindeyse şu sırayı izleyin:

1. Görselleri kontrol edin. Tüm img etiketlerine width ve height özelliklerini ekleyin. Bu en hızlı kazanımdır.
2. Fontu size-adjust ile ayarlayın. Bu en çok zaman alan kısımdır ancak Farsça sitelerde en büyük etkiye sahiptir.
3. Reklamları rezerve edilmiş alanla değiştirin. Reklam veren izin vermiyorsa, en azından min-height belirleyin.
4. PageSpeed Insights ile tekrar ölçün ve sayıyı kaydedin.

Her adım arasında değişikliği staging ortamında test edin. Fontta yapılacak yanlış bir değişiklik okunabilirliği bozabilir ve hemen çıkma oranını artırabilir. Bu, değmeyecek bir takastır.

Teknik ekibiniz yoksa ve bu işler size ağır geliyorsa, SEO hizmetleri bu kısmı sizin için yönetebilir. Ancak önerim, en azından ölçümü kendinizin öğrenmesidir. CLS sayısını ayda bir kontrol edin. Yükselirse, hızla kaynağını arayın. Bu iş 10 dakika sürer ve büyük kayıpları önler.

Sıkça Sorulan Sorular

CLS nedir ve SEO için neden önemlidir?

CLS, Cumulative Layout Shift'in kısaltmasıdır ve sayfa yüklenirken öğelerin aniden kayma miktarını ölçer. Google bu metriği Core Web Vitals'ın bir parçası haline getirmiştir ve 0.1'in üzerindeki değer, arama sonuçlarında sıralamanın düşmesine neden olur.

Kendi sitemin CLS değerini nasıl ölçerim?

En kolay yol PageSpeed Insights kullanmaktır. Site adresini girin ve raporu görün. Gerçek kullanıcı verileri için aynı rapordaki CrUX bölümüne bakın. Laboratuvar ve gerçek değer farklıysa, sorun kullanıcıların özel koşullarından kaynaklanıyordur.

Farsça font düzen kaymasına neden olur mu?

Evet, Farsça fontlar yüksek boyutlara sahiptir ve geç yüklenir. Harf yüksekliklerinin sistemin varsayılan fontundan farkı dikey kayma yaratır. font-display: swap ile birlikte size-adjust kullanmak bu sorunu çözer.

Google AdSense reklamları CLS'yi ne kadar etkiler?

Çok fazla. Reklam script'i içerikten sonra yüklenir ve banner boyutları aniden belirlenir. Bu sorunu çözmek için script yüklenmeden önce belirli boyutlarda boş alan rezerve edin. Reklam yüklenmezse, o alan boş kalır ancak kayma meydana gelmez.