{"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\/pt\/blog\/preload-prefetch-i-drugie-tegi","title":{"rendered":"Preload, prefetch e outras tags","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p>H\u00e1 <noindex><a rel=\"nofollow\" href=\"http:\/\/3perf.com\/talks\/web-perf-101\">muitos modos de aumentar o desempenho da web<\/a><\/noindex>. Um deles \u00e9 o pr\u00e9-carregamento de conte\u00fado que ser\u00e1 necess\u00e1rio mais tarde. Pr\u00e9-busca de CSS, pr\u00e9-renderiza\u00e7\u00e3o da p\u00e1gina completa ou resolu\u00e7\u00e3o de nome de dom\u00ednio. Fazemos tudo com anteced\u00eancia e depois exibimos o resultado instantaneamente! Soa incr\u00edvel.<\/p>\n<p>Ainda mais incr\u00edvel \u00e9 que isso \u00e9 muito simples de implementar. Cinco tags  d\u00e3o ao navegador a instru\u00e7\u00e3o para as a\u00e7\u00f5es pr\u00e9vias:<\/p>\n<pre><code class=\"xml\"><\/code><\/pre>\n<p><noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><br \/>\nResumo do que elas fazem e quando utiliz\u00e1-las.<\/p>\n<p>Ir para: <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> diz ao navegador para carregar e armazenar em cache o recurso (como um script ou uma folha de estilos) o quanto antes. Isso \u00e9 \u00fatil quando o recurso ser\u00e1 necess\u00e1rio em alguns segundos ap\u00f3s o carregamento da p\u00e1gina \u2014 e voc\u00ea deseja acelerar o processo.<\/p>\n<p>O navegador n\u00e3o faz nada com o recurso ap\u00f3s o carregamento. Scripts n\u00e3o s\u00e3o executados, folhas de estilos n\u00e3o s\u00e3o aplicadas. O recurso \u00e9 simplesmente armazenado em cache e prontamente fornecido quando solicitado.<\/p>\n<h3>Sintaxe<\/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 o recurso que voc\u00ea deseja baixar.<\/p>\n<p><code> as<\/code> pode ser qualquer coisa que possa ser baixada pelo navegador:<\/p>\n<ul>\n<li><code>style<\/code> para folhas de estilos,\n<\/li>\n<li><code>script<\/code> para scripts,\n<\/li>\n<li><code>font<\/code> para fontes,\n<\/li>\n<li><code>fetch<\/code> para recursos carregados por meio do <code>fetch()<\/code> ou <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>lista completa veja <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">no MDN<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\n\u00c9 importante especificar o atributo <code>as<\/code> \u2014 isso ajuda o navegador a priorizar corretamente e planejar o carregamento.<\/p>\n<h3>Quando usar<\/h3>\n<p>\nUse o pr\u00e9-carregamento quando o recurso for necess\u00e1rio em breve. Por exemplo:<\/p>\n<ul>\n<li>Fontes personalizadas de um arquivo externo:\n<pre><code class=\"xml\"><!-- index.html -->\n\n\/* index.css *\/\n@font-face {\n  src: url('comic-sans.woff2') format('woff2');\n}<\/code><\/pre>\n<p>\nPor padr\u00e3o <code>comic-sans.woff2<\/code> come\u00e7ar\u00e1 a ser carregado apenas ap\u00f3s o carregamento e an\u00e1lise <code>index.css<\/code>. Para n\u00e3o esperar tanto, voc\u00ea pode carregar a fonte antecipadamente 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 voc\u00ea dividir seus estilos segundo a abordagem <noindex><a rel=\"nofollow\" href=\"https:\/\/3perf.com\/talks\/web-perf-101\/#css-block-rendering-1\">Critical CSS<\/a><\/noindex> em duas partes, cr\u00edtica (para renderiza\u00e7\u00e3o imediata) e n\u00e3o cr\u00edtica:\n<pre><code class=\"xml\">\/* Estilos cr\u00edticos inlined *\/<\/code><\/pre>\n<p>\nCom essa abordagem, os estilos n\u00e3o cr\u00edticos come\u00e7ar\u00e3o a ser carregados apenas quando o JavaScript for acionado, o que pode acontecer alguns segundos ap\u00f3s a renderiza\u00e7\u00e3o. Em vez de esperar pelo JS, use <code>&lt;link rel= \"preload\"&gt;<\/code>, para come\u00e7ar o carregamento mais cedo:<\/p>\n<pre><code class=\"xml\">\/* Estilos cr\u00edticos inlinados *\/<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>\n<b>N\u00e3o abuse do pr\u00e9-carregamento<\/b>. Se carregar tudo de uma vez, o site n\u00e3o ser\u00e1 acelerado magicamente; pelo contr\u00e1rio, isso pode atrapalhar o navegador a planejar seu trabalho de forma eficiente.<\/p>\n<p><b> N\u00e3o confunda com o pr\u00e9-busca<\/b>. N\u00e3o use <code>&lt;link rel= \"preload\"&gt;<\/code>, se voc\u00ea n\u00e3o precisar do recurso imediatamente ap\u00f3s o carregamento da p\u00e1gina. Se for necess\u00e1rio mais tarde, por exemplo, na pr\u00f3xima p\u00e1gina, use <code>&lt;link rel= \"prefetch\"&gt;<\/code>.<\/p>\n<h3>Detalhes<\/h3>\n<p>\n<b>Essa \u00e9 uma tag obrigat\u00f3ria<\/b> para execu\u00e7\u00e3o pelo navegador (se ele o suportar), ao contr\u00e1rio de todas as outras tags  relacionadas ao pr\u00e9-carregamento. O navegador deve carregar o recurso especificado em <code>&lt;link rel=\"preload\"&gt;<\/code>. Caso contr\u00e1rio, ele pode ignorar o pr\u00e9-carregamento, por exemplo, se estiver em uma conex\u00e3o lenta.<\/p>\n<p><b>Prioridades<\/b>. Os navegadores geralmente atribuem diferentes prioridades a diferentes recursos (estilos, scripts, fontes etc.) para carregar primeiro os recursos mais importantes. Neste caso, o navegador determina a prioridade pelo atributo <code>as<\/code>. Para o navegador Chrome, voc\u00ea pode consultar <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit#\">a tabela completa de prioridades<\/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 outras tags\" 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> pede ao navegador para carregar e armazenar em cache o recurso (por exemplo, um script ou uma folha de estilos) em segundo plano. O download ocorre com baixa prioridade, portanto, n\u00e3o atrapalha recursos mais importantes. Isso \u00e9 \u00fatil se o recurso for necess\u00e1rio na pr\u00f3xima p\u00e1gina e voc\u00ea quiser armazen\u00e1-lo em cache antecipadamente.<\/p>\n<p>Aqui, o navegador tamb\u00e9m n\u00e3o faz nada com o recurso ap\u00f3s o download. Os scripts n\u00e3o s\u00e3o executados, as folhas de estilos n\u00e3o s\u00e3o aplicadas. O recurso \u00e9 simplesmente armazenado em cache e imediatamente disponibilizado sob demanda.<\/p>\n<h3>Sintaxe<\/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 o recurso que voc\u00ea deseja baixar.<\/p>\n<p><code> as<\/code> pode ser qualquer coisa que possa ser baixada pelo navegador:<\/p>\n<ul>\n<li><code>style<\/code> para folhas de estilos,\n<\/li>\n<li><code>script<\/code> para scripts,\n<\/li>\n<li><code>font<\/code> para fontes,\n<\/li>\n<li><code>fetch<\/code> para recursos carregados por meio do <code>fetch()<\/code> ou <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>lista completa veja <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">no MDN<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\n\u00c9 importante especificar o atributo <code>as<\/code>\u00a0\u2014 isso ajuda o navegador a definir prioridades corretas e planejar o carregamento.<\/p>\n<h3>Quando usar<\/h3>\n<p>\n<b>Para carregar recursos de outras p\u00e1ginas<\/b>, se voc\u00ea precisar de um recurso de outra p\u00e1gina e quiser pr\u00e9-carreg\u00e1-lo para acelerar a renderiza\u00e7\u00e3o dessa p\u00e1gina depois. Por exemplo:<\/p>\n<ul>\n<li>Voc\u00ea tem uma loja online, e 40% dos usu\u00e1rios saem da p\u00e1gina inicial para a p\u00e1gina do produto. Use <code>&lt;link rel= \"prefetch\"&gt;<\/code>, carregando arquivos CSS e JS para renderizar p\u00e1ginas de produto.\n<\/li>\n<li>Voc\u00ea tem um aplicativo de p\u00e1gina \u00fanica, e diferentes p\u00e1ginas carregam pacotes diferentes. Quando o usu\u00e1rio visita uma p\u00e1gina, \u00e9 poss\u00edvel pr\u00e9-carregar os pacotes para todas as p\u00e1ginas \u00e0s quais ela faz refer\u00eancia.<\/li>\n<\/ul>\n<p>\n<b>Provavelmente, esta tag pode ser usada com seguran\u00e7a em qualquer quantidade<\/b>. Os navegadores geralmente planejarem o prefetch com a menor prioridade, ent\u00e3o isso n\u00e3o atrapalha ningu\u00e9m. Apenas tenha em mente que isso consome a largura de banda do usu\u00e1rio, que pode custar dinheiro.<\/p>\n<p><b>N\u00e3o para requisi\u00e7\u00f5es urgentes<\/b>. N\u00e3o use <code>&lt;link rel= \"prefetch\"&gt;<\/code>, quando o recurso ser\u00e1 necess\u00e1rio em alguns segundos. Nesse caso, aplique <code>&lt;link rel= \"preload\"&gt;<\/code>.<\/p>\n<h3>Detalhes<\/h3>\n<p>\n<b>Tag opcional<\/b>. O navegador n\u00e3o \u00e9 obrigado a seguir esta instru\u00e7\u00e3o, ele pode ignor\u00e1-la, por exemplo, em uma conex\u00e3o lenta.<\/p>\n<p><b>Prioridade no Chrome<\/b>. No Chrome <code>&lt;link rel= \"prefetch\"&gt;<\/code> normalmente \u00e9 executado com a m\u00ednima prioridade (veja <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit\">a tabela completa de prioridades<\/a><\/noindex>), ou seja, ap\u00f3s o carregamento de todo o 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> pede ao navegador para se conectar antecipadamente ao dom\u00ednio, quando voc\u00ea deseja acelerar o estabelecimento da conex\u00e3o no futuro.<\/p>\n<p>O navegador deve estabelecer a conex\u00e3o se ele estiver extraindo algum recurso de um novo dom\u00ednio externo. Por exemplo, se estiver carregando fontes do Google Fonts, React de um CDN ou solicitando uma resposta JSON de um servidor API.<\/p>\n<p>Estabelecer uma nova conex\u00e3o normalmente leva algumas centenas de milissegundos. Isso \u00e9 feito uma \u00fanica vez, mas ainda assim leva tempo. Se voc\u00ea estabeleceu a conex\u00e3o antecipadamente, economizar\u00e1 tempo e carregar\u00e1 os recursos desse dom\u00ednio mais rapidamente.<\/p>\n<h3>Sintaxe<\/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 o nome de dom\u00ednio para o qual deve ser determinado o endere\u00e7o IP. Pode ser especificado com prefixo (<code>https:\/\/domain.com<\/code>) ou sem (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Quando usar<\/h3>\n<p>\n<b>Use para dom\u00ednios que ser\u00e3o necess\u00e1rios em breve<\/b> para carregar um estilo, script ou imagem importante de l\u00e1, mas voc\u00ea ainda n\u00e3o sabe a URL do recurso. Por exemplo:<\/p>\n<ul>\n<li>Seu aplicativo est\u00e1 hospedado em <code>my-app.com<\/code> e faz requisi\u00e7\u00f5es AJAX para <code>api.my-app.com<\/code>: voc\u00ea n\u00e3o sabe antecipadamente quais solicita\u00e7\u00f5es espec\u00edficas ser\u00e3o feitas, pois elas s\u00e3o feitas dinamicamente pelo JS. Aqui, o uso da tag para pr\u00e9-conectar ao dom\u00ednio \u00e9 bastante apropriado.\n<\/li>\n<li>Seu aplicativo est\u00e1 hospedado em <code>my-app.com<\/code> e usa fontes do Google Fonts. Elas s\u00e3o carregadas em duas etapas: primeiro, o arquivo CSS \u00e9 carregado do dom\u00ednio <code>fonts.googleapis.com<\/code>, ent\u00e3o este arquivo solicita as fontes de <code>fonts.gstatic.com.<\/code>Voc\u00ea n\u00e3o pode saber quais arquivos de fontes espec\u00edficos ser\u00e3o <code>fonts.gstatic.com.<\/code> voc\u00ea precisar\u00e1 at\u00e9 que o arquivo CSS seja carregado, portanto, antecipadamente, podemos apenas estabelecer uma conex\u00e3o preliminar.<\/li>\n<\/ul>\n<p>\n<b>Use esta tag para acelerar um pouco algum script ou estilo de terceiros<\/b> gra\u00e7as \u00e0 conex\u00e3o pr\u00e9-estabelecida.<\/p>\n<p><b>N\u00e3o abuse<\/b>. Estabelecer e manter uma conex\u00e3o \u00e9 uma opera\u00e7\u00e3o cara tanto para o cliente quanto para o servidor. Use esta tag no m\u00e1ximo para 4-6 dom\u00ednios.<\/p>\n<h3>Detalhes<\/h3>\n<p>\n<b>Tag opcional<\/b>. O navegador n\u00e3o \u00e9 obrigado a seguir esta instru\u00e7\u00e3o e pode ignor\u00e1-la, por exemplo, se muitas conex\u00f5es j\u00e1 foram estabelecidas ou em algum outro caso.<\/p>\n<p><b>O que inclui o processo de conex\u00e3o<\/b>. Para se conectar a cada site, o navegador deve realizar as seguintes a\u00e7\u00f5es:<\/p>\n<ul>\n<li><i>Resolu\u00e7\u00e3o de DNS<\/i>. Encontrar o endere\u00e7o IP do servidor (<code>216.58.215.78<\/code>) para o nome de dom\u00ednio especificado (<code>google.com<\/code>).<\/li>\n<li><i>Handshake TCP<\/i>. Troca de pacotes (cliente \u2192 servidor \u2192 cliente) para iniciar uma conex\u00e3o TCP com o servidor.<\/li>\n<li><i>Handshake TLS (apenas para sites HTTPS)<\/i>. Dois ciclos de troca de pacotes (cliente \u2192 servidor \u2192 cliente \u2192 servidor \u2192 cliente) para iniciar uma sess\u00e3o TLS segura.<\/li>\n<\/ul>\n<p>\nNota: HTTP\/3 melhorar\u00e1 e acelerar\u00e1 o mecanismo de handshake, mas ainda est\u00e1 longe.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"dns-prefetch\"><\/a><\/noindex><\/p>\n<h1>dns-prefetch<\/h1>\n<p>\n<code>&lt;link rel= \"dns-prefetch\"&gt;<\/code> pede ao navegador para realizar a resolu\u00e7\u00e3o de DNS para o dom\u00ednio antecipadamente, se voc\u00ea vai se conectar a ele em breve e deseja acelerar a conex\u00e3o inicial.<\/p>\n<p>O navegador deve determinar o endere\u00e7o IP do dom\u00ednio, se for buscar recursos de um novo dom\u00ednio de terceiros. Por exemplo, carregar fontes do Google Fonts, React de um CDN ou solicitar uma resposta JSON de um servidor API.<\/p>\n<p>Para cada novo dom\u00ednio, a resolu\u00e7\u00e3o do registro DNS geralmente leva cerca de 20-120 ms. Isso afeta apenas o carregamento do primeiro recurso deste dom\u00ednio, mas ainda representa uma lat\u00eancia. Se realizar a resolu\u00e7\u00e3o de DNS antecipadamente, economizaremos tempo e carregaremos o recurso mais r\u00e1pido.<\/p>\n<h3>Sintaxe<\/h3>\n<p><\/p>\n<pre><code class=\"xml\">&lt;link rel= \"dns-prefetch\" href=\"https:\/\/api.my-app.com\" \/&gt;<\/code><\/pre>\n<p>\n<code>href<\/code> indica o nome de dom\u00ednio para o qual o endere\u00e7o IP deve ser estabelecido. Pode ser indicado com um prefixo (<code>https:\/\/domain.com<\/code>) ou sem (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Quando usar<\/h3>\n<p>\n<b>Use para dom\u00ednios que ser\u00e3o necess\u00e1rios em breve<\/b> para carregar recursos de l\u00e1, dos quais o navegador n\u00e3o tem conhecimento antecipado. Por exemplo:<\/p>\n<ul>\n<li>Seu aplicativo est\u00e1 hospedado em <code>my-app.com<\/code> e faz requisi\u00e7\u00f5es AJAX para <code>api.my-app.com<\/code>: voc\u00ea n\u00e3o sabe antecipadamente quais solicita\u00e7\u00f5es espec\u00edficas ser\u00e3o feitas, pois elas s\u00e3o feitas dinamicamente pelo JS. Aqui, o uso da tag para pr\u00e9-conectar ao dom\u00ednio \u00e9 bastante apropriado.\n<\/li>\n<li>Seu aplicativo est\u00e1 hospedado em <code>my-app.com<\/code>, e usa fontes do Google Fonts. Elas s\u00e3o carregadas em duas etapas: primeiro, o arquivo CSS \u00e9 carregado do dom\u00ednio <code>fonts.googleapis.com<\/code>, ent\u00e3o este arquivo solicita as fontes de <code>fonts.gstatic.com.<\/code>Voc\u00ea n\u00e3o pode saber quais arquivos de fontes espec\u00edficos ser\u00e3o <code>fonts.gstatic.com.<\/code> voc\u00ea precisar\u00e1 at\u00e9 que o arquivo CSS seja carregado, portanto, antecipadamente, podemos apenas estabelecer uma conex\u00e3o preliminar.<\/li>\n<\/ul>\n<p>\n<b>Use esta tag para acelerar um pouco algum script ou estilo de terceiros<\/b> gra\u00e7as \u00e0 conex\u00e3o pr\u00e9-estabelecida.<\/p>\n<blockquote><p>Observe as caracter\u00edsticas semelhantes em <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> e <code>&lt;link rel= \"preconnect\"&gt;<\/code>. Us\u00e1-los juntos para um \u00fanico dom\u00ednio geralmente n\u00e3o faz sentido: <code>&lt;link rel= \"preconnect\"&gt;<\/code> j\u00e1 inclui <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> e muito mais. Isso pode ser justificado em dois casos:<\/p>\n<ul>\n<li><i>Voc\u00ea deseja oferecer suporte a navegadores antigos<\/i>. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> suportado <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-dns-prefetch\">come\u00e7ando com IE10 e Safari 5<\/a><\/noindex>. <code>&lt;link rel= \"preconnect\"&gt;<\/code> foi suportado por algum tempo no Chrome e Firefox, mas foi adicionado ao Safari somente na vers\u00e3o 11.1 e <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-preconnect\">n\u00e3o \u00e9 suportado no IE\/Edge<\/a><\/noindex>. Se precisar oferecer suporte a esses navegadores, use <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> como uma alternativa para <code>&lt;link rel= \"preconnect\"&gt;<\/code>.<\/li>\n<li><i>Voc\u00ea deseja acelerar a conex\u00e3o com mais de 4-6 dom\u00ednios<\/i>. A tag <code>&lt;link rel= \"preconnect\"&gt;<\/code> n\u00e3o \u00e9 recomendada para uso com mais de 4-6 dom\u00ednios, pois estabelecer e manter uma conex\u00e3o \u00e9 uma opera\u00e7\u00e3o cara. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> consome menos recursos, portanto, se necess\u00e1rio, use-a.<\/li>\n<\/ul>\n<\/blockquote>\n<p><\/p>\n<h3>Detalhes<\/h3>\n<p>\n<b>Tag opcional<\/b>. O navegador n\u00e3o \u00e9 obrigado a seguir essa instru\u00e7\u00e3o, portanto, pode n\u00e3o resolver o DNS, por exemplo, se houver muitas dessas tags na p\u00e1gina ou em algum outro caso.<\/p>\n<p><b>O que \u00e9 DNS<\/b>. Cada servidor na internet tem um endere\u00e7o IP exclusivo que se parece com <code>216.58.215.78<\/code>. Na barra de endere\u00e7os do navegador, geralmente se insere o nome do site (por exemplo, <code>google.com<\/code>), e os servidores DNS (Domain Name System) o vinculam ao endere\u00e7o IP do servidor (<code>216.58.215.78<\/code>).<\/p>\n<p>Para determinar o endere\u00e7o IP, o navegador deve enviar uma solicita\u00e7\u00e3o ao servidor DNS. Isso leva de 20 a 120 ms ao conectar-se a um novo dom\u00ednio externo.<\/p>\n<p><b>O DNS \u00e9 armazenado em cache, embora n\u00e3o de forma muito confi\u00e1vel<\/b>. Alguns sistemas operacionais e navegadores armazenam em cache as consultas DNS: isso economiza tempo em solicita\u00e7\u00f5es repetidas, mas n\u00e3o se pode contar com o cache. No Linux, geralmente n\u00e3o funciona de forma alguma. O Chrome possui um cache DNS, mas ele dura apenas um minuto. O Windows armazena em cache as respostas DNS por cinco dias.<\/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> solicita que o navegador carregue a URL e a exiba em uma aba invis\u00edvel. Quando o usu\u00e1rio clica no link, a p\u00e1gina deve ser exibida imediatamente. Isso \u00e9 \u00fatil se voc\u00ea tiver certeza de que o usu\u00e1rio visitar\u00e1 uma p\u00e1gina espec\u00edfica e quiser acelerar a sua exibi\u00e7\u00e3o.<\/p>\n<p>Apesar da efic\u00e1cia excepcional dessa tag (ou por causa dela), em 2019 <code>&lt;link rel= \"prerender\"&gt;<\/code> \u00e9 mal suportada pelos principais navegadores. Saiba mais em <noindex><a rel=\"nofollow\" href=\"#1\">mais abaixo<\/a><\/noindex>.<\/p>\n<h3>Sintaxe<\/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 a URL para a qual voc\u00ea deseja iniciar a Renderiza\u00e7\u00e3o em segundo plano.<\/p>\n<h3>Quando usar<\/h3>\n<p>\n<b>Quando voc\u00ea tiver certeza de que o usu\u00e1rio ir\u00e1 para uma p\u00e1gina espec\u00edfica<\/b>. Se voc\u00ea tem um \"t\u00fanel\" onde 70% dos visitantes da p\u00e1gina A v\u00e3o para a p\u00e1gina B, ent\u00e3o <code>&lt;link rel= \"prerender\"&gt;<\/code> na p\u00e1gina A ajudar\u00e1 a exibir rapidamente a p\u00e1gina B.<\/p>\n<p><b>N\u00e3o abuse<\/b>. O pr\u00e9-renderiza\u00e7\u00e3o \u00e9 extremamente caro em termos de tr\u00e1fego e mem\u00f3ria. N\u00e3o use <code>&lt;link rel= \"prerender\"&gt;<\/code> para mais de uma p\u00e1gina.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"1\"><\/a><\/noindex><\/p>\n<h3>Detalhes<\/h3>\n<p>\n<b>Tag opcional<\/b>. O navegador n\u00e3o \u00e9 obrigado a seguir essa instru\u00e7\u00e3o e pode ignor\u00e1-la, por exemplo, em uma conex\u00e3o lenta ou se n\u00e3o houver mem\u00f3ria livre suficiente.<\/p>\n<p>Para economizar mem\u00f3ria <b>o Chrome n\u00e3o realiza um render completo<\/b>, e <noindex><a rel=\"nofollow\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/07\/nostate-prefetch\">apenas pr\u00e9-carregamento NoState<\/a><\/noindex>. Isso significa que o Chrome carrega a p\u00e1gina e todos os seus recursos, mas n\u00e3o faz o render nem executa JavaScript.<\/p>\n<p>Firefox e Safari n\u00e3o suportam esse tag. Isso n\u00e3o viola a especifica\u00e7\u00e3o, j\u00e1 que os navegadores n\u00e3o s\u00e3o obrigados a seguir essa instru\u00e7\u00e3o; mas ainda assim \u00e9 triste. <noindex><a rel=\"nofollow\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=730101\">Um bug de implementa\u00e7\u00e3o<\/a><\/noindex> no Firefox foi aberto por sete anos. H\u00e1 relatos de que o Safari <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/bluesmoon\/status\/1108412360828563456\">tamb\u00e9m n\u00e3o suporta esse tag<\/a><\/noindex>.<\/p>\n<h1>Resumo<\/h1>\n<p>\nUse:<\/p>\n<ul>\n<li><code>&lt;link rel= \"preload\"&gt;<\/code>\u00a0\u2014 quando voc\u00ea precisar do recurso dentro de alguns segundos\n<\/li>\n<li><code>&lt;link rel= \"prefetch\"&gt;<\/code>\u00a0\u2014 quando voc\u00ea precisar do recurso na pr\u00f3xima p\u00e1gina\n<\/li>\n<li><code>&lt;link rel= \"preconnect\"&gt;<\/code>\u00a0\u2014 quando voc\u00ea souber que precisar\u00e1 de um recurso em breve, mas ainda n\u00e3o souber seu URL completo\n<\/li>\n<li><code>&lt;link rel= \"dns-prefetch\"&gt;<\/code>\u00a0\u2014 da mesma forma, quando voc\u00ea souber que precisar\u00e1 de um recurso em breve, mas ainda n\u00e3o souber seu URL completo (para navegadores antigos)\n<\/li>\n<li><code>&lt;link rel= \"prerender\"&gt;<\/code>\u00a0\u2014 quando voc\u00ea tiver certeza de que os usu\u00e1rios ir\u00e3o para uma p\u00e1gina espec\u00edfica e quiser acelerar sua exibi\u00e7\u00e3o<\/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.3 - 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\/pt\/blog\/preload-prefetch-i-drugie-tegi\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.3\" \/>\n\t\t<meta property=\"og:locale\" content=\"pt_PT\" \/>\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\/pt\/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 outras tags | ProHoster","description":"Existem muitas maneiras de melhorar o desempenho da web. Uma delas \u00e9 pr\u00e9-carregar conte\u00fado que ser\u00e1 necess\u00e1rio mais tarde.","canonical_url":"https:\/\/prohoster.info\/pt\/blog\/preload-prefetch-i-drugie-tegi","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"pt_PT","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\/pt\/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\/pt\/wp-json\/wp\/v2\/posts\/30281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/comments?post=30281"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/posts\/30281\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/media?parent=30281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/categories?post=30281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/tags?post=30281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}