Z tego ćwiczenia w Codelabs dowiesz się, jak wstępnie wczytywać czcionki internetowe za pomocą narzędzia rel="preload" do usuwania
dowolne błyski niesformatowanego tekstu (FOUT).
Zmierz odległość
Zanim wprowadzisz optymalizacje, najpierw zmierz skuteczność strony.
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij
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 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 krytycznych żądań przedstawia kolejność zasobów, które są traktowane priorytetowo i pobierane przez przeglądarkę. W tej aplikacji czcionki internetowe (Pacfico i Pacifico-Bold) są definiowane za pomocą reguły @font-face i jako ostatni zasób pobierany przez przeglądarkę w łańcuchu żądań krytycznych. Czcionki internetowe są zwykle leniwe, co oznacza, że są wczytywane dopiero po pobraniu kluczowych zasobów (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ę, aby pobrać dany zasób jako czcionkę, i pomaga określić priorytety 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 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 ma potrzeby wstępnego wczytywania czcionki Pacifico.woff2, ponieważ określa ona styl tekstu w części strony widocznej po przewinięciu.
Załaduj ponownie aplikację i jeszcze raz uruchom latarnię morską. Sprawdź sekcję Maksymalny czas oczekiwania ścieżki krytycznej.
Zwróć uwagę, jak obiekt Pacifico-Bold.woff2 jest usuwany z krytycznego łańcucha żądań. Jest on pobierany wcześniej w aplikacji.
W przypadku wstępnego wczytywania przeglądarka wie, że musi pobrać 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.