Z tego ćwiczenia dowiesz się, jak wstępnie wczytywać czcionki internetowe za pomocą rel="preload", aby uniknąć wyświetlania niesformatowanego tekstu (FOUT).
Zmierz odległość
Najpierw zmierz skuteczność witryny przed wprowadzeniem jakichkolwiek optymalizacji.
- Aby wyświetlić podgląd witryny, naciśnij Wyświetl aplikację, a następnie Pełny ekran
. - Naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Lighthouse.
- Upewnij się, że na liście Kategorie jest zaznaczone pole wyboru Wydajność.
- Kliknij przycisk Wygeneruj raport.
Wygenerowany raport Lighthouse pokaże sekwencję pobierania zasobów w sekcji Maksymalne opóźnienie ścieżki krytycznej.
W powyższym audycie czcionki internetowe są częścią łańcucha żądań krytycznych i są pobierane jako ostatnie. Łańcuch żądań krytycznych reprezentuje kolejność zasobów, które są priorytetowo traktowane i pobierane przez przeglądarkę. W tej aplikacji czcionki internetowe (Pacfico i Pacifico-Bold) są definiowane za pomocą reguły @font-face i są ostatnim zasobem pobieranym przez przeglądarkę w łańcuchu żądań krytycznych. Zwykle czcionki internetowe są ładowane leniwie, co oznacza, że nie są ładowane, dopóki nie zostaną pobrane zasoby krytyczne (CSS, JS).
Oto sekwencja zasobów pobieranych w aplikacji:
Wstępne wczytywanie czcionek internetowych
Aby uniknąć FOUT, możesz wstępnie wczytać czcionki internetowe, które są natychmiast wymagane. Dodaj element Link dla tej aplikacji na początku dokumentu:
<head>
<!-- ... -->
<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>
Atrybuty as="font" type="font/woff2" informują przeglądarkę, że ma pobrać ten zasób jako czcionkę, i pomagają w ustalaniu priorytetów w kolejce zasobów.
Atrybut crossorigin wskazuje, czy zasób powinien zostać pobrany za pomocą żądania CORS, ponieważ czcionka może pochodzić z innej domeny. Bez tego atrybutu wstępnie załadowana czcionka jest ignorowana przez przeglądarkę.
Ponieważ czcionka Pacifico-Bold jest używana w nagłówku strony, dodaliśmy tag wstępnego wczytywania, aby pobierać ją jeszcze szybciej. Nie jest ważne, aby wstępnie wczytywać czcionkę Pacifico.woff2, ponieważ stylizuje ona tekst, który znajduje się w części strony widocznej po przewinięciu.
Odśwież aplikację i ponownie uruchom Lighthouse. Sprawdź sekcję Maksymalne opóźnienie ścieżki krytycznej.
Zwróć uwagę, że plik Pacifico-Bold.woff2 został usunięty z łańcucha żądań krytycznych. Jest pobierany wcześniej w aplikacji.
Dzięki wstępnemu wczytywaniu przeglądarka wie, że musi pobrać ten plik wcześniej. Warto pamiętać, że nieprawidłowe użycie wstępnego wczytywania może pogorszyć wydajność, ponieważ powoduje wysyłanie niepotrzebnych żądań dotyczących zasobów, które nie są używane.