Wstępnie wczytuj żądania klucza

Sekcja Możliwości w raporcie Lighthouse wskazuje 3 poziom żądań w łańcuchu krytycznych żądań jako wstępne wczytanie kandydatów:

Zrzut ekranu z kontrolą żądań kluczy wstępnego wczytywania Lighthouse

Jak flagi Lighthouse określają kandydatów do wstępnego wczytywania

Załóżmy, że krytyczny łańcuch żądań Twojej strony wygląda tak:

index.html |--app.js |--styles.css |--ui.js

W pliku index.html deklarowana jest wartość <script src="app.js">. Po uruchomieniu app.js wywołuje metodę fetch() , by pobrać styles.css i ui.js. Strona będzie wydawać się niekompletna, dopóki nie zostaną pobrane, przeanalizowane i wykonane te 2 ostatnie zasoby. W przykładzie powyżej narzędzie Lighthouse wskaże elementy styles.css i ui.js jako kandydaci.

Potencjalne oszczędności zależą od tego, o ile wcześniej przeglądarka będzie w stanie wysyłać żądania, jeśli zadeklarujesz wstępne wczytywanie linków. Jeśli na przykład pobieranie, analizowanie i wykonywanie żądania app.js trwa 200 ms, potencjalne oszczędności w przypadku każdego zasobu wyniosą 200 ms, ponieważ app.js nie stanowi już wąskiego gardła w przypadku każdego żądania.

Żądania wstępnego wczytywania mogą przyspieszyć wczytywanie stron.

Bez linków do wstępnego wczytywania żądania style.css i ui.js są wykonywane dopiero po pobraniu, przeanalizowaniu i wykonaniu kodu app.js.
Bez linków wstępnego wczytywania żądania styles.css i ui.js są wysyłane dopiero po pobraniu, przeanalizowaniu i wykonaniu elementu app.js.

Problem polega na tym, że przeglądarka dowiaduje się o tych 2 ostatnich zasobach dopiero po pobraniu, analizie i uruchomieniu obiektu app.js. Wiesz jednak, że te zasoby są ważne i należy je pobrać jak najszybciej.

Zadeklaruj w kodzie HTML linki do wstępnego wczytywania, aby instruować przeglądarkę, aby jak najszybciej pobrała najważniejsze zasoby.

<head>
  ...
  <link rel="preload" href="styles.css" as="style" />
  <link rel="preload" href="ui.js" as="script" />
  ...
</head>
W przypadku linków z wstępnym wczytywaniem żądania style.css i ui.js są wysyłane jednocześnie co żądania app.js.
W przypadku linków z wstępnym wczytywaniem żądania styles.css i ui.js są wysyłane w tym samym czasie co app.js.

Więcej wskazówek znajdziesz w sekcji Wstępnie wczytuj najważniejsze zasoby, by przyspieszyć wczytywanie.

Zgodność z przeglądarką

Od czerwca 2020 roku wstępne wczytywanie jest obsługiwane w przeglądarkach opartych na Chromium. Aktualizacje znajdziesz w artykule Zgodność z przeglądarką.

Tworzenie obsługi narzędzia do wstępnego wczytywania

Zajrzyj na stronę wstępnego wczytywania zasobów narzędzia Tooling.Report.

Wskazówki dotyczące stosu

Angular

Wstępnie wczytuj trasy, aby przyspieszyć nawigację.

Magento

Zmodyfikuj układ swoich motywów i dodaj tagi <link rel=preload>.

Zasoby