Web yazı tipi yüklemesi sırasında metnin görünür halde kalmasını sağlayın

Pagespeed yazı tipi hatası ve çözümü, Web sitenizi Google PageSpeed Insights hız testi aracında test ederken genellikle şu hata alınmakta: “Web yazı tipi yüklemesi sırasında metnin görünür halde kalmasını sağlayın.” (Controlling Font Performance with font-display).

Alt açıklamasında ise “Web yazı tipleri yüklenirken kullanıcının metni görebilmesini sağlamak için yazı tipi görüntüleme CSS özelliğinden yararlanın. ” denmekte. Bu yazımızda fontlardan kaynaklanan bu sorunun çözümünü anlatacağız.

Metnin Görünür Halde Kalmasını Sağlamak Önemli mi?

Varsayılan olarak tarayıcı yazı tiplerinin yüklenmesini bekler ve daha sonra görünür hale getirir. Yani font yüklenene kadar beyaz ve boş bir alan vardır. Ne zaman fontun indirilmesi tamamlanırsa, o zaman görünür hale gelir.

Bu durum neye yol açar? Öncelikle işlem gecikmesine sebep olur, ek CPU harcanır ve web siteniz daha yavaş yüklenir. Ayrıca ziyaretçileriniz font yüklenene kadar boş bir sayfaya bakarlar. Eğer fontun yüklenmesinde bir problem olursa ziyaretçi herhangi birşey okuyamayacağı için websitenizi terk edecektir.

PageSpeed ​​puanınızı arttırmak ve toplam yükleme sürenizi azaltmak (özellikle mobil ziyaretçiler için) sizin için önemliyse, web yazı tiplerine CSS’in bize sağladığı font-display özelliğini eklemeyi düşünmelisiniz.

Yazı Tipi Görüntüleme Seçenekleri

Google burada 5 farklı yöntemden bahsetmiş. İstediğiniz herhangi bir yöntemi tercih edebilirsiniz. Auto, Block, Swap, Fallback, Optional.

Auto, varsayılan görüntüleme biçimidir. Tarayıcıdan tarayıcıya değişiklik gösterebilir.

Block yöntemi, 3 saniyeye kadar yazı tipine blok koyabilir. Yazı tipi yüklenene kadar metin gizlenir. Metin daha sonra görünü hale gelecektir. Pek tercih edilmez.

Swap yönteminde herhangi bir blok süresi yok. Özel yazı tipini yükleyene kadar normal yazı tipini hemen göstermekte. Web sitenizde hem Google fontları hemde ikonları kullanıyorsanız diyelim. Sizin için önemli olan metin fontunun bir an önce yüklenmesi ise, fontlar için swap, ikonlar için block yöntemini kullanabilirsiniz. Böylece ikonlar daha sonra yüklenecektir.

Fallback yöntemi, block ile swap arasında bir yerde. 100ms lik bir blok döneminden sonra 3 saniyelik bir takas süresine sahiptir. 100ms içinde metin gizli kalır. Eğer özel yazı tipi bu sefer zarfında yüklendi ise gösterilir, yoksa normal yazı tipi gösterilir. Kullanıcının bağlantı hızına da bağlı olarak swap yöntemine göre özel yazı tipi daha geç görünür hale gelir.

Optional yöntemi, 100 mslik blok dönemine ve sıfır takas süresine sahiptir. Burada tarayıcı, kullanıcının bağlantı hızına bağlı olarak özel yazı tipini hiç kullanmamaya karar verebilir. Yani 100ms içinde normal yazı tipini yükler ancak özel yazı tipini kullanıcının bağlantı hızına göre değerlendirir. Özel yazı tipini hiç yüklemeyebilir de. Eğer sizin için görsellik önemli ise, fontunuzun vazgeçilmez olduğunu düşünüyor ve bunu ziyaretçinin mutlaka görmesini istiyorsanız, bu seçenek size göre değil. Özellikle websiteniz de ikon mevcut ise bu özelliği kullanmayın.

Not: Yukarıdaki 100ms vs 3 saniye Google’a göre ortalama değerlerdir.

Peki Biz Hangi Seçeneği Kullanacağız?

Kendi web sitemde az da olsa ikon mevcut olduğu için ben swap özelliğini kullanıyorum. Eğer sizin sitenizde icon önemli değil ise veya ikon bulunmuyor ise optional özelliğinizi tercih edebilirsiniz. Eğer ikon var ise optional kullanmayın, çünkü cache sisteminden dolayı ilk girişte ikonlar yüklenmeyecektir, bu da kötü bir görüntüye yol açar.

CSS Font-Display Nasıl Kullanılır?

Öncelikle kullandığınız fontların hangi css dosyanızda yer aldığını tespit edin. Daha sonra bu css dosyanızı Notepad++ gibi bir program ile açın. Açtığınız css dosyanızda yazı tipi bloğunuzu bulun ve aşağıdaki örneklerdeki gibi değişiklikleri uygulayın.

Örnek bir yazı tipi:

@font-face { font-family:'FontAwesomePro';
font-style: normal;
font-weight: 400;
src: url("../../../../fonts/font_awesome/fa-regular-400.woff2") format("woff2") }

@font-face { font-family:'FontAwesomePro';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url("../../../../fonts/font_awesome/fa-regular-400.woff2") format("woff2") }

Gördüğünüz gibi gayet kolay bir şekilde yapabilirsiniz. Değişiklik yaptığınız stil dosyasını kaydettikten sonra önbelleğinizi temizlemeyi unutmayın. Tüm .svg .eot .woff. .tff gibi uzantılı yazı tiplerinden bu yöntemi uygulayabilirsiniz.

Umarım bu yazı “Web yazı tipi yüklemesi sırasında metnin görünür halde kalmasını sağlayın” uyarınıza çözüm olmuştur.