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.
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.
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.
Bella Simo! Figata di sito che ti sei fatto. Un saluto smanettone, gio
Grazie Gio, spero di fare anche un articolo sugli smanettoni prima o poi..
Ciao Simone,
sto seguendo la tua guida per fare la precarica dei fonts ma non riesco a farla. Google Page Speed mi evidenzia questi 4 fonts:
…fonts/ffwd.ttf?4bafj3 risparmio stimato 3.120 ms
…webfonts/fa-brands-400.woff2 risparmio stimato 2.100 ms
…webfonts/fa-solid-900.woff2 risparmio stimato 1.980 ms
…fonts/eicons.woff2?5.10.0 risparmio stimato 1.950 ms
Questi sono i links ai fonts:
https://www.miosito.it/wp-content/plugins/wd-facebook-feed/css/fonts/ffwd.ttf?4bafj3
https://www.miosito.it/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-brands-400.woff2
https://www.miosito.it/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-solid-900.woff2
https://www.miosito.it/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.woff2?5.10.0
Come deve essere la stringa nella head? così?
oppure va messo tutto l’url così?
Le ho provate tutte ma non sembra funzionare. Inoltre avendo 4 fonts devo fare 4 stringhe distinte od una inserendo href per ogni font?
grazie Carlo
Ciao Carlo,
scusa per il ritardo nella risposta. Cerco di darti alcune indicazioni, nei limiti delle mie capacità:
– Ti dico subito che i link che hai riportato non funzionano (forrse nel frattempo hai spostato i fonts altrove?). Assicurati che i link siano corretti;
– riporto il passo della guida google su come deve essere la stringa in head per il preload dei font:
Some types of resources, such as fonts, are loaded in anonymous mode. For those you must set the crossorigin attribute with preload:
nel tuo caso, mettendo tutto l’url, dovrebbe diventare, per i .woff2,
fai quattro stringhe distinte, e ti consiglio di farle una alla volta per verificare se funzionino o se qualche font/url ti dia problemi.
– ti linko un’altra guida con esempio e sandbox: https://web.dev/codelab-preload-web-fonts/
Saluti,
Simone