01Home02Funzionalità03Come funziona04Prezzi05Blog
Soluzioni
Per freelancer(3-10 siti)Per agenzie(10-50 siti)Per agenzie 50+(50+ siti)
Inizia gratis Hai già un account? Accedi

Resource Hints WordPress: preload, prefetch, preconnect

30 giugno 20268 minPerformance
In breveAI

Guida completa ai resource hints per WordPress: implementazione pratica di preload, prefetch, preconnect e dns-prefetch con esempi PHP, strategie di testing e automazione per agenzie.

Cosa sono i resource hints e perché usarli

I resource hints sono direttive HTML che permettono al browser di ottimizzare il caricamento delle risorse prima che vengano effettivamente richieste. In un contesto WordPress dove gestiamo decine di siti client, implementarli correttamente può ridurre il First Contentful Paint (FCP) del 15-30% secondo i dati di HTTPArchive 2026.

I quattro principali resource hints sono:

  • dns-prefetch: risolve il DNS di un dominio esterno prima che venga richiesto
  • preconnect: stabilisce una connessione completa (DNS + TCP + TLS) con un dominio
  • prefetch: scarica risorse che serviranno nelle navigazioni successive
  • preload: forza il download prioritario di risorse critiche per la pagina corrente

La differenza chiave: preload è per risorse critiche immediate, prefetch per ottimizzare le pagine successive, mentre preconnect e dns-prefetch preparano le connessioni esterne.

Implementare preconnect per servizi esterni

Ogni sito WordPress moderno carica risorse da domini esterni: Google Fonts, CDN, analytics, API. Ogni connessione richiede tempo per DNS lookup, TCP handshake e TLS negotiation.

preconnect esegue questi step in anticipo. Da usare per domini da cui caricheremo sicuramente risorse (massimo 4-6 per non saturare le connessioni del browser).

Esempio pratico: Google Fonts

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Nota il crossorigin su fonts.gstatic.com: obbligatorio per risorse CORS come i file font.

Implementazione in WordPress

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

Il filtro wp_resource_hints è disponibile da WordPress 4.6 e supporta tutti i tipi di hint. Per siti gestiti con AgencyPilot, questa funzione può essere centralizzata in un must-use plugin deployato su tutti i client.

dns-prefetch come fallback

Browser vecchi (pre-2020) potrebbero non supportare preconnect. WordPress aggiunge automaticamente dns-prefetch come fallback, ma puoi forzarlo:

<link rel="dns-prefetch" href="https://analytics.google.com">

Usa dns-prefetch per domini da cui carichi risorse non critiche o dove il risparmio di TCP/TLS è marginale.

Preload per risorse critiche

preload dice al browser: “questa risorsa è fondamentale, scaricala subito con priorità alta”. Va usato con parsimonia (3-5 risorse max) altrimenti diventa controproducente.

Use case reali per WordPress

  • Custom fonts: file WOFF2 usati above the fold
  • Hero image: immagine LCP (Largest Contentful Paint) principale
  • Critical CSS inline: file CSS principale del tema
  • JavaScript critico: script necessari per l’interattività iniziale

Preload di font personalizzati

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

Punti chiave:

  • as="font" specifica il tipo di risorsa
  • type="font/woff2" evita download su browser che non supportano WOFF2
  • crossorigin è obbligatorio anche per font self-hosted (requisito fetch CORS)

Preload dell’immagine LCP

Dal 2025 Google PageSpeed Insights penalizza pesantemente LCP lenti. Se la hero image è il tuo LCP element:

<link rel="preload" as="image" href="/wp-content/uploads/2026/05/hero.webp" imagesrcset="/wp-content/uploads/2026/05/hero-1024.webp 1024w, /wp-content/uploads/2026/05/hero-2048.webp 2048w" imagesizes="100vw">

WordPress 6.3+ ha introdotto il supporto per fetchpriority="high" direttamente nell’img tag, alternativa più semplice al preload per immagini:

<img src="hero.webp" fetchpriority="high" alt="Hero">

Implementazione dinamica via PHP

function agp_preload_critical_assets() {
    // Preload font
    echo '<link rel="preload" href="' . get_template_directory_uri() . '/fonts/main.woff2" as="font" type="font/woff2" crossorigin>';
    
    // Preload CSS critico solo su homepage
    if ( is_front_page() ) {
        echo '<link rel="preload" href="' . get_stylesheet_uri() . '" as="style">';
    }
}
add_action( 'wp_head', 'agp_preload_critical_assets', 1 );

Priorità 1 su wp_head per inserire i preload il prima possibile nel DOM.

Prefetch per ottimizzare la navigazione

prefetch scarica risorse con priorità bassa durante l’idle time, per velocizzare le pagine successive. Perfetto per:

  • Pagine linkate nel menu principale
  • Prossima pagina in archivi paginati
  • Risorse comuni in tutto il sito

Esempio: prefetch della pagina contatti

<link rel="prefetch" href="/contatti/">

Il browser scarica l’HTML durante i tempi morti. Quando l’utente clicca il link, la pagina è già in cache.

Prefetch condizionale in WordPress

function agp_prefetch_likely_pages() {
    // Su blog, prefetch pagina successiva
    if ( is_home() && !is_paged() ) {
        echo '<link rel="prefetch" href="' . get_pagenum_link(2) . '">';
    }
    
    // Su tutti i post, prefetch homepage
    if ( is_single() ) {
        echo '<link rel="prefetch" href="' . home_url() . '">';
    }
}
add_action( 'wp_head', 'agp_prefetch_likely_pages', 20 );

Attenzione: non esagerare. Ogni prefetch consuma banda. Analizza Google Analytics per capire i percorsi utente reali.

