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<\/strong> \u2014 prefetch, preconnect e preload \u2014 puoi dire al browser di anticipare queste operazioni, riducendo i tempi di caricamento. In questa guida ti spiego come usarli correttamente in WordPress<\/a>.<\/p>\n I resource hints sono istruzioni che inserisci nell’<head><\/span> della pagina per suggerire al browser di preparare risorse in anticipo. Non sono obblighi: il browser pu\u00f2 ignorarli se la rete \u00e8 lenta o la CPU \u00e8 occupata. Esistono tre tipi principali:<\/p>\n Quando il browser incontra una risorsa su un dominio esterno (es. fonts.googleapis.com), deve prima risolvere il DNS. Questa operazione pu\u00f2 richiedere 20-120 millisecondi. Con dns-prefetch<\/span>, il browser risolve il DNS appena trova il hint nell’head, senza aspettare di incontrare la risorsa.<\/p>\n Usa dns-prefetch per tutti i domini esterni da cui il tuo sito carica risorse. Il costo \u00e8 minimo (una singola query DNS) e il beneficio \u00e8 immediato.<\/p>\n preconnect<\/span> fa tutto quello che fa dns-prefetch, pi\u00f9 la connessione TCP e l’handshake TLS. \u00c8 pi\u00f9 costoso ma anche pi\u00f9 efficace, risparmiando fino a 300 ms per connessione su reti lente.<\/p>\n L’attributo crossorigin<\/span> \u00e8 necessario quando la risorsa viene scaricata in modalit\u00e0 CORS (come i font). Senza questo attributo, il browser potrebbe stabilire due connessioni separate.<\/p>\n Regola pratica:<\/strong> usa preconnect per i 2-3 domini esterni pi\u00f9 importanti (font, CDN principale, analytics). Per gli altri domini, usa dns-prefetch che \u00e8 meno costoso. Troppi preconnect possono essere controproducenti perch\u00e9 saturano le connessioni disponibili.<\/p>\n preload<\/span> \u00e8 diverso dagli altri due: non anticipa la connessione a un dominio ma scarica una risorsa specifica<\/strong> con alta priorit\u00e0. \u00c8 utile per risorse che il browser scoprirebbe tardi, come font dichiarati dentro un file CSS o immagini di sfondo.<\/p>\n L’attributo as<\/span> \u00e8 obbligatorio e indica al browser il tipo di risorsa, permettendogli di assegnare la priorit\u00e0 corretta. I valori comuni sono: font<\/span>, image<\/span>, style<\/span>, script<\/span>.<\/p>\n Attenzione:<\/strong> 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.<\/p>\n Ci sono tre modi per aggiungere i resource hints al tuo sito WordPress:<\/p>\n Metodo 1: functions.php<\/strong><\/p>\n La priorit\u00e0 1 nell’hook wp_head<\/span> assicura che i resource hints vengano inseriti il prima possibile nell’head.<\/p>\n Metodo 2: plugin di caching<\/strong><\/p>\n Plugin come WP Rocket<\/strong>, FlyingPress<\/strong> e Perfmatters<\/strong> hanno opzioni dedicate per aggiungere preconnect e dns-prefetch. Vai nelle impostazioni del plugin, nella sezione dedicata alle ottimizzazioni e aggiungi i domini.<\/p>\n Metodo 3: filtro wp_resource_hints<\/strong><\/p>\n WordPress ha un filtro nativo per i resource hints:<\/p>\n Un quarto tipo di resource hint \u00e8 prefetch<\/span>, 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:<\/p>\n Il browser scarica la pagina in background con bassa priorit\u00e0, 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<\/strong> e Instant.page<\/strong> automatizzano questo processo precacricando le pagine quando l’utente passa il mouse sopra un link.<\/p>\n Per verificare che i tuoi resource hints siano attivi:<\/p>\n Puoi anche usare WebPageTest.org<\/strong> per vedere il waterfall completo del caricamento e verificare che le connessioni vengano stabilite in anticipo.<\/p>\n Se vuoi ottimizzare i tempi di caricamento del tuo sito WordPress con i resource hints, il team di SoccorsoWP<\/a><\/strong> pu\u00f2 configurare tutto per te. Apri un ticket<\/a> e velocizza il tuo sito.<\/p>\n","protected":false},"excerpt":{"rendered":" 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…<\/p>\n","protected":false},"author":1,"featured_media":25866,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Come usare prefetch, preconnect e preload per velocizzare","_seopress_titles_desc":"Guida ai resource hints in WordPress: dns-prefetch, preconnect e preload per ridurre i tempi di caricamento. Esempi pratici e implementazione.","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":0,"_seopress_analysis_target_kw":"","footnotes":""},"categories":[1699],"tags":[],"class_list":["post-25865","post","type-post","status-publish","format-standard","has-post-thumbnail","category-performance-e-ottimizzazione"],"_links":{"self":[{"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/posts\/25865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/comments?post=25865"}],"version-history":[{"count":0,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/posts\/25865\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/media\/25866"}],"wp:attachment":[{"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/media?parent=25865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/categories?post=25865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/tags?post=25865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Cosa sono i resource hints<\/h2>\n
\n
DNS Prefetch: risolvere i domini in anticipo<\/h2>\n
<link rel=\"dns-prefetch\" href=\"\/\/fonts.googleapis.com\">\n<link rel=\"dns-prefetch\" href=\"\/\/www.google-analytics.com\">\n<link rel=\"dns-prefetch\" href=\"\/\/cdn.jsdelivr.net\"><\/pre>\n
Preconnect: connessione completa anticipata<\/h2>\n
<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin><\/pre>\n
Preload: scaricare risorse critiche<\/h2>\n
<link rel=\"preload\" href=\"\/wp-content\/themes\/mio-tema\/fonts\/mio-font.woff2\" as=\"font\" type=\"font\/woff2\" crossorigin>\n<link rel=\"preload\" href=\"\/wp-content\/themes\/mio-tema\/images\/hero.webp\" as=\"image\"><\/pre>\n
Come implementare i resource hints in WordPress<\/h2>\n
function add_resource_hints() {\n echo '<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">' . \"n\";\n echo '<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>' . \"n\";\n echo '<link rel=\"dns-prefetch\" href=\"\/\/www.google-analytics.com\">' . \"n\";\n}\nadd_action('wp_head', 'add_resource_hints', 1);<\/pre>\nfunction custom_resource_hints($hints, $relation_type) {\n if ('preconnect' === $relation_type) {\n $hints[] = array(\n 'href' => 'https:\/\/fonts.gstatic.com',\n 'crossorigin' => 'anonymous',\n );\n }\n if ('dns-prefetch' === $relation_type) {\n $hints[] = '\/\/www.google-analytics.com';\n }\n return $hints;\n}\nadd_filter('wp_resource_hints', 'custom_resource_hints', 10, 2);<\/pre>\nPrefetch: precaricare la prossima pagina<\/h2>\n
<link rel=\"prefetch\" href=\"\/servizi\/\"><\/pre>\n
Verificare che i resource hints funzionino<\/h2>\n
\n
Serve assistenza?<\/h2>\n