Precarica le risorse critiche per migliorare la velocità di caricamento delle pagine web

Quando si apre una pagina Web, il browser richiede il documento HTML da un server, analizza il suo contenuto e invia richieste separate per qualsiasi risorsa di riferimento. Come sviluppatore, conosci già tutte le risorse necessarie alla tua pagina e quali sono le più importanti. È possibile utilizzare tali conoscenze per richiedere in anticipo le risorse critiche e accelerare il processo di caricamento. Questo post spiega come raggiungerlo con .

Come funziona il precaricamento #
Il precaricamento è più adatto per le risorse generalmente scoperte in ritardo dal browser.

Schermata del pannello Chrome DevTools Network.
In questo esempio, il carattere Pacifico è definito nel foglio di stile con una regola @font-face . Il browser carica il file del carattere solo dopo aver completato il download e l’analisi del foglio di stile.
Precaricando una determinata risorsa, stai dicendo al browser che vorresti recuperarla prima che il browser la scoprirà altrimenti perché sei sicuro che sia importante per la pagina corrente.

Schermata del pannello Chrome DevTools Network dopo aver applicato il precaricamento.
In questo esempio, il carattere Pacifico è precaricato, quindi il download avviene in parallelo con il foglio di stile.
La catena di richieste critiche rappresenta l’ordine delle risorse prioritarie e recuperate dal browser. Lighthouse identifica le risorse che si trovano al terzo livello di questa catena come scoperte in ritardo. È possibile utilizzare il controllo delle richieste della chiave di precaricamento per identificare quali risorse precaricare.

La chiave di precarico di Lighthouse richiede l’audit.
Puoi precaricare le risorse aggiungendo un tag con rel=”preload” all’inizio del documento HTML:

< link rel = " preload " as = " script " href = " critical.js " >
Il browser memorizza nella cache le risorse precaricate in modo che siano immediatamente disponibili quando necessario. (Non esegue gli script né applica i fogli di stile.)

Dopo aver implementato il precaricamento, molti siti, tra cui Shopify, Financial Times e Treebo, hanno visto miglioramenti di 1 secondo nelle metriche incentrate sull’utente come Time to Interactive e First Contentful Paint .

I suggerimenti sulle risorse, ad esempio preconnect e prefetch , vengono eseguiti secondo le esigenze del browser. Il preload , d’altra parte, è obbligatorio per il browser. I browser moderni sono già abbastanza abili nel dare la priorità alle risorse, ecco perché è importante usare il preload con parsimonia e precaricare solo le risorse più importanti.

I precarichi non utilizzati attivano un avviso Console in Chrome, circa 3 secondi dopo l’evento di load .

Chrome DevTools Console: avviso relativo a risorse precaricate non utilizzate.
preload è supportato in tutti i browser moderni ad eccezione di Firefox.

Casi d’uso #
Risorse di precaricamento definite in CSS #
I caratteri definiti con le regole @font-face o le immagini di sfondo definite nei file CSS non vengono scoperti fino a quando il browser non scarica e analizza quei file CSS. Il precaricamento di queste risorse garantisce che vengano recuperate prima che i file CSS siano stati scaricati.

Precaricare i file CSS #
Se si utilizza l’ approccio CSS critico , dividere il CSS in due parti. Il CSS critico richiesto per il rendering del contenuto above the fold è inserito nella del documento e il CSS non critico è di solito caricato con JavaScript. Attendere l’esecuzione di JavaScript prima di caricare CSS non critici può causare ritardi nel rendering quando gli utenti scorrono, quindi è una buona idea usare per avviare il download prima.

Precaricare i file JavaScript #
Poiché i browser non eseguono file precaricati, il precaricamento è utile per separare il recupero dall’esecuzione che può migliorare metriche come Time to Interactive. Il precaricamento funziona meglio se dividi i bundle JavaScript e precarichi solo blocchi critici.

Come implementare rel = preload #
Il modo più semplice per implementare il preload è aggiungere un tag alla del documento:

< head >
< link rel = " preload " as = " script " href = " critical.js " >

Fornire l’attributo as aiuta il browser a impostare la priorità della risorsa precaricata in base al suo tipo, impostare le intestazioni giuste e determinare se la risorsa esiste già nella cache. I valori accettati per questo attributo includono: script , style , font , image e altri .

Dai un’occhiata al documento Priorità delle risorse e pianificazione di Chrome per saperne di più su come il browser dà la priorità ai diversi tipi di risorse.

Attenzione: omettere l’attributo as o avere un valore non valido equivale a una richiesta XHR, in cui il browser non sa cosa sta recuperando, quindi non può determinare la priorità corretta. Può anche causare il recupero di alcune risorse, come gli script, due volte.

Alcuni tipi di risorse, come i caratteri, vengono caricati in modalità anonima . Per quelli è necessario impostare l’attributo crossorigin con il preload :

< link rel = " preload " href = " ComicSans.woff2 " as = " font " type = " font/woff2 " crossorigin >
Attenzione: i caratteri precaricati senza l’attributo crossorigin verranno recuperati due volte!

Provalo! Migliora le prestazioni di una pagina precaricando i caratteri web .

Puoi anche precaricare qualsiasi tipo di risorsa tramite l’ intestazione Link HTTP :

Link: ; rel=”preload”; as=”style”

Un vantaggio di specificare il preload nell’intestazione HTTP è che il browser non ha bisogno di analizzare il documento per scoprirlo, il che può offrire piccoli miglioramenti in alcuni casi.

Precarico dei moduli JavaScript con webpack #
Se si utilizza un bundle di moduli che crea file di build dell’applicazione, è necessario verificare se supporta l’iniezione di tag di precaricamento. Con la versione 4.6.0 o successiva del webpack , il precaricamento è supportato mediante l’uso di commenti magici all’interno di import() :

import ( _ /* webpackPreload: true */ _ “CriticalChunk” )
Se si utilizza una versione precedente di webpack, utilizzare un plug-in di terze parti come preload-webpack-plugin .

Conclusione n.
Per migliorare la velocità della pagina, precaricare risorse importanti che vengono scoperte in ritardo dal browser. Il preload tutto sarebbe controproducente, quindi usa il preload con parsimonia e misura l’impatto nel mondo reale .