Sprawdzone metody dotyczące czcionek

Zoptymalizuj czcionki internetowe pod kątem podstawowych wskaźników internetowych.

Katie Hempenius
Katie Hempenius
X
Barry Pollard

W tym artykule omawiamy sprawdzone metody dotyczące wydajności czcionek. Czcionki internetowe wpływają na skuteczność na wiele sposobów:

Artykuł jest podzielony na 3 sekcje: wczytywanie czcionek, wyświetlanie czcionek i renderowanie czcionek. W każdej sekcji wyjaśniamy, jak działa dany aspekt cyklu życia czcionki, i podajemy odpowiednie sprawdzone metody.

Wczytuję czcionki

Czcionki są zwykle ważnymi zasobami – bez nich użytkownik może nie mieć dostępu do treści strony. Dlatego sprawdzone metody ładowania czcionek skupiają się na tym, aby były one wczytywane jak najszybciej. Szczególną ostrożność należy zachować w przypadku czcionek ładowanych z witryn innych firm, ponieważ ich pobieranie wymaga osobnej konfiguracji połączenia.

Jeśli nie masz pewności, czy prośby o dodanie czcionek na Twojej stronie są wysyłane w odpowiednim czasie, 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 użytkowniku @font-face

Zanim omówimy sprawdzone metody ładowania czcionek, dowiedz się, jak działa @font-face i jak wpływa to na wczytywanie czcionek.

Deklaracja @font-face jest kluczowym elementem pracy z dowolną czcionkami internetowymi. Określa ona przynajmniej nazwę, która będzie używana do odwoływania się 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 błędem jest przekonanie, że żądanie czcionki jest wysyłane po wykryciu deklaracji @font-face. To nieprawda. Sama deklaracja @font-face nie uruchamia pobierania czcionki. 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"
}

Inaczej mówiąc, parametr Open Sans zostanie pobrany tylko wtedy, gdy strona zawiera element <h1>.

Dlatego podczas optymalizacji czcionek należy pamiętać o równie ważnym stopniu arkuszy stylów, jak o samych plikach czcionek. Zmiana zawartości lub sposobu przesyłania arkuszy stylów może mieć znaczny wpływ na to, kiedy czcionki mają być dostarczane. Podobnie usunięcie nieużywanego kodu CSS i arkusze stylów podziału mogą zmniejszyć liczbę czcionek wczytywanych przez stronę.

Wbudowane deklaracje dotyczące czcionek

W przypadku większości witryn wbudowanie deklaracji czcionek i innych istotnych stylów do elementu <head> głównego dokumentu będzie korzystne dla większości witryn zamiast umieszczania ich w zewnętrznym arkuszu stylów. Dzięki temu przeglądarka może wykryć deklaracje czcionek wcześniej, bo 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 krytycznego kodu CSS może być bardziej zaawansowaną techniką, która nie jest w stanie zastosować się do wszystkich witryn. Korzyści w zakresie wydajności są oczywiste, ale wymagają dodatkowych procesów i narzędzi, które zapewnią prawidłowe wbudowanie kodu CSS – a najlepiej tylko najważniejszego elementu CSS – oraz dostarczenie dodatkowych arkuszy CSS w sposób blokujący renderowanie.

Wcześniejsze łączenie się z najważniejszymi źródłami zewnętrznymi

Jeśli Twoja witryna wczytuje czcionki z witryny innej firmy, zdecydowanie zalecamy skorzystanie ze wskazówki dotyczącej zasobów preconnect, aby nawiązać wczesne połączenia z tym źródłem. Wskazówki dotyczące zasobów należy umieszczać w sekcji <head> dokumentu. Poniższa 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 wcześniej połączyć się, które jest używane do pobierania pliku czcionek, dodaj oddzielną wskazówkę dotyczącą zasobu preconnect, która korzysta z atrybutu crossorigin. W przeciwieństwie do arkuszy stylów pliki czcionek muszą być przesył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 zasobów preconnect, pamiętaj, że dostawca czcionek może udostępniać arkusze stylów i czcionki z innych źródeł. Tak na przykład zostanie użyta wskazówka zasobu preconnect w 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 za pomocą preload

