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

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

Lighthouse yazı tipi görüntüleme denetimi neden 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 metin göstermekten kaçınma

font-display API, bir yazı tipinin font-face stilinde kullanıldığında nasıl görüntüleneceğini belirtir. Aşağıdaki font-display değerleri, özel yazı tipi hazır değilse tarayıcıya bir 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

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"
/>

Ertelenen yazı tiplerinden kaynaklanan düzen kaymalarından kaçınma

Geçici olarak bir sistem yazı tipi gösterildiğinde FOIT, stilsiz metin (FOUT) ile değiştirilir. Bu, içeriği daha erken oluşturarak FCP ve LCP'yi iyileştirir ancak özel yazı tipi geçici sistem yazı tipinin yerini aldığında FOIT ve FOUT'un CLS üzerinde aynı etkisi olur.

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. Yazı tiplerini önceden yüklemenin performansta gerileme oluşturmadığından emin olmak için A/B testi yapmanızı öneririz.

Pakete özel yönergeler

Drupal

Temanızda özel yazı tipleri tanımlarken @font-display ifadesini belirtin.

Magento

Özel yazı tipleri tanımlarken @font-display öğesini belirtin.

Kaynaklar