Yazı Tiplerinin (Font) Web Sitesi Performansına Etkisi

Yazı tipleri, web sitesinin görsel kimliğinin önemli bir parçasıdır, ancak aynı zamanda site performansını etkileyebilecek faktörlerden biridir. İşte yazı tiplerinin web sitesi performansına etkisi ve bu etkiyi optimize etme yöntemleri:

1. Yazı Tipi Dosya Boyutu

Büyük yazı tipi dosyaları, sayfa yükleme süresini artırabilir. Bu nedenle, dosya boyutunu minimize etmek önemlidir.

// Örnek: Subset fontu kullanımı
@font-face {
  font-family: 'CustomFont';
  src: url('custom-font-subset.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

2. Font Formatları

Modern ve daha küçük boyutlu font formatları kullanmak, performansı artırabilir.

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-display: swap;
}

3. Font Yükleme Stratejileri

Fontları nasıl ve ne zaman yüklediğiniz, algılanan performansı etkileyebilir.

<!-- Preload kullanımı -->
<link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin>

<!-- Font yükleme için JavaScript kullanımı -->
<script>
  if ("fonts" in document) {
    const font = new FontFace("MyFont", "url(myfont.woff2)", {
      style: 'normal',
      weight: '400',
      display: 'swap'
    });
    font.load().then(() => {
      document.fonts.add(font);
      document.body.classList.add("fonts-loaded");
    });
  }
</script>

4. Sistem Fontları Kullanımı

Sistem fontları kullanmak, ek font yükleme gereksinimini ortadan kaldırabilir.

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

5. Font Display Özelliği

Font display özelliği, font yüklenene kadar metnin nasıl görüntüleneceğini kontrol eder.

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

6. Kritik Fontları Inline Etme

Kritik fontları inline etmek, ilk render süresini iyileştirebilir.

<style>
  @font-face {
    font-family: 'CriticalFont';
    src: url(data:font/woff2;base64,d09GMgABAAAAAA...);
    font-weight: 400;
    font-style: normal;
  }
</style>

7. Font Yükleme Performansını İzleme

Font yükleme performansını izlemek ve optimize etmek için Performance API'yi kullanabilirsiniz.

performance.getEntriesByType('resource').filter(entry => entry.initiatorType === 'css').forEach(entry => {
  console.log(`${entry.name} took ${entry.duration}ms to load`);
});

8. Variable Fonts Kullanımı

Variable fonts, birden fazla font varyasyonunu tek bir dosyada birleştirir, böylece daha az dosya indirmeniz gerekir.

@font-face {
  font-family: 'MyVariableFont';
  src: url('my-variable-font.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: oblique 0deg 12deg;
}

.text {
  font-family: 'MyVariableFont';
  font-weight: 500;
  font-stretch: 110%;
  font-style: oblique 5deg;
}

9. CDN Kullanımı

Popüler fontlar için Google Fonts gibi CDN'leri kullanmak, caching avantajı sağlayabilir.

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

10. Lazy Loading

Önemli olmayan fontları lazy load etmek, başlangıç yükleme süresini azaltabilir.

document.fonts.ready.then(() => {
  const lazyFont = new FontFace('LazyLoadedFont', 'url(lazy-font.woff2)');
  lazyFont.load().then((font) => {
    document.fonts.add(font);
    document.body.classList.add('lazy-font-loaded');
  });
});

Sonuç

Yazı tipleri, web sitesi tasarımının önemli bir parçasıdır, ancak performans üzerinde önemli bir etkiye sahip olabilirler. Bu etkiyi yönetmek için:

• Mümkün olduğunca az sayıda ve küçük boyutlu font kullanın.
• Modern font formatları ve yükleme tekniklerini benimseyin.
• Font yükleme stratejinizi dikkatli bir şekilde planlayın.
• Performansı düzenli olarak test edin ve izleyin.
• Kullanıcı deneyimi ile performans arasında doğru dengeyi bulun.

Bu stratejileri uygulayarak, web sitenizin görsel çekiciliğinden ödün vermeden performansını optimize edebilirsiniz. Unutmayın, iyi bir font stratejisi sadece hızlı yüklenen değil, aynı zamanda kullanıcı deneyimini zenginleştiren bir web sitesi yaratmanıza yardımcı olur.