Czcionki internetowe a szybkość strony: font-display, formaty i własny hosting

Jak czcionki internetowe wpływają na LCP i CLS

Czcionki internetowe wpływają na szybkość strony na dwa sposoby: opóźniają pojawienie się tekstu i wywołują przesunięcia układu. Opracowanie Best practices for fonts w serwisie web.dev opisuje to wprost: gdy czcionka internetowa nie jest jeszcze pobrana, przeglądarki zazwyczaj wstrzymują rysowanie tekstu, co często opóźnia pierwsze wyświetlenie treści (FCP), a w części przypadków także największe wyrenderowanie treści (LCP). Z kolei zamiana kroju może powodować przesunięcia układu, czyli wzrost wskaźnika CLS, jeśli krój internetowy i zastępczy zajmują inną ilość miejsca.

Kiedy tekst jest elementem LCP

LCP mierzy moment wyświetlenia największego obrazu, bloku tekstu lub filmu widocznego w oknie przeglądarki. Jeśli na stronie Państwa firmy największym elementem pierwszego ekranu jest duży nagłówek albo akapit wstępu, to właśnie czcionka decyduje o wyniku. Dokument Largest Contentful Paint (LCP) zaznacza, że tekst korzystający z czcionki internetowej nie jest uznawany za wyrenderowany w okresie blokowania czcionki. Dopóki więc tekst jest niewidoczny, licznik LCP biegnie dalej. Dobry wynik to 2,5 sekundy lub mniej, liczony dla 75. percentyla wczytań strony. Pozostałe przyczyny wolnego wyświetlania opisujemy we wpisie o tym, co opóźnia LCP.

Zamiana kroju a przesunięcia układu

Każdy krój ma inne proporcje: inną szerokość liter, inną wysokość wiersza. Gdy przeglądarka najpierw układa tekst krojem systemowym, a po chwili podmienia go na docelowy, akapit może zająć o jeden wiersz więcej lub mniej i wszystko, co leży poniżej, przesuwa się. Opracowanie Optimize Cumulative Layout Shift przypomina, że serwisy powinny dążyć do CLS na poziomie 0,1 lub niższym dla co najmniej 75 procent wizyt. Kancelaria z Krakowa, której szeroki nagłówek w ozdobnym kroju po podmianie łamie się na dwa wiersze i spycha kolumny ze specjalizacjami, traci na tym w obu wskaźnikach naraz. Inne źródła przeskoków omawiamy we wpisie o przesunięciach układu strony.

Niewidoczny tekst i podmiana kroju: dwa zachowania przeglądarki

Zanim czcionka zostanie pobrana, przeglądarka ma dwa wyjścia: ukryć tekst albo pokazać go krojem zastępczym. Pierwsze zachowanie nazywa się w dokumentacji skrótem FOIT (błysk niewidocznego tekstu), drugie skrótem FOUT (błysk tekstu bez docelowego stylu). Według web.dev przeglądarki oparte na Chromium oraz Firefox ukrywają tekst najwyżej przez 3 sekundy, a Safari robi to bezterminowo, dopóki czcionka nie nadejdzie.

Częstym nieporozumieniem jest przekonanie, że niewidoczny tekst przynajmniej nie psuje układu. Dokument o optymalizacji CLS wyjaśnia, że oba podejścia mogą powodować przesunięcia. Tekst ukryty jest i tak rozmieszczany według wymiarów kroju zastępczego, więc gdy nadejdzie czcionka docelowa, blok tekstu i jego otoczenie przesuwają się tak samo, jak przy widocznej zamianie.

Jest jeszcze jedna rzecz, o której rzadko się myśli przy projektowaniu. Sama reguła @font-face niczego nie pobiera. Jak podaje web.dev, plik czcionki jest ściągany dopiero wtedy, gdy odwołuje się do niego styl faktycznie użyty na stronie. Przeglądarka musi więc najpierw pobrać dokument HTML, potem arkusz stylów, zbudować układ i dopiero wtedy odkrywa, że potrzebuje czcionki. Większość opisanych dalej zabiegów sprowadza się do dwóch celów: sprawić, by czcionka dotarła wcześniej i ważyła mniej, oraz zadbać, by chwila bez niej była dla odbiorcy jak najmniej odczuwalna.

