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

Yazı tipleri genellikle uzun yükleme sürelerine sahip büyük dosyalardır. Bazı tarayıcılar, yazı tipi yüklenene kadar metni gizler. Bu durum, görünmez metnin (FOIT) yanıp sönmesine neden olur.

Lighthouse yazı tipi görüntüleme denetimi nasıl başarısız oluyor?

Lighthouse görünmez metin yanıp sönebilen yazı tipi URL'lerini işaretler:

Lighthouse metninin ekran görüntüsü, web yazı tipi yüklemeleri denetimi sırasında görünür durumda kalmalıdır

Görünmez metin nasıl gösterilmez?

font-display API, bir yazı tipinin font-face stilinde kullanıldığında nasıl görüntüleneceğini belirtir. Özel yazı tipi hazır değilse aşağıdaki font-display değerleri, tarayıcıya bir sistem yazı tipini kullanmasını bildirecektir:

  • swap
  • optional
  • fallback

CSS Örneği

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}

Google Yazı Tipleri Örneği

Google Fonts URL'nizin sonuna &display=swap/&display=optional/&display=fallback parametresini ekleyin:

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

Ertelenmiş yazı tiplerinden kaynaklanan düzen kaymalarını önleme

Bir sistem yazı tipinin geçici olarak gösterilmesi, FOIT'in yerini biçimlendirilmemiş metin (FOUT) ile değiştirir. Bu, içeriği daha erken oluşturarak FCP&LCP'yi iyileştirir ancak özel yazı tipi geçici sistem yazı tipinin yerini aldığında FOIT ve FOUT CLS üzerinde aynı etkiye sahip olur.

Yazı tipi yüklemesinin CLS etkisi, font-display: optional ile birlikte ön yüklemeler kullanılarak azaltılabilir. Bununla birlikte, önceden yüklemeleri aşırı kullanmak yük metriklerini olumsuz etkileyebilir. Yazı tiplerinin önceden yüklenmesinin herhangi bir performans regresyonuna yol açmadığından emin olmak için A/B testi yapmanızı öneririz.

Yığına özel kılavuz

Drupal

Temanızda özel yazı tipleri tanımlarken @font-display değerini belirtin.

Magento

Özel yazı tipleri tanımlarken @font-display değerini belirtin.

Kaynaklar