Configurar la precarga y la precarga en un sitio web

La precarga y la prefijación son técnicas que se utilizan para que un sitio web sea más rápido y fluido. Al precargar determinados recursos (incluso antes de que el usuario los necesite), reduces el tiempo de carga de componentes cruciales. En este artículo, te explico cuál es la diferencia, cuándo utilizarlas y cómo configurarlas técnicamente.

¿Cuál es la diferencia?

Precarga

Le dices al navegador: «Por favor, carga este archivo lo antes posible, es importante».

Se utiliza habitualmente para: fuentes, imágenes importantes, CSS o JS que se necesitan inmediatamente.

Prefetch

Le dices al navegador «Este recurso puede ser útil más adelante, cárgalo ya en segundo plano».

Se utiliza habitualmente para: páginas siguientes, scripts externos, llamadas a la API.

1. Ajustar la precarga

Precarga que añades en el de tu HTML. Especificas qué estás cargando y qué tipo de archivo es.

Ejemplo: precargar fuentes

Ejemplo: CSS crítico

Asegúrate de que lo configuras correctamente, de lo contrario el navegador ignorará la precarga.

2. Configurar Prefetch

Prefetch funciona especialmente bien para recursos que es probable que se necesiten pero no inmediatamente. Piensa en un enlace a una página siguiente o en un script que no se cargará hasta más tarde.

Ejemplo: un prefetch de página

O con frameworks como Next.js:

Muchos frameworks admiten la precarga automática de rutas internas (enrutamiento del lado del cliente). Pero la precarga manual también puede ser útil para las API externas o los scripts de terceros.

3. También útiles: dns-prefetch y preconnect

Para fuentes externas (como CDNs o scripts externos), es inteligente configurar la resolución DNS y las conexiones de antemano.

Ejemplo: Google Fonts

Explicación:

• dns-prefetch: resuelve el dominio antes de utilizarlo
• preconnect: ya se conecta (TCP handshake, TLS), más rápido que dns-prefetch

Utilízalo sólo para los dominios que utilices realmente, de lo contrario perderás rendimiento.

4. Pruebas y validación

Asegúrate de configurar correctamente la precarga y la precarga. Una implementación incorrecta puede provocar retrasos.

Herramientas:

• WebPageTest: comprueba si la precarga funciona según lo previsto
• Lighthouse: da recomendaciones de precarga
• Navegador devtools (pestaña Red): ¿ver si un archivo se ha cargado antes?

Buenas prácticas

• Utiliza la precarga sólo para los recursos críticos, de lo contrario ralentizarás otros recursos
• Combina la precarga con una reserva (por ejemplo,
• Pon preconectorización sólo en lo que realmente necesites
• Prueba del tiempo de carga antes y después de la implementación

En conclusión

La precarga y la precarga son técnicas relativamente sencillas para hacer que un sitio sea más rápido y fluido. Especialmente en sitios web con muchos medios, fuentes o componentes JS, puedes obtener beneficios notables con ellas, si las aplicas correctamente.