Nell’attuale panorama digitale i tempi di caricamento dei siti web sono diventati cruciali: i visitatori si aspettano che le pagine web si carichino velocemente. Se un sito è lento, è probabile che gli utenti lo abbandonino e cerchino alternative più efficienti.
Gli sviluppatori web possono migliorare le prestazioni dei siti web e ridurre i tempi di caricamento utilizzando una tecnica chiamata prefetching.
In questo articolo esploreremo cos’è il prefetching, come funziona e perché dovresti considerare di implementarlo.
Cos’è il prefetching?
In informatica si definisce prefetching il caricamento (fetch) di una risorsa prima che essa sia necessaria in modo da ridurre il tempo di attesa per quella risorsa.
Il prefetching è una tecnica che consente di anticipare il caricamento di risorse (come immagini, script o file CSS) prima che siano richieste in modo esplicito dall’utente. Questo approccio può ridurre di molto i tempi di caricamento delle pagine web, migliorando l’esperienza dell’utente finale.
Durante il prefetching, il browser scarica in background le risorse che potrebbero essere necessarie in futuro. Così, quando l’utente visita le pagine del sito, le risorse richieste sono già nella cache del browser e si caricano velocemente.
Vantaggi del prefetching
- Tempi di caricamento più rapidi: le pagine web si aprono più velocemente, migliorando l’esperienza dell’utente (UX);
- Riduzione del carico sul server: poiché alcune risorse vengono scaricate in anticipo, il server riceve meno richieste simultanee;
- Miglioramento delle prestazioni complessive: il prefetching può contribuire a ottimizzare l’utilizzo delle risorse di rete e migliorare le prestazioni generali del sito web.
Tipi di prefetching
Il prefetching è stato introdotto per la prima volta in HTML5 ed esistono due standard W3C: Link preload e Resource hints
- Link preload: sono richieste di specifiche URLs. Le più comuni includono JavaScript, CSS, immagini e font web.
- Resource hints: i più comuni includono query DNS, apertura di connessioni TCP e pre-rendering delle pagine.
Preconnect
rel=”preconnect” informa il browser che la tua pagina intende stabilire una connessione con un’altra origine e che desideri che il processo inizi il prima possibile.
<link rel="preconnect" href="https://third-party-example.com" />Questa connessione viene ottenuta ma non utilizzata direttamente. Rimarrà nel connection pool per un utilizzo successivo.
Usa preconnect con saggezza
Nell’utilizzo del preconnect bisogna tenere conto che:
- preconnect è efficace solo per le risorse di terze parti e non per le risorse servite dal tuo server host;
- preconnect dovrebbe essere usato con attenzione poiché può comunque richiedere tempo di CPU prezioso e ritardare altre risorse importanti, in particolare, su connessioni sicure;
- il browser chiude qualsiasi connessione non utilizzata entro 10 secondi, quindi preconnect dovrebbe essere utilizzato solo per risorse critiche su domini di terze parti;
- per tutte le altre risorse di terze parti, si può utilizzare dns-prefetch per ridurre i tempi di ricerca DNS.
DNS prefetching
rel=”dns-prefetch” gestisce un piccolo sottoinsieme di ciò che viene gestito da <link rel="preconnect">.
Stabilire una connessione implica la ricerca DNS e l’handshake TCP e, per origini sicure, negoziazioni TLS.
rel=”dns-prefetch” indica al browser di risolvere solo il DNS di un dominio specifico prima che venga chiamato esplicitamente.
Quindi è bene utilizzare <link rel="preconnect"> per le connessioni più critiche mentre per domini di terze parti meno critici meglio utilizzare <link rel="dns-prefetch">.
<link rel="dns-prefetch" href="https://cdn.mysite.com" />Aumenta la velocità di CDN con il DNS Prefetch
Il DNS prefetching può essere molto utile per i siti web che utilizzano content delivery networks (CDN). Risolvendo i nomi di dominio in anticipo, il browser può iniziare a caricare le risorse da questi domini il più presto possibile.
Quando si richiede un file dalla CDN per la prima volta, non è necessario attendere la ricerca DNS. È probabile che il file sia già risolto e in attesa nella cache.
Questo può ridurre il tempo di caricamento del tuo sito web da pochi a qualche centinaio di millisecondi.
Preload
rel=”preload” informa il browser che è necessaria una risorsa come parte della navigazione corrente e che dovrebbe iniziare a essere recuperata il prima possibile.
Gli user-agents possono eseguire operazioni aggiuntive quando viene caricata una risorsa, ad esempio la decodifica preventiva delle immagini o la creazione di fogli di stile. Tuttavia, queste operazioni aggiuntive non possono avere effetti osservabili.
preload ti dà quindi un maggiore controllo sul processo di caricamento della pagina, consentendo di scaricare gli script in anticipo, ma di eseguirli in seguito. Ciò impedisce agli script di bloccare il thread principale nelle fasi critiche del caricamento della pagina, consentendo agli utenti di interagire più velocemente con la pagina.
Tali ottimizzazioni possono portare a cambiamenti nei Core Web Vitals del tuo sito ed è importante esserne consapevoli.
Il preload può avere un impatto su Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Time to Interactive (TTI), First Input Delay (FID) e Interaction to Next Paint (INP).
Preload degli script
I browser non eseguono file precaricati, quindi il preload separa il recupero del file dall’esecuzione, migliorando il Time to Interactive degli script.
<link rel="preload" href="script.js" as="script" />Preload dei fogli di stile
Aspettare l’esecuzione di JavaScript prima di caricare CSS non essenziali può causare ritardi nel rendering quando gli utenti scorrono la pagina. È meglio usare preload per avviare il download in anticipo.
<link rel="preload" href="style.css" as="style" />Preload di risorse definite nei CSS
I caratteri definiti con @font-face o immagini di sfondo definite nei file CSS non vengono rilevati finché il browser non scarica e analizza tali file CSS.
Il preload di queste risorse garantisce quindi che vengano recuperate prima del download dei file CSS.
<link rel="preload" href="Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin />ATTENZIONE! I caratteri precaricati senza attributo crossorigin verranno recuperati due volte!
Prefetch
rel=”prefetch” è un po’ diverso da <link rel="preload"> e <link rel="preconnect">, nel senso che non tenta di far accadere qualcosa di critico più velocemente; cerca invece di far sì che qualcosa di non critico accada prima, se ce n’è la possibilità.
<link rel="prefetch" href="/articles/" as="document" />Funziona però solo per le risorse che possono essere memorizzate nella cache, come CSS, immagini, JavaScript, ecc. Quando una risorsa viene precaricata in cache, viene consegnata rapidamente quando l’utente naviga su una pagina con quella risorsa. Questo perché la risorsa è stata già recuperata in precedenza.
Un problema potrebbe essere che se un utente non visita la pagina con la risorsa precaricata, il suo browser avrà già scaricato la risorsa inutilmente. Questo aumenta la dimensione della cache senza benefici.
Prefetching e intelligenza artificiale
Negli ultimi anni, il prefetching è stato adottato in combinazione con algoritmi di intelligenza artificiale (AI).
eBay ha implementato il prefetching per i primi cinque risultati nella pagina di ricerca per accelerare i caricamenti futuri delle pagine e ha riscontrato un impatto positivo sui tassi di conversione.
Fonte: Web.dev
Questi algoritmi consentono di analizzare i percorsi di navigazione e prevedere quali dati potrebbero essere richiesti in futuro. Tale metodo può migliorare la precisione della navigazione, perché l’AI può trovare schemi non evidenti agli umani.
Vuoi aumentare le performance del tuo e-commerce? Contattaci per una consulenza e scopri cosa possiamo fare per il tuo store online!
