Sprawdzone metody dotyczące czcionek

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

Katie Hempenius
Katie Hempenius
X
Barry Pollard

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

Dokument składa się z 3 sekcji: Wczytywanie czcionek, Dostarczanie czcionek i Renderowanie czcionek. Każda sekcja wyjaśnia, jak działa dany aspekt cyklu życia czcionki, i zawiera 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 czcionki na Twojej stronie są wysyłane w odpowiednim czasie, więcej informacji znajdziesz na karcie Czas w panelu Sieć w Narzędziach deweloperskich w Chrome.

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 do czcionki oraz wskazuje lokalizację odpowiedniego pliku czcionki.

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

Częstym błędem jest to, że po napotkaniu deklaracji @font-face żądana jest czcionka. To nieprawda. Sama deklaracja @font-face nie powoduje pobierania czcionek. 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 plik Open Sans zostanie pobrany tylko wtedy, gdy strona zawiera element <h1>.

Dlatego, gdy myślisz o optymalizacji czcionek, pamiętaj, że równe znaczenie mają zarówno pliki czcionek, jak i arkusz stylów. 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ę wczytywanych przez stronę czcionek.

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>

Umieszczenie kodu CSS w kodzie strony 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) oraz aby dodatkowe pliki CSS były dostarczane 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 wczytywania czcionek w aplikacji preload

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 dostosowania nie tylko eliminują przyczynę problemu, a jedynie eliminują przyczynę późno odkrytych czcionek.

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 przy korzystaniu z zewnętrznych arkuszy stylów wstępne ładowanie najważniejszych czcionek może być bardzo skuteczne, ponieważ przeglądarka dopiero później zorientuje się, czy dana czcionka jest potrzebna.

Dostawa czcionek

Szybsze dostarczanie czcionek umożliwia 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 własnych

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 2 opcjami są mniej oczywiste. 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 protokołu HTTP/2. Bez tych technologii znacznie mniej prawdopodobne jest, że czcionki hostowane we własnym zakresie będą działać lepiej.

Jeśli używasz czcionki hostowanej samodzielnie, zalecamy również zastosowanie niektórych optymalizacji pliku czcionek, które zwykle są dostarczane automatycznie przez dostawców czcionek innych firm. 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ę. Pamiętaj, że optymalizacja czcionek na potrzeby 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ądarkach, 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 pobieraniu czcionek. 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 dokumentu Web Almanac z 2022 r.

Podzbiór czcionek

Pliki czcionek zawierają zwykle 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 znajduje się informacja dla przeglądarki, do których znaków można używać czcionki.

@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 na stronie znajduje się co najmniej 1 znak pasujący do zakresu Unicode. unicode-range jest zwykle używany do udostępniania różnych plików czcionek w zależności od języka treści strony.

Pole unicode-range jest często używane w połączeniu z metodą tworzenia podzbiorów. 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 wygenerować osobne czcionki podzbioru 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ów 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.

Możesz ręcznie podgrupować czcionki, jeśli dostawca na to pozwala, za pomocą interfejsu API (Google Fonts obsługuje to rozwiązanie za pomocą parametru text) lub ręcznie edytując pliki czcionek i przeprowadzając je na serwerze samodzielnie. 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 zmienne zmienne to 2 sposoby na potencjalne 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. Czcionka jest już zainstalowana, więc nie trzeba jej pobierać. Czcionki systemowe sprawdzają się szczególnie w przypadku tekstu głównego.

Aby użyć czcionki systemowej w CSS, podaj system-ui jako rodzinę czcionek:

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 czcionki zmiennej z osią Weight można wykorzystać do wdrożenia liter, które wcześniej wymagałyby osobnych czcionek dla jasnego, zwykłego, pogrubionego i dodatkowego pogrubienia.

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 też powinien renderować tekst przy użyciu czcionki 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 stałe.

To zachowanie można skonfigurować za pomocą atrybutu font-display. Ta decyzja może mieć istotne konsekwencje: 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;
}

Wartość 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 Zależy 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 nie jest dostę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 działania, ponieważ zależy on 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 jednoczesnym korzystaniu z czcionki internetowej: użyj właściwości font-display: swap, ale pamiętaj, by dostarczyć czcionkę na tyle wcześnie, aby nie spowoduje to przesunięcia układu. Wadą tej opcji jest przesunięcie drgań, gdy czcionka pojawia się z opóźnieniem.

  • Tekst wyświetlany 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 istotne przesunięcie niż w przypadku parametru font-display: swap, ponieważ sam tekst nie zmieni się.

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 sprawdzają się tak dobrze w przypadku czcionek ikon. Czcionka zastępcza czcionki ikony zazwyczaj znacznie różni się od czcionki ikony, 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

Czcionki internetowe to nadal wąskie gardło wydajności, ale mamy coraz więcej opcji, które pozwolą nam je zoptymalizować i zminimalizować to wąskie gardło.