W poprzednich modułach omówiliśmy, jak optymalizować zawartość HTML, CSS, JavaScript, i zasobami medialnymi. W tym module poznasz niektóre metody optymalizacji stron internetowych czcionki.
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 może negatywnie wpłynąć na Pierwsze kroki
Wyrenderowanie treści (FCP), podczas gdy nieprawidłowa wartość font-display może spowodować
niepożądane przesunięcia układu, które wpływają na skumulowane przesunięcie układu strony
(CLS).
Zanim zaczniesz optymalizować czcionki na stronach internetowych, warto wiedzieć, jak są wykrywane przeglądarka może być pomocna, dzięki czemu dowiesz się, jak CSS uniemożliwia pobieranie niepotrzebnych czcionek internetowych w określonych sytuacjach.
Odkrywanie treści
Czcionki internetowe strony są zdefiniowane w arkuszu stylów za pomocą atrybutu @font-face
deklaracja:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
Poprzedni fragment kodu definiuje font-family o nazwie "Open Sans" oraz
informuje przeglądarkę, gdzie znajduje się odpowiednie źródło czcionek internetowych. Oszczędzaj
przeglądarka nie pobiera czcionki internetowej, dopóki nie zostanie określona
musi być uwzględniony w układzie bieżącej strony.
h1 {
font-family: "Open Sans";
}
W poprzednim fragmencie kodu CSS przeglądarka pobiera plik czcionki "Open Sans"
podczas analizowania elementu <h1> w kodzie HTML strony.
preload
Jeśli deklaracje @font-face są zdefiniowane w zewnętrznym arkuszu stylów, parametr
mogą zacząć je pobierać dopiero po pobraniu arkusza stylów.
Sprawia to, że czcionki internetowe są dopiero odnajdywane. Istnieją jednak sposoby,
szybciej odkrywaj czcionki internetowe.
Możesz wcześniej zainicjować żądanie dotyczące zasobów czcionek internetowych za pomocą interfejsu preload
. Dyrektywa preload sprawia, że czcionki internetowe są wykrywalne na wczesnym etapie
strona zostanie wczytana, a przeglądarka od razu rozpocznie ich pobieranie bez czekania.
dla arkusza stylów do zakończenia pobierania i analizy. 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ć, aby czcionki były wykrywalne wcześniej podczas wczytywania strony, wstawiając je w treści
kod CSS blokujący renderowanie (w tym deklaracje @font-face) w elemencie <head> kodu
kodu HTML za pomocą elementu <style>. W takim przypadku przeglądarka wykrywa
nie trzeba czekać na pojawienie się
zewnętrznych czcionek
arkusza stylów.
Wbudowane deklaracje @font-face mają przewagę nad deklaracjami preload
ponieważ przeglądarka pobiera tylko czcionki niezbędne do renderowania
stronę. Eliminuje to ryzyko pobrania nieużywanych czcionek.
Pobierz
Po odkryciu czcionek internetowych i sprawdzeniu, czy są one potrzebne układ, przeglądarka może je pobrać. liczby czcionek internetowych, ich kodowania, a rozmiar pliku może znacząco wpłynąć na szybkość, pobrane i wyrenderowane przez przeglądarkę.
Samodzielnie hostuj czcionki internetowe
Czcionki internetowe mogą być wyświetlane przy użyciu usług innych firm, takich jak Google Fonts, lub może być hostowany we własnym miejscu w punkcie początkowym. Jeśli korzystasz z usługi innej firmy, musi otworzyć połączenie z domeną dostawcy przed uruchomieniem pobieranie potrzebnych czcionek internetowych. Może to opóźnić wykrywanie i kolejne pobierania czcionek internetowych.
Ten narzut można zmniejszyć, korzystając ze wskazówki dotyczącej zasobów preconnect. Za pomocą
preconnect, możesz poprosić przeglądarkę o otwarcie połączenia z innymi domenami.
szybciej niż zwykle:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Poprzedni fragment kodu HTML informuje przeglądarkę, że ma nawiązać połączenie
fonts.googleapis.com i połączenie CORS z fonts.gstatic.com. Niektóre
dostawców czcionek (np. Google Fonts) – wyświetlaj zasoby CSS i czcionki z różnych
źródeł.
Możesz wyeliminować konieczność korzystania z połączenia z inną firmą, hostując witrynę we własnym zakresie czcionki internetowe. W większości przypadków samoobsługowe czcionki internetowe są szybsze niż ich pobranie z innych domen. Jeśli planujesz samodzielnie hostować czcionki internetowe, sprawdź, korzysta z sieci dystrybucji treści (CDN), HTTP/2 lub HTTP/3 i ustawia poprawne nagłówki buforowania dla czcionek internetowych potrzebnych w witrynie.
Używaj tylko WOFF2 i WOFF2
WOFF2 zapewnia obsługę szerokiej przeglądarki i najlepszą kompresję – nawet o 30% lepsza niż WOFF. Mniejszy rozmiar pliku oznacza szybsze pobieranie. WOFF2 jest często jedynym formatem niezbędnym do uzyskania pełnej zgodności przeglądarki.
Tworzenie podzbiorów czcionek internetowych
Czcionki internetowe zwykle zawierają wiele różnych glifów, które są potrzebne reprezentując różnorodność znaków używanych w różnych językach. Jeśli strona wyświetla treść tylko w jednym języku lub używając jednego alfabetu, zmniejsz rozmiar czcionek internetowych. Takie działania są często wykonywane przez określając liczbę lub zakres punktów kodu Unicode.
Podzbiór to ograniczony zestaw glifów, które zostały zawarte w oryginalnej sieci . Na przykład zamiast wyświetlać wszystkie glify, strona może wyświetlać określonego podzbioru znaków łacińskich. W zależności od potrzebnego podzbioru usuń glify mogą znacznie zmniejszyć rozmiar pliku czcionki.
Niektórzy dostawcy czcionek internetowych, na przykład Google Fonts, oferują podzbiory automatycznie przez
parametru ciągu zapytania. Na przykład parametr
Adres URL https://fonts.googleapis.com/css?family=Roboto&subset=latin wyświetla
arkusza stylów z czcionką internetową Roboto, która korzysta wyłącznie z alfabetu łacińskiego.
Jeśli zdecydujesz się na samodzielne hostowanie czcionek internetowych, następnym krokiem jest wygenerowanie hostuj te podzbiory samodzielnie za pomocą takich narzędzi jak glyphanger czy subfont.
Jeśli jednak nie masz możliwości samodzielnego hostowania własnych czcionek internetowych, możesz
podzbioru czcionek internetowych dostarczanych przez Google Fonts, określając dodatkowy text
Parametr ciągu zapytania, który zawiera tylko punkty kodu Unicode niezbędne dla
do Twojej witryny. Jeśli na przykład masz w witrynie wyświetlaną czcionkę internetową, która zawiera tylko
musi zawierać niewielką liczbę znaków wymaganych w wyrażeniu „Witamy”, możesz
zażądać tego podzbioru za pomocą Google Fonts, korzystając z tego adresu URL:
https://fonts.googleapis.com/css?family=Monoton&text=Welcome Może to spowodować
znacznie ogranicza ilość danych potrzebnych do wyświetlania pojedynczego kroju czcionki
w Twojej witrynie, jeśli takie ekstremalne ustawienia mogą być przydatne.
Renderowanie czcionek
Gdy przeglądarka odnajdzie i pobierze czcionkę internetową, będzie można ją
wyrenderowano. Domyślnie przeglądarka blokuje renderowanie tekstu korzystającego z
czcionkę internetową. Możesz dostosować renderowanie tekstu w przeglądarce
działania i określić, co ma być wyświetlane – a co nie –
czcionka została w pełni wczytana za pomocą właściwości CSS font-display.
block
Wartość domyślna pola font-display to block. Dzięki block przeglądarka
blokuje renderowanie dowolnego tekstu korzystającego z określonej czcionki internetowej. Inna
działają nieco inaczej. Chromium i Firefox blokują renderowanie na
maksymalnie 3 sekundy przed użyciem kreacji zastępczej. Safari blokuje czas nieokreślony
przed wczytaniem czcionki internetowej.
swap
swap to najpopularniejsza wartość font-display. swap nie blokuje
renderuje ją i wyświetla tekst bezpośrednio w kreacji zastępczej przed zamianą
określona czcionka internetowa. Dzięki temu od razu wyświetlisz treści bez czekania.
aby pobrać czcionkę.
Wadą funkcji swap jest jednak to, że powoduje ona przesunięcie układu, jeśli reklama zastępcza
czcionka internetowa i czcionka internetowa określone w Twoim kodzie CSS znacznie się różnią pod względem linii
wysokość, kerning i inne parametry czcionki. Może to wpłynąć na CLS witryny, jeśli
nie korzystasz ze wskazówki preload, aby wczytać zasób czcionek internetowych
lub jeśli nie weźmiesz pod uwagę innych wartości font-display.
fallback
Wartość fallback dla font-display stanowi kompromis
block i swap. W przeciwieństwie do swap przeglądarka blokuje renderowanie czcionki, ale
zamianę tekstu zastępczego tylko na bardzo krótki czas. W przeciwieństwie do block,
jednak okres ten jest bardzo krótki.
Wartość fallback może się sprawdzić w szybkich sieciach, w których czcionka
szybkie pobieranie, czcionka internetowa jest krojem czcionki używanym bezpośrednio na stronie
i pierwszego renderowania. Jeśli jednak sieci działają wolno, wyświetla się tekst zastępczy.
najpierw po upłynięciu okresu blokowania, a następnie zamienia się, gdy czcionka internetowa
przyjeżdża.
optional
optional to najbardziej rygorystyczna wartość font-display i korzysta tylko z internetu
zasobu czcionki, jeśli zostanie pobrany w ciągu 100 milisekund. Jeśli czcionka internetowa
jest dłużej ładowany, nie jest używany na stronie, a przeglądarka
krój czcionki zastępczej dla bieżącej nawigacji podczas pobierania czcionki internetowej
w tle i umieszczane w pamięci podręcznej przeglądarki.
Dzięki temu w kolejnych nawigacji na stronie będzie można od razu używać czcionki internetowej,
karta została już pobrana. Element font-display: optional pozwala uniknąć zauważonego przesunięcia układu
z swap, ale niektórzy użytkownicy nie zobaczą czcionki internetowej, jeśli pojawi się ona za późno
początkowej nawigacji na stronie.
Wersje demonstracyjne czcionek
Sprawdź swoją wiedzę
Kiedy przeglądarka pobiera zasób czcionek internetowych (zakładając, że nie jest)
pobrane z dyrektywą preload)?
Jaki jest jedyny (i najskuteczniejszy) format niezbędny do wyświetlania reklam w internecie we wszystkich nowoczesnych przeglądarkach?
Następny krok: JavaScript podzielony na fragmenty kodu
Znając już mechanizmy optymalizacji czcionki, do kolejnego modułu, który obejmuje zagadnienie, które może potencjalnie zostać udoskonalone dla użytkowników, czyli opóźnienie wczytywania JavaScript przez podział kodu. Dzięki temu możesz utrzymać przepustowość i procesor jak najmniejsza rywalizacja w fazie uruchamiania strony przez w którym użytkownicy mogą z niej korzystać.