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

Czcionki są często dużymi plikami, a ich wczytywanie trwa długo. Niektóre przeglądarki ukrywają tekst do czasu wczytania czcionki, powodując przebłysk niewidocznego tekstu (FOIT).

Co się dzieje z kontrolą wyświetlania czcionek w Light-Display

Lighthouse oznacza adresy URL czcionek, które mogą zawierać niewidoczny tekst:

Zrzut ekranu pokazujący, jak działa narzędzie Lighthouse, a także czy tekst pozostaje widoczny podczas kontroli wczytywania czcionek internetowych

Jak uniknąć wyświetlania niewidocznego tekstu

Interfejs API font-display wskazuje sposób wyświetlania czcionki w stylu font-face. Te wartości font-display sprawią, że przeglądarka użyje czcionki systemowej, gdy czcionka niestandardowa nie jest 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 Google Fonts

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

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

Jak uniknąć przesunięć układu spowodowanych przez odroczone czcionki

Tymczasowe wyświetlanie czcionki systemowej spowoduje zastąpienie ikony FOIT błyskiem bez stylu tekstu (FOUT). Poprawia to FCP i LCP przez szybsze renderowanie treści, ale FOIT i FOUT będą miały taki sam wpływ na CLS, gdy czcionka niestandardowa zastąpi tymczasową czcionkę systemową.

Wpływ ładowania czcionek na serwer CLS można ograniczyć, stosując wstępne wczytywanie w połączeniu z zasadą font-display: optional. Przeciążenie wstępne może jednak negatywnie wpłynąć na wskaźniki obciążenia. Zalecamy przeprowadzenie testów A/B, aby upewnić się, że wstępne wczytywanie czcionek nie powoduje pogorszenia wydajności.

Wskazówki dotyczące stosu

Drupal

Podczas definiowania niestandardowych czcionek w motywie określ @font-display.

Magento

Podczas definiowania czcionek niestandardowych ustaw @font-display.

Zasoby