{"id":164056,"date":"2025-08-12T09:00:00","date_gmt":"2025-08-12T07:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/preload-prefetch-preconnect-ottimizzare-caricamento\/"},"modified":"2025-08-12T09:00:00","modified_gmt":"2025-08-12T07:00:00","slug":"preload-prefetch-preconnect-ottimizzare-caricamento","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/preload-prefetch-preconnect-ottimizzare-caricamento\/","title":{"rendered":"Preload, Prefetch e Preconnect: Ottimizzare il Caricamento in HTML"},"content":{"rendered":"

La velocit\u00e0 di caricamento di una pagina web dipende in gran parte da come il browser gestisce le risorse necessarie: fogli di stile, font, script, immagini e connessioni a server esterni. HTML offre una serie di meccanismi chiamati resource hints<\/strong> che permettono agli sviluppatori di comunicare al browser quali risorse saranno necessarie e quando, ottimizzando cos\u00ec il processo di caricamento. In questa guida analizzeremo in dettaglio <link rel=\"preload\"><\/code>, <link rel=\"prefetch\"><\/code>, <link rel=\"preconnect\"><\/code> e gli altri hint disponibili.<\/p>\n

Panoramica dei Resource Hints<\/h2>\n

Quando un browser carica una pagina, segue un processo ben definito: scarica l’HTML, lo analizza, scopre le risorse necessarie e le scarica. Questo processo \u00e8 intrinsecamente sequenziale: il browser non pu\u00f2 sapere che avr\u00e0 bisogno di un font finch\u00e9 non ha scaricato e analizzato il CSS che lo dichiara. I resource hints<\/strong> permettono di anticipare queste informazioni, inserendole direttamente nel <head><\/code> del documento HTML.<\/p>\n

Ogni hint ha uno scopo diverso e un impatto differente sulle performance. Utilizzarli correttamente pu\u00f2 ridurre i tempi di caricamento di centinaia di millisecondi, un miglioramento percepibile dall’utente e misurabile nei Core Web Vitals<\/a>. Tuttavia, un uso eccessivo o scorretto pu\u00f2 peggiorare le performance anzich\u00e9 migliorarle, poich\u00e9 ogni hint consuma risorse del browser e banda di rete.<\/p>\n

Preload: Caricare Subito le Risorse Critiche<\/h2>\n

Il <link rel=\"preload\"><\/code> \u00e8 il resource hint pi\u00f9 potente e aggressivo. Dice al browser: “Avrai bisogno di questa risorsa molto presto nella pagina corrente, inizia a scaricarla immediatamente con alta priorit\u00e0”. \u00c8 fondamentale per le risorse che il browser scoprirebbe troppo tardi nel processo di analisi.<\/p>\n

La sintassi richiede l’attributo <as><\/code> per indicare il tipo di risorsa, il che permette al browser di assegnare la priorit\u00e0 corretta e di applicare le policy di sicurezza appropriate:<\/p>\n

<!-- Preload di un font -->\n<link rel=\"preload\" href=\"\/fonts\/inter.woff2\" as=\"font\" type=\"font\/woff2\" crossorigin>\n\n<!-- Preload di un CSS critico -->\n<link rel=\"preload\" href=\"\/css\/critical.css\" as=\"style\">\n\n<!-- Preload di uno script -->\n<link rel=\"preload\" href=\"\/js\/app.js\" as=\"script\">\n\n<!-- Preload di un'immagine LCP -->\n<link rel=\"preload\" href=\"\/img\/hero.webp\" as=\"image\" type=\"image\/webp\"><\/code><\/pre>\n
I font<\/strong> sono il caso d’uso pi\u00f9 comune per preload. Senza preload, il browser deve: scaricare l’HTML, trovare il link al CSS, scaricare il CSS, trovare la dichiarazione @font-face, e solo allora iniziare a scaricare il font. Con preload, il download del font inizia immediatamente, in parallelo con le altre risorse. \u00c8 obbligatorio aggiungere l’attributo crossorigin<\/code> per i font, anche se sono ospitati sullo stesso dominio, poich\u00e9 i font vengono sempre richiesti in modalit\u00e0 CORS.<\/p>\n
Per le immagini hero<\/strong> (le immagini principali above-the-fold), il preload \u00e8 particolarmente efficace quando l’immagine \u00e8 referenziata dal CSS come background-image, poich\u00e9 altrimenti il browser la scoprirebbe molto tardi. In alternativa, per immagini nel markup HTML, si pu\u00f2 usare l’attributo fetchpriority=\"high\"<\/code> direttamente sul tag <img><\/code>.<\/p>\n
Un errore comune \u00e8 fare preload di troppe risorse. Il browser ha un limite di connessioni simultanee per dominio, e saturarlo con preload pu\u00f2 rallentare il download di risorse che il browser avrebbe caricato naturalmente con priorit\u00e0 maggiore. La regola pratica \u00e8: preload solo 2-4 risorse veramente critiche<\/strong> per il rendering above-the-fold.<\/p>\n
Prefetch: Anticipare le Risorse delle Pagine Successive<\/h2>\n
A differenza di preload che riguarda la pagina corrente, <link rel=\"prefetch\"><\/code> anticipa le risorse che saranno necessarie nelle navigazioni future<\/strong>. Il browser scarica queste risorse con bassa priorit\u00e0, durante i momenti di inattivit\u00e0, senza impattare il caricamento della pagina corrente.<\/p>\n
<!-- Prefetch di una pagina che l'utente probabilmente visiter\u00e0 -->\n<link rel=\"prefetch\" href=\"\/prodotti\/catalogo.html\">\n\n<!-- Prefetch di un CSS necessario nella pagina successiva -->\n<link rel=\"prefetch\" href=\"\/css\/product-page.css\" as=\"style\">\n\n<!-- Prefetch di dati JSON -->\n<link rel=\"prefetch\" href=\"\/api\/products.json\" as=\"fetch\"><\/code><\/pre>\n
Il prefetch \u00e8 ideale per scenari in cui si pu\u00f2 prevedere con ragionevole certezza quale pagina l’utente visiter\u00e0 successivamente. Ad esempio, in un e-commerce, se l’utente \u00e8 sulla pagina di elenco prodotti, \u00e8 probabile che cliccher\u00e0 su uno dei prodotti per vederne i dettagli. Fare prefetch della pagina del primo prodotto visibile pu\u00f2 rendere la navigazione quasi istantanea.<\/p>\n
\u00c8 importante sottolineare che le risorse prefetchate vengono memorizzate nella cache HTTP<\/strong> del browser. Se l’utente non visita mai la pagina anticipata, la risorsa viene comunque scaricata, consumando banda. Per questo motivo, il prefetch va usato solo quando la probabilit\u00e0 di navigazione \u00e8 alta. Inoltre, il browser pu\u00f2 decidere di ignorare i prefetch hint in determinate condizioni, come connessioni lente o modalit\u00e0 di risparmio dati.<\/p>\n
Preconnect e DNS-Prefetch: Preparare le Connessioni<\/h2>\n
Quando il browser deve scaricare una risorsa da un dominio esterno (CDN, API, font server), deve prima completare diversi passaggi di rete: risoluzione DNS, handshake TCP e negoziazione TLS. Questo processo pu\u00f2 richiedere 100-300 millisecondi. <link rel=\"preconnect\"><\/code> permette di completare questi passaggi in anticipo.<\/p>\n
<!-- Preconnect a Google Fonts -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n\n<!-- Preconnect a un CDN -->\n<link rel=\"preconnect\" href=\"https:\/\/cdn.example.com\">\n\n<!-- DNS-prefetch come fallback -->\n<link rel=\"dns-prefetch\" href=\"https:\/\/cdn.example.com\"><\/code><\/pre>\n
Il <link rel=\"dns-prefetch\"><\/code> \u00e8 una versione pi\u00f9 leggera che esegue solo la risoluzione DNS, senza il TCP handshake e la negoziazione TLS. \u00c8 supportato da tutti i browser, anche i pi\u00f9 datati, e ha un costo praticamente nullo. Una pratica comune \u00e8 inserire dns-prefetch come fallback dopo ogni preconnect, per garantire che almeno la risoluzione DNS venga anticipata anche nei browser che non supportano preconnect.<\/p>\n
Limitate i preconnect a massimo 4-6 domini<\/strong>: ogni connessione aperta consuma risorse del browser, e troppe connessioni simultanee possono rallentare quelle veramente necessarie. Per domini da cui scaricherete solo una risorsa piccola, dns-prefetch \u00e8 pi\u00f9 che sufficiente.<\/p>\n
Modulepreload e Casi Avanzati<\/h2>\n
<link rel=\"modulepreload\"><\/code> \u00e8 una variante specializzata di preload progettata per i moduli JavaScript ES. A differenza del preload standard, modulepreload non solo scarica il file ma lo analizza e lo compila immediatamente, e inoltre scarica ricorsivamente tutti i moduli importati:<\/p>\n
<link rel=\"modulepreload\" href=\"\/js\/app.mjs\">\n<link rel=\"modulepreload\" href=\"\/js\/utils.mjs\"><\/code><\/pre>\n
Senza modulepreload, un albero di dipendenze di moduli viene scoperto e scaricato in modo sequenziale: il browser scarica il modulo principale, lo analizza, scopre le importazioni, scarica quei moduli, li analizza, e cos\u00ec via. Questo crea una cascata che pu\u00f2 aggiungere centinaia di millisecondi al caricamento. Con modulepreload, tutti i moduli vengono scaricati in parallelo fin dall’inizio.<\/p>\n
Un altro caso avanzato \u00e8 l’uso dell’attributo imagesrcset<\/code> con preload per anticipare il caricamento di immagini responsive<\/a>. Questo permette di fare preload dell’immagine corretta in base alla viewport, senza caricare risorse inutili. La sintassi \u00e8 la seguente: <link rel=\"preload\" as=\"image\" imagesrcset=\"...\" imagesizes=\"...\"><\/code>.<\/p>\n
Errori Comuni e Come Evitarli<\/h2>\n
L’errore pi\u00f9 frequente \u00e8 confondere preload con prefetch<\/strong>: preload \u00e8 per la pagina corrente con alta priorit\u00e0, prefetch \u00e8 per le navigazioni future con bassa priorit\u00e0. Usare preload quando si intende prefetch spreca banda e CPU nel momento pi\u00f9 critico del caricamento.<\/p>\n
Un altro errore comune \u00e8 dimenticare l’attributo as<\/strong> nel preload, il che impedisce al browser di assegnare la priorit\u00e0 corretta e pu\u00f2 causare il download doppio della risorsa. Allo stesso modo, dimenticare crossorigin<\/code> per i font causa un doppio download. Se vedete warning nella console del browser relativi a risorse preloaded non utilizzate entro pochi secondi, \u00e8 un segnale che il preload non \u00e8 configurato correttamente.<\/p>\n
Infine, evitate di fare preload di risorse che il browser avrebbe comunque scoperto velocemente. Un CSS linkato direttamente nel <head><\/code> viene gi\u00e0 scaricato con alta priorit\u00e0; fare preload in quel caso non aggiunge alcun beneficio. Concentrate il preload su risorse “nascoste” come font (referenziati dal CSS), immagini CSS background e script caricati dinamicamente.<\/p>\n
Hai bisogno di aiuto con l’ottimizzazione del caricamento delle tue pagine web? G Tech Group<\/strong> offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a support@gtechgroup.it<\/strong> o via WhatsApp al 0465 84 62 45<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"
La velocit\u00e0 di caricamento di una pagina web dipende in gran parte da come il browser gestisce le risorse necessarie: fogli di stile, font, script,…<\/p>\n","protected":false},"author":2,"featured_media":164236,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"1246","_seopress_titles_title":"Preload, Prefetch e Preconnect: Ottimizzare il Caricamento %%sep%% %%sitename%%","_seopress_titles_desc":"Guida completa ai resource hints HTML: preload, prefetch, preconnect e dns-prefetch per ottimizzare i tempi di caricamento delle pagine web.","_seopress_robots_index":"","footnotes":""},"categories":[1246],"tags":[875,1775,787],"class_list":["post-164056","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-ottimizzazione","tag-performance","tag-sviluppo-web"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/164056","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=164056"}],"version-history":[{"count":0,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/164056\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/164236"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=164056"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=164056"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=164056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}