Site Farsça Font Optimizasyonu; Metin Sıçramasını Giderme ve Boyutu Azaltma

Site metniniz birkaç milisaniye görünmez

Sayfayı açıyorsunuz. İçerik var ama harfler yok. İki saniye sonra her şey aniden beliriyor ve sayfa düzeni kayıyor. İranlı kullanıcının sitenizle çalışırken yaşadığı an tam olarak budur ve sebebi de sitenin Farsça fontudur.

Sorun, Farsça fontların ağır olmasıyla başlar. 4 normal ağırlığa sahip tam bir Vazirmatn dosyası 400 ila 700 kilobayt arasındadır. Vazirmatn'ın Variable sürümü ise 1 megabayta bile ulaşır. Bu boyutu, sıkıştırma sonrası genellikle orijinal boyutun %20-30'una düşen woff2 dosyasıyla karşılaştırın. Ancak bu sıkıştırılmış boyut bile, İran mobil ağında 80-150 milisaniyelik gecikmeyle yüklendiğinde, metnin görüntülenmesinde birkaç yüz milisaniyelik gecikme anlamına gelir.

Bu arada tarayıcının iki seçeneği vardır. Ya metni sistemin varsayılan fontuyla gösterir (FOUT) ya da tamamen gizli tutar (FOIT). Her iki durum da kullanıcı deneyimi için felakettir. Birincisi düzen kaymasına veya CLS'ye neden olur, ikincisi kullanıcıyı boş bir sayfayla karşı karşıya bırakır.

Çözüm fontu kaldırmak değil. Çözüm, tam olarak bu anı kontrol etmektir.

font-display: Vermeniz gereken ilk karar

Aşağıdaki CSS çıktısını düşünün:

@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/vazirmatn.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}

swap değeri tarayıcıya şunu söyler: "Metni hemen varsayılan fontla göster; font hazır olduğunda değiştir." Bu, kullanıcının asla boş metin görmeyeceği anlamına gelir. Ancak bunun maliyeti düzen kaymasıdır. Çünkü Farsça fontun satır yüksekliği ve harf genişliği genellikle sistemin varsayılan fontundan farklıdır.

block değeri tam tersi şekilde çalışır. Tarayıcı 3 saniyeye kadar bekler ve font gelmezse metni yedek fontla gösterir. Bu durum FOIT'u maksimuma çıkarır ve fontu dahili sunucuda olan bir Farsça site için genellikle yanlış bir seçimdir.

optional değerini de ciddiye alın. Bu değer tarayıcıya, font çok hızlı gelmezse onu hiç kullanmamasını ve sistem fontunu kalıcı olarak tutmasını söyler. Sonuç? Fontu görmeyen ancak sıçrama da yaşamayan kullanıcı. Fontun marka kimliği olduğu siteler için bu, tasarımın tamamen başarısız olması demektir.

İşte burada hata yapıyorlar: Birçok kişi swap'ın tüm sorunları çözdüğünü düşünür. Ancak çalışmalarının sonucunu Google PageSpeed Insights'da görün. CLS 0.15'ten 0.38'e çıkar ve rapor "font-display: optional kullanın" der. Bu tavsiyeyi körü körüne uygulamayın. Farsça font metninizin okunabilirliği için hayati önem taşıyorsa, swap'ı koruyun ve CLS sorununu fontu feda ederek değil, altyapı teknikleriyle çözün.

Sorunu gerçek anlamda ölçme

Herhangi bir değişiklikten önce mevcut durumu kaydedin. Chrome DevTools'ta Performance sekmesini açın ve sayfayı Network Throttling ile Slow 4G'de bir kez yükleyin. İki sayıyı not edin: FCP ve CLS. Ardından Network sekmesinde font dosyasını bulun ve Waterfall sütununa bakın. Font 1.5 saniyeden sonra indirilmeye başladıysa, sorun başka bir yerdedir: fontunuz HTML'de gerekenden daha aşağıda referans verilmiş veya başka bir CSS tarafından engellenmiştir.

Bir başka pratik ipucu: Font dosyasını aşağıdaki komutla kontrol edin:

curl -sI https://example.com/fonts/vazirmatn.woff2 | grep -E "HTTP|content-length|cache-control"

cache-control 31536000'den düşük bir max-age içeriyorsa, kullanıcının tarayıcısı fontu her ziyarette yeniden indirir. Bu, kullanıcının sitenizin sonraki sayfasına her gidişinde fontu tekrar beklemesi anlamına gelir.

Farsça font alt kümeleme; boyutun gerçekten azaldığı yer

