Esistono molti metodi di velocizzare il tuo sito web, uno di questi è il caricamento anticipato delle risorse. Questi metodi sono moto semplici da realizzare. Sono 5 tag con l’attributo rel <link rel=””> che indicano al browser di precaricare le risorse. Questi sono degli esempi.
<link rel="prefetch" href="/style.css" as="style" /> <link rel="preload" href="/style.css" as="style" /> <link rel="preconnect" href="https://example.com" /> <link rel="dns-prefetch" href="https://example.com" /> <link rel="prerender" href="https://example.com/about.html" />
Vediamo la sintassi di ogni una di queste proprietà per velocizzare il tuo sito web.
Preload
<link rel= “preload”> – indica al browser di caricare e cashizzare nel modo più veloce possibile la risorsa indicata. E’ utile quando la risorsa dovesse servire tra un paio di secondi dopo il caricamento della pagina e avete bisogno di velocizzare il processo.
Sintassi
<link rel="preload" href="/style.css" as="style" />
href – indica la risorsa che dovete scaricare,
as – è l indicatore del tipo di risorsa scaricabile
- style – per gli stili css
- script – per gli script
- font – per font
- fetch – per le risorse precaricate attraverso fetch() o HtmlHttpREquest.
Quando si utilizza?
Utilizza “preload” quando la risorsa servirà dopo il caricamento completo della pagina. Ad esempio i font:
<link rel="preload" href="monserrat.woff2" as="font" />
Se utilizzate il metodo Crtical CSS in due parti, critico per il caricamento immediato e non critico.
<style>
/* Stili critici */
</style>
<script>
/* Stili non critici*/
loadCSS('/applicazione/cssnoncritico.css');
</script>
Utilizzando questo metodo i stili si inizieranno a caricare nel momento in cui si inizierà a caricare la parte Javascript. Per evitare che ciò succeda, utilizzate:
<link rel="preload" href="monserrat.woff2" as="font" />
Non dovete confondere “preload” con il “prefetch”. Utilizzate “prefetch” quando avrete necessità dello stesso contenuto per la prossima pagina.
Prefetch
“Prefetch” chiede al browser di caricare e salvare nella cash i dati. Questo tipo di caricamento viene utilizzato quando, si ha la necessità di utilizzare la risorsa caricata per la pagina successiva.
<link rel="prefetch" href="monserrat.woff2" as="font" />
Preconnect
“Preconnect” si usa quando si ha la necessità di stabilire una connessione con un dominio per velocizzare il caricamento delle risorse nel futuro. Ad esempio il caricamento di Google Fonts.
<link rel= "preconnect" href="https://api.miosito.it" />
Prerender
“Prerender” chiede al browser di precaricare la pagina e salvarla in una pagina invisibile. In questo modo, quando l’utente passerà alla pagina successiva, il caricamento di essa sarà immediato. E’ consigliato di utilizzare questo metodo solante se sei sicuro che l’utente passerà successivamente alla pagina precaricata.
<link rel="prerender" href="https://my-app.com/pricing" />
Conclusione
Queste funzionalità utilizzate nel modo corretto possono velocizzare l’utilizzo del tuo sito.
Leggi anche: Come ottimizzare un sito web
