Wstępnie wczytuj żądania klucza

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

Zrzut ekranu pokazujący kontrolę żądań kluczy wstępnego wczytywania w Lighthouse

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.

Bez linków wstępnego wczytywania żądania atrybutów style.css i ui.js są wysyłane dopiero po pobraniu, przeanalizowaniu i wykonaniu pliku app.js.
Bez wstępnego wczytywania linków 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.

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>
Dzięki linkom z wyprzedzeniem wczytywane są adresy Style.css i ui.js, które są wywoływane jednocześnie z plikiem app.js.
. Z wstępnie wczytywanymi linkami, 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>).

Zasoby