Prefetch: qué es, para qué sirve y como aplicarlo

"Prefetch" es una técnica fundamental en la optimización web que anticipa la carga de recursos que podrías necesitar en la siguiente página. Imagina que, en lugar de esperar a que el usuario haga clic en un enlace y luego cargar los elementos, algunos recursos importantes ya están preparados de antemano, lo que permite una navegación más rápida y fluida entre secciones.

En este artículo, te explicaré de manera sencilla qué es "Prefetch", para qué sirve y cómo puedes implementarlo en tu sitio para mejorar la experiencia de usuario y el rendimiento de tu web.

Qué es el prefetch

"Prefetch" es una técnica que nos permite anticipar la carga de ciertos recursos que el usuario podría necesitar en una siguiente página o interacción. Al usar "Prefetch", el navegador carga en segundo plano esos recursos mientras el usuario navega en la página actual. De esta forma, cuando el usuario decide avanzar o interactuar con algún elemento de la página, el contenido ya está preparado y disponible, reduciendo significativamente los tiempos de espera.

A diferencia de otras técnicas como "Preload", que prioriza la carga de recursos críticos para la página en curso, "Prefetch" se enfoca en optimizar la carga de los posibles recursos que el usuario podría requerir en el futuro. Esto lo hace ideal para mejorar la navegación entre páginas de un mismo sitio, ya que al llegar a la siguiente página, muchos de sus elementos ya están listos para ser mostrados.

Para qué sirve el prefetch

El "Prefetch" es una herramienta clave en WPO para mejorar la fluidez de la experiencia del usuario al navegar en tu sitio, al reducir el tiempo necesario para cargar nuevas páginas o recursos esperados.

Vamos a ver que partido le podemos sacar a esta técnica:

• Reducción de tiempos de carga en la navegación entre páginas: al anticipar y cargar recursos de futuras páginas, "Prefetch" permite que estos estén disponibles instantáneamente cuando el usuario haga clic en un enlace o acceda a una sección nueva. Esto es especialmente valioso en sitios con múltiples secciones o pasos, donde cada segundo de espera puede impactar la experiencia.
• Mejora de la experiencia del usuario: "Prefetch" es ideal para sitios donde la velocidad de respuesta es crítica. En aplicaciones como tiendas en línea, blogs o plataformas con navegación frecuente entre páginas, esta técnica hace que la transición entre secciones sea más rápida y fluida, mejorando la satisfacción del usuario.
• Optimización de recursos críticos en escenarios de baja conectividad: en situaciones de conexión lenta o en dispositivos móviles, "Prefetch" puede cargar previamente elementos que el usuario probablemente necesitará, minimizando la latencia cuando finalmente los requiera.
• Preparación de elementos externos o de alto consumo: al emplear "Prefetch" en archivos externos (como bibliotecas de JavaScript o imágenes de gran tamaño), puedes reducir el tiempo de espera al integrar estos elementos en tu página. Esto ayuda a asegurar que la mayoría de los recursos estén disponibles justo cuando el usuario interactúe con ellos.

Tipos de prefetch

Como ya te imaginarás, esta técnica es un poco avanzada y realmente, se subdivide en diferentes técnicas, dependiendo de la acción concreta que queramos implementar. Vamos a ver los principales tipos de Prefetch:

DNS Prefetch

Mediante esta acción anticipamos la resolución de nombres de dominio para enlaces externos o recursos que podrían cargarse posteriormente. Cuando el navegador resuelve el DNS de un dominio con antelación, la conexión es más rápida cuando se necesita acceder a ese recurso.

<link rel="dns-prefetch" href="//example.com">

Esto es especialmente útil para enlaces externos o archivos alojados en otros dominios.

En casos donde necesitas recursos externos (como scripts de una CDN o imágenes de otros dominios), "DNS Prefetch" nos ayuda a reducir el tiempo de espera para establecer la conexión.

Link Prefetch

Con "Link Prefetch", conseguimos que el navegador carga en segundo plano archivos de recursos que se encuentran en próximas páginas o rutas que el usuario probablemente visitará. Estos recursos se mantienen en caché y están listos para mostrarse instantáneamente si el usuario decide acceder a ellos.

