Zadbaj o to, aby tekst był widoczny podczas wczytywania czcionek internetowych

Czcionki to często duże pliki, które ładują się powoli. Niektóre przeglądarki ukrywają tekst, dopóki czcionka się nie załaduje, co powoduje miganie niewidocznego tekstu (FOIT).

Dlaczego audyt wyświetlania czcionek w Lighthouse kończy się niepowodzeniem

Lighthouse oznacza wszystkie adresy URL czcionek, które mogą wyświetlać niewidoczny tekst:

Zrzut ekranu pokazujący audyt Lighthouse dotyczący zapewnienia widoczności tekstu podczas ładowania czcionek

Jak unikać wyświetlania niewidocznego tekstu

Interfejs API font-display wskazuje, jak czcionka jest wyświetlana w stylu font-face. Jeśli czcionka niestandardowa jest niedostępna, przeglądarka użyje czcionki systemowej. W tym celu musisz ustawić te wartości:font-display:

  • swap
  • optional
  • fallback

Przykład kodu CSS

@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;
}

Przykład czcionek Google

Dodaj parametr &display=swap/&display=optional/&display=fallback na końcu adresu URL czcionek Google:

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

Jak unikać przesunięć układu spowodowanych opóźnionym wczytywaniem czcionek

Tymczasowe wyświetlenie czcionki systemowej spowoduje zastąpienie tekstu w ramach FOIT błyskiem tekstu bez stylizacji (FOUT). Dzięki temu FCP i LCP są lepsze, ponieważ treści są renderowane wcześniej, ale FOIT i FOUT mają ten sam wpływ na CLS, gdy czcionka niestandardowa zastępuje tymczasową czcionkę systemową.

Wpływ wczytywania czcionek na CLS można ograniczyć, stosując wstępne wczytywanie w połączeniu z elementem font-display: optional. Jednak nadmierne korzystanie z wstępnego wczytywania może negatywnie wpływać na dane dotyczące wczytywania. Zalecamy przeprowadzenie testów A/B, aby sprawdzić, czy wstępne wczytywanie czcionek nie powoduje spadku wydajności.

Wskazówki dotyczące poszczególnych zbiorów

Drupal

Gdy w swoim motywie definiujesz niestandardowe czcionki, określ @font-display.

Magento

Definiując niestandardowe czcionki, ustaw @font-display.

Zasoby