Ta strona została przetłumaczona przez Cloud Translation API.

Sprawdzone metody dotyczące czcionek

Optymalizuj czcionki internetowe pod kątem podstawowych wskaźników internetowych.

Katie Hempenius

Barry Pollard

W tym dokumencie omawiamy sprawdzone metody dotyczące czcionek. Czcionki internetowe wpływają na wydajność na wiele różnych sposobów:

Opóźnione renderowanie tekstu: jeśli czcionka internetowa nie została załadowana, przeglądarki zwykle opóźniają renderowanie tekstu. W wielu sytuacjach powoduje to opóźnienie pierwszego wyrenderowania treści (FCP). W niektórych sytuacjach może to opóźnić największe wyrenderowanie treści (LCP).
Przesunięcia układu: zamiana czcionek może spowodować przesunięcia układu i wpłynąć na skumulowane przesunięcie układu (CLS). Te zmiany układu występują, gdy czcionka internetowa i jej czcionka zastępcza zajmują na stronie różne ilości miejsca.

Ten dokument zawiera 3 sekcje: wczytywanie czcionki, dostarczanie czcionki i renderowanie czcionki. Każda sekcja wyjaśnia, jak działa dany aspekt cyklu życia czcionki, oraz podaje odpowiednie sprawdzone metody.

Wczytywanie czcionki

Czcionki to ważne zasoby. Bez nich użytkownik może nie mieć możliwości wyświetlenia treści strony. Dlatego sprawdzone metody dotyczące wczytywania czcionek koncentrują się na tym, aby czcionki były wczytywane jak najwcześniej. Szczególną uwagę należy zwrócić na czcionki wczytywane z witryn innych firm, ponieważ pobieranie tych plików czcionek wymaga osobnej konfiguracji połączenia.

Jeśli nie masz pewności, czy żądania fontów na stronie są przesyłane na czas, otwórz kartę Czas w panelu Sieć w Narzędziach deweloperskich w Chrome, aby uzyskać więcej informacji.

Karta Czas w Narzędziach deweloperskich

`@font-face`

Zanim zapoznasz się ze sprawdzonymi metodami wczytywania czcionek, musisz zrozumieć, jak działa @font-face i jak wpływa to na wczytywanie czcionek.

Deklaracja @font-face jest niezbędna do pracy z dowolną czcionką internetową. Zawiera ona co najmniej nazwę używaną do odwołania się do czcionki oraz wskazuje lokalizację odpowiedniego pliku czcionki.

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

Powszechnym błędem jest żądanie czcionki po napotkaniu deklaracji @font-face. To nieprawda. Sama deklaracja @font-face nie powoduje pobrania czcionki. Plik jest pobierany tylko wtedy, gdy jest używany przez styl używany na stronie. Na przykład:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

h1 {
  font-family: "Open Sans"
}

W tym przykładzie element Open Sans zostałby pobrany tylko wtedy, gdyby strona zawierała element <h1>.

Dlatego, gdy myślisz o optymalizacji czcionek, pamiętaj, że równą uwagę należy poświęcić arkuszom stylów i plikom czcionek. Zmiana zawartości lub dostawy arkuszy stylów może mieć znaczący wpływ na czas dotarcia czcionek. Podobnie usunięcie nieużywanego kodu CSS i podzielenie arkuszy stylów może zmniejszyć liczbę czcionek wczytywanych przez stronę.

Deklaracje czcionek w tekście

Większość witryn zyskałaby na umieszczeniu deklaracji czcionek i innych ważnych stylów w <head> dokumentu głównego zamiast w zewnętrznym arkuszu stylów. Dzięki temu przeglądarka może szybciej wykryć deklaracje czcionek, ponieważ nie musi czekać na pobranie zewnętrznego arkusza stylów.

<head>
  <style>
    @font-face {
        font-family: "Open Sans";
        src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    }

    body {
        font-family: "Open Sans";
    }

    ...etc.

  </style>
