Precaricare, velocizzare

Posted on

Una fantastica guida di Google spiega in modo chiaro e colorato tutta la faccenda. Io la riassumo a parole mie.

Il concetto è relativamente semplice: quando il browser inzia a caricare una pagina, per ogni riga di istruzioni che incontra deve:

1: scaricare il materiale;

2: leggerlo;

3: eseguirlo;

4: passare all’istruzione successiva.

Ora, questo procedimento ha molto senso, ma è anche molto basico e completamente seriale. Infatti, durante la lettura e il caricamento, non viene sfruttata banda di connessione, che invece potrebbe già essere impiegata per scaricare le istruzioni successive.

La soluzione è indicare al browser di precaricare certe istruzioni mentre sta eseguendo le altre. Per farlo si usa il comando “preload”, da inserire come <link rel=”preload”…> all’interno dell'<head>. Viene eseguito da tutti i browser moderni tranne Firefox (per ora). La sintassi è leggermente diversa a seconda del tipo di contenuto che si vuole precaricare:

  • Script:
<link rel="preload" as="script" href="critical.js">
  • CSS:
<link rel="preload" as="style" href="stylesheet.css">
  • Fonts:
<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>

Per sapere se e quali delle varie istruzioni ci conviene precaricare, basta fare un’analisi della velocità della propria pagina con Google Pagespeed Insight.

Risultati di PageSpeed Insights per la home page del Ministero dell'innovazione
Risultati di PageSpeed Insights per la home page del Ministero dell’innovazione

Tra le varie voci di miglioramento, sarà anche eventualmente indicato se e cosa avrebbe senso precaricare, con una stima del tempo risparmiato. Fornisce anche il link alla risorsa, in modo che basti copiarlo e inserirlo nel campo href=”link” dei casi precedenti. Molto comodo!

Ora rimane un problema solo: se il sito è su WordPress, non è così immediato andare a scrivere il codice tra i blocchi <head> </head>. L’editor HTML delle pagine, infatti, agisce solo all’interno del <body>.

Per risolvere questo inghippo, si può andare a cercare la pagina a mano nel database o affidarsi ad un plugin che rende tutto molto semplice, lasciando solo il compito di scrivere i pezzi di codice che vogliamo aggiungere. Entrambe le strade sono spiegate chiaramente in questa guida su Kinsta.

Copertina guida Kinsta - Aggiungere Codice all'Header e al Footer di WordPress
Copertina guida Kinsta – Aggiungere Codice all’Header e al Footer di WordPress

Ho scelto il plugin “Head, Footer and Post Injections“, che si integra nelle impostazioni di WordPress e permette facilmente di modificare il codice di head, body, footer, distinguendo anche tra homepage e altre pagine e tra desktop e mobile.

Installato e attivato il plugin, ho inserito il codice di preload che mi interessava (nel mio caso, realtivo ad un font del template) e ho salvato.

In questo semplice modo, ho risparmiato più di mezzo secondo di caricamento del sito sui dispositivi mobili.

2 Replies to “Precaricare, velocizzare”

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *