Google PageSpeed’de Web Yazı Tipi Yüklemesi Hatası Çözümü

Mayıs 2019
YouTube'ta Takip Et:

Web sitenizi Google PageSpeed’de test ederken karşılaşılan sorunlardan biri yazı tipi yüklemesi sorunu. “Web yazı tipi yüklemesi sırasında metnin görünür halde kalmasını sağlayın” uyarısının üstesinden gelerek site hızınızı biraz daha hızlandırabiliyoruz.

Google PageSpeed sayfasında bu hatanın üzerine tıkladığınızda CSS uzantılı bir font dosyasına ulaşırsınız. Gördüğünüz gibi hangi CSS dosyasında eksik olduğu belirtilmiş. Siz bu CSS dosyasına ulaşarak çözüm bulabileceksiniz.

Google PageSpeed Font Display Sorunu

CSS dosyasında örnek olarak aşağıdaki gibi bir kod olsun.

Metnin görünür halde kalmasını sağlayan font-display özelliği ekleyerek bu sorunun üstesinden gelebiliyoruz. Biz de bu CSS koduna font-display özelliği ekleyelim.

CSS dosyasını kaydedip kapattıktan ve sitedeki cache’leri temizledikten sonra tekrar kontrol ettiğimde, “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.” açıklamalı hatanın artık olmadığını görüyorum.

Google PageSpeed için Google Fonts Sorunu Nasıl Çözülür?

Sitenizde Google Fonts kullanıyor olabilirsiniz. Ben de kullanıyorum ve benim çözümüm şu şekilde. Google fontlardan çekilen CSS dosyasını buluyorum ve aşağıdakine benzer birkaç satırlık font kodlarına ulaşıyorum.

Bu kodları alıp olduğu gibi sitemin style.css dosyasına kopyalıyorum. Bu durumda Google’ın bana head etiketleri arasına eklemem için verdiği font kodu yerine kullanabiliyorum bunu. Yukarıdaki çözümde belirttiğim gibi font-display:swap özelliğini bu kodların her birine ekleyerek Google PageSpeed’in bu hatayı vermesini engellemiş oluyorum.

İkon fontların kullanımını kolaylaştıran Font Awesome gibi dosyalarda da aynı mantıktan swap özelliği ekleyerek Google PageSpeed‘in verdiği hatanın önünne geçebiliyoruz. Mantık olarak hepsinde aynı. Fontun çekildiği ve font-family’nin olduğu CSS kodlarını bulup swap özelliği ekliyoruz.

2019 Yılı Google Güncellemesi

2019 yılında yapılan bir güncelleme ile Google Fonts, artık swap özelliği ile birlikte geliyor. Google Fonts sayfasından aldığınız CSS import kodunda şöyle bir ibare yer alıyor. 

Burada gördüğünüz display=swap özelliği, fontun CSS dosyasına font-display:swap satırının da eklendiği anlamına geliyor. Böylece Google PageSpeed gibi hız ölçüm siteleri tarafından hata olarak görünen font-display sorunu da ortadan kalkmış oluyor.

Gözden kaçırdığım veya eklemek istediğiniz bir şey olursa yorum kısmına yazabilirsiniz.