<link rel="prefetch" href="next-page.html">

Es ideal para anticipar la carga de recursos en páginas a las que el usuario podría ir después de la actual, como en una tienda en línea, un blog, o una aplicación web donde es probable que el usuario avance de una página a otra.

Prerender

Con el "Prerender" vamos un paso más lejos todavía ya que cargamos toda la próxima página en segundo plano, de modo que al hacer clic, la transición es casi instantánea. En este caso, el navegador previsualiza completamente la página indicada, lo que permite una experiencia de carga más rápida y fluida.

<link rel="prerender" href="next-page.html">

Esta técnica es útil en escenarios donde estás muy seguro de la siguiente página que el usuario va a visitar, como en pasos secuenciales de un formulario o un nicho de descargas de plantillas en el que mareamos ligeramente al usuario.

Preconnect

Aunque he de decir que técnicamente no es "Prefetch", "Preconnect" se usa para mejorar la velocidad al establecer conexiones anticipadas con dominios externos, preparando la conexión antes de que se realice cualquier solicitud. Esto reduce la latencia, ya que permite que el navegador ahorre tiempo al preparar la conexión.

<link rel="preconnect" href="//example.com">

Plugins para aplicar un prefetch en WordPress

Quizá te de un poco de respeto aplicar esta técnica a tu web directamente en el código (o simplemente no tienes acceso a ello). Por lo que, como alternativa más que viable, te muestro a continuación

WP Rocket

Como era de esperar, WP Rocket nos permite implementar la técnica de "prefetch" en WordPress. Esta funcionalidad se encuentra en la sección de "Precarga" del plugin, donde nos deja especificar los dominios externos que deseas prefetchar (no se si existe la palabra pero tu me entiendes XD).

Al hacerlo, indicamos al navegador que resuelva anticipadamente las direcciones DNS de estos dominios, reduciendo la latencia cuando se necesiten cargar recursos de ellos.

Para configurar el prefetch en WP Rocket, sigue estos pasos:

1. Accede al panel de administración de WordPress y navega a Ajustes > WP Rocket.
2. Haz clic en la pestaña Precarga.
3. Desplázate hasta la sección Prefetch DNS Requests.
4. En el campo proporcionado, ingresa los dominios externos que deseas prefetchar, uno por línea, siguiendo el formato //dominio.com.
5. Guarda los cambios.

Así mismo, también podemos precargar nuestros enlaces activando la opción de Habilitar la precarga de enlaces.

Perfmatters

Con Perfmatters también podemos implementar la técnica de "prefetch" en WordPress. Este plugin ofrece una función llamada Instant Page, que prefetch los enlaces en segundo plano cuando el usuario pasa el cursor sobre ellos, mejorando la velocidad de carga percibida.

Para habilitar esta función en Perfmatters, sigue estos pasos:

1. Accede al panel de administración de WordPress y navega a Ajustes > Perfmatters.
2. Haz clic en la pestaña Preloading.
3. Activa la opción Enable Instant Page.
4. Guarda los cambios.

Además, Perfmatters nos permite añadir prefetch de DNS para dominios externos, lo que ayuda a resolver anticipadamente las direcciones DNS y reduce la latencia al cargar recursos de estos dominios.

Para configurar el prefetch de DNS en Perfmatters:

1. En la misma pestaña Preloading, localiza la sección DNS Prefetch.
2. Ingresa los dominios externos que deseas prefetchar, uno por línea, sin incluir http:// o https://.
3. Guarda los cambios.

Litespeed caché

Con LiteSpeed Cache también podemos implementar la técnica de "prefetch" en WordPress, y además gratis, ya que este plugin no es de pago.

Para configurar el prefetch de DNS en LiteSpeed Cache, sigue estos pasos:

1. Accede al panel de administración de WordPress y navega a LiteSpeed Cache > Page Optimization.
2. Haz clic en la pestaña HTML.
3. Desplázate hasta la sección DNS Prefetch.
4. En el campo proporcionado, ingresa los dominios externos que deseas prefetchar, uno por línea, utilizando el formato //dominio.com.
5. Guarda los cambios.