Zmniejsz rozmiar czcionki internetowej

Ilya Grigorik

Jeremy Wagner

Typografia ma fundamentalne znaczenie dla dobrego projektu, budowania marki, czytelności i dostępności. Czcionki internetowe umożliwiają to wszystko i jeszcze więcej: tekst można zaznaczać, przeszukiwać, powiększać i wyświetlać w wysokiej rozdzielczości. Zapewniają spójne i wyraźne renderowanie tekstu niezależnie od rozmiaru i rozdzielczości ekranu. Czcionki internetowe mają kluczowe znaczenie dla dobrego projektu, UX i wydajności.

Optymalizacja czcionek internetowych jest ważnym elementem ogólnej strategii wydajności. Każda czcionka to dodatkowy zasób, a niektóre czcionki mogą blokować renderowanie tekstu. Jednak samo używanie czcionek internetowych nie oznacza, że strona musi renderować się wolniej. Wręcz przeciwnie, zoptymalizowane czcionki w połączeniu z przemyślaną strategią ich wczytywania i stosowania na stronie mogą pomóc zmniejszyć łączny rozmiar strony i skrócić czas renderowania.

Budowa czcionki internetowej

Czcionka internetowa to zbiór glifów, a każdy glif to kształt wektorowy opisujący literę lub symbol. W rezultacie rozmiar konkretnego pliku czcionki zależy od 2 prostych zmiennych: złożoności ścieżek wektorowych każdego glifu i liczby glifów w danej czcionce. Na przykład Open Sans, jedna z najpopularniejszych czcionek internetowych, zawiera 897 glifów, w tym znaki łacińskie, greckie i cyrylicy.

Wybierając czcionkę, warto sprawdzić, które zestawy znaków są obsługiwane. Jeśli chcesz zlokalizować treści na stronie w wielu językach, użyj czcionki, która zapewni użytkownikom spójny wygląd i wrażenia. Na przykład rodzina czcionek Noto firmy Google ma obsługiwać wszystkie języki świata. Pamiętaj jednak, że łączny rozmiar czcionki Noto ze wszystkimi językami to ponad 1,1 GB.

Z tego posta dowiesz się, jak zmniejszyć rozmiar pliku czcionek internetowych.

Formaty czcionek internetowych

Obecnie w internecie używane są 2 zalecane formaty kontenerów czcionek:

• EOT
• TTF
• WOFF
• WOFF2.

Formaty WOFF i WOFF 2.0 są szeroko obsługiwane przez wszystkie nowoczesne przeglądarki.

• W nowoczesnych przeglądarkach używaj wariantu WOFF 2.0.
• Jeśli jest to absolutnie konieczne – na przykład jeśli nadal musisz obsługiwać Internet Explorer 11 – użyj WOFF jako rezerwy.
• Możesz też zrezygnować z używania czcionek internetowych w starszych przeglądarkach i wrócić do czcionek systemowych. Może to też zwiększyć wydajność starszych urządzeń o ograniczonych zasobach.
• Ponieważ formaty WOFF i WOFF 2.0 obejmują wszystkie nowoczesne i starsze przeglądarki, używanie formatów EOT i TTF nie jest już konieczne i może wydłużyć czas pobierania czcionek internetowych.

Czcionki internetowe i kompresja

Formaty WOFF i WOFF 2.0 mają wbudowaną kompresję. Wewnętrzna kompresja WOFF 2.0 wykorzystuje Brotli i zapewnia do 30% lepszą kompresję niż WOFF. Więcej informacji znajdziesz w raporcie oceny WOFF 2.0.

Warto też pamiętać, że niektóre formaty czcionek zawierają dodatkowe metadane, takie jak informacje o podpowiedziach i kerningu, które mogą nie być potrzebne na niektórych platformach. Pozwala to na dalszą optymalizację rozmiaru pliku. Na przykład Google Fonts utrzymuje ponad 30 zoptymalizowanych wariantów każdej czcionki i automatycznie wykrywa oraz dostarcza optymalny wariant dla każdej platformy i przeglądarki.

Definiowanie rodziny czcionek za pomocą @font-face

