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

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

Dlaczego kontrola Lighthouse font-display się nie powiodła

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

Zrzut ekranu pokazujący sprawdzanie, czy tekst pozostaje widoczny podczas kontroli wczytywania czcionek internetowych

Jak unikać wyświetlania niewidocznego tekstu

Interfejs font-display API wskazuje sposób wyświetlania czcionki użytej w stylu font-face. Poniżej Wartości parametru font-display spowodują, że przeglądarka użyje czcionki systemowej, jeśli czcionka niestandardowa nie będzie gotowa:

  • swap
  • optional
  • fallback

Przykładowy kod 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 FOIT błyskiem tekstu bez stylizacji (FOUT). Poprawia to FCP i LCP przez szybsze renderowanie treści, ale FOIT i FOUT mają taki sam wpływ na CLS, gdy czcionka niestandardowa zastąpi tymczasową czcionkę systemową.

Wpływ wczytywania czcionek na CLS można ograniczyć, stosując wstępne wczytywanie w połączeniu z 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 stosu

Drupal

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

Magento

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

Zasoby