Sprawdzone metody dotyczące czcionek

Zoptymalizuj czcionki internetowe pod kątem Core Web Vitals.

Katie Hempenius
Katie Hempenius
X
Barry Pollard

W tym artykule opisujemy sprawdzone metody zwiększania skuteczności czcionek. Czcionki internetowe wpływają na wydajność na wiele sposobów:

Ten artykuł jest podzielony na 3 części: wczytywanie czcionek, dostarczanie czcionek oraz renderowanie czcionek. Każda sekcja wyjaśnia, jak działa dany aspekt cyklu życia czcionek, i przedstawia odpowiednie sprawdzone metody.

Wczytuję czcionkę

Czcionki są zwykle ważnymi zasobami, ponieważ bez nich użytkownik może nie być w stanie wyświetlić zawartości strony. Z tego względu sprawdzone metody wczytywania czcionek zwykle skupiają się na jak najszybszym ładowaniu czcionek. Zachowaj szczególną ostrożność w przypadku czcionek wczytywanych z witryn innych firm, ponieważ ich pobranie wymaga oddzielnej konfiguracji połączenia.

Jeśli nie masz pewności, czy czcionki na Twojej stronie są wysyłane na czas, więcej informacji znajdziesz na karcie Czas w panelu Sieć w Narzędziach deweloperskich w Chrome.

Zrzut ekranu przedstawiający kartę Czas w Narzędziach deweloperskich

Informacje o @font-face

Zanim zagłębimy się w sprawdzone metody dotyczące wczytywania czcionek, dowiedz się, jak działa @font-face i jak wpływa to na wczytywanie czcionek.

Deklaracja @font-face jest niezbędnym elementem pracy z każdą czcionką internetową. Zawiera co najmniej nazwę, która będzie używana w odniesieniu do czcionki, oraz wskazuje lokalizację odpowiedniego pliku czcionek.

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

Częstym nieporozumieniem jest przekonanie, że po wystąpieniu deklaracji @font-face żądana jest czcionka. To nieprawda. Sama deklaracja @font-face nie powoduje pobierania czcionek. Czcionka jest pobierana tylko wtedy, gdy odwołuje się do niej styl użyty na stronie. Na przykład w ten sposób:

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

h1 {
  font-family: "Open Sans"
}

Innymi słowy w powyższym przykładzie plik Open Sans zostanie pobrany tylko wtedy, gdy strona zawiera element <h1>.

Dlatego, gdy myślisz o optymalizacji czcionek, warto zwracać uwagę na arkusze stylów tak samo jak same pliki czcionek. Zmiany zawartości lub sposobu wyświetlania arkuszy stylów mogą mieć znaczny wpływ na dostępność czcionek. Podobnie usunięcie nieużywanego kodu CSS i podzielenie arkuszy stylów może zmniejszyć liczbę wczytywanych przez stronę czcionek.

Wbudowane deklaracje czcionek

Większość witryn skorzysta na wbudowaniu deklaracji czcionek i innych istotnych stylach w elemencie <head> głównego dokumentu, zamiast umieszczać je 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>

Wbudowanie najważniejszych elementów CSS może być bardziej zaawansowaną metodą, która nie jest dostępna we wszystkich witrynach. Korzyści z wydajności są oczywiste, ale wymagają dodatkowych procesów i narzędzi do tworzenia, aby zagwarantować, że kod CSS – a najlepiej tylko kluczowy kod CSS – jest prawidłowo osadzony, a dodatkowy kod CSS jest dostarczany w sposób uniemożliwiający renderowanie.

Wstępne łączenie z kluczowymi źródłami innych firm

Jeśli Twoja witryna wczytuje czcionki z innej witryny, zdecydowanie zalecamy skorzystanie ze wskazówek dotyczących zasobów preconnect, aby wcześniej nawiązać połączenia ze źródłem zewnętrznym. Wskazówki dotyczące zasobów należy umieścić w kodzie <head> dokumentu. Wskazówka dotycząca zasobu poniżej konfiguruje połączenie umożliwiające wczytywanie 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 osobną wskazówkę na temat zasobu preconnect, która korzysta z 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 korzystasz ze wskazówki dotyczącej zasobu preconnect, pamiętaj, że dostawca czcionek może udostępniać arkusze stylów i czcionki z różnych źródeł. Tak na przykład wskazówka dotycząca zasobu preconnect będzie używana 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 wczytywania czcionek w aplikacji preload

