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 wydajności, unikaj „efektu przebłysku niewidocznego tekstu” i od razu wyświetlaj treści użytkownikom przy użyciu czcionki systemowej, która tworzy „prześwietlenie 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 nadal nie jest gotowy, używa czcionki systemowej do czasu, aż czcionka będzie gotowa, a następnie zastąpi czcionkę. |
| Firefox | Tekst zostanie ukryty na maksymalnie 3 sekundy. Jeśli tekst nadal nie jest gotowy, używa czcionki systemowej do czasu, aż czcionka będzie gotowa, a następnie zastąpi 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
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
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.
Potwierdź
Uruchom Lighthouse, aby sprawdzić, czy strona wyświetla tekst za pomocą dodatku font-display: swap:
- 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 zaznaczone jest pole wyboru Skuteczność.
- Kliknij przycisk Wygeneruj raport.
Sprawdź, czy test Upewnij się, że tekst pozostaje widoczny podczas wczytywania czcionek internetowych.