Unikaj niewidocznego tekstu podczas ładowania czcionki

Dlaczego warto wziąć to pod uwagę?

Czcionki to często duże pliki, które długo się ładują. Aby sobie z tym poradzić, niektóre przeglądarki ukrywają tekst do momentu załadowania czcionki („efekt niewidocznego tekstu”).

Największe wyrenderowanie treści (LCP) może opóźniać oczekiwanie na wyrenderowanie tekstu. Jeśli optymalizujesz kampanię pod kątem skuteczności, unikaj efektu „błysku niewidocznego tekstu”. (FOIT) i natychmiast wyświetlać treści użytkownikom przy użyciu czcionki systemowej, która tworzy „efekt błysku niesformatowanego tekstu”. (FOUT).

Domyślne ustawienia wyświetlania czcionek

Oto domyślne sposoby wczytywania czcionek w popularnych przeglądarkach:

Przeglądarka Domyślne działanie, gdy czcionka nie jest gotowa...
Chrome i Edge Tekst zostanie ukryty na maksymalnie 3 sekundy. Jeśli tekst jest nadal niegotowy, korzysta z czcionki systemowej, dopóki czcionka nie będzie gotowa, a następnie zamienia czcionkę.
Firefox Tekst zostanie ukryty na maksymalnie 3 sekundy. Jeśli tekst jest nadal niegotowy, korzysta z czcionki systemowej, dopóki czcionka nie będzie gotowa, a następnie zamienia czcionkę.
Safari Ukrywa tekst, dopóki czcionka nie będzie gotowa.

Wyświetlaj tekst od razu

W tym przewodniku omawiamy 2 sposoby wyświetlania tekstu tak szybko, jak to możliwe. Pierwszy z nich jest prosty i dobrze obsługuje przeglądarkę. Drugi sposób jest bardziej rozbudowany, ale może dać Ci więcej możliwości. Najlepszy wybór dla Twojej witryny zależy od Twoich wymagań.

Opcja 1. Użyj font-display

Obsługa przeglądarek

  • Chrome: 60.
  • Krawędź: 79.
  • Firefox: 58.
  • Safari: 11.1

Źródło

font-display to interfejs API służący do określania strategii wyświetlania czcionek. swap informuje przeglądarkę, że tekst korzystający z tej czcionki powinien być wyświetlany natychmiast przy użyciu czcionki systemowej. Gdy czcionka niestandardowa będzie gotowa, zastąpiona zostanie czcionka systemowa.

/* Before */
@font-face {
  font-family: Helvetica;
}

/* After */
@font-face {
  font-family: Helvetica;
  font-display: swap;
}

Jeśli przeglądarka nie obsługuje interfejsu font-display (ale wszystkie nowoczesne przeglądarki je obsługują), przeglądarka ładuje czcionki w tym samym domyślnym środowisku.

Opcja 2. Użyj czcionek niestandardowych, dopóki nie zostaną wczytane

Obsługa przeglądarek

  • Chrome: 35.
  • Krawędź: 79.
  • Firefox: 41.
  • Safari: 10.

Źródło

Przy większym nakładzie pracy można rozważyć bardziej niestandardowe podejście.

Na to podejście składa się 3 elementy:

  • Nie używaj czcionki niestandardowej przy pierwszym wczytaniu strony przez refaktoryzację CSS, aby na początku nie korzystać z czcionek niestandardowych. Dzięki temu przeglądarka wyświetla tekst natychmiast przy użyciu czcionki systemowej.
  • Wykrywaj za pomocą interfejsu API wczytywania czcionek CSS, kiedy czcionka niestandardowa została wczytana.
  • Zmień styl strony, aby korzystała z czcionki niestandardowej.
// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");

// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);

// Load the font
font.load();

// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
  // Update the CSS to use the fonts
});

Możesz to też zrobić za pomocą biblioteki FontFaceObserver, którą niektórzy uważają za łatwiejszy w użyciu.

Pozwala to uwzględnić wiele dodatkowych kwestii podczas ładowania czcionek. Na przykład wszystkie czcionki mogą być ładowane jednocześnie, dzięki czemu unikniesz wczytywania kilku układów podczas wczytywania każdej z nich. Witryny mogą też nie ładować czcionek w przypadku użytkowników korzystających z wolniejszych połączeń lub korzystających z opcji Zapisz dane.

Zweryfikuj

Uruchom Lighthouse, aby sprawdzić, czy strona wyświetla tekst za pomocą dodatku font-display: swap:

  1. Naciśnij Control + Shift + J (lub Command + Option + J na Macu), aby otworzyć Narzędzia deweloperskie.
  2. Kliknij kartę Lighthouse.
  3. Upewnij się, że na liście Kategorie zaznaczone jest pole wyboru Skuteczność.
  4. Kliknij przycisk Wygeneruj raport.

Sprawdź, czy test Upewnij się, że tekst pozostaje widoczny podczas wczytywania czcionek internetowych.