Czcionki to jeden z tych elementów strony, na które użytkownicy zwracają uwagę dopiero gdy coś jest nie tak – tekst ładuje się z opóźnieniem, litery migają albo strona skacze podczas ładowania. Z perspektywy technicznej fonty potrafią znacząco obciążyć czas ładowania, szczególnie jeśli są wczytywane bez żadnej optymalizacji.
Dlaczego fonty spowalniają stronę
Każda czcionka spoza systemowej biblioteki musi zostać pobrana z serwera – własnego lub zewnętrznego, np. Google Fonts. Im więcej wariantów (grubości, stylów, zestawów znaków), tym więcej żądań HTTP i więcej danych do pobrania. Przeglądarka nie wyrenderuje tekstu, dopóki nie pobierze pliku czcionki, co bezpośrednio wpływa na wskaźnik LCP (Largest Contentful Paint) i całkowite wrażenie szybkości strony.
Dodatkowym problemem jest FOIT (Flash of Invisible Text) i FOUT (Flash of Unstyled Text) – efekty widoczne gdy przeglądarka czeka na font albo wyświetla najpierw czcionkę zastępczą. Oba pogorszają odbiór wizualny i mogą negatywnie wpłynąć na CLS (Cumulative Layout Shift).
Co realnie spowalnia ładowanie fontów
- Ładowanie wielu wariantów wagowych tej samej czcionki (np. 300, 400, 500, 700, 900)
- Wczytywanie zestawów znaków, których strona nie używa (np. cyrylica na polskim serwisie)
- Brak atrybutu
font-display– przeglądarka blokuje renderowanie do czasu pobrania fontu - Wywołania do zewnętrznych serwerów bez wcześniejszego
preconnect - Brak cachowania plików czcionek po stronie serwera
- Używanie wielu różnych krojów pisma na jednej stronie
Jak poprawić wydajność fontów
Ogranicz warianty do minimum
W praktyce większość stron potrzebuje dwóch, maksymalnie trzech wariantów wagowych. Załadowanie tylko tych, które rzeczywiście są użyte w CSS, potrafi skrócić wagę zasobów o kilkadziesiąt kilobajtów bez żadnej widocznej zmiany w wyglądzie.
Użyj font-display: swap
Deklaracja font-display: swap sprawia, że przeglądarka wyświetli tekst czcionką zastępczą od razu, a docelowy font podmieni w tle. Eliminuje blokowanie renderowania i znacznie poprawia odczuwalną szybkość ładowania strony.
Hostuj czcionki lokalnie
Zamiast pobierać fonty z zewnętrznych serwerów, można umieścić je bezpośrednio na własnym serwerze. Eliminuje to dodatkowe połączenie DNS, skraca czas do pierwszego bajtu i daje pełną kontrolę nad nagłówkami cache. W przypadku WordPressa robi to kilka popularnych wtyczek lub można to skonfigurować ręcznie.
Zasubsetuj czcionki
Subset to ograniczony zestaw znaków w pliku fontu. Polska strona potrzebuje liter łacińskich i polskich znaków diakrytycznych – nie potrzebuje cyrylicy, greki ani alfabetów azjatyckich. Ograniczenie zestawu znaków przez parametr subset lub narzędzia do edycji fontów zmniejsza wagę pliku nawet kilkukrotnie.
Zastosuj preload dla kluczowych fontów
Tag <link rel="preload"> w sekcji <head> nakazuje przeglądarce pobrać wskazany plik fontu z wyprzedzeniem, zanim trafi na odwołanie w CSS. Najlepiej stosować go dla jednego, najważniejszego kroju – tego widocznego w nagłówkach i treści pierwszego ekranu.
Fonty systemowe jako alternatywa
W niektórych projektach najlepszym rozwiązaniem jest rezygnacja z zewnętrznych czcionek na rzecz fontów systemowych. System font stack – czyli zestaw czcionek domyślnych dla danego systemu operacyjnego – nie wymaga żadnego pobierania, więc tekst jest widoczny natychmiast. To rozwiązanie sprawdza się szczególnie w aplikacjach webowych, dashboardach i wszędzie tam, gdzie wydajność jest ważniejsza niż unikalny wygląd typografii.
Jak sprawdzić, czy fonty spowalniają Twoją stronę
Narzędzia takie jak Google PageSpeed Insights, Lighthouse czy WebPageTest wyraźnie wskazują zasoby blokujące renderowanie i pokazują, ile czasu zajmuje pobieranie każdego pliku czcionki. Warto sprawdzić zakładkę Network w narzędziach deweloperskich przeglądarki – filtrując po typie zasobu Font można zobaczyć dokładnie, które pliki są pobierane, skąd i jak długo to trwa.
FAQ - najczęstsze pytania
Czy fonty Google spowalniają stronę bardziej niż fonty hostowane lokalnie?
Tak, Google Fonts wymagają dodatkowego połączenia DNS do zewnętrznego serwera, co wydłuża czas do pierwszego bajtu dla pliku czcionki. Fonty hostowane lokalnie eliminują to opóźnienie i pozwalają lepiej kontrolować nagłówki cache.
Ile krojów pisma to bezpieczna liczba dla wydajnej strony?
Przyjęta praktyka mówi o maksymalnie dwóch różnych krojach na jednej stronie. Każdy dodatkowy krój to kolejne żądania HTTP i dodatkowe kilobajty do pobrania przed pierwszym renderowaniem.
Czy format pliku czcionki ma znaczenie dla szybkości ładowania?
Tak, format WOFF2 jest obecnie najlepszym wyborem – oferuje lepszą kompresję niż starsze formaty TTF czy OTF i jest obsługiwany przez wszystkie nowoczesne przeglądarki. Używanie przestarzałych formatów niepotrzebnie zwiększa wagę pobieranych plików.
Czy font-display: swap może negatywnie wpłynąć na wygląd strony?
W rzadkich przypadkach podmiana czcionki zastępczej na docelową powoduje przeskok layoutu, jeśli obie mają znacząco różne rozmiary liter. Dobre dopasowanie czcionki fallback przez właściwości size-adjust lub ascent-override minimalizuje ten efekt.
Co to jest variable font i czy warto go stosować?
Variable font to jeden plik czcionki zawierający wiele wariantów wagowych i stylów, zamiast osobnego pliku dla każdej grubości. W praktyce może zastąpić kilka tradycyjnych plików jednym, co zmniejsza liczbę żądań HTTP i łączną wagę zasobów.
Czy preload czcionek zawsze przyspiesza stronę?
Nie zawsze – preload działa najlepiej dla jednej lub dwóch czcionek krytycznych widocznych w pierwszym ekranie. Stosowanie go dla wielu plików jednocześnie może paradoksalnie opóźnić ładowanie innych ważnych zasobów, takich jak CSS czy obrazy.