Cómo precargar URLs para que carguen más rápido en tu sitio
Si querés que ciertas páginas de tu sitio carguen prácticamente al instante, hay un truco simple que podés usar.
Estoy hablando de precargar la URL antes de que el usuario haga clic.
Lo probé en este mismo sitio con la sección de publicar preguntas y tutoriales, y va rapidísimo, sobre todo en móviles. Si quieren, pueden probarlo ustedes mismos:
¡Vamos a ello!
Cómo funciona la precarga de URLs
Cuando prefetchamos una URL, le decimos al navegador que la cargue en segundo plano antes de que el usuario haga clic. Así, cuando la abre, el contenido ya está listo.
Acá les dejo tres formas de implementarlo en su sitio.
Método 1: Agregarlo manualmente en el <head>
Si querés precargar una URL específica, podés agregar esto directamente en el <head> de tu sitio
<link rel="prefetch" href="https://tusitio.com/tu-url" as="document">Ejemplo real que usé en nicheros.club:
<link rel="prefetch" href="https://nicheros.club/publicar/pregunta/" as="document">
<link rel="prefetch" href="https://nicheros.club/publicar/tutorial/" as="document">Podés agregarlo en tu tema de WordPress dentro del archivo header.php, justo antes del </head>.
Método 2: Agregarlo en functions.php de tu theme
Si no querés tocar el header.php, podés hacerlo desde el functions.php de tu tema con este código:
function agregar_prefetch_urls() {
echo '<link rel="prefetch" href="https://tusitio.com/tu-url" as="document">' . "n";
}
add_action('wp_head', 'agregar_prefetch_urls');Importantísimo, no abuses del prefetch
Aunque este método funciona muy bien y acelera la carga, no hay que abusar. Si prefetchás demasiadas URLs, podés sobrecargar el navegador del usuario y hacer que consuma más recursos de lo necesario.
Además, si la URL que precargás es muy pesada, se ralentizará la web.
¿Mi recomendación?
Usalo solo en pocas URLs estratégicas, como páginas clave donde querés que la experiencia sea más rápida (formularios, landings o secciones muy usadas).
Además, el rendimiento dependerá del dispositivo y del navegador. En la mayoría de los casos, los navegadores modernos gestionan bien esto, pero si el usuario tiene pocos recursos disponibles, podrían ignorar la precarga.
¿Qué te parece este truquillo?
Te leo en los comentarios.
Un abrazo.
Esto se puede hacer en los plugins de cache? me parece haberlo visto....
Buenas Fede, que buena práctica recomiendas para usar el prefetch, yo lo uso más en los js.
Pero precargar urls, me imagino que si conoces el recorrido de los usuarios en tu web, puedes saber mas menos a que urls podrian saltar, esas recomiendas precargar?
Al final, ¿el prefetch de url carga toda la data de la url y la deja en memoria?
Buenas Luis! Claro, es una precarga, por eso no es recomendable hacerla en muuuchas URLs porque sino ralentizaríamos la web. Lo ideal es hacerlo como hice yo en 2/3 estratégicas que necesites mejorar al máximo la respuesta
Tengo una web con 400mil post (directorio) podría servirme? O estaría abusando?
Buenas Moe! Nooo porfa no pongas 400 mil de estos que no solo explota tu servidor sino todos los servidores del mundo jjajajaj
Ahora en serio: no, este truquillo es para poner pocas URLS, dos, tres, algunas que sean estratégicas y quieras que carguen muy rapido. Pero muchas no porque sino ralentizaríamos la web.
Abrazo!
Muy buenos tips como siempre Fede! De forma similar se puede hacer para archivos js o servidores (dns-prefetch), como los de anuncios de Adsense 😉
Si no recuerdo mal Wp Rocket tiene opción para ello.
Saludos!
Qué lindo tenerte por acá Bruno!! Crack!
Cierto! Recuerdo los tips que nos diste en tu masterclass para Club Nichero, tremendo, lo apliqué en mis sitios más grandes y funcionó genial
Un abrazo!
Para lindo este magnífico sitio, esta realmente bien, enhorabuena!!
Qué bueno Federico!! Buen tip 👏
Muchas gracias compi! Luego cuéntame si lo implementas en algún sitio y como te va 😉