Farsça yazı tipleri ve site hızı

Farsça bir yazı tipi neden daha pahalıya gelir

Latin bir yazı tipinin harf başına tek şekli vardır. Farsça bir yazı tipinin harf başına birkaç şekli vardır, çünkü bir harf kelimenin başında, ortasında, sonunda ve tek başına farklı yazılır; üstüne birleşik biçimler de eklenir. Sonuç, çok daha fazla glif taşıyan bir dosyadır ve ağırlığını yukarı çeken de budur.

Bu sitenin kendi dosyalarından gerçek sayı: ana yazı tipi olağan ağırlıkta 726 glif ve 652 kod noktası taşıyor ve 41,7 KB. Alt küme sürümü 599 glif ve 527 kod noktası taşıyor ve 24,7 KB.

Alt küme almak, bu sitenin asla ihtiyaç duymayacağı parçaları yazı tipinden çıkarmak demektir. Doğru olan budur ve yapmalısınız, ama zanaati bu sayfanın konusu değil: bir Farsça yazı tipinin harfleri dağılmasın diye neyi koruması gerektiği Farsça tipografi dersinde ayrıntısıyla anlatılıyor ve burada tekrarlamıyoruz.

Burada ele aldığımız şey daha az sorulan başka bir soru: dosyanız hafifledikten sonra o dosyaların kaçını gerçekten göndermeniz gerekiyor? Bu sitede o sorunun yanıtı, alt küme almanın kazandırdığından fazlasını kazandırdı.

Gerçekte kaç ağırlığa ihtiyacınız var?

Çoğu Farsça sitenin bayt kaybettiği yer burasıdır ve çözüm bir ayar değil: CSS'in kendi içinde, neredeyse kimsenin kullanmadığı bir kuraldır.

Tarayıcı, dosyanızın olmadığı bir ağırlıktaki metne ulaştığında o metni yazı tipsiz bırakmaz ve bir yazı tipi uydurmaz; elinizdeki en yakın ağırlığı seçer. Kural CSS standardına yazılmıştır ve arama yönü bellidir: beş yüzün altındaki bir ağırlık için önce daha düşük ağırlıklar, sonra daha yüksekler denetlenir; beş yüzün üstündeki bir ağırlık için önce yüksekler, sonra düşükler.

Şimdi bu site. Ana stil sayfasında beş ağırlık yazılı ve bunları kendiniz sayabilirsiniz:

grep -ohE 'font-weight:[[:space:]]*[0-9]{3}' style.css | tr -d ' ' | cut -d: -f2 | sort -un

Çıktısı beş sayı: 400, 500, 600, 700 ve 800. Ama bu sitenin gerçekten sunduğu HTML'de yalnızca üç font-face bloğu var: 400, 700 ve 800. Ağırlık 500, 400'e; ağırlık 600, 700'e çözülüyor, çünkü yukarıdaki kural böyle diyor ve sayfada farkı kimse görmüyor.

Tasarrufu hesaplayın. Gönderilen üç dosya 24,7, 24,9 ve 25,0 KB; toplam 74,6 KB. Aynı üç ağırlık tam hâlleriyle 41,7, 41,8 ve 42,0 KB. Beş ağırlığın hepsi alt küme alınmadan tam hâlleriyle gönderilseydi 208,6 KB olacaktı. İki karar birlikte yazı tipi ağırlığının üçte ikisinden fazlasını kaldırdı ve ikincisi, yani iki ağırlığı hiç göndermemek, tek başına yaklaşık 50 KB etti: alt küme almanın tek bir dosyada kazandırdığından fazla.

Aynı kurala bağlı bir şey daha: 700 ve 800'ün ikisinin de dosyası olduğu için tarayıcı hiçbir zaman sahte bir kalın üretmek zorunda kalmaz. Sahte kalın, Farsça yazıda Latin'dekinden kötü görünür ve Farsça tipografi dersi nedenini anlatır.

Ve kendi tamamlanmamış toparlamamızdan küçük bir itiraf: bu sitenin yazı tipi klasöründe, kodda hiçbir şeyin atıfta bulunmadığı, 41,5 KB yer kaplayan altıncı bir ağırlık duruyor. Ziyaretçiye hiç gönderilmiyor, yani hıza mal olmuyor, ama yine de silinmeyi hak ediyor.

font-display: neden swap değil optional seçtik

Yazı tipi dosyası gelene kadar tarayıcının metinle ne yapacağına karar vermesi gerekir ve font-display o kararı yazar. Neredeyse her eğitim swap önerir. Biz optional seçtik ve nedenini yazıyoruz, çünkü burası yaygın tavsiyenin Farsça için daha kötü çalıştığı yerlerden biri.

swap ile tarayıcı metni hemen bir yedek yazı tipiyle çizer ve gerçek yazı tipi gelir gelmez değiştirir. Metin hiçbir zaman görünmez olmaz; bu seçeneğin kazancı budur. Bedeli tam da o değiştirme anıdır: harf genişlikleri değişir, satırlar yeniden bölünür ve bütün sayfa sarsılır. O sarsıntı, Core Web Vitals dersinde ölçülen düzen kaymasıdır.

optional ile tarayıcı yazı tipine kısa bir pencere verir. Zamanında gelirse sayfa baştan onunla çizilir; gelmezse o ziyaretin tamamında yedek kalır ve hiç değiştirme olmaz. Yazı tipinden kaynaklanan düzen kayması kesin olarak sıfırlanır.

