Ta strona została przetłumaczona przez Cloud Translation API.

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:

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.