Fonty webowe nadal są najłatwiejszym zyskiem wydajnościowym na większości stron

Wzorzec, który wciąż wraca

Jeśli dziś przeprowadzisz audyt dziesięciu losowych stron produkcyjnych, na większości z nich zobaczysz mniej więcej tę samą sytuację z fontami:

• Sześć do dziesięciu plików fontów ładowanych na stronie głównej
• Wszystkie w WOFF2 (dobrze), ale bez strategii font-display (źle)
• Kilka grubości i stylów, które nie są używane nigdzie na stronie
• Cały stos serwowany z domeny zewnętrznej (zwykle Google Fonts), wraz ze wszystkimi kosztami DNS, TLS i prywatności, które się z tym wiążą
• Brak podzbiorów przez unicode-range, więc każdy odwiedzający pobiera glify cyrylicy i greki, nawet jeśli strona jest po angielsku

To nie jest problem wyłącznie małych stron. Wiele dobrze finansowanych stron marketingowych nadal ładuje 600 KB fontów, zanim pierwszy akapit da się wyświetlić. Gdy zaczniesz zauważać ten wzorzec, trudno przestać go widzieć.

Naprawa nie jest egzotyczna. To garść dobrze znanych technik, które są dostępne w przeglądarkach od lat.

Użyj jednego zmiennego fontu zamiast sześciu statycznych

Jeśli ładujesz Inter Regular, Inter Medium, Inter SemiBold, Inter Bold oraz ich kursywy, pobierasz mniej więcej sześć razy więcej bajtów, niż potrzebujesz. Jeden zmienny font Inter obejmuje całą oś grubości (a w niektórych kompilacjach także pochylenia) w jednym pliku, który jest niewiele większy niż dwie statyczne grubości.

Kwestia wsparcia w przeglądarkach jest rozstrzygnięta od lat — zmienne fonty działają wszędzie tam, gdzie ma to znaczenie. Pozostałe wahanie to głównie odziedziczona pamięć mięśniowa z ery fontów statycznych.

Praktyczna zasada: jeden plik zmiennego fontu na system pisma, na rodzinę. Łacinka w jednym pliku, cyrylica w drugim, greka w trzecim, ładowane warunkowo przez unicode-range. To wszystko.

Ustaw rozsądne font-display

Domyślne zachowanie, gdy niestandardowy font wciąż się ładuje, polega na pokazaniu niczego — niewidocznego tekstu — nawet przez trzy sekundy. To najgorsza możliwa wartość domyślna. Użytkownicy widzą pustą stronę i zakładają, że coś jest zepsute.

Dodaj to do każdej reguły @font-face:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

swap pokazuje font zastępczy natychmiast i podmienia go na font niestandardowy, gdy ten się załaduje. Użytkownik może czytać stronę od zerowej milisekundy. Kompromisem jest krótkie przesunięcie układu w momencie podmiany, które ograniczasz następną techniką.

Dopasuj metryki fontu zastępczego

Błysk nieostylowanego tekstu jest irytujący głównie wtedy, gdy font zastępczy i niestandardowy mają bardzo różne metryki. Nowoczesny CSS naprawia to za pomocą size-adjust, ascent-override i podobnych właściwości:

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

Po dostrojeniu metryk fontu zastępczego podmiana jest ledwie zauważalna — słowa zajmują tę samą przestrzeń poziomą przed pojawieniem się fontu niestandardowego i po nim.

Prace Google nad --allow-fallback-font-metrics są dziś częścią bazowego wsparcia przeglądarek, a istnieje też pipeline narzędziowy (biblioteka fontaine i podobne), który oblicza właściwe wartości w kilka sekund.

Hostuj samodzielnie

Google Fonts jest wygodne, bezpłatne i niesie dwa realne koszty:

1. Drugi handshake TLS. Nawet przy HTTP/3 i współdzieleniu połączeń dodatkowe źródło rzadko jest darmowe.
2. Pytanie o prywatność i zgodność. Kilka europejskich sądów uznało, że ładowanie Google Fonts z fonts.gstatic.com stanowi przekazanie danych osobowych (adresu IP) stronie trzeciej. Samodzielne hostowanie całkowicie usuwa to pytanie.

Pipeline pobrania i hostowania wygląda tak:

1. Pobierz plik WOFF2 (wersję zmienną, jeśli istnieje)
2. Ogranicz go do systemów pisma, których faktycznie używa Twoja publiczność
3. Serwuj go z tego samego źródła co resztę strony, z długim Cache-Control: max-age=31536000, immutable
4. Wstępnie załaduj najważniejszą grubość: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

To cały pipeline. W przypadku istniejącej strony zajmuje popołudnie, a prawie nigdy nie ma się ochoty wracać do poprzedniego rozwiązania.

Kiedy całkowicie zrezygnować z fontów niestandardowych

Warto powiedzieć to wprost: nie każda strona potrzebuje niestandardowego fontu. Stos fontów systemowych jest dziś naprawdę piękny w każdym systemie operacyjnym:

font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;

Grubość jest właściwa, metryki są właściwe, renderowanie jest dostrojone do urządzenia, a koszt bajtów przesyłanych po sieci wynosi dokładnie zero. Dla strony narzędziowej, aplikacji wewnętrznej, portfolio stawiającego treść na pierwszym miejscu albo czegokolwiek kierowanego do użytkowników na wolnych sieciach stos systemowy jest poprawną odpowiedzią.

<!-- tool-cta:start -->

💡 Wypróbuj to: Przekonwertuj swoje pliki TTF lub OTF na nowoczesny WOFF2 z gotowym do użycia CSS za pomocą Webfont Generator, co jest zmianą formatu zalecaną w tym wpisie.

<!-- tool-cta:end -->

Uczciwe podsumowanie

Dla typowej małej strony cztery kroki obejmują całą historię wydajności fontów webowych:

1. Jeden zmienny font na rodzinę i system pisma
2. font-display: swap z dopasowanymi metrykami fontu zastępczego
3. Samodzielne hostowanie z długimi nagłówkami cache i preload dla krytycznej grubości
4. Albo całkowicie pomiń fonty i użyj stosu systemowego

Zrób to raz, a odzyskasz kilkaset kilobajtów ze strony głównej, zyskasz kilkaset milisekund postrzeganej wydajności i po drodze usuniesz zależność od strony trzeciej. Niewiele zmian ma lepszy stosunek nakładu do efektu.