Czcionki webowe a prędkość ładowania strony
Czcionki webowe a szybkość ładowania strony: jak font-display, preload i self-hosting wpływają na LCP, CLS i pozycje w Google. Praktyczny przewodnik.
Czcionki webowe a szybkość, krótka odpowiedź
Czcionki webowe pobierane z zewnętrznych serwerów, na przykład z Google Fonts, mogą opóźniać renderowanie tekstu o 0,3 do 1,5 sekundy. Efektem są dwa widoczne problemy: FOIT, czyli niewidoczny tekst przez chwilę po załadowaniu strony, oraz FOUT, czyli tekst najpierw wyświetlony czcionką systemową, a potem zamieniany na docelową. Oba zjawiska pogarszają wskaźniki Core Web Vitals, szczególnie LCP i CLS.
Rozwiązanie istnieje i nie jest skomplikowane. Wymaga trzech kroków: właściwej deklaracji font-display, ewentualnego przeniesienia czcionek na własny serwer i użycia preload dla krytycznych krojów. Ten artykuł wyjaśnia każdy z tych kroków i wskazuje, kiedy Google Fonts jest wystarczające, a kiedy warto rozważyć inne podejście.
Dlaczego czcionki webowe spowalniają stronę
Przeglądarka ładuje stronę w określonej kolejności: HTML, CSS, a potem zasoby wskazane przez CSS, w tym czcionki. Czcionka webowa jest pobierana dopiero wtedy, gdy przeglądarka napotka regułę @font-face w arkuszu styli i stwierdzi, że dany krój jest faktycznie użyty na stronie. To zjawisko nazywa się "late discovery" (późnym odkryciem zasobu).
Przy czcionkach z Google Fonts sytuacja jest bardziej złożona. Strona najpierw pobiera plik CSS z serwera Google, a dopiero z niego odczytuje adresy URL plików czcionek. Dwa osobne żądania sieciowe zanim przeglądarka zacznie pobierać sam plik fontu. Na wolnych połączeniach mobilnych każde z tych żądań dodaje wymierne opóźnienie.
FOIT i FOUT, dwa sposoby na problem
FOIT (Flash of Invisible Text) to sytuacja, gdy przeglądarka czeka z wyświetleniem tekstu na pobranie czcionki. Użytkownik widzi pustą przestrzeń przez ułamek sekundy lub dłużej. FOUT (Flash of Unstyled Text) to przeciwieństwo: tekst wyświetla się od razu czcionką systemową, a potem przeskakuje na docelową. Obydwa zjawiska psują odczucia użytkownika, a zamiana kroju pisma może też podnosić wskaźnik CLS.
Skąd pochodzi opóźnienie w praktyce? Przy korzystaniu z zewnętrznego serwera czcionek przeglądarka musi:
- Nawiązać połączenie DNS z serwerem Google lub innym dostawcą.
- Przeprowadzić negocjację TLS (szyfrowanego połączenia).
- Pobrać plik CSS z listą dostępnych plików czcionek.
- Pobrać właściwy plik czcionki (zazwyczaj WOFF2).
Na laptopie z szybkim łączem może to zająć 50 do 150 ms. Na telefonie z mobilną siecią 4G opóźnienie rośnie do 300 do 600 ms, a na słabszym połączeniu powyżej sekundy.
Właściwość font-display i jak jej używać
Właściwość CSS font-display kontroluje, jak przeglądarka zachowuje się w chwili, gdy czcionka nie jest jeszcze dostępna. Można ją ustawić w regule @font-face. Przy Google Fonts jest parametr URL umożliwiający jej zmianę.
Dostępne wartości tworzą pięć różnych strategii:
| Wartość | Zachowanie | Kiedy stosować |
|---|---|---|
auto | decyduje przeglądarka | nie stosuj, brak kontroli |
block | tekst niewidoczny do 3 s | tylko dla ikon, nigdy dla treści |
swap | od razu tekst systemowy, potem zamiana | dobry dla treści, może powodować FOUT |
fallback | 100 ms blokady, potem swap | dobry kompromis dla treści |
optional | krótka blokada, potem systemowa jeśli wolne | najlepszy dla wydajności, może nie załadować |
Dla większości stron firmowych najlepszym wyborem jest font-display: swap lub font-display: fallback. Pierwsza wartość zapewnia, że użytkownik od razu widzi tekst, nawet jeśli chwilowo w innym kroju. Druga daje krótkie okno 100 ms na pobranie czcionki przed przełączeniem na systemową.
- Tekst widoczny natychmiast czcionką systemową
- Po załadowaniu fontu zamiana na docelową
- Może powodować widoczny przeskok tekstu (CLS)
- Dobry wybór gdy projekt toleruje krótką zamianę
- Zalecany przez Google dla treści tekstowych
- 100 ms blokady, potem czcionka systemowa
- Zamiana następuje tylko jeśli font załaduje się szybko
- Mniejsze ryzyko widocznego przeskoku
- Dobry kompromis między wyglądem a wydajnością
- Zalecany gdy zależy na minimalnym CLS
Przy Google Fonts można ustawić font-display przez parametr URL. Zamiast standardowego linku:
https://fonts.googleapis.com/css2?family=Inter:wght@400;700
Używasz:
https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap
To prosty sposób na poprawę bez konieczności przenoszenia czcionek na własny serwer.
Preload: priorytetowe pobieranie kluczowego kroju
Preload to instrukcja dla przeglądarki, żeby zaczęła pobierać zasób jak najwcześniej, zanim natrafi na niego w CSS lub HTML. Dla czcionek webowych preload jest skutecznym sposobem na skrócenie opóźnienia, bo przeglądarka nie musi najpierw przetwarzać CSS, żeby dowiedzieć się, że czcionka jest potrzebna.
Deklaracja preload trafia do sekcji <head> strony:
<link rel="preload" href="/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin>
Atrybut crossorigin jest wymagany, nawet jeśli czcionka jest hostowana na tym samym serwerze. Przeglądarka traktuje pobieranie czcionek jako żądanie CORS. Bez tego atrybutu plik może być pobrany dwukrotnie.
Preload tylko dla krytycznych czcionek
Preload przyspiesza pobieranie zasobu kosztem przepustowości potrzebnej innym elementom. Stosuj go maksymalnie dla jednej lub dwóch czcionek krytycznych, na przykład kroju używanego w nagłówkach i treści głównej. Nie ustawiaj preload dla wszystkich wariantów fontu, bo efekt będzie odwrotny do zamierzonego.
Preload działa szczególnie dobrze w połączeniu z self-hostingiem czcionek. Jeśli plik fontu leży na Twoim serwerze, przeglądarka pobiera go bezpośrednio bez dodatkowego żądania do zewnętrznego dostawcy.
Self-hosting czcionek kontra Google Fonts
Google Fonts jest wygodne i bezpłatne, ale wiąże się z dodatkowym żądaniem sieciowym do zewnętrznego serwera. Self-hosting, czyli przechowywanie plików czcionek na własnym serwerze, eliminuje to opóźnienie i daje pełną kontrolę nad sposobem serwowania plików.
Mit o współdzielonym cache przeglądarki warto obalić. Przed 2020 rokiem przeglądarki mogły używać czcionek Google Fonts wcześniej pobranych przez inną stronę. Po zmianie polityki prywatności w Chrome, Firefox i Safari każda strona pobiera pliki z Google Fonts niezależnie. Argument "użytkownik już ma ten font w cache" nie jest już aktualny.
Dla stron na WordPress przeniesienie czcionek można zautomatyzować przez wtyczki takie jak OMGF (Optimize My Google Fonts) lub przez ręczne pobranie plików i dodanie ich do motywu.
Liczba wariantów czcionki a czas ładowania
Każdy wariant czcionki to osobny plik do pobrania. Projekt używający Inter w czterech wagach (400, 500, 600, 700) i dwóch stylach (normalny, kursywa) pobiera osiem plików. Każdy z nich może ważyć od 20 do 60 KB w formacie WOFF2.
W praktyce większość stron firmowych nie potrzebuje więcej niż dwóch lub trzech wariantów:
- Jeden wariant do treści (np. waga 400, normalny)
- Jeden do nagłówków i wyróżnień (np. waga 700, normalny)
- Ewentualnie jeden do podtytułów (np. waga 500 lub 600)
Kursywa jest rzadko używana w polskich stronach firmowych. Jeśli nie stosujesz jej w projekcie, nie ładuj jej pliku.
Zmienne czcionki (variable fonts) jako alternatywa
Variable fonts to format, który zawiera wiele wag i stylów w jednym pliku. Jeden plik WOFF2 z Inter Variable zastępuje osiem osobnych plików wariantów. Rozmiar jest większy niż pojedynczy wariant, ale znacznie mniejszy niż osiem plików razem. Przy projekcie używającym wielu wag jest to skuteczne rozwiązanie. Wsparcie przeglądarek przekracza 95 procent.
Jak czcionki wpływają na wskaźnik CLS
CLS (Cumulative Layout Shift) mierzy sumę nieoczekiwanych przesunięć elementów strony. Czcionka webowa może powodować CLS w sytuacji, gdy po załadowaniu kroju pisma tekst zmienia rozmiar lub liczbę linii, co przesuwa elementy poniżej.
Problem wynika z różnicy metryk między czcionką systemową wyświetloną tymczasowo a docelową czcionką webową. Jeśli fallback ma inne wymiary liter, zamiana powoduje przesunięcie layoutu.
CSS oferuje właściwości do wyrównania metryk fallbacku:
@font-face {
font-family: 'InterFallback';
src: local('Arial');
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
size-adjust: 107%;
}
To zaawansowane podejście, które wymaga ręcznego dostrojenia wartości dla konkretnej pary czcionek. Narzędzia takie jak "Fallback Font Generator" (dostępne online) ułatwiają ten proces. Nowoczesne frameworki, na przykład Next.js i Nuxt 3, oferują automatyczną optymalizację metryk czcionek wbudowaną w swoje moduły obsługi fontów.
Nuxt 3 i @nuxt/fonts
Moduł @nuxt/fonts w Nuxt 3 automatycznie: pobiera czcionki z Google Fonts przy buildzie, hostuje je lokalnie, dodaje preload dla krytycznych wariantów i generuje zoptymalizowane metryki fallbacku. To jedno z najprostszych rozwiązań dla stacku Nuxt, wymagające minimalnej konfiguracji.
Czcionki systemowe jako alternatywa
Warto rozważyć rezygnację z czcionek webowych tam, gdzie nie są niezbędne dla identyfikacji wizualnej. System font stack to zestaw czcionek zainstalowanych na urządzeniach użytkowników. Nie wymagają pobierania, renderują się natychmiast i mają zerowy wpływ na LCP czy CLS.
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
}
Na iPhone i Mac użytkownik zobaczy San Francisco, na Windows Segoe UI, na Android Roboto. Każda z tych czcionek jest czytelna i nowoczesna. W przypadku stron, gdzie szybkość jest priorytetem nad spójnością kroju pisma na wszystkich platformach, jest to godna uwagi opcja.
Audyt czcionek: jak sprawdzić aktualny stan
Przed wprowadzaniem zmian warto zobaczyć, co faktycznie dzieje się z czcionkami na stronie. Dwa narzędzia wystarczą do pełnej diagnozy.
PageSpeed Insights wskazuje ostrzeżenia związane z czcionkami w sekcji "Możliwości". Szukaj pozycji: "Ensure text remains visible during webfont load" (brak font-display), "Preload key requests" (czcionki do preloadu) oraz "Reduce unused CSS" (nieużywane warianty fontów). Każda pozycja pokazuje szacowane oszczędności w milisekundach.
Chrome DevTools, zakładka Network pozwala zobaczyć dokładną kolejność i czas pobierania zasobów. Odfiltruj po typie "Font". Zobaczysz, kiedy każdy plik czcionki zaczął się pobierać, ile czasu zajęło połączenie i sam transfer. Długi czas oczekiwania (szary pasek na wykresie waterfall) wskazuje na opóźnienie sieciowe związane z zewnętrznym hostem.
- 01Sprawdź liczbę żądań sieciowychW Chrome DevTools (F12, zakładka Network, filtr Font) sprawdź, ile plików czcionek strona pobiera. Powyżej czterech wariantów warto ocenić, czy wszystkie są naprawdę używane.
- 02Zmierz opóźnienie w PageSpeed InsightsWejdź na pagespeed.web.dev i sprawdź ostrzeżenia dotyczące czcionek. Zapisz szacowane oszczędności dla wersji mobilnej.
- 03Oceń, czy czcionka jest elementem LCPSprawdź w PageSpeed Insights, jaki element jest oznaczony jako LCP. Jeśli to nagłówek z czcionką webową, optymalizacja fontu bezpośrednio poprawi ten wskaźnik.
- 04Dodaj display=swap do Google FontsJeśli używasz Google Fonts przez link w head, dodaj parametr &display=swap do URL. To szybka poprawka bez przenosin czcionek na własny serwer.
- 05Rozważ self-hosting lub czcionki systemoweJeśli strona nadal ma słaby LCP po dodaniu display=swap, przenieś czcionki na własny serwer lub rozważ przejście na system font stack.
- 06Dodaj preload dla krytycznego krojuJeśli czcionka jest używana w nagłówku strony lub elemencie LCP, dodaj tag link rel='preload' w sekcji head. Tylko dla jednego lub dwóch plików.
Czcionki a pozycje lokalne
Techniczna jakość strony ma szczególne znaczenie dla firm lokalnych, bo większość zapytań o lokalne usługi pochodzi z telefonów. Wolna strona traci użytkownika na rzecz szybszego konkurenta, nawet jeśli jest wyżej w wynikach wyszukiwania.
Według danych Backlinko, 46 procent wszystkich wyszukiwań Google ma intencję lokalną (Backlinko, Local SEO Stats). Pierwsza pozycja organiczna zbiera średnio 27,6 procent kliknięć, a każda kolejna pozycja notuje wyraźnie mniej (Backlinko, Google CTR Stats). Opóźnienie ładowania strony spowodowane nieoptymalnym ładowaniem czcionek może obniżyć wyniki Core Web Vitals i przez to pozycję w wynikach.
Techniczna optymalizacja czcionek wpisuje się w szerszą strategię widoczności lokalnej. Czytaj więcej o tym, jak zbudować stronę pod pozycjonowanie lokalne, w artykule jak zbudować stronę pod pozycjonowanie lokalne. Firmy z Warszawy, Krakowa, Wrocławia i innych miast znajdą szczegółowe informacje na stronach pozycjonowanie Warszawa, pozycjonowanie Kraków i pozycjonowanie Wrocław.
O tym, jak szybkość strony wchodzi w skład wskaźników ocenianych przez Google, piszemy w artykule Core Web Vitals i dlaczego wpływają na pozycję. Jeśli interesuje Cię też wybór technologii dla strony firmowej, sprawdź porównanie WordPress czy strona kodowana.
Najczęstsze pytania
Czy Google Fonts spowalnia stronę na tyle, żeby warto było z niego rezygnować?
Zależy od konfiguracji. Google Fonts bez parametru display=swap i bez preload może dodać 300 do 600 ms do czasu ładowania na urządzeniu mobilnym. Po dodaniu display=swap efekt na LCP jest mniejszy, bo tekst wyświetla się od razu czcionką systemową. Self-hosting eliminuje opóźnienie sieciowe całkowicie. Jeśli strona ma LCP poniżej 2,5 sekundy z Google Fonts z display=swap, zmiana może nie być priorytetem. Jeśli LCP jest w okolicach 3 sekund lub powyżej, przeniesienie czcionek na własny serwer jest prostym i skutecznym działaniem.
Co to jest WOFF2 i dlaczego tylko ten format?
WOFF2 (Web Open Font Format 2) to format czcionek zoptymalizowany pod kątem transferu sieciowego. Oferuje lepszą kompresję niż starszy WOFF i wyraźnie mniejszy rozmiar pliku niż TTF lub OTF. Wsparcie przeglądarek dla WOFF2 przekracza 97 procent. Starsze formaty, takie jak EOT czy SVG fonts, są przestarzałe i nie powinny być używane na nowych stronach. Przy self-hostingu pobieraj i serwuj wyłącznie pliki WOFF2.
Czy variable fonts naprawdę warto stosować?
Variable fonts są warte uwagi przy projektach używających więcej niż dwóch lub trzech wariantów wagowych tego samego kroju. Jeden plik zawierający cały zakres wag zastępuje kilka osobnych plików. Łączny rozmiar jest zazwyczaj o 30 do 50 procent mniejszy niż zestaw plików statycznych dla tych samych wariantów. Dla prostej strony firmowej z dwoma wariantami (400 i 700) oszczędności są minimalne i nie uzasadniają zmiany. Dla rozbudowanych projektów z szeroką paletą typograficzną to realna optymalizacja.
Jak dodać czcionki webowe w Nuxt 3 bez ręcznej konfiguracji?
Moduł @nuxt/fonts instaluje się poleceniem npx nuxi module add fonts i wymaga tylko wskazania czcionki w konfiguracji CSS lub komponentach. Moduł automatycznie pobiera pliki przy budowaniu projektu, hostuje je lokalnie, dodaje preload dla czcionek użytych w krytycznym CSS i generuje optymalne metryki fallbacku, żeby zminimalizować CLS. To znacznie prostsze niż ręczne zarządzanie plikami WOFF2 i regułami @font-face. Dokumentacja dostępna jest pod adresem fonts.nuxt.com.