Mimo że preload pozwala bardzo skutecznie zadbać o wykrywalność czcionek na wczesnym etapie wczytywania strony, wiąże się to z kosztem zabierania zasobów przeglądarki z funkcji wczytywania innych zasobów.

Skuteczniejsze mogą być wbudowane deklaracje czcionek i dostosowanie arkuszy stylów. Te zmiany są bliższe wyeliminowaniu głównej przyczyny późno odkrytych czcionek, a nie tylko obejścia tego problemu.

Ostrożnie korzystaj też z używania preload jako strategii wczytywania czcionek, ponieważ omija ona niektóre wbudowane strategie negocjowania treści w przeglądarce. Na przykład tag preload ignoruje deklaracje unicode-range, a jeśli jest używany rozważnie, powinien być używany tylko do wczytywania jednego formatu czcionki.

Przy korzystaniu z zewnętrznych arkuszy stylów wstępne wczytywanie najważniejszych czcionek może być jednak bardzo skuteczne, ponieważ przeglądarka w innym przypadku nie odkryje, czy dana czcionka jest potrzebna, aż do znacznie później.

Dostawa czcionek

Szybsze dostarczanie czcionek przyspiesza renderowanie tekstu. Jeśli czcionka zostanie dostarczona na tyle wcześnie, możesz uniknąć przesunięć układu spowodowanych zamianą czcionek.

Korzystanie z własnych czcionek

Na papierze używanie własnej czcionki powinno zapewniać wyższą wydajność, ponieważ eliminuje konfigurację połączenia z innymi firmami. Jednak w praktyce różnice w wydajności między tymi 2 opcjami są mniej oczywiste. Na przykład według narzędzia Web Almanac wykryliśmy, że witryny korzystające z czcionek innych firm renderowały się szybciej niż czcionki własne.

Jeśli chcesz korzystać z własnych czcionek, upewnij się, że Twoja witryna korzysta z sieci dostarczania treści (CDN) i HTTP/2. Bez tych technologii własne czcionki będą znacznie mniej wydajne. Aby uzyskać więcej informacji, zapoznaj się z artykułem Sieci dostarczania treści.

Jeśli używasz własnej czcionki, zalecamy zastosowanie niektórych optymalizacji plików czcionek, które zwykle zapewnia inni dostawcy czcionek, takich jak podstawianie czcionek czy kompresja WOFF2. Nakład pracy wymagany do wdrożenia tych optymalizacji będzie zależał od niektórych języków, jakie obsługuje Twoja witryna. Szczególnie pamiętaj, że optymalizacja czcionek dla języków CJK może być szczególnie trudna.

Użyj WOFF2

Spośród nowoczesnych czcionek WOFF2 to najnowsza wersja, oferuje najszerszą obsługę przeglądarek i najlepszą kompresję. Ponieważ korzysta z Brotli, WOFF2 kompresuje o 30% lepiej niż WOFF, co przekłada się na mniejszą ilość danych do pobrania i w konsekwencji szybsze działanie.

Biorąc pod uwagę obsługę przeglądarek, eksperci zalecają korzystanie tylko z WOFF2:

Uważamy jednak, że nadszedł czas, aby ogłosić: używaj tylko WOFF2 i zapomnij o całej reszcie.

Znacznie uprości to CSS i przepływ pracy, a także zapobiegnie przypadkowemu podwójnemu lub niewłaściwemu pobraniu czcionki. WOFF2 jest teraz dostępny wszędzie. Jeśli więc nie potrzebujesz obsługi bardzo starych przeglądarek, użyj WOFF2. Jeśli nie możesz tego robić, rozważ zaprzestanie wyświetlania czcionek internetowych w starszych przeglądarkach. Nie stanowi to problemu, jeśli masz wdrożoną solidną strategię kreacji zastępczych. Użytkownicy starszych przeglądarek będą widzieć Twoje czcionki zastępcze.

