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

Yazı tipleri genellikle yüklenmesi yavaş olan büyük dosyalardır. Bazı tarayıcılar yazı tipi yüklenene kadar metni gizler görünmez metnin yanıp sönmesine (FOIT) neden olur.

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

Lighthouse, görünmez metin yanıp söndürebilecek tüm yazı tipi URL'lerini işaretler:

Lighthouse'un "Web yazı tipi yüklemesi sırasında metnin görünür halde kalmasını sağlayın" denetiminin ekran görüntüsü

Görünmez metnin gösterilmesi nasıl önlenir?

font-display API'si şunu belirtir: bir yazı tipinin font-face stili içinde kullanıldığında nasıl görüntüleneceği. Aşağıdaki font-display değerleri, özel yazı tipi hazır değilse tarayıcıya sistem yazı tipi kullanmasını söyler:

  • 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 Fonts Örneği

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

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

Ertelenen yazı tiplerinin neden olduğu düzen kaymalarını önleme

Geçici olarak bir sistem yazı tipi gösterildiğinde, FOIT ifadesi, biçimlendirilmemiş metinle birlikte yanıp söner (FOUT) olarak değiştirilir. 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 CLS üzerinde aynı etkiyi yaratır.

Yazı tipi yüklemenin CLS etkisi, font-display: optional ile birlikte ön yüklemeler kullanılarak azaltılabilir. Ancak ön yüklemelerin aşırı kullanımı, yükleme metriklerini olumsuz yönde etkileyebilir. Önceden yüklenen yazı tiplerinin herhangi bir soruna neden olmadığından emin olmak için performans regresyonları gibidir.

Pakete özel yönergeler

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