Reguła CSS @font-face umożliwia zdefiniowanie lokalizacji konkretnego zasobu czcionki, jej charakterystyki stylu oraz punktów kodowych Unicode, dla których ma być używana. Połączenie takich deklaracji @font-face może służyć do utworzenia „rodziny czcionek”, której przeglądarka będzie używać do określania, które zasoby czcionek należy pobrać i zastosować na bieżącej stronie.

Rozważ użycie czcionki zmiennej

Czcionki zmienne mogą znacznie zmniejszyć rozmiar plików czcionek w przypadkach, gdy potrzebujesz wielu wariantów czcionki. Zamiast wczytywać style zwykły i pogrubiony oraz ich wersje kursywą, możesz wczytać jeden plik zawierający wszystkie informacje. Rozmiar pliku czcionki zmiennej będzie jednak większy niż rozmiar pojedynczego wariantu czcionki, ale mniejszy niż połączenie wielu wariantów. Zamiast jednej dużej czcionki zmiennej lepiej jest najpierw wyświetlić najważniejsze warianty czcionki, a pozostałe pobrać później.

Czcionki zmienne są teraz obsługiwane przez wszystkie nowoczesne przeglądarki. Więcej informacji znajdziesz we wprowadzeniu do czcionek zmiennych w internecie.

Wybierz odpowiedni format

Każda deklaracja @font-face zawiera nazwę rodziny czcionek, która pełni rolę logicznej grupy wielu deklaracji, właściwości czcionki, takich jak styl, grubość i rozciągnięcie, oraz deskryptor src, który określa listę lokalizacji zasobu czcionki według priorytetu.

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       /* Only serve WOFF if necessary. Otherwise,
          WOFF 2.0 is fine by itself. */
       url('/fonts/awesome.woff') format('woff');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'),
       url('/fonts/awesome-i.woff') format('woff');
}

Najpierw zwróć uwagę, że powyższe przykłady definiują jedną rodzinę Awesome Font z 2 stylami (zwykłym i kursywą), z których każdy wskazuje inny zestaw zasobów czcionek. Z kolei każdy deskryptor src zawiera listę wariantów zasobów oddzielonych przecinkami według priorytetu:

• Dyrektywa local() umożliwia odwoływanie się do lokalnie zainstalowanych czcionek, ich wczytywanie i używanie. Jeśli użytkownik ma już zainstalowaną czcionkę w systemie, pomija to sieć i jest najszybsze.
• Dyrektywa url() umożliwia wczytywanie czcionek zewnętrznych i może zawierać opcjonalną podpowiedź format() wskazującą format czcionki, do której odwołuje się podany adres URL.

Gdy przeglądarka stwierdzi, że czcionka jest potrzebna, przechodzi przez podaną listę zasobów w określonej kolejności i próbuje wczytać odpowiedni zasób. Na przykład:

1. Przeglądarka wykonuje układ strony i określa, które warianty czcionek są potrzebne do renderowania określonego tekstu na stronie. Czcionki, które nie są częścią modelu CSS Object Model (CSSOM) strony, nie są pobierane przez przeglądarkę, ponieważ nie są wymagane.
2. W przypadku każdej wymaganej czcionki przeglądarka sprawdza, czy jest ona dostępna lokalnie.
3. Jeśli czcionka nie jest dostępna lokalnie, przeglądarka przechodzi do definicji zewnętrznych:
   • Jeśli jest podpowiedź formatu, przeglądarka sprawdza, czy ją obsługuje, zanim rozpocznie pobieranie. Jeśli przeglądarka nie obsługuje podpowiedzi, przechodzi do następnej.
   • Jeśli nie ma podpowiedzi formatu, przeglądarka pobiera zasób.

Połączenie dyrektyw lokalnych i zewnętrznych z odpowiednimi podpowiedziami formatu umożliwia określenie wszystkich dostępnych formatów czcionek, a resztę pozostawić przeglądarce. Przeglądarka określa, które zasoby są wymagane, i wybiera optymalny format.

Podział na podzbiory Unicode-range

Oprócz właściwości czcionki, takich jak styl, grubość i rozciągnięcie, reguła @font-face umożliwia zdefiniowanie zestawu punktów kodowych Unicode obsługiwanych przez każdy zasób. Dzięki temu możesz podzielić dużą czcionkę Unicode na mniejsze podzbiory (np. podzbiory łacińskie, cyrylicy i greckie) i pobierać tylko glify potrzebne do renderowania tekstu na konkretnej stronie.