Bram Stein, z 2022 Web Almanac

Czcionki podzbioru

Pliki czcionek zwykle zawierają dużą liczbę glifów dla wszystkich obsługiwanych znaków. Nie wszystkie znaki na Twojej stronie są jednak potrzebne, a rozmiar plików z czcionkami można zmniejszyć, wprowadzając podtabele czcionek.

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

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

Jeśli strona zawiera co najmniej 1 znak pasujący do zakresu kodowania Unicode, zostanie pobrany plik czcionki. unicode-range służy zwykle do wyświetlania różnych plików czcionek w zależności od języka używanego na stronie.

Metoda unicode-range jest często stosowana w połączeniu z techniką tworzenia podrzędnych elementów. Podzbiór czcionki obejmuje mniejszą część glifów, które znajdowały się w pierwotnym pliku czcionek. Na przykład zamiast wyświetlać wszystkie znaki wszystkim użytkownikom, witryna może wygenerować osobne podzbiory czcionek dla alfabetu łacińskiego i cyrylicy. Liczba glifów na czcionkę jest bardzo zróżnicowana: czcionki łacińskie mają zwykle od 100 do 1000 glifów,a CJK – 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;
}

Jeśli przechodzisz na hosting własny, jest to optymalizacja, którą łatwo przeoczyć i która może prowadzić do lokalnych plików czcionek.

Możesz też ręcznie tworzyć podzbiory czcionek, jeśli dostawca czcionki na to zezwala, używając interfejsu API (Google Fonts obsługuje tę funkcję, podając parametr text) lub ręcznie edytując pliki czcionek, a następnie hostując je na własnym serwerze. Do generowania podzbiorów czcionek należą m.in. subfont i glyphanger. Sprawdź jednak licencję na korzystanie z czcionek, które pozwalają na dodawanie ustawień podrzędnych i ich hosting we własnym zakresie.

Użyj mniejszej liczby czcionek internetowych

Najszybszym sposobem dostarczenia jest czcionka, która nie jest wymagana. Czcionki systemowe i zmienne to 2 sposoby na potencjalne zmniejszenie liczby czcionek internetowych używanych w witrynie.

Czcionka systemowa to domyślna czcionka interfejsu użytkownika urządzenia użytkownika. Czcionki systemowe 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 dobrze w przypadku tekstu głównego.

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

font-family: system-ui

Czcionki zmiennych mają koncepcję, która polega na tym, że pojedyncza czcionka może zastąpić wiele plików czcionek. Czcionki zmienne działają, definiując „domyślny” styl czcionki i podając „osie” do manipulowania czcionkami. Możesz na przykład użyć zmiennej czcionki z osią Weight, aby wdrożyć litery, które wcześniej wymagały osobnych czcionek dla jasnego, zwykłego, pogrubionego i dodatkowego pogrubienia.

Przejście na czcionki o zmiennych czcionkach przyniesie korzyści nie wszystkim. Czcionki zmiennych zawierają wiele stylów, więc mają zazwyczaj większe rozmiary plików niż poszczególne czcionki niezmienne, które zawierają tylko 1 styl. Największą poprawę po zastosowaniu czcionek o zmiennych odczuwają witryny, które używają (i muszą używać) różnych stylów i grubości czcionek.

Renderowanie czcionek

Gdy przeglądarka natknie się na czcionkę, która nie została jeszcze wczytana, musi zmierzyć się z dylematem: czy powinna wstrzymać renderowanie tekstu, dopóki nie pojawi się czcionka? A może tekst ma być renderowany przy użyciu czcionki zastępczej, dopóki nie pojawi się czcionka internetowa?

Różne przeglądarki radzą sobie z tą sytuacją w różny sposób. Domyślnie przeglądarki oparte na Chromium i Firefoksie blokują renderowanie tekstu na maksymalnie 3 sekundy, jeśli powiązana czcionka nie zostanie wczytana. Safari zablokuje renderowanie tekstu na stałe.

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

Wybierz odpowiednią strategię font-display

