Sekcja Możliwości w raporcie Lighthouse oznacza trzeci poziom żądań w krytycznym łańcuchu żądań jako wstępnie wczytywane kandydatów:

Jak flagi Lighthouse określają kandydatów z wyprzedzeniem
Załóżmy, że adres URL Twojej strony Łańcuch krytycznych żądań wygląda tak:
index.html |--app.js |--styles.css |--ui.js
Twój plik index.html
deklaruje: <script src="app.js">
. Po uruchomieniu app.js
wywołuje
fetch()
, aby pobrać: styles.css
i ui.js
. Strona wydaje się być niekompletna
aż do pobrania, przeanalizowania i wykonania tych 2 ostatnich zasobów.
W powyższym przykładzie Lighthouse oznaczałby jako kandydatów styles.css
i ui.js
.
Potencjalne oszczędności zależą od tego, o ile wcześniej przeglądarka będzie mogła
aby uruchamiać żądania, jeśli zadeklarujesz linki z wyprzedzeniem.
Jeśli na przykład pobranie, analiza i wykonanie działania app.js
trwa 200 ms,
potencjalne oszczędności dla każdego zasobu wynoszą 200 ms, ponieważ interfejs app.js
nie jest już wąskim gardłem dla każdego z żądań.
Żądania wstępnego wczytywania mogą przyspieszyć wczytywanie stron.

styles.css
i
Żądania ui.js
są wysyłane dopiero po pobraniu pakietu app.js
,
przeanalizowano i wykonać.
Problem polega na tym, że przeglądarka dopiero wie,
z tych 2 ostatnich zasobów po jego pobraniu, przeanalizowaniu i wykonaniu app.js
.
Ale wiesz, że te zasoby są ważne,
powinny zostać pobrane jak najszybciej.
Deklarowanie linków wstępnego wczytywania
Zadeklaruj w kodzie HTML linki z wyprzedzeniem, by poinformować przeglądarkę o możliwości pobrania kluczowych zasobów jak najszybciej.
<head>
...
<link rel="preload" href="styles.css" as="style" />
<link rel="preload" href="ui.js" as="script" />
...
</head>

styles.css
i
Prośba o ui.js
została wysłana w tym samym czasie co app.js
.
Zapoznaj się też z artykułem Wstępne wczytywanie najważniejszych zasobów w celu przyspieszenia wczytywania .
Zgodność z przeglądarką
Od czerwca 2020 roku wstępne wczytywanie jest obsługiwane w przeglądarkach opartych na Chromium. Zobacz Zgodność z przeglądarką .
Narzędzie do tworzenia kompilacji obsługujące wstępne wczytywanie
Przeczytaj sekcję Tooling.Report's Preloads Assets (Wstępne wczytywanie zasobów narzędzia). stronę.
Wskazówki dotyczące stosu
Angular
Wstępnie wczytuj trasy z wyprzedzeniem, aby przyspieszyć nawigację.
Magento
Modyfikowanie układu motywów
i dodaj tagi (<link rel=preload>
).