Testing e misurazione impatto reale

Implementare resource hints senza misurarne l’effetto è inutile. Strumenti da usare:

Chrome DevTools

  • Network tab: filtra per “priority” e verifica che le risorse preloaded abbiano priorità “Highest”
  • Coverage tab: assicurati che le risorse preloaded vengano effettivamente usate (no warning “preload not used”)
  • Performance tab: confronta timeline prima/dopo con filmstrip

WebPageTest

Configura un test A/B con e senza resource hints. Metriche da monitorare:

  • Start Render: dovrebbe migliorare con preconnect a font/CDN
  • LCP: preload dell’immagine hero può ridurlo di 200-500ms
  • Connection View: mostra visivamente quando vengono aperte le connessioni

Monitoraggio in produzione

Con AgencyPilot puoi tracciare le Core Web Vitals di tutti i client da un’unica dashboard. Dopo aver implementato i resource hints, confronta i valori a 7 giorni:

  • LCP medio dovrebbe calare del 10-25%
  • FCP dovrebbe migliorare del 5-15%
  • CLS non dovrebbe peggiorare (attenzione a preload che spostano layout)

Errori comuni da evitare

Troppi preload

Preload di 10+ risorse satura la banda e ritarda il rendering. Limita a 3-5 risorse realmente critiche. Chrome mostra warning in console se esageri.

Preload di risorse non utilizzate

Se preloadi una risorsa che poi non viene usata entro 3 secondi, Chrome mostra un warning. Capita spesso con:

  • Font preloaded ma usati solo in sezioni below-the-fold
  • JS preloaded ma caricato async/defer senza utilizzo immediato
  • CSS preloaded ma con media query che non matchano

Preconnect a troppi domini

Browser limitano le connessioni simultanee (circa 6 per dominio). Più di 4-6 preconnect satura le risorse. Prioritizza domini da cui carichi più risorse.

Dimenticare crossorigin sui font

Senza crossorigin sui font (anche self-hosted), il browser scarica il file due volte: una per il preload, una per l’utilizzo reale. Spreco totale.

Automazione per agenzie

Gestire resource hints su 50+ siti client manualmente è impraticabile. Strategie di automazione:

Must-use plugin centralizzato

// mu-plugins/agp-performance.php
function agp_global_resource_hints( $urls, $relation_type ) {
    $config = get_option( 'agp_resource_hints_config', array() );
    
    if ( !empty( $config[$relation_type] ) ) {
        foreach ( $config[$relation_type] as $hint ) {
            $urls[] = $hint;
        }
    }
    
    return $urls;
}
add_filter( 'wp_resource_hints', 'agp_global_resource_hints', 10, 2 );

Configurazione centralizzata in AgencyPilot, deployment automatico su tutti i client via must-use plugins.

Conditional loading per template

// Preload hero solo su pagine che effettivamente hanno hero
if ( has_post_thumbnail() && is_singular() ) {
    $thumb_id = get_post_thumbnail_id();
    $thumb_url = wp_get_attachment_image_url( $thumb_id, 'full' );
    echo '<link rel="preload" as="image" href="' . esc_url( $thumb_url ) . '">';
}

Cache dei resource hints

Generare dinamicamente gli hints a ogni pageview è inefficiente. Usa transient API:

function agp_get_cached_hints() {
    $hints = get_transient( 'agp_resource_hints' );
    
    if ( false === $hints ) {
        $hints = agp_generate_hints(); // Logica custom
        set_transient( 'agp_resource_hints', $hints, HOUR_IN_SECONDS );
    }
    
    return $hints;
}

FAQ

Qual è la differenza tra preload e prefetch?

preload forza il download immediato di risorse critiche per la pagina corrente con alta priorità. prefetch scarica risorse per pagine future con bassa priorità durante i tempi morti del browser. Usa preload per font e immagini hero, prefetch per ottimizzare la navigazione tra pagine.

Quando usare preconnect invece di dns-prefetch?

Usa preconnect quando sei certo di caricare risorse da quel dominio (es. Google Fonts, CDN principale) perché completa l’intera connessione (DNS + TCP + TLS). Usa dns-prefetch per domini probabili ma non certi, o per browser legacy. preconnect consuma più risorse quindi limitalo a 4-6 domini massimo.

I resource hints funzionano con i page builder?

Sì, ma richiedono attenzione. Page builder come Elementor e Divi caricano molte risorse dinamicamente. Identifica i file CSS/JS critici caricati sempre (core del builder) e applicagli preconnect per CDN esterni. Per font e immagini hero, usa il sistema di preload del builder se disponibile, o implementa logica condizionale PHP che rileva i widget attivi.

Come verifico se un preload viene effettivamente utilizzato?

Apri Chrome DevTools, tab Network, ricarica la pagina e cerca la risorsa preloaded. Deve mostrare due richieste: una con initiator “preload” e priorità “Highest”, la seconda con l’utilizzo reale. Se vedi un warning giallo “preload not used within a few seconds”, la risorsa non è critica e stai sprecando banda.

Posso preloadare immagini responsive con srcset?

Sì, da HTML5.2. Usa imagesrcset e imagesizes nel link preload per replicare la logica responsive. Esempio: <link rel="preload" as="image" href="default.jpg" imagesrcset="small.jpg 400w, large.jpg 800w" imagesizes="(max-width: 600px) 400px, 800px">. Il browser seleziona automaticamente la variante corretta in base al viewport.

Gestisci i siti WordPress dei tuoi clienti?

AgencyPilot ti dà report AI, uptime monitoring, backup e portale clienti in un’unica dashboard. Gratis per 3 siti.

Prova gratis
Leggi anche
Tutti gli articoli
Tutti gli articoli