{"id":30281,"date":"2019-10-31T21:34:39","date_gmt":"2019-10-31T18:34:39","guid":{"rendered":"https:\/\/prohoster.info\/blog\/preload-prefetch-i-drugie-tegi\/"},"modified":"2019-10-31T21:34:39","modified_gmt":"2019-10-31T18:34:39","slug":"preload-prefetch-i-drugie-tegi","status":"publish","type":"post","link":"https:\/\/prohoster.info\/it\/blog\/preload-prefetch-i-drugie-tegi","title":{"rendered":"Preload, prefetch e altri tag","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p>C'\u00e8 <noindex><a rel=\"nofollow\" href=\"http:\/\/3perf.com\/talks\/web-perf-101\">molti modi per migliorare le prestazioni web<\/a><\/noindex>. Uno di essi \u00e8 il pre-caricamento dei contenuti che saranno necessari in seguito. Prefetching di CSS, rendering preventivo di un'intera pagina o risoluzione di un nome di dominio. Facciamo tutto in anticipo e poi mostriamo il risultato in un attimo! Sembra fantastico.<\/p>\n<p>\u00c8 ancora pi\u00f9 fantastico che sia molto semplice da implementare. Cinque tag &lt;link rel&gt; danno al browser l'ordine di eseguire azioni preliminari:<\/p>\n<pre><code class=\"xml\">&lt;link rel=\"prefetch\" href=\"\/style.css\" as=\"style\" \/&gt;\n&lt;link rel=\"preload\" href=\"\/style.css\" as=\"style\" \/&gt;\n\n&lt;link rel=\"preconnect\" href=\"https:\/\/example.com\" \/&gt;\n&lt;link rel=\"dns-prefetch\" href=\"https:\/\/example.com\" \/&gt;\n\n&lt;link rel=\"prerender\" href=\"https:\/\/example.com\/about.html\" \/&gt;<\/code><\/pre>\n<p><noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><br \/>\nIn breve, parleremo di cosa fanno e quando usarli.<\/p>\n<p>Vai a: <noindex><a rel=\"nofollow\" href=\"#preload\">preload<\/a><\/noindex> \u00b7 <noindex><a rel=\"nofollow\" href=\"#prefetch\">prefetch<\/a><\/noindex> \u00b7 <noindex><a rel=\"nofollow\" href=\"#preconnect\">preconnect<\/a><\/noindex> \u00b7 <noindex><a rel=\"nofollow\" href=\"#dns-prefetch\">dns-prefetch<\/a><\/noindex> \u00b7 <noindex><a rel=\"nofollow\" href=\"#prerender\">prerender<\/a><\/noindex><\/p>\n<p><noindex><a rel=\"nofollow\" name=\"preload\"><\/a><\/noindex><\/p>\n<h1>preload<\/h1>\n<p>\n<code>&lt;link rel=\"preload\"&gt;<\/code> dice al browser di caricare e memorizzare nella cache la risorsa il prima possibile (ad esempio, uno script o un foglio di stile). Questo \u00e8 utile quando la risorsa sar\u00e0 necessaria dopo pochi secondi dal caricamento della pagina - e si desidera accelerare il processo.<\/p>\n<p>Il browser non fa nulla con la risorsa dopo il caricamento. Gli script non vengono eseguiti, i fogli di stile non vengono applicati. La risorsa viene semplicemente memorizzata nella cache e fornita immediatamente su richiesta.<\/p>\n<h3>Sintassi<\/h3>\n<p><\/p>\n<pre><code class=\"xml\">&lt;link rel=\"preload\" href=\"\/style.css\" as=\"style\" \/&gt;<\/code><\/pre>\n<p>\n<code>href<\/code> indica la risorsa che si desidera scaricare.<\/p>\n<p><code> as<\/code> pu\u00f2 essere qualsiasi cosa possa essere scaricata dal browser:<\/p>\n<ul>\n<li><code>style<\/code> per i fogli di stile,\n<\/li>\n<li><code>script<\/code> per gli script,\n<\/li>\n<li><code>font<\/code> per i font,\n<\/li>\n<li><code>fetch<\/code> per le risorse caricate tramite <code>fetch()<\/code> o <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>elenco completo vedi <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">su MDN<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\n\u00c8 importante specificare l'attributo <code>as<\/code> \u2013 aiuta il browser a prioritizzare correttamente e pianificare il caricamento.<\/p>\n<h3>Quando usare<\/h3>\n<p>\nUsa il pre-caricamento quando la risorsa sar\u00e0 necessaria molto presto. Ad esempio:<\/p>\n<ul>\n<li>Font non standard da un file esterno:\n<pre><code class=\"xml\">&lt;!-- index.html --&gt;\n&lt;link rel=\"stylesheet\" href=\"index.css\" \/&gt;\n\n\/* index.css *\/\n@font-face {\n  src: url('comic-sans.woff2') format('woff2');\n}<\/code><\/pre>\n<p>\nPer impostazione predefinita <code>comic-sans.woff2<\/code> inizier\u00e0 a essere caricato solo dopo il caricamento e l'analisi <code>index.css<\/code>. Per non aspettare cos\u00ec a lungo, si pu\u00f2 caricare il font in anticipo usando <code>&lt;link rel=\"preload\"&gt;<\/code>:<\/p>\n<pre><code class=\"xml\">&lt;link rel=\"preload\" href=\"comic-sans.woff2\" as=\"font\" \/&gt;<\/code><\/pre>\n<\/li>\n<li>Se suddividi i tuoi stili secondo l'approccio <noindex><a rel=\"nofollow\" href=\"https:\/\/3perf.com\/talks\/web-perf-101\/#css-block-rendering-1\">CSS Critico<\/a><\/noindex> in due parti, critico (per il rendering immediato) e non critico:\n<pre><code class=\"xml\">&lt;style&gt;\n\/* Stili critici in linea *\/\n&lt;\/style&gt;\n\n&lt;script&gt;\n\/* JS personalizzato che inizia a scaricare stili non critici *\/\nloadCSS('\/app\/non-critical.css');\n&lt;\/script&gt;<\/code><\/pre>\n<p>\nCon questo approccio, gli stili non critici inizieranno a essere caricati solo all'avvio di JavaScript, il che pu\u00f2 avvenire dopo alcuni secondi dal rendering. Invece di attendere JS, utilizza <code>&lt;link rel=\"preload\"&gt;<\/code>, per avviare il caricamento prima:<\/p>\n<pre><code class=\"xml\">\/* Stili critici in linea *\/<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>\n<b>Non abusare del preload<\/b>. Se carichi tutto indiscriminatamente, il sito non si velocizzer\u00e0 magicamente; anzi, potrebbe impedire al browser di pianificare correttamente il lavoro.<\/p>\n<p><b> Non confondere con il prefetching<\/b>. Non utilizzare <code>&lt;link rel=\"preload\"&gt;<\/code>, se non hai bisogno della risorsa immediatamente dopo il caricamento della pagina. Se ne hai bisogno in seguito, ad esempio per la pagina successiva, utilizza <code>&lt;link rel= \"prefetch\"&gt;<\/code>.<\/p>\n<h3>Dettagli<\/h3>\n<p>\n<b>Questo \u00e8 un tag obbligatorio<\/b> per l'esecuzione del browser (se lo supporta), a differenza di tutti gli altri tag  relativi al preload. Il browser \u00e8 obbligato a caricare la risorsa indicata in <code>&lt;link rel=\"preload\"&gt;<\/code>. In altri casi, potrebbe ignorare il preload, ad esempio se \u00e8 collegato a una rete lenta.<\/p>\n<p><b>Priorit\u00e0<\/b>. Ai vari tipi di risorse (stili, script, font, ecc.), i browser di solito assegnano priorit\u00e0 diverse per caricare prima le risorse pi\u00f9 importanti. In questo caso, il browser determina la priorit\u00e0 in base all'attributo <code>as<\/code>. Per il browser Chrome puoi consultare <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit#\">l'intera tabella delle priorit\u00e0<\/a><\/noindex>.<\/p>\n<p><noindex><a rel=\"nofollow\" href=\"https:\/\/habrastorage.org\/webt\/i2\/bf\/vi\/i2bfvijtqhb3wt6cnkcskwc55ew.png\"><img decoding=\"async\" alt=\"Preload, prefetch e altri tag\" src=\"\/wp-content\/uploads\/2019\/03\/3d66bce7749d647e16d842958f56ff3c.png\" style=\"display:block;margin: 0 auto;\" \/><\/a><\/noindex><\/p>\n<p><noindex><a rel=\"nofollow\" name=\"prefetch\"><\/a><\/noindex><\/p>\n<h1>prefetch<\/h1>\n<p>\n<code>&lt;link rel= \"prefetch\"&gt;<\/code> richiede al browser di caricare e memorizzare nella cache una risorsa (ad esempio, uno script o un foglio di stile) in background. Il caricamento avviene con bassa priorit\u00e0, quindi non ostacola le risorse pi\u00f9 importanti. Questo \u00e8 utile se la risorsa sar\u00e0 necessaria nella pagina successiva e si desidera memorizzarla nella cache in anticipo.<\/p>\n<p>Anche in questo caso, il browser non fa nulla con la risorsa dopo il caricamento. Gli script non vengono eseguiti, i fogli di stile non vengono applicati. La risorsa viene semplicemente memorizzata nella cache e immediatamente fornita su richiesta.<\/p>\n<h3>Sintassi<\/h3>\n<p><\/p>\n<pre><code class=\"xml\">&lt;link rel=\"prefetch\" href=\"\/style.css\" as=\"style\" \/&gt;<\/code><\/pre>\n<p>\n<code>href<\/code> indica la risorsa che si desidera scaricare.<\/p>\n<p><code> as<\/code> pu\u00f2 essere qualsiasi cosa possa essere scaricata dal browser:<\/p>\n<ul>\n<li><code>style<\/code> per i fogli di stile,\n<\/li>\n<li><code>script<\/code> per gli script,\n<\/li>\n<li><code>font<\/code> per i font,\n<\/li>\n<li><code>fetch<\/code> per le risorse caricate tramite <code>fetch()<\/code> o <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>elenco completo vedi <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">su MDN<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\n\u00c8 importante specificare l'attributo <code>as<\/code>\u00a0\u2014 aiuta il browser a gestire correttamente le priorit\u00e0 e pianificare il caricamento.<\/p>\n<h3>Quando usare<\/h3>\n<p>\n<b>Per caricare risorse da altre pagine<\/b>, se hai bisogno di una risorsa da un'altra pagina, e desideri pre-caricarla per accelerare il rendering di quella pagina in seguito. Ad esempio:<\/p>\n<ul>\n<li>Hai un negozio online e il 40% degli utenti abbandona la pagina principale per andare alla pagina del prodotto. Utilizza <code>&lt;link rel= \"prefetch\"&gt;<\/code>, caricando file CSS e JS per il rendering delle pagine con i prodotti.\n<\/li>\n<li>Hai un'applicazione a pagina singola e pagine diverse caricano pacchetti diversi. Quando un utente visita una pagina, puoi caricare in anticipo i pacchetti per tutte le pagine a cui questa si riferisce.<\/li>\n<\/ul>\n<p>\n<b>Probabilmente questo tag pu\u00f2 essere utilizzato in qualsiasi quantit\u00e0<\/b>. I browser di solito pianificano il prefetch con la priorit\u00e0 pi\u00f9 bassa, quindi non disturba nessuno. Tieni solo presente che si utilizza il traffico dell'utente, che pu\u00f2 costare denaro.<\/p>\n<p><b>Non per richieste urgenti<\/b>. Non utilizzare <code>&lt;link rel= \"prefetch\"&gt;<\/code>, quando la risorsa sar\u00e0 necessaria tra pochi secondi. In questo caso, utilizza <code>&lt;link rel=\"preload\"&gt;<\/code>.<\/p>\n<h3>Dettagli<\/h3>\n<p>\n<b>Tag facoltativo<\/b>. Il browser non \u00e8 obbligato a seguire questa istruzione, pu\u00f2 ignorarla, ad esempio, su una connessione lenta.<\/p>\n<p><b>Priorit\u00e0 in Chrome<\/b>. In Chrome <code>&lt;link rel= \"prefetch\"&gt;<\/code> di solito viene eseguito con priorit\u00e0 minima (vedi <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit\">l'intera tabella delle priorit\u00e0<\/a><\/noindex>), dopo il caricamento di tutto il resto.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"preconnect\"><\/a><\/noindex><\/p>\n<h1>preconnect<\/h1>\n<p>\n<code>&lt;link rel= \"preconnect\"&gt;<\/code> chiede al browser di connettersi in anticipo a un dominio, quando desideri accelerare la connessione in futuro.<\/p>\n<p>Il browser deve stabilire una connessione se estrae delle risorse da un nuovo dominio esterno. Ad esempio, se carica font Google Fonts, React da un CDN o richiede una risposta JSON da un server API.<\/p>\n<p>Stabilire una nuova connessione di solito richiede alcune centinaia di millisecondi. Viene effettuata una sola volta, ma richiede comunque tempo. Se hai stabilito la connessione in anticipo, risparmierai tempo e caricherai pi\u00f9 rapidamente le risorse da questo dominio.<\/p>\n<h3>Sintassi<\/h3>\n<p><\/p>\n<pre><code class=\"xml\">&lt;link rel= \"preconnect\" href=\"https:\/\/api.my-app.com\" \/&gt;<\/code><\/pre>\n<p>\n<code>href<\/code> indica il nome del dominio per il quale deve essere determinato l'indirizzo IP. Puoi indicarlo con il prefisso (<code>https:\/\/domain.com<\/code>) o senza (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Quando usare<\/h3>\n<p>\n<b>Utilizza per i domini che potrebbero essere necessari presto<\/b> per caricare uno stile, uno script o un'immagine importanti da l\u00ec, ma non conosci ancora l'URL della risorsa. Ad esempio:<\/p>\n<ul>\n<li>La tua applicazione \u00e8 ospitata su <code>my-app.com<\/code> e fa richieste AJAX a <code>api.my-app.com<\/code>: non conosci in anticipo le richieste specifiche, perch\u00e9 vengono effettuate dinamicamente da JS. Qui \u00e8 del tutto appropriato utilizzare il tag per la connessione anticipata a un dominio.\n<\/li>\n<li>La tua applicazione \u00e8 ospitata su <code>my-app.com<\/code> e utilizza i font Google Fonts. Vengono caricati in due fasi: prima viene caricato il file CSS dal dominio <code>fonts.googleapis.com<\/code>, quindi questo file richiede i font da <code>fonts.gstatic.com<\/code>. Non puoi sapere quali file di font specifici ti serviranno finch\u00e9 non carichi il file CSS, quindi in anticipo possiamo solo stabilire una connessione preliminare. <code>fonts.gstatic.com<\/code> Usa questo tag per accelerare un po' qualche script o stile di terze parti<\/li>\n<\/ul>\n<p>\n<b>grazie alla connessione preliminare.<\/b> Non abusare<\/p>\n<p><b>. Stabilire e mantenere una connessione \u00e8 un'operazione costosa sia per il client che per il server. Usa questo tag al massimo per 4-6 domini.<\/b>. Il browser non \u00e8 obbligato a seguire questa istruzione e pu\u00f2 ignorarla, ad esempio, se sono gi\u00e0 state stabilite molte connessioni o in qualche altro caso.<\/p>\n<h3>Dettagli<\/h3>\n<p>\n<b>Tag facoltativo<\/b>Cosa include il processo di connessione<\/p>\n<p><b>. Per connettersi a ogni sito, il browser deve eseguire le seguenti azioni:<\/b>Risoluzione DNS<\/p>\n<ul>\n<li><i>. Trovare l'indirizzo IP del server (<\/i>) per il nome di dominio specificato (<code>216.58.215.78<\/code>google.com<code>Riconnessione TCP<\/code>).<\/li>\n<li><i>. Scambio di pacchetti (client \u2192 server \u2192 client), per iniziare una connessione TCP con il server.<\/i>Riconnessione TLS (solo per siti HTTPS)<\/li>\n<li><i>. Due round di scambio di pacchetti (client \u2192 server \u2192 client \u2192 server \u2192 client), per avviare una sessione TLS sicura.<\/i>Nota: HTTP\/3 migliorer\u00e0 e accelerer\u00e0 il meccanismo di riconnessione, ma \u00e8 ancora lontano.<\/li>\n<\/ul>\n<p>\nNota: HTTP\/3 migliorer\u00e0 e accelerer\u00e0 il meccanismo di handshake, ma \u00e8 ancora lontano.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"dns-prefetch\"><\/a><\/noindex><\/p>\n<h1>dns-prefetch<\/h1>\n<p>\n<code>chiede al browser di eseguire in anticipo la risoluzione DNS per il dominio, nel caso in cui prevedi di connetterti a esso e voglia accelerare la connessione iniziale.<\/code> Il browser deve determinare l'indirizzo IP del dominio se deve estrarre alcune risorse da un nuovo dominio di terze parti. Ad esempio, caricare i font di Google Fonts, React da CDN o richiedere una risposta JSON da un server API.<\/p>\n<p>Per ogni nuovo dominio, la risoluzione del record DNS richiede generalmente circa 20\u2212120 ms. Questo influisce solo sul caricamento della prima risorsa da questo dominio, ma rappresenta comunque un ritardo. Se si esegue in anticipo la risoluzione DNS, risparmieremo tempo e caricheremo la risorsa pi\u00f9 velocemente.<\/p>\n<p>Per ogni nuovo dominio, la risoluzione del record DNS richiede solitamente circa 20\u2212120 ms. Questo influisce solo sul caricamento della prima risorsa da questo dominio, ma rappresenta comunque un ritardo. Se eseguiamo la risoluzione DNS in anticipo, risparmieremo tempo e caricheremo la risorsa pi\u00f9 rapidamente.<\/p>\n<h3>Sintassi<\/h3>\n<p><\/p>\n<pre><code class=\"xml\">indica il nome di dominio per il quale si deve stabilire l'indirizzo IP. Pu\u00f2 essere specificato con un prefisso (<\/code><\/pre>\n<p>\n<code>href<\/code> per caricare risorse da l\u00ec, di cui il browser non conosce in anticipo. Ad esempio:<code>https:\/\/domain.com<\/code>) o senza (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Quando usare<\/h3>\n<p>\n<b>Utilizza per i domini che potrebbero essere necessari presto<\/b> , e utilizza i font di Google Fonts. Vengono caricati in due fasi: prima viene caricato il file CSS dal dominio<\/p>\n<ul>\n<li>La tua applicazione \u00e8 ospitata su <code>my-app.com<\/code> e fa richieste AJAX a <code>api.my-app.com<\/code>: non conosci in anticipo le richieste specifiche, perch\u00e9 vengono effettuate dinamicamente da JS. Qui \u00e8 del tutto appropriato utilizzare il tag per la connessione anticipata a un dominio.\n<\/li>\n<li>La tua applicazione \u00e8 ospitata su <code>my-app.com<\/code>ti servir\u00e0 finch\u00e9 non carichi il file CSS, quindi in anticipo possiamo solo stabilire una connessione preliminare. <code>fonts.googleapis.com<\/code>, quindi questo file richiede i font da <code>fonts.gstatic.com<\/code>. Non puoi sapere quali file di font specifici ti serviranno finch\u00e9 non carichi il file CSS, quindi in anticipo possiamo solo stabilire una connessione preliminare. <code>fonts.gstatic.com<\/code> .<\/li>\n<\/ul>\n<p>\n<b>grazie alla connessione preliminare.<\/b> Non abusare<\/p>\n<blockquote><p>Si prega di notare caratteristiche simili su <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> e <code>&lt;link rel= \"preconnect\"&gt;<\/code>. Usarli insieme per un unico dominio di solito non ha senso: <code>&lt;link rel= \"preconnect\"&gt;<\/code> gi\u00e0 include <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> e molto altro. Questo \u00e8 giustificabile in due casi:<\/p>\n<ul>\n<li><i>Si desidera supportare browser obsoleti<\/i>. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> \u00e8 supportato <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-dns-prefetch\">a partire da IE10 e Safari 5<\/a><\/noindex>. <code>&lt;link rel= \"preconnect\"&gt;<\/code> \u00e8 stato supportato per un certo tempo in Chrome e Firefox, ma \u00e8 stato aggiunto in Safari solo nella versione 11.1 e <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-preconnect\">non \u00e8 ancora supportato in IE\/Edge<\/a><\/noindex>. Se \u00e8 necessario supportare questi browser, utilizzare <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> come opzione di backup per <code>&lt;link rel= \"preconnect\"&gt;<\/code>.<\/li>\n<li><i>Si desidera accelerare la connessione a pi\u00f9 di 4\u22126 domini<\/i>. Il tag <code>&lt;link rel= \"preconnect\"&gt;<\/code> non \u00e8 consigliato per essere usato con pi\u00f9 di 4\u22126 domini, poich\u00e9 stabilire e mantenere una connessione \u00e8 un'operazione costosa. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> consuma meno risorse, quindi, se necessario, utilizzarlo.<\/li>\n<\/ul>\n<\/blockquote>\n<p><\/p>\n<h3>Dettagli<\/h3>\n<p>\n<b>Tag facoltativo<\/b>. Il browser non \u00e8 obbligato a seguire questa istruzione, quindi potrebbe non eseguire la risoluzione DNS, ad esempio, se sulla pagina ci sono molti di questi tag o in qualche altro caso.<\/p>\n<p><b>Che cos'\u00e8 il DNS<\/b>. A ciascun server su Internet \u00e8 associato un indirizzo IP unico, che appare come <code>216.58.215.78<\/code>. Nella barra degli indirizzi del browser di solito viene inserito il nome del sito (ad esempio, <code>Riconnessione TCP<\/code>), e i server DNS (Domain Name System) lo associano all'indirizzo IP del server (<code>216.58.215.78<\/code>).<\/p>\n<p>Per determinare l'indirizzo IP, il browser deve effettuare una richiesta al server DNS. Ci\u00f2 richiede 20\u2212120 ms quando ci si connette a un nuovo dominio esterno.<\/p>\n<p><b>Il DNS viene memorizzato nella cache, anche se non in modo molto affidabile<\/b>. Alcuni sistemi operativi e browser memorizzano nella cache le richieste DNS: questo fa risparmiare tempo per le richieste ripetute, ma non si pu\u00f2 fare affidamento sulla cache. In Linux di solito non funziona affatto. Chrome ha una cache DNS, ma dura solo un minuto. Windows memorizza le risposte DNS nella cache per cinque giorni.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"prerender\"><\/a><\/noindex><\/p>\n<h1>prerender<\/h1>\n<p>\n<code>&lt;link rel= \"prerender\"&gt;<\/code> chiede al browser di caricare un URL e mostrarlo in una scheda invisibile. Quando l'utente clicca sul link, la pagina deve essere visualizzata immediatamente. Questo \u00e8 utile se sei sicuro che l'utente visiter\u00e0 una certa pagina e desideri accelerarne il caricamento.<\/p>\n<p>Nonostante l'eccezionale efficacia di questo tag (o a causa di essa), nel 2019 <code>&lt;link rel= \"prerender\"&gt;<\/code> \u00e8 poco supportato dai principali browser. Maggiori dettagli su <noindex><a rel=\"nofollow\" href=\"#1\">di seguito<\/a><\/noindex>.<\/p>\n<h3>Sintassi<\/h3>\n<p><\/p>\n<pre><code class=\"xml\">&lt;link rel=\"prerender\" href=\"https:\/\/my-app.com\/pricing\" \/&gt;<\/code><\/pre>\n<p>\n<code>href<\/code> indica l'URL per il quale desideri avviare il rendering in background.<\/p>\n<h3>Quando usare<\/h3>\n<p>\n<b>Quando sei davvero sicuro che l'utente passer\u00e0 a una certa pagina<\/b>. Se hai un \"tunnel\" dove il 70% dei visitatori della pagina A passa alla pagina B, allora <code>&lt;link rel= \"prerender\"&gt;<\/code> nella pagina A aiuter\u00e0 a visualizzare molto rapidamente la pagina B.<\/p>\n<p><b>. Stabilire e mantenere una connessione \u00e8 un'operazione costosa sia per il client che per il server. Usa questo tag al massimo per 4-6 domini.<\/b>. Il rendering preliminare \u00e8 estremamente costoso in termini di traffico e memoria. Non usare <code>&lt;link rel= \"prerender\"&gt;<\/code> pi\u00f9 di una pagina.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"1\"><\/a><\/noindex><\/p>\n<h3>Dettagli<\/h3>\n<p>\n<b>Tag facoltativo<\/b>. Il browser non \u00e8 obbligato a seguire questa istruzione e pu\u00f2 ignorarla, ad esempio, su una connessione lenta o con poca memoria disponibile.<\/p>\n<p>Per risparmiare memoria <b>Chrome non esegue il rendering completo<\/b>, ma <noindex><a rel=\"nofollow\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/07\/nostate-prefetch\">solo il pre-caricamento NoState<\/a><\/noindex>. Questo significa che Chrome carica la pagina e tutte le sue risorse, ma non esegue il rendering e non esegue JavaScript.<\/p>\n<p>Firefox e Safari non supportano affatto questo tag. Questo non viola la specifica, poich\u00e9 i browser non sono obbligati a seguire questa istruzione; ma \u00e8 comunque deludente. <noindex><a rel=\"nofollow\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=730101\">Un bug di implementazione<\/a><\/noindex> in Firefox \u00e8 stato presente per sette anni. Ci sono segnalazioni che Safari <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/bluesmoon\/status\/1108412360828563456\">non supporta nemmeno questo tag<\/a><\/noindex>.<\/p>\n<h1>Riepilogo<\/h1>\n<p>\nUsa:<\/p>\n<ul>\n<li><code>&lt;link rel=\"preload\"&gt;<\/code>\u00a0\u2014 quando hai bisogno di una risorsa tra pochi secondi\n<\/li>\n<li><code>&lt;link rel= \"prefetch\"&gt;<\/code>\u00a0\u2014 quando hai bisogno di una risorsa nella pagina successiva\n<\/li>\n<li><code>&lt;link rel= \"preconnect\"&gt;<\/code>\u00a0\u2014 quando sai che presto ti servir\u00e0 una risorsa, ma non conosci ancora il suo URL completo\n<\/li>\n<li><code>chiede al browser di eseguire in anticipo la risoluzione DNS per il dominio, nel caso in cui prevedi di connetterti a esso e voglia accelerare la connessione iniziale.<\/code>\u00a0\u2014 similmente, quando sai che presto ti servir\u00e0 una risorsa, ma non conosci ancora il suo URL completo (per browser obsoleti)\n<\/li>\n<li><code>&lt;link rel= \"prerender\"&gt;<\/code>\u00a0\u2014 quando sei sicuro che gli utenti passeranno a una certa pagina e vuoi accelerarne la visualizzazione<\/li>\n<\/ul>\n<p>Fonte: <a content=\"nofollow\" rel=\"nofollow\" href=\"https:\/\/habr.com\/ru\/post\/445264\/\">habr.com<\/a><\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"<p>\u0415\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445\u00a0\u2014 \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u043e\u0437\u0436\u0435. \u041f\u0440\u0435\u0444\u0442\u0435\u0447\u0438\u043d\u0433 CSS, \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043f\u043e\u043b\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u043b\u0438 \u0440\u0435\u0437\u043e\u043b\u0432\u0438\u043d\u0433 \u0434\u043e\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u043c\u0435\u043d\u0438. \u0414\u0435\u043b\u0430\u0435\u043c \u0432\u0441\u0451 \u0437\u0430\u0440\u0430\u043d\u0435\u0435, \u0430 \u043f\u043e\u0442\u043e\u043c \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442! \u0417\u0432\u0443\u0447\u0438\u0442 \u043a\u0440\u0443\u0442\u043e. \u0415\u0449\u0451 \u043a\u0440\u0443\u0447\u0435, \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e. \u041f\u044f\u0442\u044c \u0442\u0435\u0433\u043e\u0432 &lt;link rel&gt; \u0434\u0430\u044e\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u043d\u0430 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f: &lt;link rel=&#187;prefetch&#187; href=&#187;\/style.css&#187; as=&#187;style&#187; \/&gt; [&hellip;]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-30281","post","type-post","status-publish","format-standard","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.2 - aioseo.com -->\n\t<meta name=\"description\" content=\"\u0415\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445 \u2014 \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u043e\u0437\u0436\u0435.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Yuri Gagarin\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/prohoster.info\/it\/blog\/preload-prefetch-i-drugie-tegi\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.2\" \/>\n\t\t<meta property=\"og:locale\" content=\"it_IT\" \/>\n\t\t<meta property=\"og:site_name\" content=\"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"\ud83e\udd47Preload, prefetch \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0442\u0435\u0433\u0438 | ProHoster\" \/>\n\t\t<meta property=\"og:description\" content=\"\u0415\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445 \u2014 \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u043e\u0437\u0436\u0435.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/prohoster.info\/it\/blog\/preload-prefetch-i-drugie-tegi\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"350\" \/>\n\t\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-10-31T18:34:39+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-10-31T18:34:39+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"\ud83e\udd47Preload, prefetch e altri tag | ProHoster","description":"Ci sono molti modi per migliorare le prestazioni web. Uno di questi \u00e8 il pre-caricamento dei contenuti che saranno necessari in seguito.","canonical_url":"https:\/\/prohoster.info\/it\/blog\/preload-prefetch-i-drugie-tegi","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"it_IT","og:site_name":"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b","og:type":"article","og:title":"\ud83e\udd47Preload, prefetch \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0442\u0435\u0433\u0438 | ProHoster","og:description":"\u0415\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445 \u2014 \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u043e\u0437\u0436\u0435.","og:url":"https:\/\/prohoster.info\/it\/blog\/preload-prefetch-i-drugie-tegi","og:image":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:secure_url":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:width":350,"og:image:height":350,"article:published_time":"2019-10-31T18:34:39+00:00","article:modified_time":"2019-10-31T18:34:39+00:00","article:publisher":"https:\/\/www.facebook.com\/prohoster","article:author":"https:\/\/www.facebook.com\/prohoster"},"aioseo_meta_data":{"post_id":"30281","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"seo_analyzer_scan_date":"2026-01-21 00:29:19","breadcrumb_settings":null,"limit_modified_date":false,"reviewed_by":null,"ai":null,"created":"2021-03-01 03:37:28","updated":"2026-01-21 00:29:19","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/posts\/30281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/comments?post=30281"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/posts\/30281\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/media?parent=30281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/categories?post=30281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/tags?post=30281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}