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:
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
- Kod źródłowy kontroli upewniania się, że tekst pozostaje widoczny podczas wczytywania czcionki internetowej
- Unikaj niewidocznego tekstu podczas ładowania
- Kontrolowanie wydajności czcionek za pomocą wyświetlaczy czcionek
- Wstępne wczytywanie czcionek internetowych w celu przyspieszenia wczytywania (laboratorium)
- Zapobiegaj przesuwaniu układu i migawkom niewidocznego tekstu (FOIT) przez wstępne wczytywanie opcjonalnych czcionek.