Skip links

Web Yazı Tipleri Yüklenirken Metnin Görünürlüğünü Nasıl Sağlarsınız?

Web sitenizin hızını optimize etmek, kullanıcı deneyimini geliştirmek ve SEO performansını artırmak için oldukça önemlidir. Google PageSpeed Insights aracının sunduğu “Web yazı tipi yüklemesi sırasında metnin görünür halde kalmasını sağlayın” önerisi de bu websitesi optimizasyon çabalarının bir parçasıdır. Bu yazıda, bu önerinin ne anlama geldiğini ve sorunu nasıl çözebileceğinizi açıklayacağım.

Sorun Nedir Açıklayalım

Web yazı tipleri, web sayfalarınızda daha estetik ve ilgi çekici bir görünüm oluşturmak için kullanılan özel fontlardır. Ancak, bu fontlar tarayıcı tarafından yüklenene kadar, metniniz geçici bir font ile görüntülenebilir. Bu durum, kullanıcının sayfanızı ilk açtığında metnin bozuk veya okunması zor görünmesine neden olabilir.

Çözüm: font-display CSS Özelliği

Bu sorunu çözmek için font-display adında bir CSS özelliği kullanabilirsiniz. Bu özellik, tarayıcıya web yazı tipinin nasıl ve ne zaman yükleneceğini bildirir.

font-display özelliğinin üç ana değeri vardır ;

  • swap: Bu değer, tarayıcıya önce varsayılan yazı tipini ve ardından web yazı tipini yüklemesini söyler. Bu, metnin her zaman görünür olmasını sağlar, ancak web yazı tipi yüklenene kadar biraz farklı görünebilir.
  • fallback: Bu değer, tarayıcıya web yazı tipinin yüklenmesi başarısız olursa varsayılan yazı tipini kullanmasını söyler. Bu, metnin her zaman okunabilir olmasını sağlar, ancak web yazı tipinin istenen görünümünü elde edemezsiniz.
  • opentype: Bu değer, tarayıcıya web yazı tipini mümkün olan en hızlı şekilde yüklemesini söyler. Bu, metnin en kısa sürede istenen görünümle görüntülenmesini sağlar, ancak tarayıcı web yazı tipini yükleyemezse metin görünmez olabilir.

En İyi Seçenek

Çoğu durumda, font-display: swap değerini kullanmanız en iyi uygulamadır. Bu, metnin her zaman görünür olmasını ve web yazı tipi yüklendikten sonra istenen görünümle görüntülenmesini sağlar.

font-display özelliğini kullanarak Web yazı tipi yüklemesi sırasında metnin görünür halde kalmasını sağlayın önerisini düzeltmek için şu adımları izleyebilirsiniz:

  1. Web sitenizin CSS dosyasını açın.
  2. Web yazı tipi tanımlarınızı bulun.
  3. Ve kullandığınız her css kod öbeğine aşağıdaki satırı ekleyelim
...
font-display: swap;
...

CSS dosyasını kaydedin ve tarayıcınızı açıp ctrl + r veya ctrl + f5 yaparak tarayıcınızı çerezlerini temizleyerek yenileyin.

Ek Öneriler

Web yazı tipi dosyalarınızı optimize edin – Web yazı tipi dosyalarınızın boyutunu küçültmek için Gzip sıkıştırması veya font subsetting gibi teknikleri kullanabilirsiniz.

Yerel web yazı tiplerini kullanın – Mümkünse, Google Fonts gibi harici kaynaklardan web yazı tipleri yerine yerel web yazı tiplerini kullanın.

Web yazı tipi sayısını sınırlayın – Kullanmakta olduğunuz web yazı tipi sayısını sınırlamak, yükleme süresini kısaltmaya yardımcı olabilir.

Kaynaklar: