Z tego ćwiczenia w Codelabs dowiesz się, jak wstępnie wczytywać czcionki internetowe za pomocą rel="preload", aby usunąć dowolną impulsę bez stylu (FOUT).
Zmierz odległość
Zanim dodasz jakiekolwiek optymalizacje, sprawdź skuteczność witryny.
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem 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 Skuteczność.
- Kliknij przycisk Wygeneruj raport.
Wygenerowany raport Lighthouse zawiera informacje o sekwencji pobierania zasobów w sekcji Maksymalne czas oczekiwania ścieżki krytycznej.
W ramach powyższego audytu czcionki internetowe są częścią krytycznego łańcucha żądań i są pobierane jako ostatnie. Krytyczny łańcuch żądań reprezentuje kolejność zasobów, które są traktowane priorytetowo i pobierane przez przeglądarkę. W tej aplikacji czcionki internetowe (Pacfico i Pacifico-Bold) są zdefiniowane za pomocą reguły @font-face i są ostatnim zasobem pobranym przez przeglądarkę w łańcuchu żądań krytycznych. Zwykle czcionki internetowe są ładowane leniwie, co oznacza, że nie są ładowane do momentu pobrania najważniejszych zasobów (CSS, JS).
Oto kolejność zasobów pobranych w aplikacji:
Wstępne wczytywanie czcionek internetowych
Aby uniknąć FOUT, możesz wstępnie załadować czcionki internetowe, które są wymagane od razu. 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ę, co pomaga w określaniu priorytetów kolejki 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 wczytana czcionka jest ignorowana przez przeglądarkę.
W nagłówku strony używany jest tag Pacifico-Bold, dlatego dodaliśmy tag wstępnego wczytywania, aby jeszcze szybciej pobierać dane. Wstępne ładowanie czcionki Pacifico.woff2 nie jest ważne, bo dostosowuje ona styl tekstu do części strony widocznej po przewinięciu.
Załaduj ponownie aplikację i uruchom latarnię morską. Sprawdź sekcję Maksymalne opóźnienie ścieżki krytycznej.
Zwróć uwagę na to, jak żądanie Pacifico-Bold.woff2 jest usuwane z łańcucha krytycznych żądań. Jest pobierana wcześniej w aplikacji.
Dzięki wstępnemu wczytywaniu przeglądarka wie, że musi pobrać ten plik wcześniej. Pamiętaj, że niewłaściwe ładowanie może obniżyć wydajność, ponieważ będzie wysyłać niepotrzebne żądania zasobów, które nie są używane.