Sprawdzone metody dotyczące czcionek

Optymalizacja czcionek internetowych pod kątem Core Web Vitals

Katie Hempenius
Katie Hempenius
X
Barry Pollard

W tym dokumencie omawiamy sprawdzone metody optymalizacji czcionek pod kątem wydajności. Czcionki internetowe mogą wpływać na wydajność na różne sposoby:

Ten dokument składa się z 3 sekcji: wczytywanie czcionek, dostarczanie czcionek i renderowanie czcionek. Każda sekcja wyjaśnia, jak działa dany aspekt cyklu życia czcionki, i zawiera odpowiednie sprawdzone metody.

Wczytywanie czcionek

Czcionki są ważnymi zasobami. Bez nich użytkownik może nie być w stanie wyświetlić treści strony. Dlatego sprawdzone metody wczytywania czcionek koncentrują się na tym, aby czcionki były wczytywane jak najwcześniej. Szczególną uwagę należy zwrócić na czcionki wczytywane z witryn zewnętrznych, ponieważ pobieranie tych plików czcionek wymaga oddzielnych konfiguracji połączeń.

Jeśli nie masz pewności, czy czcionki na stronie są wczytywane na czas, sprawdź kartę Timing (Czas) w panelu Network (Sieć) w Narzędziach deweloperskich w Chrome.

Karta Czas w Narzędziach deweloperskich.

Informacje o @font-face

Zanim przejdziesz do sprawdzonych metod wczytywania czcionek, warto dowiedzieć się jak @font-face działa i jak wpływa to na wczytywanie czcionek.

Deklaracja @font-face jest niezbędnym elementem pracy z dowolną czcionką internetową. Deklaruje ona co najmniej nazwę używaną do odwoływania się do czcionki i wskazuje lokalizację odpowiedniego pliku czcionki.

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

Powszechnym błędnym przekonaniem jest to, że czcionka jest żądana po napotkaniu deklaracji @font-face. To nieprawda. Sama deklaracja @font-face nie powoduje pobrania czcionki. Czcionka jest pobierana tylko wtedy, gdy odwołuje się do niej styl używany na stronie. Na przykład:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

h1 {
  font-family: "Open Sans"
}

W tym przykładzie Open Sans zostanie pobrana tylko wtedy, gdy strona będzie zawierać element <h1>.

Dlatego podczas optymalizacji czcionek należy poświęcić arkuszom stylów tyle samo uwagi co plikom czcionek. Zmiana zawartości lub sposobu dostarczania arkuszy stylów może mieć znaczący wpływ na czas wczytywania czcionek. Podobnie usunięcie nieużywanego kodu CSS i podzielenie arkuszy stylów może zmniejszyć liczbę czcionek wczytywanych przez stronę.

Deklaracje czcionek w tekście

Większość witryn odniesie duże korzyści z umieszczenia deklaracji czcionek i innych krytycznych stylów w sekcji <head> dokumentu głównego, a nie z umieszczenia ich w zewnętrznym arkuszu stylów. Dzięki temu przeglądarka może szybciej wykryć deklaracje czcionek, ponieważ nie musi czekać na pobranie zewnętrznego arkusza stylów.

<head>
  <style>
    @font-face {
        font-family: "Open Sans";
        src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    }

    body {
        font-family: "Open Sans";
    }

    ...etc.

  </style>
</head>

Umieszczanie w tekście krytycznego kodu CSS może być bardziej zaawansowaną techniką, której nie wszystkie witryny mogą używać. Korzyści z wydajności są oczywiste, ale wymaga to dodatkowych procesów i narzędzi do kompilacji, aby zapewnić, że niezbędny kod CSS, a najlepiej tylko krytyczny kod CSS, jest prawidłowo umieszczony w tekście, a wszelki dodatkowy kod CSS jest dostarczany w sposób nieblokujący renderowania.

Wstępne łączenie z krytycznymi źródłami zewnętrznymi

Jeśli Twoja witryna wczytuje czcionki z witryny zewnętrznej, zdecydowanie zalecamy, aby użyć wskazówki dotyczącej zasobów preconnect , aby wcześniej nawiązać połączenie ze źródłem zewnętrznym. Wskazówki dotyczące zasobów powinny znajdować się w sekcji <head> dokumentu. Ta wskazówka dotycząca zasobów konfiguruje połączenie do wczytywania arkusza stylów czcionki.

<head>
  <link rel="preconnect" href="https://fonts.com">
</head>

Aby wstępnie połączyć połączenie używane do pobierania pliku czcionki, dodaj oddzielną wskazówkę dotyczącą zasobów preconnect, która używa atrybutu crossorigin. W przeciwieństwie do arkuszy stylów pliki czcionek muszą być wysyłane przez połączenie CORS.