Tam Farsça font 600'den fazla glif içerir: harfler, sayılar, işaretler, birleşimler. Ancak sayfanızın bir anda kaç tanesine ihtiyacı var? Cevap: 100'den azına. Alt kümeleme (subsetting), font dosyasını birkaç parçaya bölmek ve tarayıcının gerçekten ihtiyaç duyduğu kısmı göndermek anlamına gelir.

fonttools projesinden ücretsiz araç pyftsubset bunu yapar. Kurulum ve çalıştırma:

pip install fonttools brotli
pyftsubset vazirmatn.ttf \
  --unicodes="U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF" \
  --flavor=woff2 \
  --output-file=vazirmatn-fa.woff2

Bu komut yalnızca Arapça ve Farsça glifleri tutar ve gerisini kaldırır. Vazirmatn için sonuç genellikle 400 kilobayttan 120-150 kilobayta düşer. Şimdi bu dosyayı CSS'te unicode-range ile tanımlayın:

@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/vazirmatn-fa.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
  font-display: swap;
}

Modern tarayıcılar bu dosyayı yalnızca sayfada bu unicode aralığında metin bulduklarında indirir. Yalnızca Farsça içeren bir sayfa için anında indirme anlamına gelir. İngilizce olan bir sayfa için hiç indirme yapılmaz.

Bir adım daha ileri gidin: Fontu sık kullanılan karakterlere göre alt kümeleyin. fonttools subset aracı --text bayrağıyla bunu sağlar:

pyftsubset vazirmatn.ttf \
  --text="ابپتثجچحخدذرزژسشصضطظعغفقکگلمنوهیئ،.؛:!؟۱۲۳۴۵۶۷۸۹۰" \
  --flavor=woff2 \
  --output-file=vazirmatn-body.woff2

Bu dosya sitenin gövde metni için yeterlidir ve boyutu 30-40 kilobayta ulaşır. Ancak dikkatli olun: Kullanıcı bu listede olmayan bir karakterle metin yazarsa veya özel kelimeler içeren bir sayfanız varsa, o harfler görüntülenmez. Bu nedenle bu yöntemi yalnızca gövde fontu için kullanın ve tam fontu başlıklar ve özel öğeler için saklayın.

Subsetting'i preload ile birleştirme

Alt kümeleme boyutu azaltır ancak ağ gecikmesini azaltmaz. Fontun sayfa yüklemenin en başından itibaren indirilmesi için, onu preload ile tarayıcıya bildirin:

<link rel="preload" href="/tr/fonts/vazirmatn-fa.woff2" as="font" type="font/woff2" crossorigin>

Bu satırı <head> içine yerleştirin. Tarayıcı, CSS'in gelmesini beklemeden font indirmeye hemen başlar. Pratik sonuç: Font genellikle 200-400 milisaniye daha erken hazır olur.

İşte burada hata yapıyorlar: preload'u tam font dosyasına uyguluyorlar. Sonuç, sayfanın yalnızca 50 kilobayt fonta ihtiyacı olsa bile 400 kilobaytın en baştan indirilmesidir. preload'u her zaman ilk render için gereken en küçük alt kümeye koyun.

FOUT'u kabul edin, ancak yönetin

font-display: swap ile kullanıcı önce metni sistem fontuyla, sonra ana fontla görür. Bu sıçrama kontrol edilmezse CLS'yi yükseltir ve okuma deneyimini bozar. Bu sıçramayı yönetmek için iki yolunuz var.

İlk yol: Yedek fontu, boyutları ana fonta yakın olacak şekilde seçin. Vazirmatn için Linux'ta önerilen sistem fontu genellikle satır yüksekliği yaklaşık %15 daha fazla olan DejaVu Sans'tır. CSS'te line-height ayarlayarak bu farkı telafi edebilirsiniz:

body {
  font-family: 'Vazirmatn', 'DejaVu Sans', sans-serif;
  line-height: 1.8;
}
.fonts-loaded body {
  line-height: 1.7;
}

İkinci yol: JavaScript ile font yüklemesi tamamlandıktan sonra <body>'ye fonts-loaded sınıfını ekleyin. Bu, document.fonts.ready ile basittir:

document.fonts.ready.then(function () {
  document.body.classList.add('fonts-loaded');
});

Bu yöntem size tam kontrol sağlar. Fontu başlıklar gibi belirli öğeler için daha erken etkinleştirebilir ve gövde metni için bekleyebilirsiniz. Nihai sonuç, kullanıcının fark etmediği bir sıçramadır, tüm sayfayı kaydıran bir sıçrama değil.

