W poprzednich modułach pokazaliśmy, jak optymalizować zasoby HTML, CSS, JavaScript i multimedialne. W tym module poznasz kilka metod optymalizacji czcionek internetowych.
Czcionki internetowe mogą wpływać na wydajność strony zarówno w momencie wczytywania, jak i renderowania.
Pobieranie dużych plików czcionek może zająć trochę czasu i negatywnie wpłynąć na pierwsze wyrenderowanie treści (FCP), a nieprawidłowa wartość font-display może powodować niepożądane przesunięcia układu, które wpływają na zbiorcze przesunięcie układu (CLS) strony.
Zanim zaczniemy omawiać optymalizację czcionek internetowych, warto dowiedzieć się, jak są one wykrywane przez przeglądarkę. Dzięki temu zrozumiesz, jak CSS zapobiega pobieraniu niepotrzebnych czcionek internetowych w określonych sytuacjach.
Odkrywanie
Czcionki internetowe strony są zdefiniowane w arkuszu stylów za pomocą deklaracji @font-face:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
Powyższy fragment kodu definiuje element font-family o nazwie "Open Sans" i informuje przeglądarkę, gdzie znaleźć odpowiedni zasób czcionki internetowej. Aby oszczędzać przepustowość, przeglądarka nie pobiera czcionki internetowej, dopóki nie stwierdzi, że jest ona potrzebna w układzie bieżącej strony.
h1 {
font-family: "Open Sans";
}
W powyższym fragmencie kodu CSS przeglądarka pobiera "Open Sans" plik czcionki
podczas analizowania elementu <h1> w kodzie HTML strony.
preload
Jeśli deklaracje @font-face są zdefiniowane w zewnętrznym arkuszu stylów, przeglądarka może rozpocząć ich pobieranie dopiero po pobraniu arkusza stylów.
Dlatego czcionki internetowe są zasobami wykrywanymi z opóźnieniem. Istnieją jednak sposoby, aby pomóc przeglądarce szybciej je wykrywać.
Możesz zainicjować wczesne żądanie zasobów czcionek internetowych za pomocą dyrektywy preload. Dyrektywa preload sprawia, że czcionki internetowe są wykrywane na wczesnym etapie ładowania strony, a przeglądarka natychmiast rozpoczyna ich pobieranie bez czekania na zakończenie pobierania i analizowania arkusza stylów. Dyrektywa preload nie czeka, aż czcionka będzie potrzebna na stronie.
<!-- The `crossorigin` attribute is required for fonts—even
self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>
Wbudowane deklaracje @font-face
Możesz sprawić, że czcionki będą wykrywane wcześniej podczas wczytywania strony, umieszczając w sekcji <head> kodu HTML blokujący renderowanie kod CSS (w tym deklaracje @font-face) za pomocą elementu <style>. W takim przypadku przeglądarka wykrywa czcionki internetowe wcześniej podczas wczytywania strony, ponieważ nie musi czekać na pobranie zewnętrznego arkusza stylów.
Wstawianie deklaracji @font-face ma przewagę nad używaniem wskazówki preload, ponieważ przeglądarka pobiera tylko czcionki niezbędne do renderowania bieżącej strony. Eliminuje to ryzyko pobrania nieużywanych czcionek.
Pobierz
Po wykryciu czcionek internetowych i upewnieniu się, że są one potrzebne w układzie bieżącej strony, przeglądarka może je pobrać. Liczba czcionek internetowych, ich kodowanie i rozmiar pliku mogą mieć znaczący wpływ na szybkość pobierania i renderowania czcionki internetowej przez przeglądarkę.
Samodzielne hostowanie czcionek internetowych
Czcionki internetowe mogą być udostępniane przez usługi innych firm, takie jak Google Fonts, lub mogą być hostowane samodzielnie w Twojej domenie. Jeśli korzystasz z usługi innej firmy, strona internetowa musi otworzyć połączenie z domeną dostawcy, zanim będzie mogła rozpocząć pobieranie potrzebnych czcionek internetowych. Może to opóźnić wykrywanie i pobieranie czcionek internetowych.
Ten narzut można zmniejszyć za pomocą wskazówki dotyczącej zasobu preconnect. Za pomocą elementu
preconnect możesz poinformować przeglądarkę, aby otworzyła połączenie z domeną pochodzenia wcześniej niż zwykle:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Powyższy fragment kodu HTML sugeruje przeglądarce nawiązanie połączenia z fonts.googleapis.com i połączenia CORS z fonts.gstatic.com. Niektórzy dostawcy czcionek, np. Google Fonts, udostępniają pliki CSS i zasoby czcionek z różnych źródeł.
Możesz wyeliminować potrzebę połączenia z zewnętrznym dostawcą, samodzielnie hostując czcionki internetowe. W większości przypadków samodzielne hostowanie czcionek internetowych jest szybsze niż pobieranie ich z domeny innej niż domena źródłowa. Jeśli planujesz samodzielnie hostować czcionki internetowe, sprawdź, czy Twoja witryna korzysta z sieci dystrybucji treści (CDN), HTTP/2 lub HTTP/3 oraz czy ustawia prawidłowe nagłówki pamięci podręcznej dla czcionek internetowych, których potrzebujesz w swojej witrynie.
Używaj tylko formatu WOFF2
WOFF2 jest szeroko obsługiwany przez przeglądarki i zapewnia najlepszą kompresję – nawet o 30% lepszą niż WOFF. Mniejszy rozmiar pliku oznacza krótszy czas pobierania. Format WOFF2 jest często jedynym formatem potrzebnym do zapewnienia pełnej zgodności z nowoczesnymi przeglądarkami.
Tworzenie podzbiorów czcionek internetowych
Czcionki internetowe zwykle zawierają szeroką gamę różnych glifów, które są potrzebne do przedstawienia wielu znaków używanych w różnych językach. Jeśli strona wyświetla treści tylko w jednym języku lub używa jednego alfabetu, możesz zmniejszyć rozmiar czcionek internetowych, stosując podzbiory. Często robi się to, podając liczbę lub zakres punktów kodowych Unicode.
Podzbiór to zmniejszony zestaw glifów, które były zawarte w oryginalnym pliku czcionki internetowej. Na przykład zamiast wszystkich glifów strona może wyświetlać określony podzbiór znaków łacińskich. W zależności od potrzebnego podzbioru usunięcie glifów może znacznie zmniejszyć rozmiar pliku czcionki.
Niektórzy dostawcy czcionek internetowych, np. Google Fonts, oferują podzbiory automatycznie za pomocą parametru ciągu zapytania. Na przykład adres URL https://fonts.googleapis.com/css?family=Roboto&subset=latin udostępnia arkusz stylów z czcionką internetową Roboto, która używa tylko alfabetu łacińskiego.
Jeśli zdecydujesz się na samodzielne hostowanie czcionek internetowych, następnym krokiem będzie wygenerowanie i hostowanie tych podzbiorów za pomocą narzędzi takich jak glyphanger lub subfont.
Jeśli jednak nie masz możliwości samodzielnego hostowania czcionek internetowych, możesz utworzyć podzbiór czcionek internetowych udostępnianych przez Google Fonts, podając dodatkowy parametr ciągu zapytania textzawierający tylko punkty kodowe Unicode niezbędne dla Twojej witryny. Jeśli na przykład w witrynie masz wyświetlaną czcionkę internetową, która potrzebuje tylko niewielkiej liczby znaków do wyświetlenia frazy „Welcome”, możesz poprosić o ten podzbiór za pomocą Google Fonts, korzystając z tego adresu URL:https://fonts.googleapis.com/css?family=Monoton&text=Welcome. Może to znacznie zmniejszyć ilość danych czcionki internetowej potrzebnych dla jednego kroju pisma w Twojej witrynie, jeśli takie ekstremalne podzbiory mogą być w niej przydatne.
Renderowanie czcionek
Po wykryciu i pobraniu czcionki internetowej przeglądarka może ją renderować. Domyślnie przeglądarka blokuje renderowanie tekstu, który korzysta z czcionki internetowej, dopóki nie zostanie ona pobrana. Możesz dostosować sposób renderowania tekstu w przeglądarce i skonfigurować, jaki tekst ma być wyświetlany (lub nie) do czasu pełnego załadowania czcionki internetowej, za pomocą właściwości CSS font-display.
block
Wartością domyślną parametru font-display jest block. W przypadku block przeglądarka blokuje renderowanie tekstu, który korzysta z określonej czcionki internetowej. Różne przeglądarki działają nieco inaczej. Chromium i Firefox blokują renderowanie przez maksymalnie 3 sekundy, zanim użyją wersji zastępczej. Safari blokuje wyświetlanie strony na czas nieokreślony, dopóki nie zostanie wczytana czcionka internetowa.
swap
swap to najczęściej używana font-display wartość. swap nie blokuje renderowania i od razu wyświetla tekst w wersji zastępczej, zanim zastąpi go określoną czcionką internetową. Dzięki temu możesz od razu wyświetlać treści bez czekania na pobranie czcionki internetowej.
Jednak wadą swap jest to, że powoduje przesunięcie układu, jeśli zastępcza czcionka internetowa i czcionka internetowa określona w arkuszu CSS znacznie różnią się pod względem wysokości wiersza, kerningu i innych parametrów czcionki. Może to wpłynąć na CLS witryny, jeśli nie zadbasz o użycie wskazówki preload do jak najszybszego wczytania zasobu czcionki internetowej lub jeśli nie weźmiesz pod uwagę innych wartości font-display.
fallback
Wartość fallback parametru font-display jest kompromisem między block a swap. W przeciwieństwie do swap przeglądarka blokuje renderowanie czcionki, ale zamienia ją na tekst zastępczy tylko na bardzo krótki czas. W przeciwieństwie do block okres blokady jest jednak bardzo krótki.
Użycie wartości fallback może być dobrym rozwiązaniem w przypadku szybkich sieci, w których czcionka internetowa jest szybko pobierana i od razu używana podczas początkowego renderowania strony. Jeśli jednak sieci działają wolno, po upływie okresu blokowania najpierw wyświetlany jest tekst zastępczy, a potem jest on zastępowany przez czcionkę internetową.
optional
optional to najbardziej rygorystyczna wartość font-display, która używa zasobu czcionki internetowej tylko wtedy, gdy zostanie on pobrany w ciągu 100 milisekund. Jeśli wczytywanie czcionki internetowej trwa dłużej, nie jest ona używana na stronie, a przeglądarka używa czcionki zastępczej podczas bieżącej nawigacji, podczas gdy czcionka internetowa jest pobierana w tle i umieszczana w pamięci podręcznej przeglądarki.
Dzięki temu podczas kolejnych nawigacji na stronie można od razu użyć czcionki internetowej, ponieważ jest ona już pobrana. font-display: optional zapobiega przesunięciu układu, które występuje w przypadku swap, ale niektórzy użytkownicy nie widzą czcionki internetowej, jeśli pojawi się ona zbyt późno podczas początkowej nawigacji po stronie.
Demonstracje czcionek
Sprawdź swoją wiedzę
Kiedy przeglądarka pobiera zasób czcionki internetowej (zakładając, że nie jest on pobierany za pomocą dyrektywy preload)?
Jaki jest jedyny (i najbardziej wydajny) format niezbędny do wyświetlania czcionek internetowych we wszystkich nowoczesnych przeglądarkach?
Dalej: dzielenie kodu JavaScript
Po zapoznaniu się z optymalizacją czcionek możesz przejść do następnego modułu, który omawia temat o dużym potencjale w zakresie poprawy początkowej szybkości wczytywania strony przez użytkowników. Jest to odraczanie wczytywania JavaScriptu za pomocą dzielenia kodu. Dzięki temu możesz utrzymać jak najniższy poziom wykorzystania przepustowości i procesora w fazie uruchamiania strony, czyli w okresie, w którym użytkownicy najprawdopodobniej będą wchodzić z nią w interakcję.