{"id":11707,"date":"2022-04-14T07:19:05","date_gmt":"2022-04-14T07:19:05","guid":{"rendered":"https:\/\/nieuw.wpprovider.nl\/que-es-prefetch-preconnect-y-prerender\/"},"modified":"2024-08-13T20:28:58","modified_gmt":"2024-08-13T20:28:58","slug":"que-es-prefetch-preconnect-y-prerender","status":"publish","type":"post","link":"https:\/\/nieuw.wpprovider.nl\/es\/que-es-prefetch-preconnect-y-prerender\/","title":{"rendered":"\u00bfQu\u00e9 es Prefetch, Preconnect y Prerender?"},"content":{"rendered":"\n<p>La carga r\u00e1pida (renderizaci\u00f3n) de una p\u00e1gina web es imprescindible en la era actual.\nLa mayor\u00eda de los sitios web realizan una lista de comprobaci\u00f3n b\u00e1sica para que tu sitio web sea m\u00e1s r\u00e1pido.\nHay herramientas como Page Speed Insights de Google, GTMetrix o Webpagetest que comprueban tu sitio web y sugieren qu\u00e9 se puede mejorar para que el sitio web se muestre m\u00e1s r\u00e1pido.  <\/p>\n\n<p>Cuando se trata de la velocidad de la p\u00e1gina, lo principal que hacen la mayor\u00eda de los desarrolladores es reducir (minificar) los archivos, comprimirlos con gzip y comprimir las im\u00e1genes.<\/p>\n\n<p>En un nivel m\u00e1s avanzado, hay pasos como el almacenamiento en cach\u00e9, el uso de una CDN para distribuir los recursos (lo cual es recomendable si tienes visitantes del extranjero), la <a href=\"https:\/\/webpack.js.org\/guides\/code-splitting\/\" target=\"_blank\" rel=\"noreferrer noopener\">divisi\u00f3n del c\u00f3digo<\/a>, la eliminaci\u00f3n de bloques JavaScript, etc.<\/p>\n\n<p>Pero tambi\u00e9n hay otras t\u00e9cnicas de las que la mayor\u00eda de la gente no habla cuando habla de hacer m\u00e1s r\u00e1pida tu p\u00e1gina web.\nEstas t\u00e9cnicas de mejora del rendimiento se conocen com\u00fanmente como <a href=\"https:\/\/www.w3.org\/TR\/resource-hints\/\" target=\"_blank\" rel=\"noreferrer noopener\">Resource Hints<\/a> (t\u00e9cnicas de prefetching).\nEs una forma sencilla de decirle al navegador: \u00abHola navegador, seguro que en alg\u00fan momento necesitar\u00e9 los recursos A, B y C. As\u00ed que precarga eso ahora, para que tu p\u00e1gina web sea m\u00e1s r\u00e1pida\u00bb.\nAs\u00ed que precarga eso ahora, para que podamos servirlo r\u00e1pidamente m\u00e1s tarde cuando se solicite.   <\/p>\n\n<p>La ejecuci\u00f3n tiene lugar en el <em>tiempo de inactividad<\/em> del navegador, que es cuando el navegador ya ha cargado la p\u00e1gina y, por tanto, no est\u00e1 haciendo nada.\nEsto significa que cuando un visitante est\u00e1 leyendo tu p\u00e1gina o entrada de blog, el navegador carga otra p\u00e1gina en segundo plano y calcula su visualizaci\u00f3n.\nDe este modo, la p\u00e1gina se muestra m\u00e1s r\u00e1pidamente en cuanto se pulsa el enlace correspondiente.\nEn otras palabras: pre-fetch y pre-render.   <\/p>\n\n<p>Si utilizas Google Analytics, puedes averiguar c\u00f3mo navegan los visitantes por tu sitio web para aprovechar al m\u00e1ximo estas t\u00e9cnicas.<\/p>\n\n<p>Se pueden utilizar las siguientes Sugerencias de Recursos: dns-prefetch, prefetch, preconectar y prerender.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"4651\">DNS-Prefetch<\/h2>\n\n<p>Un dns-prefetch indica al navegador que necesitamos unas cuantas fuentes de una URL concreta para que el navegador pueda empezar a gestionar el DNS lo antes posible.<\/p>\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\u201ddns-prefetch\u201d href=\u201d\/\/een-website.nl\u201d&gt;<\/code><\/pre>\n\n<p>Supongamos que se nos redirige a a-website.co.uk en alg\u00fan punto del sitio web.\nPodemos a\u00f1adir la l\u00ednea anterior en la cabecera del sitio web.\nDespu\u00e9s de que el navegador analice el documento, iniciar\u00e1 la gesti\u00f3n de DNS para a-website.co.uk.\nEsto har\u00e1 que las peticiones posteriores a a-website.co.uk sean un poco m\u00e1s r\u00e1pidas.   <\/p>\n\n<p id=\"88b2\">Utilizar el DNS prefetch puede ahorrar mucho tiempo con los redireccionamientos y en dispositivos m\u00f3viles o lugares donde la velocidad de Internet es m\u00e1s lenta.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"2118\">Prefijar enlace<\/h2>\n\n<p>Un prefetch se utiliza cuando estamos seguros de que un determinado recurso ser\u00e1 utilizado por el visitante en un momento dado.\nNo confundas dns-prefetch y prefetch, ya que ambos se utilizan por motivos diferentes.\nUn caso de uso com\u00fan es prefijar im\u00e1genes que pueden solicitarse en un momento determinado.\nUna vez cargada la p\u00e1gina, el navegador empieza a buscar la imagen en, por ejemplo: ejemplo.es\/images\/logo.jpg   <\/p>\n\n<p id=\"ee5b\">Un prefetch tiene este aspecto:<\/p>\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\u201dprefetch\u201d href=\u201dhttp:\/\/voorbeeld.nl\/afbeeldingen\/logo.jpg\"&gt;<\/code><\/pre>\n\n<p id=\"4165\">Cuando se produce esta l\u00ednea, el navegador solicita la imagen de la URL especificada, la descarga y la almacena en la cach\u00e9 del navegador.<\/p>\n\n<p id=\"954c\">Ten cuidado de no precargar demasiadas fuentes o demasiado grandes, ya que entonces tu navegador podr\u00eda darte el siguiente mensaje de error:<\/p>\n\n<pre class=\"wp-block-code\"><code>Failed to load resource: net::ERR_CACHE_WRITE_FAILURE<\/code><\/pre>\n\n<p>Esto significa que el recurso que intentamos precargar es demasiado grande para escribirlo en la cach\u00e9 del navegador.\nUtiliza la b\u00fasqueda previa s\u00f3lo si est\u00e1s absolutamente seguro de que el recurso se utilizar\u00e1 en alg\u00fan momento. <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"34d0\">Preconecta<\/h2>\n\n<p>Para un navegador, acciones como el manejo de DNS (traducir direcciones ip a nombres de dominio), el handshake TCP (Protocolo de Control de Transmisi\u00f3n) y el manejo de TLS (Seguridad de la capa de transporte) son tareas relativamente negras.<\/p>\n\n<p>La preconexi\u00f3n es similar a la preconexi\u00f3n DNS, pero opcionalmente tambi\u00e9n realiza el handshake TCP y los traspasos TLS.\nEsto ahorra tiempo al usuario al eliminar estas acciones. <\/p>\n\n<p>Incluyendo el siguiente c\u00f3digo en el cuerpo principal de tu sitio web, puedes conectar una p\u00e1gina web por adelantado.<\/p>\n\n<p><link rel=\"&#x201D;preconnect&#x201D;\" href=\"%80%\"\/><\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-1103\" src=\"https:\/\/nieuw.wpprovider.nl\/wp-content\/uploads\/Wat-is-Pre-connect.jpg.webp\" alt=\"\"\/>\n<figcaption><\/figcaption>\n<\/figure>\n\n<h2 class=\"wp-block-heading\">Pre-render<\/h2>\n\n<p>Pre-render es el jefe supremo de todas las t\u00e9cnicas de prefetching y debe utilizarse con cuidado.\nEl preborrado ordena al navegador que precargue todas las fuentes de una p\u00e1gina determinada con el c\u00f3digo que se indica a continuaci\u00f3n: <\/p>\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\u201dprerender\u201d href=\u201dhttps:\/\/voorbeeld.nl\/bepaalde-pagina\"&gt;<\/code><\/pre>\n\n<p>De hecho, en https:\/\/voorbeeld.nl\/bepaalde-pagina, el navegador carga y guarda la p\u00e1gina de forma invisible.\nCuando el visitante navega a esta p\u00e1gina, el navegador puede cargar f\u00e1cilmente la p\u00e1gina pre-renderizada, proporcionando una mejor experiencia al usuario. <\/p>\n\n<p>En este caso, es importante no aplicarlo innecesariamente, ya que es m\u00e1s probable que cause problemas (recursos innecesarios) que una p\u00e1gina m\u00e1s r\u00e1pida.<\/p>\n\n<h2 class=\"wp-block-heading\">\u00bfC\u00f3mo lo aplico?<\/h2>\n\n<p>\u00bfUtilizas nuestro <a href=\"https:\/\/wpprovider.nl\/managed-wordpress-hosting\/\" target=\"_blank\" rel=\"noopener\">paquete WordPress Gestionado<\/a>?\nEntonces no tienes que hacerlo t\u00fa mismo, nosotros nos ocupamos de todas las preocupaciones por ti. <\/p>\n\n<h2 class=\"wp-block-heading\">\u00bfEl sitio web sigue siendo lento?<\/h2>\n\n<p>No se dice que s\u00f3lo estas t\u00e9cnicas hacen que el sitio web sea rapid\u00edsimo, por supuesto es importante que la base (el alojamiento web) de tu sitio web sea buena.\n\u00bfA\u00fan no est\u00e1s alojado con WP Provider? <a href=\"https:\/\/wpprovider.nl\/#vrijblijvend-contact\" target=\"_blank\" rel=\"noopener\">Ponte en contacto<\/a> para discutir las opciones. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>La carga r\u00e1pida (renderizaci\u00f3n) de una p\u00e1gina web es imprescindible en la era actual. La mayor\u00eda de los sitios web realizan una lista de comprobaci\u00f3n b\u00e1sica para que tu sitio web sea m\u00e1s r\u00e1pido. Hay herramientas como Page Speed Insights de Google, GTMetrix o Webpagetest que comprueban tu sitio web y sugieren qu\u00e9 se puede [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[13],"tags":[],"class_list":["post-11707","post","type-post","status-publish","format-standard","hentry","category-sin-categorizar"],"acf":[],"_links":{"self":[{"href":"https:\/\/nieuw.wpprovider.nl\/es\/wp-json\/wp\/v2\/posts\/11707","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nieuw.wpprovider.nl\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nieuw.wpprovider.nl\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nieuw.wpprovider.nl\/es\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/nieuw.wpprovider.nl\/es\/wp-json\/wp\/v2\/comments?post=11707"}],"version-history":[{"count":1,"href":"https:\/\/nieuw.wpprovider.nl\/es\/wp-json\/wp\/v2\/posts\/11707\/revisions"}],"predecessor-version":[{"id":11708,"href":"https:\/\/nieuw.wpprovider.nl\/es\/wp-json\/wp\/v2\/posts\/11707\/revisions\/11708"}],"wp:attachment":[{"href":"https:\/\/nieuw.wpprovider.nl\/es\/wp-json\/wp\/v2\/media?parent=11707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nieuw.wpprovider.nl\/es\/wp-json\/wp\/v2\/categories?post=11707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nieuw.wpprovider.nl\/es\/wp-json\/wp\/v2\/tags?post=11707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}