</head>

Wstawianie krytycznych plików CSS może być bardziej zaawansowaną techniką, której nie można zastosować we wszystkich witrynach. Korzyści związane z wydajnością są oczywiste, ale wymagają dodatkowych procesów i narzędzi do kompilacji, aby zapewnić prawidłowe wstawianie niezbędnego kodu CSS (a najlepiej tylko kodu krytycznego) i przekazywanie dodatkowego kodu CSS w sposób, który nie blokuje renderowania.

Wstępne łączenie z ważnymi źródłami w innych domenach

Jeśli Twoja witryna wczytuje czcionki ze strony innej firmy, zdecydowanie zalecamy użycie podpowiedzi dotyczącej zasobu preconnect, aby nawiązać wczesne połączenia z źródłem zewnętrznym. Wskazówki dotyczące zasobów należy umieszczać w sekcji <head> dokumentu. Podpowiedź dotycząca zasobu powoduje utworzenie połączenia do wczytania arkusza stylów czcionki.

<head>
  <link rel="preconnect" href="https://fonts.com">
</head>

Aby wstępnie połączyć połączenie używane do pobierania pliku czcionki, dodaj osobną preconnectwskazówkę zasobu, która używa atrybutu crossorigin. W odróżnieniu od arkuszy stylów pliki czcionek muszą być wysyłane przez połączenie CORS.

<head>
  <link rel="preconnect" href="https://fonts.com">
  <link rel="preconnect" href="https://fonts.com" crossorigin>
</head>

Podczas korzystania z podpowiedzi dotyczącej zasobu preconnect pamiętaj, że dostawca czcionek może dostarczać arkuszy stylów i czcionek z różnych źródeł. Oto przykład użycia podpowiedzi dotyczącej zasobu preconnect w przypadku czcionek Google:

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>

Zachowaj ostrożność podczas korzystania z elementu `preload` do wczytywania czcionek

Chociaż preload bardzo skutecznie sprawia, że czcionki są dostępne na wczesnym etapie procesu wczytywania strony, powoduje to zmniejszenie zasobów przeglądarki przeznaczonych na wczytywanie innych zasobów.

Wstawianie deklaracji czcionek i dostosowywanie arkuszy stylów może być skuteczniejszym rozwiązaniem. Te zmiany są bardziej skuteczne w rozwiązywaniu problemu z opóźnionym wykrywaniem czcionek niż w prostym obejściu go.

Ponadto należy ostrożnie używać preload jako strategii ładowania czcionek, ponieważ pomija ona niektóre wbudowane strategie negocjowania treści przeglądarki. Na przykład preload ignoruje deklaracje unicode-range i jeśli jest używany ostrożnie, powinien służyć tylko do wczytywania jednego formatu czcionki.

Jednak w przypadku korzystania z zewnętrznych arkuszy stylów wstępne wczytywanie najważniejszych czcionek może być bardzo skuteczne, ponieważ w innym przypadku przeglądarka nie wykryje, czy czcionka jest potrzebna, aż do znacznie późniejszego momentu.

Dostarczanie czcionek

Szybsze dostarczanie czcionek pozwala na szybsze renderowanie tekstu. Co więcej, jeśli czcionka zostanie dostarczona odpowiednio wcześnie, może to pomóc uniknąć przesunięć układu wynikających ze zmiany czcionki.

Korzystanie z czcionek hostowanych lokalnie

Teoretycznie korzystanie z fontu hostowanego samodzielnie powinno zapewnić lepszą wydajność, ponieważ eliminuje konieczność konfigurowania połączenia z zewnętrznym źródłem. W praktyce różnice w skuteczności między tymi dwoma opcjami są mniej wyraźne. Na przykład Web Almanac stwierdził, że strony korzystające z czcionek zewnętrznych renderują się szybciej niż te, które używają czcionek własnych.