Chociaż technologia preload bardzo skutecznie pozwala na wykrywanie czcionek na wczesnym etapie wczytywania strony, oznacza to, że uniemożliwia ładowanie innych zasobów przez zasoby przeglądarki.

Skuteczniejszym rozwiązaniem mogą być wbudowane deklaracje dotyczące czcionek i dostosowywanie arkuszy stylów. Te dostosowania nie tylko zapewniają obejście, lecz pomagają wyeliminować główną przyczynę późno odkrytych czcionek.

Z zastosowaniem preload jako strategii ładowania czcionek należy też korzystać z rozwagą, ponieważ omija ono niektóre wbudowane strategie negocjowania treści w przeglądarce. Na przykład dyrektywa preload ignoruje deklaracje unicode-range. Gdy używasz jej z rozwagą, używaj tylko jednego formatu czcionki.

Jednak w przypadku korzystania z zewnętrznych arkuszy stylów wstępne ładowanie najważniejszych czcionek może być bardzo skuteczne, ponieważ przeglądarka dopiero później zorientuje się, czy dana czcionka jest potrzebna.

Dostawa czcionek

Szybsze dostarczanie czcionek umożliwia szybsze renderowanie tekstu. Dodatkowo jeśli czcionka zostanie dostarczona dostatecznie wcześnie, pozwoli to wyeliminować przesunięcia układu wynikające z zamieniania czcionek.

Korzystanie z czcionek hostowanych samodzielnie

Na papierze korzystanie z własnej czcionki powinno działać lepiej, ponieważ eliminuje konieczność konfigurowania połączenia z usługami innych firm. W praktyce różnice w wydajności między tymi 2 opcjami są jednak mniej oczywiste: na przykład z raportu Web Almanac wynika, że witryny korzystające z czcionek innych firm renderują się szybciej niż tego typu czcionki.

Jeśli rozważasz używanie własnych czcionek, sprawdź, czy Twoja witryna korzysta z sieci dystrybucji treści (CDN) i HTTP/2. Bez tych technologii jest znacznie mniej prawdopodobne, że czcionki hostowane we własnym zakresie będą działać lepiej. Więcej informacji znajdziesz w artykule Sieci dostarczania treści.

Jeśli używasz czcionki hostowanej samodzielnie, zalecamy zastosowanie niektórych optymalizacji plików czcionek, zwykle dostarczanych automatycznie przez zewnętrznych dostawców czcionek, takich jak podustawienie czcionek i kompresja WOFF2. Nakład pracy wymagany w celu wprowadzenia tych optymalizacji zależy w pewnym stopniu od języków obsługiwanych przez Twoją witrynę. Pamiętaj w szczególności, że optymalizacja czcionek dla języków CJK może być wyzwaniem.

Używaj WOFF2

Spośród nowoczesnych czcionek WOFF2 jest najnowszym czcionką, obsługuje najszersze możliwości przeglądarki i zapewnia najlepszą kompresję. Wykorzystuje technologię Brotli, więc WOFF2 kompresuje się o 30% lepiej niż WOFF, co przekłada się na mniej danych do pobrania i w efekcie szybsze działanie.

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

Naszym zdaniem to moment, by ogłosić: używaj tylko WOFF2 i zapomnij o wszystkim.

Znacznie uprości to CSS i przepływ pracy. Zapobiegnie także przypadkowemu podwójnemu lub nieprawidłowemu pobraniu czcionek. Protokół WOFF2 jest teraz obsługiwany wszędzie. Jeśli nie potrzebujesz obsługi bardzo starych przeglądarek, używaj WOFF2. Jeśli to nie pomoże, rozważ rezygnację z udostępniania czcionek internetowych w starszych przeglądarkach. Nie stanowi to problemu, jeśli masz solidną strategię zastępczą. Użytkownicy starszych przeglądarek zobaczą po prostu czcionki zastępcze.

