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

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 SorunuGoogle PageSpeed Font Display Sorunu

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

@font-face {
  font-family: 'fonts';
  src: url('../font/fonts.eot?32560390');
  font-weight: normal;
  font-style: normal;
}

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.

font-display:swap;

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.

@font-face{font-family:
'Raleway';font-style:normal;font-weight:400;src:local('Raleway'), 
local('Raleway-Regular'), 
url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}

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.

[postlink id=”238″ title=”Google Fontları Nasıl Kullanılır?”]

İ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. 

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

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.

Popular Eğitimler

Temel MySQL Komutları ve Kullanımı

Sıkça kullanılan, bilinmesi gereken temel MySQL komutları nelerdir? Tablo silme, veritabanı silme, ayrıntıları gösterme, veritabanı oluşturma kodlarının tek bir sayfada derlemesi.

CSS Nedir ve Nasıl Kullanılır?

CSS, HTML ile kodladığımız sayfaları görsel olarak güzelleştirmemizi sağlar. CSS, evin dekoru…

Htaccess ile Resimlerin Çalınmasını Engelleme

Hotlink koruması ile web sitesindeki resimlerin çalınması nasıl engellenir? Hotlink protection cpanel üzerinden nasıl etkinleştirilir? Htaccess kullanarak resim çalınmasını engellemenin yolları nelerdir?

CSS ile Hareketli Renkli Gradient Arka Plan

CSS ile sayfalarınıza renk katacak birçok şey yapabiliyorsunuz. Hareketli bir şekilde arka…

Google Fontlarını WOFF Formatında İndirerek Sunucuda Kullanmak

Site hızı optimizasyonu ve performans testlerinde daha yüksek sonuç alabilmek ya da…

Tüm Tarayıcılarla Uyumlu Smooth Scrolling

Ekrana sığmayan uzun web sayfalarında, anchor linklere tıklandığında Smooth Scrolling denilen yumuşak…