Jeśli rozważasz używanie czcionek hostowanych samodzielnie, sprawdź, czy Twoja witryna korzysta z sieci dystrybucji treści (CDN) i HTTP/2. Bez korzystania z tych technologii znacznie mniej prawdopodobne jest, że czcionki hostowane lokalnie będą działać lepiej.

Jeśli używasz czcionek hostowanych lokalnie, zalecamy też zastosowanie niektórych optymalizacji plików czcionek, które dostawcy czcionek zewnętrznych zwykle zapewniają automatycznie. Może to być na przykład kompresja WOFF2 lub podzbiór czcionki. Ilość pracy potrzebnej do zastosowania tych optymalizacji zależy od języków obsługiwanych przez Twoją witrynę. Zwróć uwagę, że optymalizacja czcionek pod kątem języków CJK może być szczególnie trudna.

Używanie WOFF2

Spośród nowoczesnych formatów czcionek WOFF2 jest najnowszy, ma najszersze wsparcie przeglądarek i oferuje najlepszą kompresję. Korzysta on z algorytmu Brotli, dzięki czemu kompresuje dane o 30% lepiej niż WOFF, co oznacza mniejszą ilość danych do pobrania, a w konsekwencji szybszą pracę.

Biorąc pod uwagę obsługę w przeglądarce, eksperci zalecają teraz używanie tylko WOFF2:

Uważamy, że nadszedł czas, aby ogłosić: używaj tylko WOFF2 i zapomnij o wszystkim innym.

To znacznie uprości CSS i proces pracy, a także zapobiegnie przypadkowemu podwójnemu lub błędnemu pobraniu czcionki. WOFF2 jest teraz obsługiwany wszędzie. Jeśli nie musisz obsługiwać bardzo starych przeglądarek, używaj tylko WOFF2. Jeśli nie możesz tego zrobić, rozważ niewyświetlanie żadnych czcionek internetowych w tych starszych przeglądarkach. Jeśli masz solidną strategię awaryjnego działania, nie będzie to problemem. Użytkownicy starszych przeglądarek zobaczą czcionki zastępcze.
Bram Stein, z Almanachu internetowego na rok 2022

Podzbiór czcionek

Pliki czcionek zwykle zawierają dużą liczbę glifów dla wszystkich obsługiwanych znaków. Nie musisz jednak używać wszystkich znaków na stronie, więc możesz zmniejszyć rozmiar plików czcionek, korzystając z podzbioru czcionek.

W deklaracji @font-face w deklaratorze unicode-range podany jest opis, który informuje przeglądarkę, do jakich znaków może być używana czcionka.

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    unicode-range: U+0025-00FF;
}

Plik czcionki jest pobierany, jeśli strona zawiera co najmniej 1 znak pasujący do zakresu Unicode. unicode-range jest często używany do wyświetlania różnych plików czcionek w zależności od języka używanego w treści strony.

unicode-range jest często używany w połączeniu z metodą tworzenia podzbioru. Podzbiór czcionek zawiera mniejszą część znaków, które były zawarte w pierwotnym pliku czcionki. Na przykład zamiast wyświetlać wszystkie znaki wszystkim użytkownikom, witryna może generować osobne podzbiory czcionek dla znaków łacińskich i cyrylicy.

Liczba znaków w poszczególnych czcionkach jest bardzo zróżnicowana:

Czcionki łacińskie zawierają zwykle od 100 do 1000 glifów na czcionkę.
Czcionki CJK mogą zawierać ponad 10 tys. znaków.

Usunięcie nieużywanych glif może znacznie zmniejszyć rozmiar pliku czcionki.

Niektórzy dostawcy czcionek mogą automatycznie udostępniać różne wersje plików czcionek z różnymi podzbiorami. Na przykład Google Fonts:

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Podczas przenoszenia na własny serwer możesz nie zauważyć tej optymalizacji, co może spowodować większe pliki czcionek na komputerze lokalnym.

