Come usare prefetch, preconnect e preload per velocizzare WordPress
Ogni volta che il browser carica una pagina del tuo sito, deve risolvere DNS, stabilire connessioni e scaricare risorse. Queste operazioni richiedono tempo. Con i resource hints — prefetch, preconnect e preload — puoi dire al browser di anticipare queste operazioni, riducendo i tempi di caricamento. In questa guida ti spiego come usarli correttamente in WordPress.
Cosa sono i resource hints
I resource hints sono istruzioni che inserisci nell’<head> della pagina per suggerire al browser di preparare risorse in anticipo. Non sono obblighi: il browser può ignorarli se la rete è lenta o la CPU è occupata. Esistono tre tipi principali:
- dns-prefetch: risolve il DNS di un dominio esterno in anticipo.
- preconnect: risolve DNS, stabilisce la connessione TCP e completa l’handshake TLS con un dominio esterno.
- preload: scarica una risorsa specifica con alta priorità prima che il browser la scopra nel CSS o nel JavaScript.
DNS Prefetch: risolvere i domini in anticipo
Quando il browser incontra una risorsa su un dominio esterno (es. fonts.googleapis.com), deve prima risolvere il DNS. Questa operazione può richiedere 20-120 millisecondi. Con dns-prefetch, il browser risolve il DNS appena trova il hint nell’head, senza aspettare di incontrare la risorsa.
<link rel="dns-prefetch" href="//fonts.googleapis.com"> <link rel="dns-prefetch" href="//www.google-analytics.com"> <link rel="dns-prefetch" href="//cdn.jsdelivr.net">
Usa dns-prefetch per tutti i domini esterni da cui il tuo sito carica risorse. Il costo è minimo (una singola query DNS) e il beneficio è immediato.
Preconnect: connessione completa anticipata
preconnect fa tutto quello che fa dns-prefetch, più la connessione TCP e l’handshake TLS. È più costoso ma anche più efficace, risparmiando fino a 300 ms per connessione su reti lente.
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
L’attributo crossorigin è necessario quando la risorsa viene scaricata in modalità CORS (come i font). Senza questo attributo, il browser potrebbe stabilire due connessioni separate.
Regola pratica: usa preconnect per i 2-3 domini esterni più importanti (font, CDN principale, analytics). Per gli altri domini, usa dns-prefetch che è meno costoso. Troppi preconnect possono essere controproducenti perché saturano le connessioni disponibili.
Preload: scaricare risorse critiche
preload è diverso dagli altri due: non anticipa la connessione a un dominio ma scarica una risorsa specifica con alta priorità. È utile per risorse che il browser scoprirebbe tardi, come font dichiarati dentro un file CSS o immagini di sfondo.
<link rel="preload" href="/wp-content/themes/mio-tema/fonts/mio-font.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/wp-content/themes/mio-tema/images/hero.webp" as="image">
L’attributo as è obbligatorio e indica al browser il tipo di risorsa, permettendogli di assegnare la priorità corretta. I valori comuni sono: font, image, style, script.
Attenzione: usa preload con moderazione. Precaricare troppe risorse toglie banda alle risorse che il browser scaricherebbe naturalmente. Precarica solo le risorse critiche per il contenuto above the fold.
Come implementare i resource hints in WordPress
Ci sono tre modi per aggiungere i resource hints al tuo sito WordPress:
Metodo 1: functions.php
function add_resource_hints() {
echo '<link rel="preconnect" href="https://fonts.googleapis.com">' . "n";
echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>' . "n";
echo '<link rel="dns-prefetch" href="//www.google-analytics.com">' . "n";
}
add_action('wp_head', 'add_resource_hints', 1);
La priorità 1 nell’hook wp_head assicura che i resource hints vengano inseriti il prima possibile nell’head.
Metodo 2: plugin di caching
Plugin come WP Rocket, FlyingPress e Perfmatters hanno opzioni dedicate per aggiungere preconnect e dns-prefetch. Vai nelle impostazioni del plugin, nella sezione dedicata alle ottimizzazioni e aggiungi i domini.
Metodo 3: filtro wp_resource_hints
WordPress ha un filtro nativo per i resource hints:
function custom_resource_hints($hints, $relation_type) {
if ('preconnect' === $relation_type) {
$hints[] = array(
'href' => 'https://fonts.gstatic.com',
'crossorigin' => 'anonymous',
);
}
if ('dns-prefetch' === $relation_type) {
$hints[] = '//www.google-analytics.com';
}
return $hints;
}
add_filter('wp_resource_hints', 'custom_resource_hints', 10, 2);
Prefetch: precaricare la prossima pagina
Un quarto tipo di resource hint è prefetch, che scarica in background una risorsa che potrebbe servire nella navigazione successiva. Ad esempio, se sai che la maggior parte dei visitatori dalla homepage va alla pagina “Servizi”, puoi precaricarla:
<link rel="prefetch" href="/servizi/">
Il browser scarica la pagina in background con bassa priorità, senza interferire con il caricamento della pagina corrente. Quando l’utente clicca il link, la pagina si carica istantaneamente dalla cache. Plugin come Flying Pages e Instant.page automatizzano questo processo precacricando le pagine quando l’utente passa il mouse sopra un link.
Verificare che i resource hints funzionino
Per verificare che i tuoi resource hints siano attivi:
- Apri gli Strumenti per sviluppatori del browser (F12).
- Vai nella scheda Network.
- Ricarica la pagina e filtra per “Other” o cerca le richieste DNS/connect.
- Nella scheda Elements, cerca i tag link nell’head per verificare che siano presenti.
Puoi anche usare WebPageTest.org per vedere il waterfall completo del caricamento e verificare che le connessioni vengano stabilite in anticipo.
Serve assistenza?
Se vuoi ottimizzare i tempi di caricamento del tuo sito WordPress con i resource hints, il team di SoccorsoWP può configurare tutto per te. Apri un ticket e velocizza il tuo sito.
