Usare preload e preconnect per font e asset in WordPress

I resource hints sono piccole istruzioni <link> nel <head> di una pagina con cui indichi al browser quali risorse deve gestire per prime. Le tre più importanti sono rel="preconnect" (stabilisce in anticipo la connessione – DNS, TCP, TLS – verso un dominio esterno), rel="dns-prefetch" (risolve solo il nome DNS in anticipo, un fallback economico per i browser più vecchi) e rel="preload" (scarica un file specifico con alta priorità prima che il browser lo scopra nel documento). Usati correttamente, accorciano il Largest Contentful Paint (LCP) spesso di 100-400 ms, perché l'immagine più importante e i font non restano più in fondo alla catena di caricamento. Usati in modo scorretto o troppo generoso, tuttavia, danneggiano: ogni preload compete per la banda, e troppi hint rallentano proprio le risorse che dovrebbero essere veloci. Questa guida mostra quando e come impostare gli hint in modo mirato in WordPress.

I tre hint in sintesi

Hint	Cosa fa	Per cosa
`preconnect`	stabilire in anticipo DNS + TCP + TLS verso il dominio esterno	host di font, CDN, analytics – domini da cui si carica presto
`dns-prefetch`	solo risoluzione DNS in anticipo	fallback economico e per domini necessari un po' più tardi
`preload`	caricare subito un file specifico con alta priorità	immagine LCP, web font critici, CSS critico

Passo 1: Identificare le risorse critiche

Apri le Chrome DevTools, scheda Network, ricarica la pagina e osserva il diagramma a cascata. Determina:

L'elemento LCP: di solito la grande immagine hero in alto. Nella scheda Performance o in Lighthouse è contrassegnato come "Largest Contentful Paint element".
I font necessari al testo visibile (i font caricati tardi causano il "Flash of Unstyled Text").
I domini esterni da cui si carica presto (Google Fonts, un CDN di immagini, un host di icone).

Solo queste poche risorse ricevono un hint, non ogni file.

Passo 2: Preconnect per i domini esterni

Se la tua pagina incorpora risorse da un altro dominio, con preconnect risparmi l'apertura della connessione. Esempio per un host di font o un CDN:

<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="https://cdn.example.com">

L'attributo crossorigin è obbligatorio per i font e le altre risorse caricate in modo anonimo, altrimenti la connessione aperta in anticipo non viene riutilizzata. Il dns-prefetch sottostante funge da fallback per i browser senza supporto a preconnect.

Nota su Google Fonts: Il modo più veloce è ospitare Google Fonts localmente e rinunciare del tutto al dominio esterno. Se non è possibile, aiuta un preconnect verso fonts.gstatic.com.

Passo 3: Preload per l'immagine LCP e i font

Precaricare l'immagine LCP

<link rel="preload" as="image"
      href="/wp-content/uploads/2026/07/hero.avif"
      type="image/avif"
      fetchpriority="high">

In alternativa – e spesso in modo più elegante – imposta fetchpriority="high" direttamente sul tag <img> dell'immagine hero e rimuovi il lazy loading per quell'immagine, invece di usare un preload separato.

Precaricare un font

<link rel="preload" as="font" type="font/woff2"
      href="/wp-content/themes/mein-theme/fonts/inter.woff2"
      crossorigin>

Per i font, crossorigin è necessario anche sullo stesso dominio, perché i font vengono sempre caricati in modo anonimo.

Implementazione in WordPress

Variante A: tramite functions.php

Aggiungi gli hint tramite l'hook wp_head (nel functions.php del child theme):

add_action( 'wp_head', function () {
    ?>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preload" as="font" type="font/woff2"
          href="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/fonts/inter.woff2"
          crossorigin>
    <?php
}, 1 ); // Priorita 1 = il piu presto possibile nell head

Variante B: tramite il filtro resource_hints

Per preconnect e dns-prefetch, WordPress offre il filtro ufficiale wp_resource_hints:

add_filter( 'wp_resource_hints', function ( $hints, $relation_type ) {
    if ( 'preconnect' === $relation_type ) {
        $hints[] = array(
            'href'        => 'https://fonts.gstatic.com',
            'crossorigin' => 'anonymous',
        );
    }
    return $hints;
}, 10, 2 );

Variante C: tramite un plugin

Plugin di ottimizzazione come WP Rocket, Perfmatters o FlyingPress offrono campi in cui inserire URL di preload e preconnect, senza codice.

Come misuro l'effetto?

Esegui Lighthouse (Chrome DevTools, scheda Lighthouse) prima e dopo la modifica e confronta il valore di LCP.
Nella scheda Network, verifica che l'immagine LCP e i font ora partano prima nella catena (priorità "High").
PageSpeed Insights non dovrebbe più mostrare le diagnosi "Largest Contentful Paint image was lazily loaded" o "Preconnect to required origins".

Errori frequenti

Troppi preload: Se si precarica tutto, non c'è più nulla di prioritario. Limitati a 1–2 immagini e 1–2 font.
Preload senza uso: Un asset caricato tramite preload ma non usato entro pochi secondi genera nella console l'avviso "was preloaded but not used" e spreca banda.
Dimenticare crossorigin: Se manca sui font, il browser scarica il file due volte (una tramite preload in modo anonimo, una in modo normale).
Preconnect verso troppi domini: Ogni connessione aperta costa risorse. Più di 4–6 preconnect hanno raramente senso.
Valore as errato: as="image", as="font", as="style" devono corrispondere al tipo di risorsa, altrimenti il preload viene ignorato.

Domande frequenti (FAQ)

Qual è la differenza tra preload e preconnect?

preconnect stabilisce in anticipo la connessione (DNS, TCP, TLS) verso un dominio esterno, ma non carica ancora alcun file. preload scarica un file specifico con alta priorità prima che il browser lo scopra nel documento. preconnect si usa per host di font o CDN, preload per l'immagine LCP e i font critici.

Perché i font hanno bisogno dell'attributo crossorigin nel preload?

I font vengono sempre caricati in modo anonimo (in modalità CORS) dal browser, anche dallo stesso dominio. Se manca l'attributo crossorigin nel preload, la richiesta precaricata non coincide con la successiva richiesta del font e il browser scarica il file due volte. Per questo crossorigin è sempre necessario con preload as="font".

Quante risorse dovrei precaricare?

Il meno possibile. Se si precarica tutto, non c'è più nulla di prioritario e gli hint rallentano proprio le risorse che dovrebbero essere veloci. Limitatevi a 1 o 2 immagini e 1 o 2 font, oltre a un massimo di 4 a 6 preconnect.

Cosa significa l'avviso della console "preloaded but not used"?

Questo avviso compare quando una risorsa caricata tramite preload non viene usata nella pagina entro pochi secondi. Il preload spreca allora banda. Verificate se il valore as (image, font, style) è corretto e se l'URL precaricato coincide esattamente con l'URL usato in seguito.

Come aiuta InspectWP con i resource hints?

InspectWP rileva le risorse <link> presenti nel <head> nonché i domini esterni e i font incorporati. Il report mostra quali host esterni vengono contattati presto e dove vengono caricati font di terze parti, buoni punti di partenza per usare in modo mirato preconnect o un hosting locale.