W poprzednich modułach omówiliśmy sposoby optymalizacji zasobów HTML, CSS i JavaScript oraz zasobów multimedialnych. W tym module poznasz metody optymalizacji czcionek internetowych.
Czcionki internetowe mogą wpływać na wydajność strony zarówno podczas wczytywania, jak i renderowania.
Pobieranie dużych plików czcionek może trochę potrwać i negatywnie wpływa na pierwsze wyrenderowanie treści (FCP), a nieprawidłowa wartość font-display może spowodować niepożądane przesunięcia układu, które przyczyniają się do skumulowanego przesunięcia układu (CLS).
Zanim omówimy optymalizację czcionek internetowych, warto wiedzieć, jak są one wykrywane przez przeglądarkę, ponieważ w określonych sytuacjach CSS uniemożliwia pobieranie zbędnych czcionek.
Kampanie Discovery
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");
}
Poprzedni fragment kodu definiuje element font-family o nazwie "Open Sans" i informuje przeglądarkę, gdzie znaleźć odpowiedni zasób czcionki internetowej. Aby ograniczyć przepustowość, przeglądarka nie pobiera czcionki internetowej, dopóki nie zostanie określona, że zgodnie z układem bieżącej strony jest ona potrzebna.
h1 {
font-family: "Open Sans";
}
W poprzednim fragmencie kodu CSS przeglądarka pobiera plik czcionki "Open Sans", gdy analizuje element <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.
W ten sposób czcionki internetowe zostały niedawno odkryte, ale istnieją inne sposoby, dzięki którym przeglądarka może szybciej je wykryć.
Możesz zainicjować wcześniejsze żądanie zasobów czcionek internetowych, używając dyrektywy preload. Dyrektywa preload sprawia, że czcionki internetowe są wykrywalne wcześnie podczas wczytywania strony, a przeglądarka rozpoczyna ich pobieranie bez czekania na zakończenie pobierania i analizowania arkusza stylów. Dyrektywa preload nie czeka, aż na stronie będzie potrzebna czcionka.
<!-- 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
Aby czcionki były wykrywalne wcześniej podczas wczytywania strony, możesz wbudować blokujący renderowanie kod CSS (w tym deklaracje @font-face) w <head> kodu HTML za pomocą elementu <style>. W takim przypadku przeglądarka wykrywa czcionki internetowe podczas wczytywania strony, ponieważ nie musi czekać na pobranie zewnętrznego arkusza stylów.
Wbudowane deklaracje @font-face mają przewagę nad wskazówką preload, ponieważ przeglądarka pobiera tylko czcionki niezbędne do wyrenderowania bieżącej strony. Pozwala to wyeliminować ryzyko pobierania nieużywanych czcionek.
Pobierz
Po odnalezieniu czcionek internetowych i sprawdzeniu, czy są one potrzebne w bieżącym układzie strony, przeglądarka może je pobrać. Liczba czcionek internetowych, ich kodowanie i rozmiar pliku mogą w znacznym stopniu wpłynąć na szybkość pobierania i renderowania czcionki internetowej przez przeglądarkę.
Samodzielne przechowywanie czcionek internetowych
Czcionki internetowe mogą być wyświetlane za pomocą usług innych firm, takich jak Google Fonts, albo mogą być hostowane w pierwotnym miejscu. Jeśli korzystasz z usługi innej firmy, Twoja strona musi nawiązać połączenie z domeną dostawcy, zanim będzie mogła pobierać potrzebne czcionki internetowe. Może to opóźnić odkrycie i późniejsze pobieranie czcionek internetowych.
Ten narzut można zmniejszyć, korzystając ze wskazówki dotyczącej zasobów preconnect. Za pomocą preconnect możesz sprawić, aby przeglądarka nawiązywała połączenie z innymi domenami wcześniej niż normalnie:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Poprzedni fragment kodu HTML wskazuje przeglądarce, jak nawiązać połączenie z fonts.googleapis.com i CORS z fonts.gstatic.com. Niektórzy dostawcy czcionek (np. Google Fonts) obsługują zasoby CSS i czcionki z różnych źródeł.
Aby wyeliminować potrzebę korzystania z połączenia z innymi firmami, możesz samodzielnie hostować czcionki internetowe. W większości przypadków własne czcionki internetowe są szybsze niż ich pobieranie z innych domen. Jeśli planujesz samodzielnie hostować czcionki internetowe, sprawdź, czy Twoja witryna korzysta z sieci dystrybucji treści (CDN), HTTP/2 lub HTTP/3 i ustawia prawidłowe nagłówki buforowania w przypadku czcionek internetowych, których potrzebujesz.
Używaj tylko WOFF2 i WOFF2
WOFF2 cieszy się obsługą wielu przeglądarek i najlepszą kompresją — nawet o 30% lepszą niż WOFF. Mniejszy rozmiar pliku przyspiesza pobieranie. Format WOFF2 jest często jedynym formatem wymaganym do pełnej zgodności z nowoczesnymi przeglądarkami.
Podgrupuj swoje czcionki internetowe
Czcionki internetowe zwykle zawierają szeroki zakres różnych glifów, które są potrzebne do odzwierciedlenia różnorodności znaków używanych w różnych językach. Jeśli Twoja strona wyświetla treść tylko w jednym języku lub używa jednego alfabetu, możesz zmniejszyć rozmiar czcionek internetowych za pomocą ustawień podrzędnych. Często jest to wymagane przez określenie liczby lub zakresu punktów kodu Unicode.
Podzbiór to ograniczony zestaw glifów zawartych w pierwotnym pliku czcionek internetowych. Na przykład zamiast wyświetlać wszystkie glify, 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 czcionek.
Niektórzy dostawcy czcionek internetowych (np. Google Fonts) automatycznie oferują podzbiory 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 korzysta tylko z alfabetu łacińskiego.
Jeśli zdecydujesz się na samodzielne hostowanie czcionek internetowych, musisz wygenerować i hostować je samodzielnie za pomocą takich narzędzi jak glyphanger i subfont.
Jeśli jednak nie masz możliwości samodzielnego hostowania własnych czcionek internetowych, możesz podać podgrupy czcionek internetowych z Google Fonts, określając dodatkowy parametr ciągu zapytania text, który zawiera tylko punkty kodu Unicode niezbędne dla Twojej witryny. Jeśli na przykład masz w swojej witrynie wyświetlaną czcionkę internetową, która wymaga niewielkiej liczby znaków do wyrażenia „Witamy”, możesz poprosić o ten podzbiór za pomocą Google Fonts pod tym adresem URL: https://fonts.googleapis.com/css?family=Monoton&text=Welcome. Może to znacznie ograniczyć ilość danych dotyczących czcionek internetowych potrzebnych w przypadku jednego kroju pisma w witrynie, jeśli takie ekstremalne podrzędne ustawienia przydają się.
Renderowanie czcionek
Gdy przeglądarka wykryje i pobierze czcionkę internetową, może ją wyrenderować. Domyślnie przeglądarka blokuje renderowanie tekstu z czcionką internetową, dopóki nie zostanie on pobrany. Za pomocą właściwości CSS font-display możesz dostosować działanie przeglądarki tekstu w przeglądarce oraz określić, który tekst ma być wyświetlany, a jaki nie, aż czcionka internetowa zostanie w pełni wczytana.
block
Wartością domyślną font-display jest block. block powoduje, że przeglądarka blokuje renderowanie dowolnego tekstu korzystającego z określonej czcionki internetowej. Różne przeglądarki działają nieco inaczej. Chromium i Firefox blokują renderowanie przez maksymalnie 3 sekundy, zanim użyjesz kreacji zastępczej. Safari blokuje dostęp bezterminowo do momentu załadowania czcionki internetowej.
swap
swap to najpowszechniej używana wartość font-display. swap nie blokuje renderowania i przed zamianą określonej czcionki internetowej wyświetla tekst od razu w kreacji zastępczej. Dzięki temu zawartość będzie widoczna od razu,
bez czekania na pobranie czcionki internetowej.
Wadą właściwości swap jest jednak to, że powoduje to przesunięcie układu, jeśli zastępcza czcionka internetowa i czcionka internetowa określona w CSS znacznie się różnią pod względem wysokości wiersza, kerningu i innych danych dotyczących czcionki. Może to wpłynąć na wartość CLS witryny, jeśli nie używasz podpowiedzi preload do jak najszybszego wczytywania zasobu czcionki internetowej lub nie uwzględniasz innych wartości font-display.
fallback
Wartość fallback dla font-display to kompromis między block a swap. W odróżnieniu od swap przeglądarka blokuje renderowanie czcionki, ale zamiana tekstu zastępczego na bardzo krótki czas. W przeciwieństwie do narzędzia block okres blokowania jest jednak bardzo krótki.
Wartość fallback sprawdza się dobrze w szybkich sieciach, w których, jeśli czcionka internetowa pobiera się szybko, czcionka jest używana od razu podczas wstępnego renderowania strony. Jeśli jednak sieć działa wolno, tekst zastępczy jest widoczny jako pierwszy po upływie okresu blokowania, a potem jest zastępowany po pojawieniu się czcionki internetowej.
optional
optional to najbardziej rygorystyczna wartość font-display, która korzysta z czcionki internetowej tylko wtedy, gdy zostanie pobrana w ciągu 100 milisekund. Jeśli czcionka internetowa jest ładowana dłużej, nie jest ona używana na stronie, a przeglądarka korzysta z kroju domyślnego w bieżącej nawigacji, podczas gdy czcionka jest pobierana w tle i umieszczana w pamięci podręcznej przeglądarki.
W związku z tym przy kolejnych nawigacji na stronie można od razu używać czcionki internetowej, ponieważ jest ona już pobrana. font-display: optional omija przesunięcie układu widoczne w swap, ale niektórzy użytkownicy nie widzą czcionki internetowej, jeśli pojawia się ona zbyt późno podczas początkowej nawigacji na stronie.
Wersje demonstracyjne czcionek
Sprawdź swoją wiedzę
Kiedy przeglądarka pobiera zasób czcionki internetowej (przy założeniu, że nie został on pobrany za pomocą dyrektywy preload)?
Jaki jest jedyny (i najskuteczniejszy) format niezbędny do wyświetlania czcionek internetowych we wszystkich nowoczesnych przeglądarkach?
Następny krok: kod JavaScript podzielony na podstawie
Gdy już zrozumiesz, jak działa optymalizacja czcionek, możesz przejść do kolejnego modułu, który omawia temat z dużym potencjałem przyspieszający pierwsze wczytywanie strony u użytkowników, którym jest opóźnienie ładowania kodu JavaScript przez podział kodu. Pozwala to ograniczyć wykorzystanie przepustowości i rywalizacji z wykorzystaniem procesora na najniższym poziomie podczas uruchamiania strony, czyli okresu, w którym użytkownicy prawdopodobnie będą z niej korzystać.