La sezione Opportunità del report Lighthouse segnala il terzo livello di richieste nella catena di richieste critiche come candidati di precaricamento:

In che modo i flag di Lighthouse determinano i candidati per il precaricamento
Supponiamo che la tua pagina catena di richieste critiche ha il seguente aspetto:
index.html |--app.js |--styles.css |--ui.js
Il tuo file index.html
dichiara <script src="app.js">
. Quando app.js
esegue , chiama
fetch()
per scaricare styles.css
e ui.js
. La pagina non sembra completa
fino a quando le ultime due risorse non vengono scaricate, analizzate ed eseguite.
Utilizzando l'esempio precedente, Lighthouse contrassegna styles.css
e ui.js
come candidati.
I risparmi potenziali si basano sull'anticipo che il browser potrebbe riuscire a
per avviare le richieste se hai dichiarato i link di precaricamento.
Ad esempio, se app.js
impiega 200 ms per scaricare, analizzare ed eseguire,
il risparmio potenziale per ogni risorsa è di 200 ms, poiché app.js
non rappresenta più un collo di bottiglia per ciascuna richiesta.
Le richieste di precaricamento possono accelerare il caricamento delle pagine.

styles.css
e
ui.js
sono richiesti solo dopo il download di app.js
,
analizzati ed eseguiti.
Il problema è che il browser viene a conoscenza
di queste ultime due risorse dopo il download, l'analisi e l'esecuzione di app.js
.
Ma sai che queste risorse sono importanti e
dovrebbe essere scaricato il prima possibile.
Dichiara i tuoi link di precaricamento
Dichiara i link di precaricamento nel tuo codice HTML per indicare al browser di scaricare le risorse chiave il prima possibile.
<head>
...
<link rel="preload" href="styles.css" as="style" />
<link rel="preload" href="ui.js" as="script" />
...
</head>

styles.css
e
ui.js
sono richiesti contemporaneamente a app.js
.
Vedi anche Precaricare gli asset critici per migliorare la velocità di caricamento per ulteriori indicazioni.
Compatibilità del browser
A partire da giugno 2020, il precaricamento è supportato nei browser basati su Chromium. Consulta Compatibilità del browser per aggiornamenti.
Supporto degli strumenti di creazione per il precaricamento
Consulta la sezione Precaricamento degli asset di Tooling.Report .
Indicazioni specifiche per stack
Angular
Precarica le route in anticipo per velocizzare la navigazione.
Magento
Modificare il layout dei temi
e aggiungi i tag <link rel=preload>
.