Bu seçimin Farsçada neden daha önemli olduğu: bir Farsça yazı tipiyle sistem yedeği arasındaki genişlik farkı, Latin'deki aynı farktan büyüktür. Yedekte altı satır süren bir paragraf gerçek yazı tipinde beş satır sürebilir ve o tek satırlık fark, sayfada altındaki her şeyi kaydırır.

Ve şimdi ödediğimiz bedel, ki açıkça söylenmeli: optional ile yavaş bağlantıdaki ilk kez gelen bir ziyaretçi o ziyaretin tamamını yedekle okuyup seçtiğimiz yazı tipini hiç görmeyebilir. Bizim için takas değdi, çünkü ikinci ziyaretinde yazı tipi önbellekten geliyor ve o andan sonra hep doğru. Marka yazı tipinizin tam olarak o ilk ziyarette görünmesi sizin için hayatiyse seçiminiz farklı olur ve bu da savunulabilir.

Yazı tipini daha erken başlatın: preload ve Early Hints

Tarayıcı CSS'i okuyana kadar bir yazı tipine ihtiyacı olduğunu bilmez ve HTML gelene kadar CSS'i yoktur. Yani yazı tipi indirmesi doğal olarak geç başlar ve bu bölümdeki her şey onu daha erken başlatmakla ilgilidir.

İlk adım preload: başlıkta, tarayıcıya bu dosyayı şimdi başlat diyen tek bir satır. Burada en sık ihmal edilen kural, yalnızca ilk görünümün yazı tiplerini ön yüklemektir. Beş ağırlığın hepsini ön yüklerseniz tarayıcı beş eşzamanlı indirme başlatır ve sayfanın ana görseline gitmesi gereken bant genişliği, sayfanın dibinde gereken bir yazı tipine gider. Bu sitenin üç yazı tipi var ve yalnızca ikisini ön yüklüyor: gövde metni için olağan ağırlık ve ana başlık için en ağır ağırlık.

İkinci adım daha az görülür ve etkisi gerçektir. Sunucu aynı ön yüklemeyi bir yanıt başlığı olarak da gönderebilir ve bazı içerik dağıtım ağları bunu, HTML'in kendisi hazır olmadan önce, 103 koduyla ön bir yanıt olarak tarayıcıya iletir. Yani sunucu sayfayı kurmakla geçirdiği süre boyunca tarayıcı yazı tipini indiriyor olabilir.

Bu sitede çalışıyor ve dışarıdan görülüyor: ana sayfaya yapılan bir istek önce aynı iki yazı tipini taşıyan bir 103 yanıtı, sonra sayfanın kendisiyle 200 yanıtını döndürüyor. Kendi sitenizde denemek için başlıkları bir komut satırı aracıyla alın ve 103 ile başlayan bir satır arayın; tarayıcı bu yanıtı geliştirici araçlarında göstermez.

Ve bunu dekoratif bir ayardan ayıran tek koşul: 103 yalnızca sayfayı kurmak gerçekten zaman aldığında işe yarar. Önbellekten gelen ve yirmi milisaniyede yanıt veren bir sayfada kazanılacak bir öncelik kalmamıştır.

Zıplamayan bir yedek dizi

Her ziyaretçi ilk anı bir yedek yazı tipiyle görür ve optional seçtiyseniz bazıları ziyaretin tamamını onunla görür. Yani bu dizi dekoratif bir ayrıntı değil, gerçek deneyimin bir parçasıdır ve bir şablondan kopyalanmak yerine seçilmelidir.

Bu sitenin kullandığı dizi şu sırayla gider: özel yazı tipi, sonra yaygın bir açık kaynak Farsça yazı tipi, sonra sistemin varsayılan yazı tipi, sonra Windows'ta bulunduğu bilinen iki yüz ve son olarak sans-serif. Mantığı basit: her basamak var olma olasılığı daha yüksek bir şeye doğru gider ve son basamak her zaman var olan bir şeydir.

Farsça bir dizi seçerken unutulmaması gereken iki şey var. Birincisi, yalnızca Latin taşıyan bir yazı tipi bu dizide yalnızca işe yaramaz değil, zararlıdır: tarayıcı Farsça harfler için bir sonraki basamağa geçer ama rakamlar ve Latin karakterler için onu alabilir ve metniniz iki farklı yazı tipiyle yazılmış olur. İkincisi, Tahoma Windows'ta Farsça harfleri taşır ve çoğu Farsça dizide hâlâ görünmesinin nedeni budur; güzel değildir ama vardır ve var olmak son basamakların tam da amacıdır.

Ve daha az yapılan, yapmaya değer bir şey: diziyi gerçekten test edin. Tarayıcınızın geliştirici araçlarında gerçek yazı tipinin adını kuraldan çıkarın ve sayfaya bakın. Hâlâ okunabiliyorsa optional kararı kolaylaşır; kırık bir sayfaya benziyorsa font-display'inizi değil dizinizi değiştirin.

Ve önbellek dersine bağlanan son parça: bir sitedeki bütün dosyalar arasında yazı tipi dosyası uzun bir önbellek için en iyi adaydır, çünkü hiç değişmez. Bu sitede yazı tipleri bir yıllık ömürle gönderiliyor; yani buraya bir kez gelmiş bir ziyaretçi bir dahaki sefere yazı tipi için sıfır bayt öder. Bu tek ayar, ikinci ziyaretten itibaren yukarıdaki her şeyi konusuz bırakır.