Użycie czcionek jest powszechne na większości stron internetowych i często powoduje błędy. Wiele z tych błędów negatywnie wpływa na budżet wydajności sieci. Celem tego artykułu jest dostarczenie informacji na temat używania czcionek internetowych i pomoc w poprawie wydajności sieci.
Jak pokazano w hierarchii stosowanej podczas renderowania dowolnej strony internetowej, elementy czcionki mogą opóźniać renderowanie innych elementów do czasu ich załadowania. Prawidłowe zarządzanie tym opóźnieniem jest ważne zarówno dla skumulowanej zmiany układu (CLS), jak i dla percepcji użytkownika.
Problem z ładowaniem czcionek
Do czasu załadowania czcionek strony widoczność czcionek podczas procesu renderowania HTML i CSS różni się w zależności od przeglądarki. Oto podsumowanie, jak różne przeglądarki radzą sobie z tą sytuacją:
| Przeglądarka | Domyślne zachowanie, jeśli czcionka nie jest gotowa… |
|---|---|
| krawędź | Używa czcionki systemowej, dopóki czcionka nie będzie gotowa. Zamienia czcionkę. |
| Chrom | Ukryje tekst na maksymalnie 3 sekundy. Jeśli tekst nadal nie jest gotowy, używa czcionki systemowej, dopóki czcionka nie będzie gotowa. Zamienia czcionkę. |
| Firefox | Ukryje tekst na maksymalnie 3 sekundy. Jeśli tekst nadal nie jest gotowy, używa czcionki systemowej, dopóki czcionka nie będzie gotowa. Zamienia czcionkę. |
| Safari | Ukrywa tekst do czasu, aż czcionka będzie gotowa. |
Aby rozwiązać ten problem bez polegania na zachowanie przeglądarki, wprowadzono parametr Font-Display. Obecnie 92% przeglądarek obsługuje parametr wyświetlania czcionek.
Do czego służy wyświetlanie czcionek?
W zależności od przeglądarki, podczas ładowania strony wygląd czcionek może się różnić, aż do ich pełnego załadowania. Na przykład niektóre wersje przeglądarki Safari ukrywają tekst do czasu załadowania czcionki. The wyświetlanie czcionek: zamień Parametr CSS standaryzuje to zachowanie, wyświetlając tekst czcionką systemową do momentu załadowania plików czcionek. Po załadowaniu czcionek czcionka systemowa zostaje zamieniona na zamierzoną czcionkę. Oto przykładowe użycie:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}Wstępne ładowanie czcionek
Za pomocą ładowanie czcionek przed krytyczną ścieżką renderowania może zapobiec przerwom podczas ładowania czcionek.
BONUS: Branżowe podejście do wykorzystania czcionek
Według danych LikeTech przyjrzyjmy się ważnemu trendowi i migawce internetowego świata. Pierwszy wykres poniżej pokazuje użycie czcionki na 10,000 100,000 najpopularniejszych stron, a drugi wykres pokazuje użycie czcionek na XNUMX XNUMX najpopularniejszych witryn. Przyjrzyjmy się najpierw tym wykresom:
Różnica w użyciu czcionek Google Font i Font Awesome pomiędzy 5 10,000 a 100,000 XNUMX najpopularniejszych witryn wynosi XNUMX%. To mówi nam, że 10,000 XNUMX najpopularniejszych witryn zoptymalizowało użycie czcionek. Zalecamy zbadanie tego jako tematu godnego uwagi. Zastanów się, jak możesz zaimplementować czcionki internetowe za pomocą własnych rozwiązań.
BONUS 2: Statystyki użycia czcionek Google i Font Awesome
Nawiązując do pierwszego bonusu, proponujemy przyjrzeć się dwóm wykresom przedstawiającym liczbowy zasięg najczęściej używanych bibliotek czcionek. Liczba unikalnych domen przekracza tutaj miliony, a te miliony reprezentują Twoich konkurentów SEO. Korzystanie z tych bibliotek lepiej i bardziej optymalnie niż inne może pomóc Ci się wyróżnić.
Postępując zgodnie z tymi wskazówkami i optymalizując użycie czcionek, możesz znacznie poprawić wydajność sieci i wygodę użytkownika.
