{"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\/es\/blog\/preload-prefetch-i-drugie-tegi","title":{"rendered":"Preload, prefetch y otras etiquetas","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p>Hay <noindex><a rel=\"nofollow\" href=\"http:\/\/3perf.com\/talks\/web-perf-101\">Muchos m\u00e9todos para mejorar el rendimiento web<\/a><\/noindex>. Uno de ellos es la prerenderizaci\u00f3n de contenido que se requerir\u00e1 m\u00e1s tarde. Prefetching de CSS, prerenderizaci\u00f3n de la p\u00e1gina completa o resoluci\u00f3n de nombres de dominio. Hacemos todo por adelantado y luego mostramos el resultado instant\u00e1neamente. \u00a1Suena genial!<\/p>\n<p>A\u00fan m\u00e1s genial es que esto es muy f\u00e1cil de implementar. Cinco etiquetas &lt;link rel&gt; le dan al navegador la orden de realizar acciones preliminares:<\/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 \/>\nEn resumen, describiremos lo que hacen y cu\u00e1ndo utilizarlas.<\/p>\n<p>Ir 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> indica al navegador que cargue y almacene en cach\u00e9 el recurso (por ejemplo, un script o una hoja de estilos) lo antes posible. Esto es \u00fatil cuando el recurso ser\u00e1 necesario unos segundos despu\u00e9s de que se cargue la p\u00e1gina, y desea acelerar el proceso.<\/p>\n<p>El navegador no hace nada con el recurso despu\u00e9s de cargarlo. Los scripts no se ejecutan, las hojas de estilos no se aplican. El recurso simplemente se almacena en cach\u00e9 y est\u00e1 disponible inmediatamente a solicitud.<\/p>\n<h3>Sintaxis<\/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 el recurso que desea descargar.<\/p>\n<p><code> as<\/code> puede ser cualquier cosa que se pueda descargar en el navegador:<\/p>\n<ul>\n<li><code>style<\/code> para hojas de estilos,\n<\/li>\n<li><code>script<\/code> para scripts,\n<\/li>\n<li><code>font<\/code> para fuentes,\n<\/li>\n<li><code>fetch<\/code> para recursos que se cargan mediante <code>fetch()<\/code> o <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>lista completa en <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">MDN<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\nEs importante especificar el atributo <code>as<\/code> \u2013 esto ayuda al navegador a establecer prioridades y planificar la carga adecuadamente.<\/p>\n<h3>Cu\u00e1ndo usar<\/h3>\n<p>\nUtilice la precarga cuando el recurso se necesite en breve. Por ejemplo:<\/p>\n<ul>\n<li>Fuentes personalizadas desde un archivo externo:\n<pre><code class=\"xml\">&lt;!-- index.html --&gt;\n&lt;link rel=\"stylesheet\" href=\"index.css\" \/&gt;\n\/* index.css *\/\n@font-face {\n  src: url('comic-sans.woff2') format('woff2');\n}<\/code><\/pre>\n<p>\nfunciona hasta que se finalice manualmente. Por lo tanto, puede ser \u00fatil la opci\u00f3n <code>comic-sans.woff2<\/code> comenzar\u00e1 a cargarse solo despu\u00e9s de que se cargue y analice <code>index.css<\/code>. Para no esperar tanto, puede cargar la fuente antes con <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>Si divide sus estilos de acuerdo con el enfoque <noindex><a rel=\"nofollow\" href=\"https:\/\/3perf.com\/talks\/web-perf-101\/#css-block-rendering-1\">Critical CSS<\/a><\/noindex> en dos partes, cr\u00edtica (para el renderizado inmediato) y no cr\u00edtica:\n<pre><code class=\"xml\">&lt;style&gt;\n\/* Estilos cr\u00edticos en l\u00ednea *\/\n&lt;\/style&gt;\n\n&lt;script&gt;\n\/* JS personalizado que comienza a descargar estilos no cr\u00edticos *\/\nloadCSS('\/app\/non-critical.css');\n&lt;\/script&gt;<\/code><\/pre>\n<p>\nCon este enfoque, los estilos no cr\u00edticos comenzar\u00e1n a cargarse solo cuando se ejecute JavaScript, lo que puede suceder unos segundos despu\u00e9s del renderizado. En lugar de esperar a JS, utilice <code>&lt;link rel= \"preload\"&gt;<\/code>, para comenzar la carga antes:<\/p>\n<pre><code class=\"xml\">\/* Estilos cr\u00edticos en l\u00ednea *\/<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>\n<b>No abuse de la precarga<\/b>. Si carga todo de una vez, el sitio no se acelerar\u00e1 m\u00e1gicamente; de hecho, podr\u00eda obstaculizar la planificaci\u00f3n del trabajo del navegador.<\/p>\n<p><b> No confunda con el prefetching<\/b>. No utilice <code>&lt;link rel= \"preload\"&gt;<\/code>, si no necesita el recurso inmediatamente despu\u00e9s de cargar la p\u00e1gina. Si lo necesitar\u00e1 m\u00e1s adelante, por ejemplo, para la siguiente p\u00e1gina, utilice <code>&lt;link rel= \"prefetch\"&gt;<\/code>.<\/p>\n<h3>Detalles<\/h3>\n<p>\n<b>Esta es una etiqueta obligatoria<\/b> para la ejecuci\u00f3n del navegador (si lo admite), a diferencia de todas las dem\u00e1s etiquetas  relacionadas con la precarga. El navegador debe cargar el recurso indicado en <code>&lt;link rel=\"preload\"&gt;<\/code>. En otros casos, puede ignorar la precarga, por ejemplo, si est\u00e1 en una conexi\u00f3n lenta.<\/p>\n<p><b>Prioridades<\/b>. A diferentes recursos (estilos, scripts, fuentes, etc.), los navegadores generalmente les asignan diferentes prioridades para cargar primero los m\u00e1s importantes. En este caso, el navegador determina la prioridad seg\u00fan el atributo <code>as<\/code>. Para el navegador Chrome, puede ver <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit#\">la tabla 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 y otras etiquetas\" 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> solicita al navegador que cargue y almacene en cach\u00e9 el recurso (por ejemplo, un script o una hoja de estilo) en segundo plano. La carga se realiza con baja prioridad, por lo que no interfiere con los recursos m\u00e1s importantes. Esto es \u00fatil si el recurso se necesitar\u00e1 en la siguiente p\u00e1gina y desea almacenarlo en cach\u00e9 de antemano.<\/p>\n<p>Aqu\u00ed tambi\u00e9n, el navegador no hace nada con el recurso despu\u00e9s de cargarlo. Los scripts no se ejecutan, las hojas de estilo no se aplican. El recurso simplemente se almacena en cach\u00e9 y se proporciona inmediatamente bajo demanda.<\/p>\n<h3>Sintaxis<\/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 el recurso que desea descargar.<\/p>\n<p><code> as<\/code> puede ser cualquier cosa que se pueda descargar en el navegador:<\/p>\n<ul>\n<li><code>style<\/code> para hojas de estilos,\n<\/li>\n<li><code>script<\/code> para scripts,\n<\/li>\n<li><code>font<\/code> para fuentes,\n<\/li>\n<li><code>fetch<\/code> para recursos que se cargan mediante <code>fetch()<\/code> o <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>lista completa en <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">MDN<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\nEs importante especificar el atributo <code>as<\/code>\u00a0\u2014 esto ayuda al navegador a establecer correctamente las prioridades y planificar la carga.<\/p>\n<h3>Cu\u00e1ndo usar<\/h3>\n<p>\n<b>Para cargar recursos de otras p\u00e1ginas<\/b>, si necesita un recurso de otra p\u00e1gina y desea precargarlo para acelerar el renderizado de esa p\u00e1gina m\u00e1s tarde. Por ejemplo:<\/p>\n<ul>\n<li>Tienes una tienda en l\u00ednea, y el 40% de los usuarios se van de la p\u00e1gina principal a la p\u00e1gina del producto. Utiliza <code>&lt;link rel= \"prefetch\"&gt;<\/code>, cargando archivos CSS y JS para renderizar p\u00e1ginas con el producto.\n<\/li>\n<li>Tienes una aplicaci\u00f3n de una sola p\u00e1gina y diferentes p\u00e1ginas cargan diferentes paquetes. Cuando un usuario visita alguna p\u00e1gina, se pueden precargar los paquetes para todas las p\u00e1ginas a las que se hace referencia.<\/li>\n<\/ul>\n<p>\n<b>Probablemente, esta etiqueta se pueda usar de manera segura en cualquier cantidad.<\/b>. Los navegadores suelen planear el prefetch con la menor prioridad, por lo que no interfiere con nadie. Solo ten en cuenta que se consume el tr\u00e1fico del usuario, lo que puede costar dinero.<\/p>\n<p><b>No para solicitudes urgentes<\/b>. No utilice <code>&lt;link rel= \"prefetch\"&gt;<\/code>, cuando el recurso se necesita en unos segundos. En este caso, aplica <code>&lt;link rel= \"preload\"&gt;<\/code>.<\/p>\n<h3>Detalles<\/h3>\n<p>\n<b>Etiqueta opcional<\/b>. El navegador no est\u00e1 obligado a seguir esta instrucci\u00f3n y puede ignorarla, por ejemplo, en una conexi\u00f3n lenta.<\/p>\n<p><b>Prioridad en Chrome<\/b>. En Chrome <code>&lt;link rel= \"prefetch\"&gt;<\/code> se ejecuta generalmente con la prioridad m\u00ednima (ver <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit\">la tabla completa de prioridades<\/a><\/noindex>), es decir, despu\u00e9s de cargar todo lo dem\u00e1s.<\/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> pide al navegador que se conecte de antemano al dominio cuando deseas acelerar el establecimiento de la conexi\u00f3n en el futuro.<\/p>\n<p>El navegador debe establecer una conexi\u00f3n si extrae recursos de un nuevo dominio externo. Por ejemplo, si carga fuentes de Google Fonts, React desde un CDN o solicita una respuesta JSON desde un servidor API.<\/p>\n<p>Establecer una nueva conexi\u00f3n suele tardar unos cientos de milisegundos. Se realiza una vez, pero a\u00fan as\u00ed toma tiempo. Si estableces la conexi\u00f3n de antemano, ahorrar\u00e1s tiempo y cargar\u00e1s m\u00e1s r\u00e1pido los recursos desde ese dominio.<\/p>\n<h3>Sintaxis<\/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 el nombre de dominio para el cual se debe determinar la direcci\u00f3n IP. Se puede especificar con prefijo (<code>https:\/\/domain.com<\/code>) o sin \u00e9l (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Cu\u00e1ndo usar<\/h3>\n<p>\n<b>Usa para dominios que se necesitar\u00e1n pronto<\/b> para cargar estilos, scripts o im\u00e1genes importantes desde all\u00ed, pero a\u00fan no conoces la URL del recurso. Por ejemplo:<\/p>\n<ul>\n<li>Tu aplicaci\u00f3n est\u00e1 alojada en <code>my-app.com<\/code> y hace solicitudes AJAX a <code>api.my-app.com<\/code>: no sabes de antemano las solicitudes espec\u00edficas porque se realizan din\u00e1micamente desde JS. Aqu\u00ed es bastante adecuado usar la etiqueta para la preconexi\u00f3n con el dominio.\n<\/li>\n<li>Tu aplicaci\u00f3n est\u00e1 alojada en <code>my-app.com<\/code> y utiliza fuentes de Google Fonts. Se cargan en dos etapas: primero se carga el archivo CSS desde el dominio <code>fonts.googleapis.com<\/code>, luego este archivo solicita las fuentes desde <code>fonts.gstatic.com<\/code>. No puedes saber qu\u00e9 archivos espec\u00edficos de fuentes se <code>fonts.gstatic.com<\/code> necesitar\u00e1s, hasta que cargues el archivo CSS, por lo que de antemano solo podemos establecer una conexi\u00f3n preliminar.<\/li>\n<\/ul>\n<p>\n<b>Usa esta etiqueta para acelerar un poco alg\u00fan script o estilo de terceros.<\/b> por medio de la configuraci\u00f3n previa de la conexi\u00f3n.<\/p>\n<p><b>No abuses<\/b>. Establecer y mantener una conexi\u00f3n es una operaci\u00f3n costosa tanto para el cliente como para el servidor. Usa esta etiqueta como m\u00e1ximo para 4-6 dominios.<\/p>\n<h3>Detalles<\/h3>\n<p>\n<b>Etiqueta opcional<\/b>. El navegador no est\u00e1 obligado a seguir esta instrucci\u00f3n y puede ignorarla, por ejemplo, si ya se han establecido muchas conexiones o en alg\u00fan otro caso.<\/p>\n<p><b>Qu\u00e9 incluye el proceso de conexi\u00f3n<\/b>. Para conectarse a cada sitio, el navegador debe realizar los siguientes pasos:<\/p>\n<ul>\n<li><i>Resoluci\u00f3n de DNS<\/i>. Encontrar la direcci\u00f3n IP del servidor (<code>216.58.215.78<\/code>) para el nombre de dominio especificado (<code>google.com<\/code>).<\/li>\n<li><i>Handshake TCP<\/i>. El intercambio de paquetes (cliente \u2192 servidor \u2192 cliente) para iniciar una conexi\u00f3n TCP con el servidor.<\/li>\n<li><i>Handshake TLS (solo para sitios HTTPS)<\/i>. Dos rondas de intercambio de paquetes (cliente \u2192 servidor \u2192 cliente \u2192 servidor \u2192 cliente) para iniciar una sesi\u00f3n segura de TLS.<\/li>\n<\/ul>\n<p>\nNota: HTTP\/3 mejorar\u00e1 y acelerar\u00e1 el mecanismo de handshake, pero todav\u00eda est\u00e1 muy lejos.<\/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> pide al navegador que resuelva anticipadamente el DNS para el dominio, si pronto vas a conectarte a \u00e9l y deseas acelerar la conexi\u00f3n inicial.<\/p>\n<p>El navegador debe determinar la direcci\u00f3n IP del dominio si va a extraer alg\u00fan recurso de un nuevo dominio de terceros. Por ejemplo, cargar fuentes de Google Fonts, React desde un CDN o solicitar una respuesta JSON del servidor API.<\/p>\n<p>Para cada nuevo dominio, la resoluci\u00f3n de registros DNS generalmente toma alrededor de 20-120 ms. Esto solo afecta la carga del primer recurso desde dicho dominio, pero a\u00fan representa una demora. Si se realiza la resoluci\u00f3n DNS por adelantado, ahorraremos tiempo y cargaremos el recurso m\u00e1s r\u00e1pido.<\/p>\n<h3>Sintaxis<\/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 el nombre de dominio para el cual se debe establecer la direcci\u00f3n IP. Puede especificarse con el prefijo (<code>https:\/\/domain.com<\/code>) o sin \u00e9l (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Cu\u00e1ndo usar<\/h3>\n<p>\n<b>Usa para dominios que se necesitar\u00e1n pronto<\/b> para cargar desde all\u00ed recursos que el navegador no conoce de antemano. Por ejemplo:<\/p>\n<ul>\n<li>Tu aplicaci\u00f3n est\u00e1 alojada en <code>my-app.com<\/code> y hace solicitudes AJAX a <code>api.my-app.com<\/code>: no sabes de antemano las solicitudes espec\u00edficas porque se realizan din\u00e1micamente desde JS. Aqu\u00ed es bastante adecuado usar la etiqueta para la preconexi\u00f3n con el dominio.\n<\/li>\n<li>Tu aplicaci\u00f3n est\u00e1 alojada en <code>my-app.com<\/code>, y utiliza fuentes de Google Fonts. Se cargan en dos etapas: primero se carga el archivo CSS desde el dominio <code>fonts.googleapis.com<\/code>, luego este archivo solicita las fuentes desde <code>fonts.gstatic.com<\/code>. No puedes saber qu\u00e9 archivos espec\u00edficos de fuentes se <code>fonts.gstatic.com<\/code> necesitar\u00e1s, hasta que cargues el archivo CSS, por lo que de antemano solo podemos establecer una conexi\u00f3n preliminar.<\/li>\n<\/ul>\n<p>\n<b>Usa esta etiqueta para acelerar un poco alg\u00fan script o estilo de terceros.<\/b> por medio de la configuraci\u00f3n previa de la conexi\u00f3n.<\/p>\n<blockquote><p>Ten en cuenta caracter\u00edsticas similares en <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> y <code>&lt;link rel= \"preconnect\"&gt;<\/code>. Usar juntos para un dominio generalmente no tiene sentido: <code>&lt;link rel= \"preconnect\"&gt;<\/code> ya incluye <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> y mucho m\u00e1s. Esto se puede justificar en dos casos:<\/p>\n<ul>\n<li><i>Desea mantener navegadores antiguos<\/i>. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> es compatible <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-dns-prefetch\">a partir de IE10 y Safari 5<\/a><\/noindex>. <code>&lt;link rel= \"preconnect\"&gt;<\/code> fue compatible durante un tiempo en Chrome y Firefox, pero se a\u00f1adi\u00f3 en Safari solo en 11.1 y <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-preconnect\">todav\u00eda no es compatible en IE\/Edge<\/a><\/noindex>. Si necesita soportar estos navegadores, use <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> como alternativa para <code>&lt;link rel= \"preconnect\"&gt;<\/code>.<\/li>\n<li><i>Desea acelerar la conexi\u00f3n a m\u00e1s de 4-6 dominios<\/i>. La etiqueta <code>&lt;link rel= \"preconnect\"&gt;<\/code> no se recomienda utilizar con m\u00e1s de 4-6 dominios, ya que establecer y mantener la conexi\u00f3n es una operaci\u00f3n costosa. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> consume menos recursos, por lo que si es necesario, util\u00edcelo.<\/li>\n<\/ul>\n<\/blockquote>\n<p><\/p>\n<h3>Detalles<\/h3>\n<p>\n<b>Etiqueta opcional<\/b>. El navegador no est\u00e1 obligado a seguir esta instrucci\u00f3n, por lo que puede no realizar la resoluci\u00f3n de DNS, por ejemplo, si hay muchas de estas etiquetas en la p\u00e1gina o en alg\u00fan otro caso.<\/p>\n<p><b>Qu\u00e9 es DNS<\/b>. Cada servidor en Internet tiene una direcci\u00f3n IP \u00fanica que se ve como <code>216.58.215.78<\/code>. En la barra de direcciones del navegador generalmente se introduce el nombre del sitio (por ejemplo, <code>google.com<\/code>), y los servidores DNS (Sistema de Nombres de Dominio) lo emparejan con la direcci\u00f3n IP del servidor (<code>216.58.215.78<\/code>).<\/p>\n<p>. Para determinar la direcci\u00f3n IP, el navegador debe realizar una consulta al servidor DNS. Esto toma de 20 a 120 ms al conectarse a un nuevo dominio externo.<\/p>\n<p><b>DNS se almacena en cach\u00e9, aunque no de manera muy fiable<\/b>. Algunos sistemas operativos y navegadores almacenan en cach\u00e9 las consultas DNS: esto ahorra tiempo en solicitudes repetidas, pero no se puede confiar en la cach\u00e9. En Linux, generalmente no funciona en absoluto. Chrome tiene una cach\u00e9 DNS, pero solo dura un minuto. Windows almacena las respuestas DNS durante cinco d\u00edas.<\/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> pide al navegador que cargue la direcci\u00f3n URL y la muestre en una pesta\u00f1a invisible. Cuando el usuario hace clic en el enlace, la p\u00e1gina deber\u00eda mostrarse de inmediato. Esto es \u00fatil si est\u00e1 seguro de que el usuario visitar\u00e1 una p\u00e1gina espec\u00edfica y quiere acelerar su visualizaci\u00f3n.<\/p>\n<p>A pesar de la excepcional eficacia de esta etiqueta (o debido a ella), en 2019 <code>&lt;link rel= \"prerender\"&gt;<\/code> es mal soportada por los principales navegadores. M\u00e1s detalles en <noindex><a rel=\"nofollow\" href=\"#1\">abajo<\/a><\/noindex>.<\/p>\n<h3>Sintaxis<\/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 la URL para la que desea activar el renderizado en segundo plano.<\/p>\n<h3>Cu\u00e1ndo usar<\/h3>\n<p>\n<b>Cuando realmente est\u00e1 seguro de que el usuario ir\u00e1 a una p\u00e1gina espec\u00edfica<\/b>. Si tiene un \u00abt\u00fanel\u00bb por el cual el 70% de los visitantes de la p\u00e1gina A pasan a la p\u00e1gina B, entonces <code>&lt;link rel= \"prerender\"&gt;<\/code> en la p\u00e1gina A ayudar\u00e1 a mostrar muy r\u00e1pidamente la p\u00e1gina B.<\/p>\n<p><b>No abuses<\/b>. El renderizado previo es extremadamente costoso en t\u00e9rminos de tr\u00e1fico y memoria. No use <code>&lt;link rel= \"prerender\"&gt;<\/code> m\u00e1s de una p\u00e1gina.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"1\"><\/a><\/noindex><\/p>\n<h3>Detalles<\/h3>\n<p>\n<b>Etiqueta opcional<\/b>. El navegador no est\u00e1 obligado a seguir esta instrucci\u00f3n y puede ignorarla, por ejemplo, en una conexi\u00f3n lenta o si hay poca memoria disponible.<\/p>\n<p>Para ahorrar memoria, <b>Chrome no realiza un renderizado completo<\/b>, y <noindex><a rel=\"nofollow\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/07\/nostate-prefetch\">solo precarga NoState<\/a><\/noindex>. Esto significa que Chrome carga la p\u00e1gina y todos sus recursos, pero no realiza el renderizado ni ejecuta JavaScript.<\/p>\n<p>Firefox y Safari no admiten este tag en absoluto. Esto no infringe la especificaci\u00f3n, ya que los navegadores no est\u00e1n obligados a cumplir con esta instrucci\u00f3n; pero a\u00fan es decepcionante. <noindex><a rel=\"nofollow\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=730101\">Un bug de implementaci\u00f3n<\/a><\/noindex> en Firefox se descubri\u00f3 durante siete a\u00f1os. Hay informes de que Safari <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/bluesmoon\/status\/1108412360828563456\">tampoco admite este tag<\/a><\/noindex>.<\/p>\n<h1>Curr\u00edculum<\/h1>\n<p>\nUsa:<\/p>\n<ul>\n<li><code>&lt;link rel= \"preload\"&gt;<\/code>\u00a0\u2014 cuando necesite un recurso en unos segundos\n<\/li>\n<li><code>&lt;link rel= \"prefetch\"&gt;<\/code>\u00a0\u2014 cuando necesite un recurso en la pr\u00f3xima p\u00e1gina\n<\/li>\n<li><code>&lt;link rel= \"preconnect\"&gt;<\/code>\u00a0\u2014 cuando sepa que necesitar\u00e1 un recurso pronto, pero a\u00fan no sepa su URL completa\n<\/li>\n<li><code>&lt;link rel= \"dns-prefetch\"&gt;<\/code>\u00a0\u2014 de manera similar, cuando sepa que necesitar\u00e1 un recurso pronto, pero a\u00fan no conozca su URL completa (para navegadores antiguos)\n<\/li>\n<li><code>&lt;link rel= \"prerender\"&gt;<\/code>\u00a0\u2014 cuando est\u00e9 seguro de que los usuarios ir\u00e1n a una p\u00e1gina espec\u00edfica y desee acelerar su visualizaci\u00f3n<\/li>\n<\/ul>\n<p>Fuente: <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\/es\/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=\"es_ES\" \/>\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\/es\/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 y otros tags | ProHoster","description":"Hay muchas formas de mejorar el rendimiento web. Una de ellas es la precarga de contenido que se necesitar\u00e1 m\u00e1s tarde.","canonical_url":"https:\/\/prohoster.info\/es\/blog\/preload-prefetch-i-drugie-tegi","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"es_ES","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\/es\/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\/es\/wp-json\/wp\/v2\/posts\/30281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/comments?post=30281"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/posts\/30281\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/media?parent=30281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/categories?post=30281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/tags?post=30281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}