Sekcja Możliwości w raporcie Lighthouse wskazuje 3 poziom żądań w łańcuchu krytycznych żądań jako wstępne wczytanie kandydatów:
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.
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>
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>
.