Deskryptor unicode-range umożliwia określenie listy wartości zakresu oddzielonych przecinkami, z których każda może mieć jedną z 3 postaci:

• Pojedynczy punkt kodowy (np. U+416).
• Zakres interwałów (np. U+400-4ff): wskazuje początkowy i końcowy punkt kodowy zakresu.
• Zakres symboli wieloznacznych (np. U+4??): znaki ? wskazują dowolną cyfrę szesnastkową.

Na przykład możesz podzielić rodzinę Awesome Font na podzbiory łacińskie i japońskie, z których każdy przeglądarka pobiera w razie potrzeby:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2');
  /* Japanese glyphs */
  unicode-range: U+3000-9FFF, U+ff??;
}

Używanie podzbiorów zakresu Unicode i oddzielnych plików dla każdego wariantu stylistycznego czcionki umożliwia zdefiniowanie złożonej rodziny czcionek, którą można pobrać szybciej i wydajniej. Odwiedzający pobierają tylko potrzebne warianty i podzbiory, a nie muszą pobierać podzbiorów, których nigdy nie zobaczą ani nie użyją na stronie.

Prawie wszystkie przeglądarki obsługują unicode-range. Aby zapewnić zgodność ze starszymi przeglądarkami, może być konieczne powrócenie do „ręcznego podziału na podzbiory”. W takim przypadku musisz wrócić do udostępniania jednego zasobu czcionki, który zawiera wszystkie niezbędne podzbiory, i ukryć resztę przed przeglądarką. Jeśli na przykład strona używa tylko znaków łacińskich, możesz usunąć inne glify i udostępnić ten konkretny podzbiór jako samodzielny zasób.

1. Określ, które podzbiory są potrzebne:
   • Jeśli przeglądarka obsługuje podział na podzbiory Unicode-range, automatycznie wybierze odpowiedni podzbiór. Strona musi tylko udostępnić pliki podzbiorów i określić odpowiednie zakresy Unicode w regułach @font-face.
   • Jeśli przeglądarka nie obsługuje podziału na podzbiory Unicode-range, strona musi ukryć wszystkie niepotrzebne podzbiory. Oznacza to, że deweloper musi określić wymagane podzbiory.
2. Generuj podzbiory czcionek:
   • Użyj narzędzia open source pyftsubset, aby podzielić czcionki na podzbiory i je zoptymalizować.
   • Niektóre serwery czcionek, np. Google Font, domyślnie automatycznie dzielą czcionki na podzbiory.
   • Niektóre usługi czcionek umożliwiają ręczny podział na podzbiory za pomocą niestandardowych parametrów zapytania, których możesz użyć do ręcznego określenia wymaganego podzbioru dla strony. Zapoznaj się z dokumentacją dostawcy czcionek.

Wybór i synteza czcionek

Każda rodzina czcionek może składać się z wielu wariantów stylistycznych (zwykły, pogrubiony, kursywa) i wielu grubości każdego stylu. Każdy z nich może z kolei zawierać bardzo różne kształty glifów, np. różne odstępy, rozmiary lub zupełnie inny kształt.

Powyższy schemat przedstawia rodzinę czcionek, która oferuje 3 różne grubości pogrubienia:

• 400 (zwykła).
• 700 (pogrubiona).
• 900 (bardzo pogrubiona).

Wszystkie inne warianty pośrednie (oznaczone na szaro) są automatycznie mapowane przez przeglądarkę na najbliższy wariant.

Jeśli określono grubość, dla której nie ma kroju pisma, używany jest krój pisma o zbliżonej grubości. Ogólnie rzecz biorąc, grubości pogrubione są mapowane na kroje pisma o większej grubości, a grubości cienkie na kroje pisma o mniejszej grubości.

Algorytm dopasowywania czcionek CSS