Bram Stein z 2022 Web Almanac

Czcionki podzbiorów

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

Deskryptor unicode-range w deklaracji @font-face informuje przeglądarkę, o których znakach 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 zostanie pobrany, jeśli strona zawiera co najmniej 1 znak pasujący do zakresu Unicode. unicode-range jest zwykle używany do wyświetlania różnych plików czcionek w zależności od języka treści strony.

Pole unicode-range jest często używane w połączeniu z metodą tworzenia podzbiorów. Czcionka podzbioru zawiera mniejszą część glifów, które były zawarte w oryginalnym pliku czcionek. Na przykład zamiast udostępniać wszystkim użytkownikom wszystkie znaki, witryna może wygenerować osobne czcionki podzbioru dla znaków łacińskich i cyrylicy. Liczba glifów na czcionkę jest bardzo różna: czcionki łacińskie mają zwykle od 100 do 1000 glifów. CJKCzcionki mogą mieć ponad 10 000 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;
}

Przy przejściu na autohosting warto zastosować optymalizację, którą łatwo przeoczyć i doprowadzić do lokalnego utworzenia większych plików czcionek.

Możesz też ręcznie dzielić czcionki na podgrupy, jeśli Twój dostawca czcionek na to zezwala. Możesz to zrobić za pomocą interfejsu API (Google Fonts obsługuje to rozwiązanie, podając parametr text) lub ręcznie edytując pliki czcionek, a następnie samodzielnie hostując je. Do generowania podzbiorów czcionek należą m.in. subfont i glyphanger. Koniecznie jednak sprawdź licencję dotyczącą czcionek, których używasz na potrzeby ustawienia podrzędnego i samohostowania.

Używaj mniej czcionek internetowych

Najszybsza czcionka to czcionka, która nie jest wymagana. Czcionki systemowe i zmienne 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 urządzenia użytkownika. Czcionki systemu zwykle różnią się w zależności od systemu operacyjnego i wersji. Czcionka jest już zainstalowana, więc nie trzeba jej pobierać. Czcionki systemowe sprawdzają się szczególnie w przypadku tekstu głównego.

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

font-family: system-ui

Dzięki zmiennym czcionkom jedna czcionka zmienna może być używana jako zamiennik wielu plików czcionek. Czcionki zmiennych działają, definiując „domyślny” stylu czcionki i udostępniania „osi” do manipulowania czcionką. Na przykład czcionki zmiennej z osią Weight można wykorzystać do utworzenia liter, które wcześniej wymagałyby osobnych czcionek dla jasnych, zwykłych, pogrubionych i dodatkowych pogrubień.

Nie wszyscy będą skorzystali na przejściu na czcionki zmienne. Czcionki zmiennych obejmują wiele stylów, więc zwykle mają większy rozmiar niż pojedyncze czcionki niezmienne, które zawierają tylko jeden styl. Największą poprawę polepszają używanie czcionek zmiennych w witrynach, które korzystają (i muszą używać) różnych stylów i wag czcionek.

Renderowanie czcionek

Gdy użytkownik ma do czynienia z czcionką internetową, która nie została jeszcze załadowana, przeglądarka ma dylemat: czy powinna wstrzymywać renderowanie tekstu, dopóki nie pojawi się taka czcionka? Czy też powinien renderować tekst przy użyciu czcionki zastępczej, dopóki nie pojawi się czcionka internetowa?

W różnych przeglądarkach ten scenariusz wygląda inaczej. Domyślnie przeglądarki oparte na Chromium i Firefoksie blokują renderowanie tekstu na maksymalnie 3 sekundy, jeśli powiązana czcionka internetowa nie zostanie wczytana. Safari będzie na stałe blokować renderowanie tekstu.

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

Wybierz odpowiednią strategię dotyczącą font-display

font-display informuje przeglądarkę, jak ma kontynuować renderowanie tekstu, jeśli powiązana czcionka internetowa nie zostanie wczytana. Jest definiowany według kroju czcionki.

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