<head>
  <link rel="preconnect" href="https://fonts.com">
  <link rel="preconnect" href="https://fonts.com" crossorigin>
</head>

Gdy używasz wskazówki dotyczącej zasobów preconnect, pamiętaj, że dostawca czcionek może udostępniać arkusze stylów i czcionki z różnych źródeł. Oto na przykład, jak używać wskazówki dotyczącej zasobów preconnect w przypadku Google Fonts.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>

Zachowaj ostrożność podczas używania preload do wczytywania czcionek

Chociaż preload jest bardzo skuteczny w wykrywaniu czcionek na wczesnym etapie procesu wczytywania strony, odbywa się to kosztem zabierania zasobów przeglądarki z wczytywania innych zasobów.

Umieszczanie w tekście deklaracji czcionek i dostosowywanie arkuszy stylów może być skuteczniejszym rozwiązaniem. Te zmiany są bliższe rozwiązaniu głównej przyczyny późnego wykrywania czcionek, a nie tylko obejściem problemu.

Ponadto należy ostrożnie używać preload jako strategii wczytywania czcionek, ponieważ pomija ona niektóre wbudowane w przeglądarkę strategie negocjacji treści. Na przykład preload ignoruje deklaracje unicode-range i, jeśli jest używany rozważnie, powinien być używany tylko do wczytywania jednego formatu czcionki.

Jednak w przypadku korzystania z zewnętrznych arkuszy stylów wstępne wczytywanie najważniejszych czcionek może być bardzo skuteczne, ponieważ w przeciwnym razie przeglądarka nie wykryje, czy czcionka jest potrzebna, aż do znacznie późniejszego etapu.

Dostarczanie czcionek

Szybsze dostarczanie czcionek przyspiesza renderowanie tekstu. Ponadto, jeśli czcionka zostanie dostarczona wystarczająco wcześnie, może to pomóc wyeliminować przesunięcia układu wynikające z zamiany czcionek.

Używanie czcionek hostowanych samodzielnie

Teoretycznie używanie czcionki hostowanej samodzielnie powinno zapewnić lepszą wydajność, ponieważ eliminuje konfigurację połączenia z zewnętrznym źródłem. W praktyce różnice w wydajności między tymi 2 opcjami są mniej wyraźne. Na przykład Web Almanac stwierdził, że witryny używające czcionek zewnętrznych renderują się szybciej niż czcionki używające czcionek własnych.

Jeśli rozważasz używanie czcionek hostowanych samodzielnie, sprawdź, czy Twoja witryna korzysta z sieci dostarczania treści (CDN) i protokołu HTTP/2. Bez tych technologii jest znacznie mniej prawdopodobne, że czcionki hostowane samodzielnie zapewnią lepszą wydajność.

Jeśli używasz czcionki hostowanej samodzielnie, zalecamy też zastosowanie niektórych optymalizacji plików czcionek, które dostawcy czcionek zewnętrznych zwykle zapewniają automatycznie. Na przykład podział czcionek i kompresja WOFF2. Wymagany nakład pracy na zastosowanie tych optymalizacji zależy nieco od języków obsługiwanych przez Twoją witrynę. Pamiętaj, że optymalizacja czcionek pod kątem języków CJK może być szczególnie trudna.

Używanie WOFF2

Spośród nowoczesnych czcionek WOFF2 jest najnowsza, ma najszerszą obsługę przeglądarek i oferuje najlepszą kompresję. Ponieważ używa Brotli, WOFF2 kompresuje o 30% lepiej niż WOFF, co oznacza mniejszą ilość danych do pobrania, a tym samym większą wydajność.

Biorąc pod uwagę obsługę przeglądarek, eksperci zalecają teraz używanie tylko WOFF2:

Uważamy, że nadszedł czas, aby ogłosić: używaj tylko WOFF2 i zapomnij o wszystkim innym.

Uprości to Twój kod CSS i przepływ pracy oraz zapobiegnie przypadkowemu podwójnemu lub nieprawidłowemu pobieraniu czcionek. WOFF2 jest teraz obsługiwany wszędzie. Dlatego, jeśli nie musisz obsługiwać naprawdę starych przeglądarek, używaj tylko WOFF2. Jeśli nie możesz tego zrobić, rozważ, aby w ogóle nie udostępniać czcionek internetowych w tych starszych przeglądarkach. Nie będzie to problem, jeśli masz solidną strategię awaryjną. Odwiedzający korzystający ze starszych przeglądarek zobaczą Twoje czcionki zastępcze.

Bram Stein, z Web Almanac 2022

Podział czcionek