Podobna logika dotyczy wariantów kursywy. Projektant czcionki decyduje, które warianty utworzy, a Ty decydujesz, których wariantów użyjesz na stronie. Ponieważ każdy wariant jest pobierany osobno, warto ograniczyć liczbę wariantów. Możesz na przykład zdefiniować 2 warianty pogrubienia dla rodziny Awesome Font:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src: local('Awesome Font'),
       url('/fonts/awesome-l-700.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

Powyższy przykład deklaruje rodzinę Awesome Font, która składa się z 2 zasobów obejmujących ten sam zestaw glifów łacińskich (U+000-5FF), ale oferujących 2 różne „grubości”: zwykłą (400) i pogrubioną (700). Co się jednak stanie, jeśli jedna z reguł CSS określa inną grubość czcionki lub ustawia właściwość font-style na italic?

• Jeśli nie jest dostępna dokładna czcionka, przeglądarka zastępuje ją najbliższą.
• Jeśli nie znaleziono dopasowania stylistycznego (np. w powyższym przykładzie nie zadeklarowano żadnych wariantów kursywy), przeglądarka syntetyzuje własny wariant czcionki.

Powyższy przykład ilustruje różnicę między rzeczywistymi a syntetyzowanymi wynikami czcionki Open Sans. Wszystkie syntetyzowane warianty są generowane na podstawie jednej czcionki o grubości 400. Jak widać, różnica w wynikach jest zauważalna. Nie określono szczegółów dotyczących generowania wariantów pogrubionych i pochylonych. Dlatego wyniki różnią się w zależności od przeglądarki i są w dużym stopniu zależne od czcionki.

Lista kontrolna optymalizacji rozmiaru czcionki internetowej

• Sprawdzaj i monitoruj użycie czcionek: nie używaj zbyt wielu czcionek na stronach, a w przypadku każdej czcionki zminimalizuj liczbę używanych wariantów. Pomaga to zapewnić użytkownikom bardziej spójne i szybsze działanie.
• Jeśli to możliwe, unikaj starszych formatów: formaty EOT, TTF i WOFF są większe niż WOFF 2.0. Formaty EOT i TTF są całkowicie niepotrzebne, natomiast WOFF może być akceptowalny, jeśli musisz obsługiwać Internet Explorer 11. Jeśli kierujesz reklamy tylko na nowoczesne przeglądarki, najprostszym i najbardziej wydajnym rozwiązaniem jest używanie tylko WOFF 2.0.
• Podziel zasoby czcionek na podzbiory: wiele czcionek można podzielić na podzbiory lub podzielić na wiele zakresów Unicode, aby dostarczać tylko glify wymagane przez daną stronę. Zmniejsza to rozmiar pliku i zwiększa szybkość pobierania zasobu. Podczas definiowania podzbiorów należy jednak zachować ostrożność, aby zoptymalizować ponowne użycie czcionki. Na przykład nie pobieraj na każdej stronie innego, ale nakładającego się zestawu znaków. Dobrym rozwiązaniem jest podział na podzbiory na podstawie skryptu, np. łacińskiego i cyrylicy.
• Nadaj priorytet local() na liście src: umieszczenie local('Font Name') na początku listy src gwarantuje, że nie będą wysyłane żądania HTTP dotyczące czcionek, które są już zainstalowane.
• Użyj Lighthouse , aby sprawdzić kompresję tekstu.

Wpływ na największe wyrenderowanie treści (LCP) i skumulowane przesunięcie układu (CLS)

W zależności od treści strony węzły tekstowe mogą być uznawane za kandydatów do największego wyrenderowania treści (LCP). Dlatego ważne jest, aby czcionki internetowe były jak najmniejsze. W tym celu postępuj zgodnie z poradami zawartymi w tym artykule, aby użytkownicy mogli jak najszybciej zobaczyć tekst na stronie tak szybko, jak to możliwe.

Jeśli obawiasz się, że pomimo optymalizacji tekst na stronie może pojawiać się zbyt długo z powodu dużego zasobu czcionki internetowej, właściwość font-display ma kilka ustawień, które mogą pomóc uniknąć niewidocznego tekstu podczas pobierania czcionki. Użycie wartości swap może jednak spowodować znaczne przesunięcia układu, które wpłyną na skumulowane przesunięcie układu (CLS) witryny. Jeśli to możliwe, użyj wartości optional lub fallback.

Jeśli czcionki internetowe mają kluczowe znaczenie dla Twojej marki, a co za tym idzie, dla wrażeń użytkowników, rozważ wstępne wczytywanie czcionek, aby przeglądarka mogła wcześniej wysłać żądanie ich pobrania. Może to skrócić zarówno okres zamiany, jeśli używasz font-display: swap, jak i okres blokowania, jeśli nie używasz font-display.