Jeśli dostawca czcionek na to pozwala, możesz ręcznie wybrać podzbiór czcionek. Możesz to zrobić za pomocą interfejsu API (Google Fonts obsługuje to za pomocą parametru text) lub ręcznie edytując pliki czcionek, a następnie przechowując je na własnym serwerze. Narzędzia do generowania podzbiorów czcionek to subfont i glyphanger.

Zawsze sprawdzaj licencja na font, aby potwierdzić, że zezwala na użycie podzbioru i hostingu na własnym serwerze.

Używanie mniejszej liczby czcionek internetowych

Najszybciej można dostarczyć czcionkę, o którą nie ma prośby. Czcionki systemowe i czcionki zmienne to 2 sposoby na zmniejszenie liczby czcionek internetowych używanych w Twojej witrynie.

Czcionka systemowa to domyślna czcionka używana przez interfejs użytkownika urządzenia. Czcionki systemowe różnią się zwykle w zależności od systemu operacyjnego i jego wersji. Ponieważ czcionka jest już zainstalowana, nie trzeba jej pobierać. Czcionki systemowe mogą szczególnie dobrze sprawdzać się w przypadku tekstu głównego.

Aby użyć czcionki systemowej w CSS, jako font-family podaj system-ui:

font-family: system-ui

Zasada działania czcionek zmiennych polega na tym, że jedna czcionka zmienna może zastąpić wiele plików czcionek. Czcionki zmienne działają poprzez zdefiniowanie „domyślnego” stylu czcionki i zapewnienie „osi” do manipulowania czcionką. Na przykład czcionka zmienna z osią Weight może być używana do implementowania liternictwa, które wcześniej wymagało osobnych czcionek w wersji cienkiej, normalnej, pogrubionej i bardzo pogrubionej.

Nie każdy korzysta z przechodzenia na czcionki zmienne. Czcionki zmienne zawierają wiele stylów, więc zwykle mają większe rozmiary plików niż pojedyncze czcionki niezmiennicze, które zawierają tylko jeden styl. Największe korzyści z użycia czcionek zmiennych odniosą witryny, które używają (i muszą używać) różnych stylów i grubości czcionek.

Renderowanie czcionek

Gdy przeglądarka napotyka czcionkę internetową, która nie została jeszcze załadowana, musi podjąć decyzję: czy opóźnić renderowanie tekstu, aż czcionka internetowa się załaduje? Czy powinna renderować tekst w czcionce zastępczej, dopóki nie pojawi się czcionka internetowa?

Różne przeglądarki obsługują ten scenariusz w różny sposób. Domyślnie przeglądarki oparte na Chromium i Firefox blokują renderowanie tekstu na okres do 3 sekund, jeśli powiązany font internetowy nie został załadowany. Safari blokuje renderowanie tekstu na czas nieokreślony.

To zachowanie można skonfigurować za pomocą atrybutu font-display. Ta decyzja może mieć istotne znaczenie: font-display może mieć wpływ na LCP, FCP i stabilność układu.

Wybierz odpowiednią strategię `font-display`

font-displayinformuje przeglądarkę, jak powinna postępować z renderowaniem tekstu, gdy powiązany font internetowy nie został załadowany. Jest ona definiowana dla każdej czcionki.

@font-face {
  font-family: Roboto, Sans-Serif
  src: url(/fonts/roboto.woff) format('woff'),
  font-display: swap;
}

font-display może mieć 5 możliwych wartości:

Wartość	Okres blokowania	Okres wymiany
Automatycznie	Różne w zależności od przeglądarki	Różne w zależności od przeglądarki
Zablokuj	2–3 sekundy	Bez końca
Swap	0 ms	Bez końca
Wycofanie	100 ms	3 sekundy
Opcjonalnie	100 ms	Brak

