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](https://developer.chrome.com/static/docs/lighthouse/performance/uses-rel-preload/image/a-screenshot-the-lightho-a0f22e9688496.png?authuser=4&hl=pl)
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.](https://developer.chrome.com/static/docs/lighthouse/performance/uses-rel-preload/image/without-preload-links-st-f9c93e03b4029.png?authuser=4&hl=pl)
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.
Deklarowanie linków z wyprzedzeniem
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.](https://developer.chrome.com/static/docs/lighthouse/performance/uses-rel-preload/image/with-preload-links-style-da7d794e22995.png?authuser=4&hl=pl)
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>
.