W tym ćwiczeniu pokazujemy, jak wstępnie wczytywać czcionki internetowe za pomocą rel="preload", aby usunąć efekt FOUT (flash of unstyled text).
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 być pobierany 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 niepotrzebne żądania zasobów, które nie są używane.