İnternet sayfalarında özel yazı tiplerini kullanmak epey yaygın. Esasen bu yazı tiplerinin başka ögelerle ve eksiksiz bir görsel kimlikle birlikte markalaşma seyahatinde da yardımcı olduğu aşikar. Lakin internet sayfalarında özel yazı tiplerinin yüklenmesi bazen istenmeyen durumlara da sebep yaratabiliyor. Bu nedenle FOIT ve FOUT nedir, ikisinin farklılıklarını tartışmak hayli değerli. Burada iki farklı biçimde özel yazı tipi yüklenmesi metodundan bahsediyoruz ancak her ikisinde de performans ve kullanıcı tecrübesi ile ilgili bir kadro artıları ve eksileri mevcut. Gelin daima birlikte bu iki sistemi birlikte değerlendirelim.
Ama Evvel Yazı Font Tipleri Nasıl Yüklenir?
İlk olarak bir sayfanın yükleme sürecini anlamak gerekir. İnternet tarayıcısı üzerinden bir sayfaya erişirken tüm HTML kodu tahlil edilir. Bu süreçte, birkaç öge ortasında fontlar da yüklenmesi gereken öğeler ortasındadır. Tarayıcı yazı tiplerini yüklemeye başladığında istenen yazı tipinin bulunabilmesi için sayfanın oluşturma süreci engellenir. Adım adım ve daha kolay bir formda söylem etmek gerekirse:
- Tarayıcı bir sayfayı ister,
- Tarayıcı HTML ve temaslı CSS dosya/dosyalarını indirir,
- Tarayıcı HTML ve CSS’yi ayrıştırır,
- Tarayıcı, CSS evraklarından linklenen belgelerin (yazı tipleri gibi) indirilmesini başlatır,
- Tarayıcı web yazı tiplerinin indirilmesini beklerken, sayfayı oluşturmaya başlamadan evvel 3 saniyeye kadar bekler (font block timeout).
- Yazı tipleri 3 saniye içinde gelirse, sayfa olması gerektiği üzere oluşturulur.
- Yazı tipleri tam olarak yüklenmemişse, tarayıcı sayfayı sistem yazı tiplerini kullanarak işler (font swap timeout), akabinde web yazı tipleri geldiğinde ise sayfayı tekrar işler.
Yazı tipi yükleme temelde iki parametreye bağlıdır: “Font block timeout” ve “font swap timeout”. Asıl hedef, ikisi ortasında bir istikrar kurmaktır.
| TARAYICI | BLOCK TIMEOUT | SWAP TIMEOUT |
|---|---|---|
| Chrome 35+ | 3 saniye | Sonsuz |
| Opera | 3 saniye | Sonsuz |
| Firefox | 3 saniye | Sonsuz |
| Explorer | 0 saniye | Sonsuz |
| Safari | Sonsuz | N/A |
Şimdi, hangi parametreleri düşünmemiz gerektiğini öğrendikten sonra, muhakkak bir proje için hangi vakit aşımı müddetlerinin en uygun kullanıcı tecrübesiyle sonuçlandığını deneyebilir ve karar verebiliriz. Öteki bir deyişle, fontlar yüklenmeden evvelki süreyi nasıl ele almak istediğimize ve fontların indirilmesi bittiğinde ne yapacağımıza karar verebiliriz.
FOIT nedir?
FOIT nedir bakıldığında, öncelike FOIT’in açılımı “Flash of Invisible Text”tir. Bu yazı tipi yükleme usulü, orjinal fontlar bulunana kadar metin alanlarının boş yazı tipleriyle bırakılmasına karar verir. Bu durumda font evrakı yüklenene kadar metinler ekranda görünmezler.Pratikte yükleme müddeti üç saniyeden fazla sürmez. Fakat bu mühlet zarfında sayfa, fotoğraflar üzere öteki öğelerin yüklenmesinde de gecikme yaşar. Bahsettiğimiz üzere tüm sayfa oluşturması durdurulur ve yazı tipi yükleme seçimi FOIT ise, üç saniyeye kadar metinler görünür hale gelmeyecektir.
FOUT nedir?
FOUT’un açılımı ise “Flash of Unstyled Text”tir. Bu, içeriğin mümkün olan en kısa müddette tam olarak görüntülenmesine öncelik veren sayfa yükleme sistemidir. Bunu yapmak için, oluşturma sırasında FOUT, özgün yazı tipleri bulunana ve daha sonra yüklenene kadar genel yazı tiplerini kullanır. Tertibi süreksiz olarak görmezden gelse de içeriğe odaklanır.Geçici olarak da olsa yeni bir standart yazı tipi gösterme seçeneği, CSS yüklenirken daha yeterli bir kullanıcı arayüzü sağlar. Bu mühlet, sayfanın özel yazı tipi görüntülenene kadar çoklukla pratikte bir saniyeden uzun sürmez. Rastgele bir sitenin gayesinin çoklukla içerik sunmak olduğunu göz önüne alırsak, FOUT tercih edilmelidir ve mümkünse bu süreç sahiden hızlandırılmalıdır. En az üç saniyelik bir gecikmeyle getirilmesi, kullanıcıların web sitesini büsbütün terk etme ve diğer bir yere gitme olasılıklarını da büyük ölçüde artırır.
Görsel Kaynak: https://www.malthemilthers.com/font-loading-strategy-acceptable-flash-of-invisible-text/
FOIT ile savaşmak istiyorsanız, en kolay araç “font-display” CSS özelliğidir. Bu özellik, bir yazı tipi yüzünün indirilip indirilmediğine ve ne vakit kullanıma hazır olduğuna bağlı olarak nasıl görüntüleneceğini belirler ve 5 farklı kıymet alabilir. Bunlar:
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;
Bu kıymetlerin manalarına bakacak olursak:
- Auto: Yazı tipi görüntüleme stratejisi, user-agent (kullanıcı aracısı) tarafından tanımlanır.
- Block: Yazı tipine kısa bir blok müddeti ve sonsuz bir takas mühleti verir.
- Swap: Yazı tipine son derece küçük bir blok dönemi ve sonsuz bir takas dönemi verir.
- Fallback: Yazı tipine son derece küçük bir blok dönemi ve kısa bir takas dönemi verir.
- Optional: Yazı tipine son derece küçük bir blok müddeti verir ve takas müddeti yoktur.
Genellikle değiş tokuş edilen yazı tiplerinin görünümünden benim üzere hoşlanmıyorsanız, bu durumda imdadınıza font belgelerini preload etme seçeneği koşuyor:
<link rel="preload" href="/fonts/awesome-font.woff2" as="font" />Fakat kaynakları preload etmek de her vakit güzel bir fikir değildir, zira çok sayıda preload metodu ile kaynakları önden yüklemek istediğinizde, “initial render” dediğimiz birinci oluşturma sürecini de engellemiş olursunuz. Bu durum da, sayfanın açılış müddeti performansını negatif tarafta etkileyecektir.
Günün sonunda ziyaretçilerinize hoş bir okuma tecrübesi sağlamak önemli. Metninizin süratli ve meselesiz bir halde oluşturulmasını sağlamak için süratlice birtakım ipuçları paylaşalım:
- Kritik yazı tiplerinizi evvelce yüklemek için link[rel=preload] kullanın.
- Mümkün olduğunca özel yazı tiplerinden kaçının. Hiçbir yazı tipi bir sistem yazı tipinden daha süratli işlenmez. Birden fazla vakit gövde metniniz sistem yazı tiplerini kullanarak pek uygun görünecektir.
- Bağlantı yükünü azaltmak ve üçüncü bir tarafa bağımlılığı azaltmak ismine yazı tiplerinizi kendi sunucunuzda barındırın.
- Görünmez metnin flaşını önlemek için (FOIT) “font-display: swap” özelliğini kullanın.
- Yazı tipi yüklendiğinde, yine akışı en aza indirmek ismine yedek yazı tipinizin web yazı tipinize mümkün olduğunca benzediğinden emin olun. Bunun için şurada hoş bir “Font Style Matcher” aracı var.
- Yazı tiplerinizin ek varyantlarını (ağırlıkları, stilleri) yüklemenin tekrar akışını en aza indirmek için yazı tipi sentezini “font-synthesis” kullanın.
Bonus
Sayfanızdan çıkan üçüncü parti isteklerini haritalayan muazzam bir aracı paylaşmadan da olmaz: CDN’lerinizin ve üçüncü tarafların nasıl davrandığını daha yeterli anlamak için WebPageTest çıktısını alır ve bir istek haritasına dönüştürür: https://requestmap.webperf.tools
“SuperApp Nedir? SuperApp Nasıl Olur?“ başlıklı yazımızı okumuş muydunuz?