Pliki czcionek zwykle zawierają dużą liczbę glifów dla wszystkich obsługiwanych znaków. Możesz jednak nie potrzebować wszystkich znaków na stronie i możesz zmniejszyć rozmiar plików czcionek, dzieląc czcionki.

Deskryptor unicode-range w deklaracji @font-face informuje przeglądarkę, do których znaków można używać czcionki.

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    unicode-range: U+0025-00FF;
}

Plik czcionki jest pobierany, jeśli strona zawiera co najmniej 1 znak pasujący do zakresu Unicode. unicode-range jest zwykle używany do udostępniania różnych plików czcionek w zależności od języka używanego w treści strony.

unicode-range jest często używany w połączeniu z techniką podziału. Podzielona czcionka zawiera mniejszą część glifów, które znajdowały się w oryginalnym pliku czcionki. Na przykład zamiast udostępniać wszystkie znaki wszystkim użytkownikom, witryna może generować oddzielne podzielone czcionki dla znaków łacińskich i cyrylicy.

Liczba glifów na czcionkę może się znacznie różnić:

  • Czcionki łacińskie mają zwykle od 100 do 1000 glifów na czcionkę.
  • CJK mogą mieć ponad 10 tys. znaków.

Usunięcie nieużywanych glifów może znacznie zmniejszyć rozmiar pliku czcionki.

Niektórzy dostawcy czcionek mogą automatycznie udostępniać różne wersje plików czcionek z różnymi podzbiorami. Na przykład Google Fonts robią to domyślnie:

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Podczas przechodzenia na samodzielne hostowanie można pominąć tę optymalizację, co może prowadzić do większych plików czcionek lokalnie.

Jeśli dostawca czcionek na to pozwala, możesz ręcznie podzielić czcionki za pomocą interfejsu API (Czcionki Google obsługują to, udostępniając parametr textparametr) lub ręcznie edytując pliki czcionek, a następnie hostując je samodzielnie. Narzędzia do generowania podzbiorów czcionek to m.in. subfont i glyphanger.

Zawsze sprawdzaj licencje czcionek, aby upewnić się, że zezwalają one na podział i samodzielne hostowanie.

Używanie mniejszej liczby czcionek internetowych

Najszybsza czcionka do dostarczenia to czcionka, która nie jest w ogóle żądana. Czcionki systemowe i czcionki zmienne to 2 sposoby na potencjalne zmniejszenie liczby czcionek internetowych używanych w Twojej witrynie.

Czcionka systemowa to domyślna czcionka używana przez interfejs użytkownika urządzenia. Czcionki systemowe zwykle różnią się w zależności od systemu operacyjnego i jego wersji. Ponieważ czcionka jest już zainstalowana, nie trzeba jej pobierać. Czcionki systemowe mogą szczególnie dobrze sprawdzać się w przypadku tekstu głównego.

Aby użyć czcionki systemowej w CSS, wpisz system-ui jako rodzinę czcionek:

font-family: system-ui

Ideą czcionek zmiennych jest to, że pojedyncza czcionka zmienna może zastąpić wiele plików czcionek. Czcionki zmienne działają przez zdefiniowanie "domyślnego" stylu czcionki i udostępnienie "osi" do manipulowania czcionką. Na przykład czcionka zmienna z osią Weight może służyć do implementowania liter, które wcześniej wymagałyby oddzielnych czcionek dla stylów light, regular, bold i extra bold.

Nie każdy skorzysta na przejściu na czcionki zmienne. Czcionki zmienne zawierają wiele stylów, dlatego zwykle mają większe rozmiary plików niż pojedyncze czcionki niezmienne, które zawierają tylko 1 styl. Największą poprawę dzięki użyciu czcionek zmiennych odnotują witryny, które używają (i muszą używać) różnych stylów i grubości czcionek.

Renderowanie czcionek

Gdy przeglądarka napotka czcionkę internetową, która nie została jeszcze wczytana, staje przed dylematem: czy ma wstrzymać renderowanie tekstu do czasu wczytania czcionki internetowej? Czy ma renderować tekst w czcionce zastępczej do czasu wczytania czcionki internetowej?

Różne przeglądarki różnie radzą sobie z tym scenariuszem. Domyślnie przeglądarki oparte na Chromium i Firefox blokują renderowanie tekstu na maksymalnie 3 sekundy, jeśli powiązana czcionka internetowa nie została wczytana. Safari blokuje renderowanie tekstu na czas nieokreślony.

To zachowanie można skonfigurować za pomocą atrybutu font-display. Ten wybór może mieć znaczące konsekwencje: font-display może wpływać na LCP, FCP i stabilność układu.

Wybór odpowiedniej strategii font-display

