Font Kullanımı Hakkında İpuçları
Font kullanımı sayfaların çok büyük kısmında gerçekleşen ve genellikle hatalı kullanımlar içeren alanlar içindedir. Bu hataların çoğu web performans bütçesine negatif yansımaktadır. Webfont kullanımıyla alakalı bilgileri verecek bu yazımız umarız web performansınızı iyileştirecek noktalar içerir.
Yukarıda herhangi bir web sayfasının render olurken uygulanan hiyerarşinin şeması var. Bu şemadan da anlaşılabileceği gibi font öğeleri yüklenene kadar "render" edilen diğer öğelere font öğelerini bekletir. Buraki beklemeyi de doğru yönetmek hem CLS(Cumulative Layout Shif) için hem de kullanıcının algısı açısından önemlidir.
Bu noktadaki problem şu; sayfanın fontları yüklenene kadar tüm HTML, CSS render işlemleri sırasında sayfa üzerindeki fontların görünürlüğü taratıcıdan tarayıcıya değişir. Bu noktada tarayıcıların farklı uygulamaları oluyor. Bununla ilgili özeti aşağıda bulabilirsiniz.
| Browser | Default behavior if font is not ready… |
|---|---|
| Edge | Uses a system font until font is ready. Swaps out font. |
| Chrome | Will hide text for up to 3 seconds. If text is still not ready, uses a system font until font is ready. Swaps out font. |
| Firefox | Will hide text for up to 3 seconds. If text is still not ready, uses a system font until font is ready. Swaps out font. |
| Safari | Hides text until font is ready. |
Tarayıcıların insafına bırakmadan konuyu çözebilmek için font-display isimli parametre kullanıma sunuldu. Şu anki verilere baktığımızda %92 tarayıcı kullanımında font-display parametresinin olduğunu görebiliyoruz.
Font-display ne işe yarar?
Sayfanın yüklenme sürecinde fontlar yüklenene kadar fontların nasıl görüneceği yukarıda olduğu gibi tarayıcı bazlı değişebiliyor. Örneğin Safari tarayıcısının bazı versiyonları font yüklenene kadar gizliyor. Bunu standart hale getirebilmek için font-display: swap CSS parametresi ile font dosyaları yüklenene kadar sistem fontu üzerinden yazılar görüntülenir. Fontlar yüklenir yüklenmez sistem fontu olması gereken ile değiştirilir. Örnek kullanımı da aşağıda görebilirsiniz.
@font-face{
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}
Fontların önden yüklenmesi(preload)
Fontları yüklerken <link rel="preload"> kullanarak kritik oluşturma yolu(critical render path) öncesi çağırarak fontlar yüklenirken boşluk olmasını engellemektedir.
BONUS: Font kullanımında internet dünyasının yaklaşımı
SimilarTech verilerine göre çok önemli bir eğilim ve fotoğrafı birlikte çekelim. Aşağıdaki iki grafiğin ilkinde en iyi 10 bin sayfa üzerindeki font kullanımı, ikincisinde ise en iyi 100 bin sitenin font kullanımı bulunmaktadır. Önce grafikleri inceleyelim.
En iyi 10B site ile 100B site arasında Google Font ve Font Awesome kullanımında %5'şer fark bulunuyor. Peki bu bize neyi söylüyor. En iyi 10B site font konusundaki kullanımları optimize etmiş durumda. Bunu dikkate değer bir konu olarak incelemenizi öneriyoruz. Web fontları kendi çözümlerinizle uygulamayı nasıl yapabileceğinizi şimdiden düşünmeniz gerekiyor.
BONUS 2: Google Font ve Font Awesome kullanım rakamları
İlk bonusa atıfla en çok kullanılan yazı tipi kütüphanelerinin rakamsal boyutunu gösteren iki grafiği incelemenizi öneririm. Burada bahsi geçen tekil domain sayıları milyonları aşan durumda ki aslında buradaki milyonlar bir şekilde SEO'daki rakibinizlerinizdir. Bu kütüphaneleri kullanırken herkesten daha iyi ve optimize kullanarak öne çıkmanız gerekir.