Farsça fontu dahili sunucuda tutun

Fontunuz harici bir CDN'de veya Google Fonts sunucusundaysa, her font isteği sınırı geçmek zorundadır. Bu yolun gecikmesi en kötü durumda 300 milisaniyeye ulaşır. Fontu, sitenizin çalıştığı sunucuya koyun ve yolunu same-origin ile koruyun. Bunun bir avantajı daha vardır: Dahili sunucuda HTTP/2 ile font, CSS ve JavaScript tek bir TCP bağlantısında yüklenir ve yeni bağlantı kurma maliyeti ortadan kalkar.

Fontunuzun gerçekten nereden sunulduğunu kontrol etmek için alan adı ve DNS teknik kontrol aracını kullanın ve font adresinin hangi IP'ye gittiğini görün. IP İran dışındaysa, font her indirildiğinde kullanıcı sınırın geçilmesini bekliyor demektir.

Optimizasyon sırası; nereden başlamalı

Siteniz şu anda metin sıçraması sorunu yaşıyorsa şu sırayı izleyin:

1. Fontu alt kümeleyin ve yalnızca Farsça glifleri tutun. Boyutu 400'den 150 kilobaytın altına düşürün.
2. font-display: swap'ı etkinleştirin ve preload'u alt kümelenmiş dosyaya koyun.
3. Fontu dahili sunucuda barındırın ve cache-control: max-age=31536000 başlığını ayarlayın.
4. document.fonts.ready ile düzen kaymasını yönetin.
5. Son olarak PageSpeed Insights ve Chrome DevTools ile CLS'nin 0.1'in altında ve FCP'nin 1.8 saniyenin altında olduğunu ölçün.

Bu adımları yaptıysanız ve CLS hala yüksekse, sorun fonttan kaynaklanmıyordur. Muhtemelen sayfadaki görseller veya diğer öğeler belirli boyutlar olmadan render ediliyordur. Farsça sitede CLS düzen kaymasını giderme rehberini okuyun ve onlara yönelin.

Son bir not: Fontu sonsuza kadar kendi sunucunuzda tutmayın. Birkaç ayda bir fontun yeni sürümünü kontrol edin. Vazirmatn gibi Farsça fontlar düzenli olarak güncellenir ve yeni sürümler genellikle daha iyi gliflere ve bazen daha az boyuta sahiptir. Fontu güncellemek, değer verilen basit bir CSS değişikliğidir.

Sitenizin genel hızını iyileştirmek istiyorsanız, tıklamadan render'a site hızını artırma rehberini inceleyin. Ve bu optimizasyonlar sizin için zaman alıcıysa, SEO hizmetleri ekibi bu işi sizin için yapabilir.

Sık sorulan sorular

Farsça fontum neden geç yükleniyor?

Ana nedenler üçlüdür: font dosyasının yüksek boyutu, alt kümeleme eksikliği ve fontun harici sunucuda barındırılması. Tam Farsça font genellikle 400 kilobaytın üzerindedir ve harici CDN'deyse her seferinde sınırı geçmek zorundadır. Alt kümeleme ve dahili barındırma ile yükleme süresi genellikle üçte birine düşer.

font-display: swap mı yoksa optional mı daha iyi?

Farsça font sitenizin marka kimliği ve okunabilirliği için hayati önem taşıyorsa, swap'ı seçin ve düzen kaymasını diğer tekniklerle yönetin. optional yalnızca font dekoratif bir iyileştirme olduğunda ve yokluğu kullanıcı deneyimine zarar vermediğinde uygundur. Farsça haber ve e-ticaret sitelerinde genellikle swap doğru seçimdir.

Farsça font alt kümeleme ne kadar boyut azaltır?

600 glifli tam bir Farsça font genellikle 400-700 kilobayt boyutundadır. Yalnızca Arapça ve Farsça glifleri tutarak boyut 120-150 kilobayta düşer. Yalnızca sık kullanılan karakterleri tutarsanız boyut 30-40 kilobayta düşer. Bu azalma genellikle %70-90'dır.

Fontumun düzen kaymasına neden olduğunu nasıl anlarım?

Chrome DevTools'ta Performance sekmesini açın ve sayfayı Slow 4G throttling ile yükleyin. Kayıtta, font yüklemeyle aynı anda etkinleşen bir Layout Shift çubuğu görürseniz, font suçludur. Ayrıca fontu geçici olarak devre dışı bırakıp CLS'yi yeniden ölçebilirsiniz. CLS 0.05'in altına düşerse, font ana faktördür.