font-display informuje przeglądarkę, jak ma postępować z renderowaniem tekstu, gdy powiązana czcionka internetowa nie została wczytana. Jest ona zdefiniowana dla każdej czcionki.

@font-face {
  font-family: Roboto, Sans-Serif
  src: url(/fonts/roboto.woff) format('woff'),
  font-display: swap;
}

Istnieje 5 możliwych wartości font-display:

Wartość Okres blokowania Okres zamiany
Automatycznie Zależy od przeglądarki Zależy od przeglądarki
Blokowanie 2–3 sekundy Bez końca
Swap 0ms Bez końca
Kreacja zastępcza 100ms 3 sekundy
Opcjonalny 100ms Brak
  • Okres blokowania: okres blokowania rozpoczyna się, gdy przeglądarka zażąda czcionki internetowej. Jeśli w okresie blokowania czcionka internetowa nie jest dostępna, czcionka jest renderowana w niewidocznej czcionce zastępczej, a tekst jest niewidoczny dla użytkownika. Jeśli czcionka nie jest dostępna na końcu okresu blokowania, jest renderowana w czcionce zastępczej.
  • Okres zamiany: okres zamiany następuje po okresie blokowania. Jeśli czcionka internetowa stanie się dostępna w okresie zamiany, zostanie „zamieniona”.

Strategie font-display odzwierciedlają różne punkty widzenia na temat kompromisu między wydajnością a estetyką. Trudno jest więc polecić konkretne rozwiązanie, ponieważ zależy ono od indywidualnych preferencji, tego, jak ważna jest czcionka internetowa dla strony i marki, oraz tego, jak bardzo irytująca może być czcionka, która pojawi się z opóźnieniem.

W przypadku większości witryn są to 3 najbardziej odpowiednie strategie, w zależności od priorytetu:

  • Wydajność: użyj font-display: optional. Jest to najbardziej „wydajne” rozwiązanie: renderowanie tekstu jest opóźnione o nie więcej niż 100 ms i masz pewność, że nie wystąpią przesunięcia układu związane z zamianą czcionek. Wadą jest to, że czcionka internetowa nie będzie używana, jeśli pojawi się z opóźnieniem.

  • Szybkie wyświetlanie tekstu i używanie czcionki internetowej: użyj font-display: swap ale upewnij się, że czcionka jest dostarczana wystarczająco wcześnie, aby nie powodowała przesunięcia układu. Wadą tej opcji jest irytujące przesunięcie, gdy czcionka pojawi się z opóźnieniem.

  • Tekst jest wyświetlany w czcionce internetowej: użyj font-display: block, ale upewnij się że czcionka jest dostarczana wystarczająco wcześnie, aby zminimalizować opóźnienie tekstu. Początkowe wyświetlanie tekstu jest opóźnione. Pomimo tego opóźnienia może to nadal powodować przesunięcie układu, ponieważ tekst jest rysowany jako niewidoczny, a miejsce czcionki zastępczej jest używane do rezerwowania miejsca. Po wczytaniu czcionki internetowej może ona wymagać innego miejsca, co powoduje przesunięcie. Może to być mniej irytujące przesunięcie niż font-display: swap, ponieważ sam tekst nie będzie się przesuwać.

Pamiętaj też, że te 2 rozwiązania można łączyć. Na przykład użyj font-display: swap w przypadku elementów marki i innych elementów strony, które wyróżniają się wizualnie. Użyj font-display: optional w przypadku czcionek używanych w tekście głównym.

Czcionki ikon

Strategie font-display, które dobrze sprawdzają się w przypadku konwencjonalnych czcionek internetowych, nie działają tak dobrze w przypadku czcionek ikon. Czcionka zastępcza dla czcionki ikon zwykle wygląda zupełnie inaczej niż czcionka ikon, a jej znaki mogą mieć zupełnie inne znaczenie. W rezultacie czcionki ikon częściej powodują znaczne przesunięcia układu.

Ponadto używanie czcionki zastępczej może być niepraktyczne. Jeśli to możliwe, zastąp czcionki ikon plikami SVG, co jest też lepsze pod względem dostępności. Nowsze wersje popularnych czcionek ikon zwykle obsługują SVG. Więcej informacji o przechodzeniu na SVG znajdziesz na stronie SVG Sprites w Font Awesome i w naszym przewodniku po ikonach Material.

Zmniejszenie przesunięcia między czcionką zastępczą a czcionką internetową

Aby zmniejszyć wpływ na CLS, możesz użyć size-adjust atrybutów.

Podsumowanie

Czcionki internetowe nadal stanowią wąskie gardło wydajności, ale mamy coraz więcej opcji, które pozwalają nam je optymalizować, aby jak najbardziej zmniejszyć to wąskie gardło.