Gdzie sprawdzić, czy czcionki spowalniają stronę

Najszybciej widać to w PageSpeed Insights i w audycie Lighthouse, a szczegóły w narzędziach deweloperskich przeglądarki. Na stronie pagespeed.web.dev wystarczy wpisać adres podstrony w jedyne pole i uruchomić analizę przyciskiem obok. Pod wynikami raport pokazuje listę zaleceń. O czytaniu całego raportu piszemy we wpisie o PageSpeed Insights.

W zaleceniach warto odszukać pozycję dotyczącą wyświetlania czcionek. Dokumentacja Lighthouse opisuje ją pod angielską nazwą Ensure text remains visible during webfont load, czyli zapewnienie widoczności tekstu podczas ładowania czcionki, i informuje, że od wersji 13 audyt ten wszedł w skład analizy o nazwie Font display. W polskiej wersji interfejsu nazwa bywa przetłumaczona, więc najpewniej szukać jej po słowach o czcionkach. Audyt wskazuje adresy plików czcionek, przy których tekst może być chwilowo niewidoczny.

Drugie miejsce to wskazanie elementu LCP. Gdy raport pokazuje jako największy element nagłówek lub akapit, a nie obraz, czcionka ma bezpośredni wpływ na wynik. Trzecie to lista przesunięć układu: jeśli wśród przesuwających się elementów są bloki tekstu, przyczyną jest zwykle podmiana kroju.

Z naszej praktyki najwięcej mówi karta sieci w narzędziach deweloperskich Chrome z filtrem ograniczonym do czcionek. Widać tam, ile plików pobiera jedna podstrona, w jakim formacie, ile ważą, z jakiej domeny pochodzą i kiedy zaczyna się ich pobieranie. Przykład dla zobrazowania: sklep z Poznania może ładować na karcie produktu kilkanaście plików czcionek z dwóch rodzin, choć w projekcie widoczne są trzy odmiany. Od takiego spisu zaczyna się porządkowanie.

Font-display: która wartość do czego służy

Właściwość font-display, zapisywana wewnątrz reguły @font-face, mówi przeglądarce, jak długo ma ukrywać tekst w oczekiwaniu na czcionkę i jak długo po tym czasie wolno jej jeszcze podmienić krój. Pierwszy odcinek dokumentacja nazywa okresem blokowania, drugi okresem zamiany. Web.dev zestawia pięć wartości w tabeli, którą przytaczamy poniżej.

Z tabeli wynikają trzy praktyczne wnioski, które web.dev formułuje wprost. Jeżeli najważniejsza jest wydajność, najlepiej sprawdza się optional: tekst jest wstrzymany najwyżej na 100 ms i nie ma przesunięć związanych z podmianą, ale czcionka, która przyjdzie za późno, nie zostanie przy tej wizycie pokazana. Jeżeli zależy Państwu na szybkim tekście i jednocześnie na kroju firmowym, pozostaje swap, pod warunkiem że czcionka zostanie dostarczona wcześnie. Wartość block warto zostawić dla sytuacji, w których krój zastępczy byłby nie do przyjęcia.

Strategie można łączyć. Web.dev podaje przykład: swap dla elementów identyfikacji, takich jak nagłówki w kroju firmowym, oraz optional dla tekstu podstawowego. Długie opisy przy wolnym łączu zostaną wtedy w kroju systemowym, bez przeskoku w trakcie czytania.