Parametr font-display może mieć pięć wartości:

Wartość Okres blokady Zamień okres
Automatycznie Zależy od przeglądarki Zależy od przeglądarki
Zablokuj 2–3 sekundy Bez końca
Swap 0ms Bez końca
Wycofanie 100 ms 3 sekundy
Opcjonalnie 100 ms Brak
  • Okres blokowania: okres blokowania rozpoczyna się, gdy przeglądarka poprosi o dostęp do czcionki internetowej. Jeśli w okresie blokowania czcionka internetowa będzie niedostępna, czcionka będzie renderowana jako niewidoczna czcionka zastępcza, przez co tekst nie będzie widoczny dla użytkownika. Jeśli czcionka nie będzie dostępna pod koniec okresu blokady, zostanie wyrenderowana jako czcionka zastępcza.
  • Okres wymiany: okres wymiany przypada po okresie blokady. Jeśli czcionka internetowa stanie się dostępna w okresie wymiany, zostanie ona „zastąpiona”. cal

Strategie font-display odzwierciedlają różne punkty widzenia na temat kompromisu między skutecznością a estetyką. Trudno jest więc podać zalecane podejście, ponieważ zależy ono od indywidualnych preferencji, tego, jak ważna jest czcionka internetowa dla danej strony i marki oraz jak czcionka, z którą współpracujesz, może być różnie odbierana.

W przypadku większości witryn najlepiej sprawdzają się następujące trzy strategie:

  • Jeśli skuteczność jest priorytetem: użyj wartości font-display: optional. Ten wymiar jest najbardziej „skuteczny” podejście: renderowanie tekstu jest opóźnione o nie więcej niż 100 ms i można mieć pewność, że nie wystąpią zmiany układu związane z zamianą czcionek. Wadą jest jednak to, że czcionka internetowa nie zostanie użyta, jeśli dotrze do publikacji za późno.

  • Jeśli szybkie wyświetlanie tekstu jest priorytetem, ale mimo to chcesz mieć pewność, że jest używana czcionka internetowa: użyj font-display: swap, ale pamiętaj, by dostarczyć czcionkę na tyle wcześnie, by nie powodować przesunięcia układu. Wadą tej opcji jest przesunięcie różnicy w sytuacji, gdy czcionka pojawi się z opóźnieniem.

  • Jeśli zadbanie o to, aby tekst był wyświetlany przy użyciu czcionki internetowej: użyj atrybutu font-display: block, ale pamiętaj, by dostarczyć czcionkę na tyle wcześnie, aby zminimalizować opóźnienie tekstu. Wadą tego rozwiązania jest opóźnienie wyświetlania tekstu na początku. Pamiętaj, że pomimo tego przesunięcia może to spowodować przesunięcie układu, ponieważ w rzeczywistości tekst stanie się niewidoczny, a zastępcza czcionka zostanie wykorzystana do zarezerwowania przestrzeni reklamowej. Po załadowaniu czcionki internetowej może to wymagać różnicy i konieczności przesunięcia. Może to być jednak mniej istotne przesunięcie niż w przypadku parametru font-display: swap, ponieważ sam tekst nie będzie widać.

.

Pamiętaj też, że te 2 metody można ze sobą łączyć: na przykład możesz użyć atrybutu font-display: swap do promowania marki i innych wyróżniających się elementów strony. użyj font-display: optional w przypadku czcionek używanych w tekście.

Zmniejsz przesunięcie między czcionką zastępczą a czcionką internetową.

Aby zmniejszyć wpływ na CLS, możesz użyć nowych atrybutów size-adjust. Więcej informacji znajdziesz w artykule o usłudze porównywania cen size-adjust. Jest to świetna nowość do naszego zestawu narzędzi, więc jest obecnie bardziej zaawansowana i ręcznie. Zdecydowanie jednak warto eksperymentować z ulepszeniami narzędzi w przyszłości.

Podsumowanie

Czcionki internetowe nadal są wąskim gardłem wydajności, ale mamy stale rosnący wachlarz opcji, które pozwalają nam je optymalizować i eliminować te wąskie gardła.