Okres blokowania: okres blokowania rozpoczyna się, gdy przeglądarka żąda czcionki internetowej. Jeśli w okresie blokowania czcionka internetowa jest niedostępna, jest renderowana w niewidocznym czcionce zastępczej, dzięki czemu tekst jest niewidoczny dla użytkownika. Jeśli czcionka jest niedostępna pod koniec okresu blokady, jest renderowana za pomocą czcionki zastępczej.
Okres wymiany: następuje po okresie blokady. Jeśli czcionka internetowa stanie się dostępna w okresie wymiany, zostanie „zastąpiona”.

font-display odzwierciedlają różne punkty widzenia dotyczące kompromisu między skutecznością a estetyką. Trudno jest więc polecić konkretny sposób postępowania, ponieważ zależy on od indywidualnych preferencji, znaczenia czcionki internetowej dla strony i marki oraz tego, jak bardzo źle będzie wyglądać czcionka dodana w ostatniej chwili.

W przypadku większości witryn te 3 strategie są najbardziej odpowiednie, w zależności od Twojego priorytetu:

Skuteczność: użyj font-display: optional. Jest to najbardziej wydajne podejście: renderowanie tekstu jest opóźnione o maksymalnie 100 ms, a nie ma ryzyka przesunięcia elementów układu związanego ze zmianą czcionki. Minusem jest to, że jeśli czcionka internetowa dotrze za późno, nie będzie można jej użyć.
Szybkie wyświetlanie tekstu przy użyciu czcionki internetowej: użyj font-display: swap, ale pamiętaj, aby przesłać czcionkę odpowiednio wcześnie, aby nie spowodować zmiany układu. Minusem tej opcji jest nieprzyjemna zmiana, gdy czcionka dotrze z opóźnieniem.
Tekst wyświetlany jest w czcionce internetowej: użyj atrybutu font-display: block, ale pamiętaj, aby przesłać czcionkę odpowiednio wcześnie, aby zminimalizować opóźnienie tekstu. Wyświetlanie początkowego tekstu jest opóźnione. Pomimo tego opóźnienia może ono nadal powodować przesunięcie układu, ponieważ tekst jest w rzeczywistości wyświetlany jako niewidoczny, a miejsce na czcionkę zapasową jest używane do zarezerwowania miejsca. Po załadowaniu czcionki internetowej może być potrzebna inna przestrzeń, co wiąże się z przesunięciem. Może to być mniej drastyczna zmiana niż font-display: swap, ponieważ sam tekst nie będzie się zmieniał.

Pamiętaj też, że te 2 metody można łączyć: na przykład możesz użyć tagu font-display: swap do elementów związanych z marką i innych elementów strony, które różnią się wizualnie. Użyj font-display: optional do czcionek używanych w tekście głównym.

czcionki ikon,

font-display strategie, które sprawdzają się w przypadku konwencjonalnych czcionek internetowych, nie działają tak dobrze w przypadku czcionek ikon. Czcionka zastępcza czcionki ikon zwykle wygląda znacznie inaczej niż czcionka ikon, a jej znaki mogą mieć zupełnie inne znaczenie. W efekcie czcionki ikon częściej powodują znaczne zmiany układu.

Poza tym użycie czcionki awaryjnej może nie być praktyczne. W miarę możliwości zastępuj czcionki ikon czcionkami SVG, które są też lepsze pod względem dostępności. Nowsze wersje popularnych czcionek ikon zwykle obsługują format SVG. Więcej informacji o przechodzeniu na SVG znajdziesz w artykułach Font Awesome i Ikony Material.

Zmniejsz różnicę między czcionką zastępczą a czcionką internetową

Aby zmniejszyć wpływ na CLS, możesz użyć atrybutów size-adjust.

Podsumowanie

Chociaż czcionki internetowe nadal są wąskim gardłem pod względem wydajności, mamy coraz większą liczbę opcji, które pozwalają nam je optymalizować, aby zminimalizować to wąskie gardło.