Precarica le richieste chiave

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

Uno screenshot del controllo delle richieste di chiavi di precaricamento di Lighthouse

In che modo i flag di Lighthouse determinano i candidati di precaricamento

Supponiamo che la catena di richieste fondamentali della tua pagina abbia il seguente aspetto:

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

Il file index.html dichiara <script src="app.js">. Quando app.js viene eseguito , chiama fetch() per scaricare styles.css e ui.js. La pagina non sembra completa finché le ultime due risorse non vengono scaricate, analizzate ed eseguite. Utilizzando l'esempio precedente, Lighthouse segnala styles.css e ui.js come candidati.

I potenziali risparmi si basano su quanto prima il browser potrebbe avviare le richieste se hai dichiarato i link di precaricamento. Ad esempio, se app.js impiega 200 ms per scaricare, analizzare ed eseguire, il potenziale risparmio per ogni risorsa è di 200 ms, poiché app.js non è più un collo di bottiglia per ciascuna delle richieste.

Le richieste di precaricamento possono accelerare il caricamento delle pagine.

Senza link di precaricamento, gli stili.css e ui.js vengono richiesti solo dopo che il file app.js è stato scaricato, analizzato ed eseguito.
Senza link di precaricamento, le richieste styles.css e ui.js vengono richieste solo dopo che app.js è stato scaricato, analizzato ed eseguito.

Il problema è che il browser viene a conoscenza delle ultime due risorse solo dopo aver scaricato, analizzato ed eseguito app.js. Tuttavia, sai bene che queste risorse sono importanti e devono essere scaricate il prima possibile.

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>
Con i link di precaricamento, gli stili.css e ui.js vengono richiesti contemporaneamente ad app.js.
Con i link di precaricamento, styles.css e ui.js vengono richiesti contemporaneamente a app.js.

Per ulteriori indicazioni, consulta anche Precaricare gli asset critici per migliorare la velocità di caricamento.

Compatibilità del browser

A partire da giugno 2020, il precaricamento è supportato nei browser basati su Chromium. Per gli aggiornamenti, consulta Compatibilità del browser.

Supporto degli strumenti di creazione per il precaricamento

Consulta la pagina Precaricamento degli asset di Tooling.Report.

Indicazioni specifiche per lo stack

Angular

Precarica i percorsi in anticipo per velocizzare la navigazione.

Magento

Modifica il layout dei temi e aggiungi i tag <link rel=preload>.

Risorse