Optymalizuj czcionki internetowe

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)?

Gdy tylko odniesienie do niego zostanie wykryte w arkuszu stylów.
Po zbudowaniu kodu CSSOM strony i ustaleniu, że czcionka internetowa to potrzebne dla bieżącego układu.

Jaki jest jedyny (i najskuteczniejszy) format niezbędny do wyświetlania reklam w internecie we wszystkich nowoczesnych przeglądarkach?

TTF
WOFF2
koniec do końca
WOFF

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ć.