Z tego ćwiczenia w Codelab dowiesz się, jak za pomocą rel="preload" wstępnie wczytywać czcionki internetowe, aby usunąć miganie niesformatowanego tekstu (FOUT).
Zmierz odległość
Zanim wprowadzisz jakiekolwiek optymalizacje, zmierz najpierw skuteczność witryny.
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran
. - Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
- Kliknij kartę Lighthouse.
- Na liście Kategorie sprawdź, czy zaznaczone jest pole wyboru Skuteczność.
- Kliknij przycisk Wygeneruj raport.
W wygenerowanym raporcie Lighthouse będzie widoczna sekwencja pobierania zasobów w sekcji Maksymalny czas oczekiwania ścieżki krytycznej.
W powyższym audycie czcionki internetowe wchodzą w skład krytycznego łańcucha żądań i są pobierane jako ostatnie. Łańcuch żądań krytycznych to kolejność zasobów, które są pobierane przez przeglądarkę z uwzględnieniem priorytetów. W tej aplikacji czcionki internetowe (Pacifco i Pacifico-Bold) są definiowane za pomocą reguły @font-face i są ostatnimi zasobami pobieranymi przez przeglądarkę w łańcuchu żądań kluczowych. Zasoby czcionek internetowych są zwykle wczytywane z opóźnieniem, co oznacza, że nie są wczytywane, dopóki nie zostaną pobrane zasoby krytyczne (CSS, JS).
Oto sekwencja zasobów pobranych do aplikacji:
Wstępne wczytywanie czcionek internetowych
Aby uniknąć FOUT, możesz wstępnie załadować czcionki internetowe, które są wymagane natychmiast. Dodaj element Link dla tej aplikacji w nagłówku 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 należy pobrać ten zasób jako czcionkę, i pomagają w ustalaniu kolejności zadań w kole 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 wczytywana czcionka jest ignorowana przez przeglądarkę.
W nagłówku strony znajduje się tag Pacifico-Bold, więc dodaliśmy tag wstępnego wczytywania, by pobrać ją jeszcze szybciej. Nie trzeba wstępnie wczytywać czcionki Pacifico.woff2, ponieważ stylizuje ona tekst, który jest widoczny na ekranie.
Załaduj ponownie aplikację i uruchom Lighthouse ponownie. Sprawdź sekcję Maksymalne opóźnienie na ścieżce krytycznej.
Zwróć uwagę, że Pacifico-Bold.woff2 zostało usunięte z łańcucha żądań krytycznych. Jest on pobierany wcześniej w aplikacji.
Dzięki wstępnemu wczytywaniu przeglądarka wie, że musi pobrać ten plik wcześniej. Pamiętaj, że jeśli nie jest używane prawidłowo, wstępne wczytywanie może pogorszyć wydajność przez wysyłanie zbędnych żądań do nieużywanych zasobów.