@font-face {
  font-family: "Krój Firmowy";
  src: url("/fonts/kroj-firmowy-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Gdy czcionki pochodzą z Google Fonts, reguły @font-face generuje serwer Google, więc wartość ustawia się w adresie arkusza. Dokumentacja Lighthouse i opis interfejsu CSS w Google Fonts podają, że służy do tego parametr display, na przykład dopisany na końcu adresu jako &display=swap.

Format WOFF2 i podzbiory znaków z polskimi literami

Współcześnie wystarcza jeden format: WOFF2. Web.dev podaje, że korzysta on z kompresji Brotli i kompresuje o 30 procent lepiej niż starszy WOFF, a przytoczona tam rada eksperta brzmi, by używać wyłącznie WOFF2 i zapomnieć o reszcie. Reguła @font-face może więc mieć jeden adres w polu src. Jeśli w karcie sieci widać u Państwa pliki z rozszerzeniem ttf, otf lub woff, to pierwsza i najprostsza oszczędność. O tej samej metodzie kompresji dla plików tekstowych piszemy we wpisie o kompresji gzip i Brotli.

Podzbiór znaków zamiast całego kroju

Pełny plik kroju zawiera znaki wielu języków, z których strona polskiej firmy nigdy nie skorzysta. Podzbiór to plik ograniczony do wybranych znaków. Web.dev opisuje dwa uzupełniające się mechanizmy: fizyczne przycięcie pliku narzędziem do tworzenia podzbiorów oraz deskryptor unicode-range w regule @font-face, który informuje przeglądarkę, jakie znaki dany plik obejmuje. Plik jest wtedy pobierany tylko wówczas, gdy na stronie występują pasujące znaki. Google Fonts podaje czcionki w podzbiorach domyślnie.

Przy polskich stronach kryje się tu pułapka. Litery ą, ć, ę, ł, ń, ó, ś, ź i ż nie należą do podstawowego zestawu łacińskiego, więc z naszych obserwacji w gotowych zestawach trafiają zwykle do osobnego pliku z rozszerzonym alfabetem łacińskim. Jeśli przy samodzielnym przycinaniu pominie się polskie znaki, przeglądarka narysuje je krojem zastępczym i w słowie pojawią się litery wyraźnie odstające od reszty. Jeśli natomiast polskie znaki są w drugim pliku, strona po polsku pobiera dwa pliki na każdą odmianę. Przy hostingu własnym rozsądnie jest przygotować jeden podzbiór obejmujący łacinę podstawową, polskie znaki, cyfry i interpunkcję używaną w tekstach.

Przed przycinaniem należy przeczytać licencję kroju. Web.dev wyraźnie zaleca upewnienie się, że licencja pozwala na tworzenie podzbiorów i na samodzielne hostowanie plików.

Jeśli chcą Państwo zamówić SEO techniczne, zachęcamy do kontaktu: tel. 222 500 844 lub mailowo: biuro@pozycjonowaniestron.pl

Ile odmian czcionki naprawdę potrzebuje strona

Strona potrzebuje tylu odmian, ile faktycznie widać w projekcie, a każda dodatkowa to osobny plik do pobrania. Odmianą jest każde połączenie grubości i stylu: zwykła, pogrubiona, kursywa, pogrubiona kursywa. Dwie rodziny po cztery odmiany to osiem plików. Dokumentacja Google Fonts ostrzega, że zamawianie nieużywanych stylów zwiększa ilość danych pobieranych przez odbiorców, i zaleca wskazywanie w adresie wyłącznie tych grubości, które są na stronie używane. Z naszych obserwacji nadmiar bierze się najczęściej z motywu ładującego pełny zestaw grubości, z wtyczek dokładających własne kroje oraz z reguł pozostawionych po zmianie projektu.

Czcionki zmienne i kroje systemowe

Czcionka zmienna to jeden plik, w którym grubość jest płynną osią, a nie zestawem osobnych plików. Web.dev podaje przykład: jedna oś grubości może zastąpić odmiany cienką, zwykłą, pogrubioną i bardzo grubą. Plik zmienny jest jednak zwykle większy od pliku pojedynczej odmiany, więc opłaca się na stronach, które używają wielu grubości i stylów. W Google Fonts zakres osi zamawia się w adresie, zapisując dwie wartości połączone dwiema kropkami, na przykład wght@200..900.

Najlżejszą czcionką jest ta, której nie trzeba pobierać. Wartość system-ui we właściwości font-family każe przeglądarce użyć kroju zainstalowanego na urządzeniu. Hydraulik z Łodzi, którego strona ma przede wszystkim szybko pokazać numer telefonu i zakres usług, niczego nie traci, gdy opisy wyświetlają się krojem systemowym, a krój firmowy zostaje w nagłówkach.

• Lista plików czcionek z karty sieci zgadza się z odmianami widocznymi w projekcie.
• Każda rodzina ma uzasadnienie: krój firmowy, czytelność tekstu, wymóg identyfikacji.
• Kursywa i pogrubienie są ładowane tylko wtedy, gdy rzeczywiście występują w treści.
• Kroje dokładane przez wtyczki zostały wyłączone albo zastąpione krojem strony.
• Czcionki z ikonami zastąpiono grafikami SVG tam, gdzie było to możliwe.

Wstępne ładowanie: jak sprawić, by czcionka dotarła wcześniej

Czcionka dociera wcześniej, gdy przeglądarka dowiaduje się o niej na samym początku, a nie dopiero po pobraniu arkusza stylów i zbudowaniu układu. Służą do tego trzy zabiegi opisane w web.dev: umieszczenie deklaracji czcionek w nagłówku dokumentu, wcześniejsze nawiązanie połączenia z obcym serwerem oraz wstępne ładowanie pliku.

Pierwszy zabieg polega na wpisaniu reguł @font-face bezpośrednio do sekcji head dokumentu HTML zamiast do zewnętrznego arkusza. Web.dev ocenia, że skorzystałaby na tym większość serwisów, ale zastrzega, by nie wszywać w dokument samych plików czcionek, ponieważ duże zasoby w kodzie opóźniają dokument główny.

Drugi zabieg dotyczy czcionek z zewnętrznego serwera. Znacznik link z atrybutem rel o wartości preconnect każe przeglądarce zawczasu nawiązać połączenie z daną domeną. W przypadku Google Fonts potrzebne są dwa takie znaczniki: jeden dla domeny z arkuszem stylów i drugi, z atrybutem crossorigin, dla domeny z plikami, bo pliki czcionek są przesyłane połączeniem w trybie CORS.

Znacznik preload dla najważniejszej czcionki

Trzeci zabieg, wstępne ładowanie, to znacznik link z atrybutem rel o wartości preload. Ćwiczenie Preload web fonts to improve loading speed pokazuje dokładny zapis. Atrybut as o wartości font mówi przeglądarce, że zasób jest czcionką, co pomaga ustalić priorytet żądania. Atrybut type wskazuje format. Atrybut crossorigin jest niezbędny: bez niego, jak podaje to źródło, wstępnie załadowana czcionka zostanie przez przeglądarkę zignorowana.

<link rel="preload" href="/fonts/kroj-firmowy-bold.woff2"
      as="font" type="font/woff2" crossorigin>

Wstępne ładowanie ma swój koszt. Web.dev przypomina, że odbiera ono zasoby przeglądarki innym plikom i ignoruje unicode-range, dlatego należy stosować je ostrożnie i dla jednego formatu. W przywołanym ćwiczeniu wstępnie ładowana jest tylko czcionka nagłówka widocznego na pierwszym ekranie. To dobra reguła: jeden, najwyżej dwa pliki. Sklep, który wstępnie ładuje sześć odmian, opóźnia nimi zdjęcie produktu, czyli często właściwy element LCP.

Dopasowanie metryk czcionki zastępczej

Dopasowanie metryk polega na takim przeskalowaniu kroju zastępczego, by zajmował tyle samo miejsca co krój docelowy. Podmiana nadal następuje, ale tekst nie zmienia liczby wierszy ani wysokości, więc nic się nie przesuwa. Służą do tego cztery deskryptory reguły @font-face: size-adjust, ascent-override, descent-override i line-gap-override. Opisują je opracowania CSS size-adjust for @font-face oraz Improved font fallbacks.

Deskryptor size-adjust skaluje proporcjonalnie szerokość i wysokość znaków: wartość 200 procent podwaja je, 50 procent zmniejsza o połowę. Trzy pozostałe zmieniają metryki pionowe: wysokość ponad linią pisma, głębokość pod nią oraz odstęp między wierszami. Każda z tych wartości to metryka kroju docelowego podzielona przez liczbę jednostek na firet, zapisana w procentach. Gdy stosuje się także size-adjust, czyli iloraz średniej szerokości znaku obu krojów, metryki pionowe dzieli się dodatkowo przez tę wartość.

@font-face {
  font-family: "kroj-firmowy-zastepczy";
  src: local("Arial");
  size-adjust: 60.85%;
  ascent-override: 164.34%;
  descent-override: 57.52%;
  line-gap-override: 16.43%;
}

body {
  font-family: "Krój Firmowy", "kroj-firmowy-zastepczy", sans-serif;
}

Wartości należy odczytać z tabel pliku czcionki, a nie szacować na oko; dokumentacja Chrome wymienia narzędzia, które te tabele pokazują, oraz gotowy zbiór wartości dla krojów z Google Fonts. Jako podstawę kroju zastępczego zaleca się Arial dla krojów bezszeryfowych i Times New Roman dla szeryfowych, jednak żaden z nich nie jest dostępny na Androidzie, gdzie jedynym krojem systemowym jest Roboto. Stąd rada, by przygotować trzy poziomy: krój zastępczy dla systemów Windows i Mac, drugi dla Androida oraz rodzinę ogólną, na przykład sans-serif.

Według dokumentacji same metryki pionowe są dobrym początkiem, a wersja z size-adjust wymaga więcej pracy i testów, lecz poprawnie wykonana potrafi przesunięcia związane z czcionkami praktycznie wyeliminować. Deskryptor size-adjust jest obsługiwany przez Chrome, Edge i Firefox od wersji 92 oraz przez Safari od wersji 17.

Hosting własny czy zewnętrzny serwer czcionek

Hosting własny oznacza, że pliki czcionek leżą na tym samym serwerze co strona, a nie na serwerze dostawcy krojów. Główna korzyść jest jedna i pewna: znika konieczność nawiązania połączenia z dodatkową domeną. Web.dev studzi jednak oczekiwania i zaznacza, że realne zyski nie są oczywiste. Przywołuje analizę, w której serwisy korzystające z czcionek zewnętrznych wyświetlały się szybciej niż te z czcionkami na własnym serwerze. Zewnętrzny dostawca zwykle sam dba o podzbiory i kompresję WOFF2, a właściciel strony po przeniesieniu plików często tego nie robi.

Z tego samego źródła wynika, kiedy hosting własny pomaga mniej: gdy strona nie korzysta z sieci CDN i protokołu HTTP/2 oraz gdy serwer odpowiada wolno. Jeżeli Państwa serwer ma długi czas odpowiedzi, przeniesienie na niego czcionek przeniesie tam również opóźnienie. O ocenie serwera piszemy we wpisach o czasie odpowiedzi TTFB oraz o sieci dostarczania treści.

Jak przenieść czcionki na własny serwer

Kolejność prac ma znaczenie, ponieważ każda następna czynność korzysta z wyniku poprzedniej. Poniższa lista zbiera to, co wynika z przywołanych źródeł, w porządku, w jakim wykonujemy te prace u klientów.

1. Spis odmian i licencja

   Ustalenie, które rodziny i grubości są rzeczywiście używane, oraz potwierdzenie, że licencja kroju pozwala na hosting własny i tworzenie podzbiorów.

2. Pliki WOFF2 w podzbiorze z polskimi znakami

   Przygotowanie po jednym pliku na odmianę, z łaciną podstawową, polskimi literami, cyframi i potrzebną interpunkcją.

3. Reguły @font-face w nagłówku dokumentu

   Wpisanie deklaracji do sekcji head, z jednym adresem w polu src i z wybraną wartością font-display dla każdej odmiany.

4. Wstępne ładowanie czcionki pierwszego ekranu

   Jeden znacznik preload z atrybutami as, type i crossorigin dla pliku, który rysuje nagłówek lub wstęp.

5. Krój zastępczy z dopasowanymi metrykami

   Reguła @font-face oparta na kroju lokalnym, wpisana do listy font-family tuż za krojem docelowym.

6. Usunięcie starych odwołań i pomiar

   Wyłączenie arkusza zewnętrznego dostawcy i znaczników preconnect do jego domen, a potem ponowny test w PageSpeed Insights.

Po przeniesieniu plików odpowiedzialność za ich buforowanie przechodzi na Państwa serwer. Plik czcionki zmienia się rzadko, więc z praktyki ustawiamy dla niego długi czas przechowywania w pamięci przeglądarki. Zasady opisujemy we wpisie o nagłówkach Cache-Control. Przy czcionkach z zewnętrznego serwera przeglądarka odbiorcy łączy się z domeną innego podmiotu; czy wynikają z tego obowiązki informacyjne dla Państwa firmy, powinien ocenić prawnik zajmujący się ochroną danych.

Typowe pomyłki przy czcionkach i kiedy potrzebna jest pomoc

Najczęstsza pomyłka to poprzestanie na jednej zmianie, zwykle na dopisaniu wartości swap, i uznanie sprawy za zamkniętą. Audyt w Lighthouse przestaje wtedy zgłaszać uwagę, ale przesunięcie układu zostaje. Czcionki trzeba traktować jako łańcuch: waga pliku, moment odkrycia, zachowanie w czasie oczekiwania i wymiary kroju zastępczego.

Druga pomyłka to wstępne ładowanie wszystkich odmian, które spowalnia obraz główny i arkusze stylów. Trzecia to brak atrybutu crossorigin w znaczniku preload. Czwarta dotyczy polskich znaków: po samodzielnym przycięciu kroju strona wygląda poprawnie na próbce tekstu, a po publikacji w nazwisku albo w nazwie miejscowości pojawia się litera w innym kroju. Warto przetestować podzbiór na zdaniu zawierającym wszystkie polskie litery, wielkie i małe, a także na cenach i numerach telefonów. Piąta to ocenianie efektu wyłącznie w teście laboratoryjnym. Dane od użytkowników w PageSpeed Insights oraz w raporcie Podstawowe wskaźniki internetowe w Search Console obejmują dłuższy okres wizyt, więc na potwierdzenie poprawy trzeba poczekać.

Pomoc specjalisty przydaje się, gdy czcionki ładuje motyw lub kreator i nie widać ustawień pozwalających wyłączyć zbędne odmiany, gdy strona korzysta z kilku źródeł krojów naraz albo gdy po zmianach wynik CLS się nie poprawia, co zwykle oznacza inne źródło przesunięć: obrazy bez wymiarów, banery, treści wstawiane skryptem. Czcionki są wtedy częścią szerszej pracy, którą opisujemy we wpisie o poprawianiu Core Web Vitals i którą prowadzimy w ramach usługi SEO techniczne. Przy nowym serwisie najłatwiej zaplanować kroje na etapie tworzenia strony, a przy istniejącym punktem wyjścia bywa audyt SEO obejmujący szybkość ładowania. Sama szybkość nie przesądza o pozycjach, ale stabilny, szybko widoczny tekst jest po prostu wygodniejszy dla osób, które mają zostać Państwa klientami.

Jeśli chcą Państwo zamówić SEO techniczne, zachęcamy do kontaktu: tel. 222 500 844 lub mailowo: biuro@pozycjonowaniestron.pl