font-display informuje przeglądarkę, jak ma kontynuować renderowanie tekstu, gdy powiązana czcionka internetowa nie została wczytana. Jest zdefiniowany dla każdej 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ć 5 wartości:

Wartość Okres zablokowania Okres zmiany
Automatycznie Zależy od przeglądarki Zależy od przeglądarki
Blok 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 zażąda czcionki internetowej. Jeśli w okresie blokowania czcionka internetowa jest niedostępna, czcionka jest renderowana za pomocą niewidocznej czcionki zastępczej, więc tekst nie będzie widoczny dla użytkownika. Jeśli czcionka będzie niedostępna pod koniec okresu blokowania, zostanie wyrenderowana za pomocą czcionki zastępczej.
  • Okres zmiany: okres wymiany następuje po okresie blokady. Jeśli czcionka internetowa stanie się dostępna w okresie zmiany, zostanie „zamienna”.

Strategie font-display odzwierciedlają różne poglądy na temat równowagi między skutecznością a estetyką. Trudno jest podać zalecane podejście, ponieważ zależy to od indywidualnych preferencji, tego, jak ważna jest czcionka internetowa dla strony i marki oraz jak rażąca może być drażnienie spóźnionej czcionki, która może zostać zastąpiona.

W przypadku większości witryn najlepiej sprawdzają się te 3 strategie:

  • Jeśli wydajność jest priorytetem: użyj font-display: optional. To „najbardziej efektywne” podejście: renderowanie tekstu jest opóźnione o maksymalnie 100 ms i gwarantuje, że nie wystąpią przesunięcia układu związane ze zmianą czcionki. Wadą tego rozwiązania jest jednak to, że czcionka internetowa nie zostanie użyta, jeśli dotrze późno.

  • Jeśli szybkie wyświetlenie tekstu jest najwyższym priorytetem, ale nadal chcesz mieć pewność, że używana jest czcionka internetowa: użyj atrybutu font-display: swap, ale pamiętaj o dostarczeniu czcionki na tyle wcześnie, aby nie spowodowało to przesunięcia układu. Wadą tej opcji jest kłopotliwe przesunięcie, gdy czcionka jest zbyt późna.

  • Jeśli priorytetem jest zapewnienie, że tekst jest wyświetlany przy użyciu czcionki internetowej: użyj font-display: block, ale pamiętaj o dostarczeniu czcionki na tyle wcześnie, aby zminimalizować opóźnienie tekstu. Wadą tej metody jest to, że początkowy tekst wyświetlany jest z opóźnieniem. Pamiętaj, że pomimo usunięcia filmu, w dalszym ciągu może dojść do przesunięcia układu, bo tekst jest niewidoczny, więc do zarezerwowania miejsca służy zastępcza przestrzeń czcionki. Po załadowaniu czcionki internetowej może to wymagać różnicy miejsca, a co za tym idzie – przesunięcia. Może to jednak być mniej rażące przesunięcie niż w przypadku elementu font-display: swap, ponieważ sam tekst nie będzie się zmieniać.

Pamiętaj też, że możesz łączyć te 2 metody. Na przykład font-display: swap może służyć do promowania marki i innych charakterystycznych wizualnie elementów strony, a font-display: optional do czcionek używanych w tekście głównym.

Zmniejsz odstępy między czcionką zastępczą a czcionką internetową

Aby zmniejszyć wpływ CLS, możesz używać nowych atrybutów size-adjust. Więcej informacji znajdziesz w artykule o usłudze porównywania cen size-adjust. Jest to zupełnie nowy dodatek do naszego zestawu narzędzi, a więc bardziej zaawansowany i obsługiwany obecnie. Jednak z pewnością wypróbujesz narzędzia i zobaczysz ulepszenia w przyszłości.

Podsumowanie

Czcionki internetowe w dalszym ciągu stanowią wąskie gardło wydajności, ale mamy stale rosnącą gamę opcji, które pozwalają nam je optymalizować w celu jak największego ograniczenia tego wąskiego gardła.