Dlaczego warto wziąć to pod uwagę?
Czcionki są często dużymi plikami, których wczytywanie zajmuje więcej czasu. Aby rozwiązać ten problem, niektóre przeglądarki ukrywają tekst, dopóki czcionka nie zostanie wczytana („przebłysk niewidocznego tekstu”).
Największe wyrenderowanie treści (LCP) może się opóźnić w oczekiwaniu na wyrenderowanie tekstu. Jeśli optymalizujesz kampanię pod kątem skuteczności, unikaj błysku niewidocznego tekstu (FOIT) i natychmiast wyświetlaj treść użytkownikom przy użyciu czcionki systemowej, która tworzy „przebłysk niewidocznego tekstu” (FOUT).
Domyślne ustawienia przeglądarki do wyświetlania czcionek
Oto domyślne zasady ładowania czcionek w popularnych przeglądarkach:
| Przeglądarka | Działanie domyślne, gdy czcionka nie jest gotowa... |
|---|---|
| Chrome i Edge | Tekst jest ukryty na maksymalnie 3 sekundy. Jeśli tekst nadal nie jest gotowy, będzie używać czcionki systemowej, dopóki czcionka nie będzie gotowa, a następnie zastąpi ją innym. |
| Firefox | Tekst jest ukryty na maksymalnie 3 sekundy. Jeśli tekst nadal nie jest gotowy, będzie używać czcionki systemowej, dopóki czcionka nie będzie gotowa, a następnie zastąpi ją innym. |
| Safari | Ukrywa tekst do chwili przygotowania czcionki. |
Wyświetlaj tekst od razu
W tym przewodniku omawiamy dwa sposoby jak najszybszego wyświetlania tekstu. Pierwszy z nich jest prosty i zapewnia dobrą obsługę przeglądarek. Drugie podejście jest bardziej szczegółowe, ale może zaoferować Ci więcej opcji. Najlepszy wybór dla Twojej witryny zależy od Twoich wymagań.
Opcja 1. Użyj font-display
font-display to interfejs API służący do określania strategii wyświetlania czcionek. swap informuje przeglądarkę, że tekst, w którym zastosowano tę czcionkę, powinien być natychmiast wyświetlany przy użyciu czcionki systemowej. Gdy czcionka niestandardowa będzie gotowa, czcionka systemowa zostanie zastąpiona.
/* Before */
@font-face {
font-family: Helvetica;
}
/* After */
@font-face {
font-family: Helvetica;
font-display: swap;
}
Jeśli przeglądarka nie obsługuje font-display (chociaż wszystkie nowoczesne przeglądarki to obsługują), przeglądarka będzie nadal ładować czcionki zgodnie z domyślnym zachowaniem.
Opcja 2. Poczekaj, aż zostaną załadowane czcionki niestandardowe
Większy nakład pracy pozwoli Ci na bardziej spersonalizowane podejście.
Takie podejście składa się z 3 części:
- Nie używaj czcionki niestandardowej przy wstępnym wczytaniu strony przez refaktoryzację kodu CSS, aby na początku nie używać czcionek niestandardowych. Dzięki temu tekst w przeglądarce będzie od razu wyświetlany przy użyciu czcionki systemowej.
- Wykrywaj, kiedy niestandardowa czcionka jest wczytywana, za pomocą interfejsu CSS Font Wczytuję API
- Zmień styl strony, by używać 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 również zrobić za pomocą biblioteki FontFaceObserver, która dla niektórych ułatwia korzystanie z interfejsu API.
Dzięki temu podczas wczytywania czcionek trzeba wziąć pod uwagę szereg dodatkowych kwestii. Na przykład można jednocześnie ładować wszystkie czcionki, unikając kilku układów podczas wczytywania każdej z nich. Witryny mogą też nie wczytywać czcionek użytkowników w przypadku wolniejszych połączeń lub korzystających z opcji Zapisz dane.
Zweryfikuj
Uruchom Lighthouse, aby sprawdzić, czy strona używa font-display: swap do wyświetlania tekstu:
- Naciśnij Control + Shift + J (lub Command + Option + J na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Lighthouse.
- Upewnij się, że na liście Kategorie jest zaznaczone pole wyboru Skuteczność.
- Kliknij przycisk Wygeneruj raport.
Upewnij się, że kontrola Zadbaj o to, aby tekst pozostał widoczny podczas wczytywania czcionki internetowej.