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.
Wygenerowany raport Lighthouse będzie zawierać sekwencję pobierania zasobów w sekcji Maksymalny czas oczekiwania na ścieżce krytycznej.
W przypadku tego audytu czcionki internetowe są częścią łańcucha żądań kluczowych i pobierane na końcu. Ł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ą ostatnim zasobem pobieranym przez przeglądarkę w łańcuchu żądań kluczowych. Typowo czcionki internetowe są wczytywane z opóźnieniem, co oznacza, że nie są wczytywane, dopóki nie zostaną pobrane zasoby krytyczne (CSS, JS).
Oto kolejność zasobów pobieranych w aplikacji:
Wstępne wczytywanie czcionek internetowych
Aby uniknąć tego problemu, możesz wstępnie wczytywać czcionki internetowe, które są wymagane natychmiast. 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 należy pobrać ten zasób jako czcionkę, i pomagają w ustalaniu kolejności 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 przeglądarka ignoruje wstępnie wczytany font.
Ponieważ czcionka Pacifico-Bold jest używana w nagłówku strony, dodaliśmy tag wstępnego wczytania, aby pobrać ją jeszcze wcześniej. Nie ma potrzeby wstępnego wczytywania 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 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 będziesz korzystać z wstępnego wczytywania w prawidłowy sposób, może to wpłynąć negatywnie na wydajność, ponieważ będą wysyłane niepotrzebne żądania nieużywanych zasobów.