¿Sabías que podés adelantarle trabajo al navegador antes de que lo necesite? Con preconnect y preload podés mejorar la carga inicial haciendo que el browser esté un paso adelante. Te muestro cómo aprovecharlo.
¿Qué es preconnect?
Preconnect le dice al navegador que abra una conexión con un dominio antes de que realmente lo necesite. Esto incluye la resolución DNS, handshake TLS y conexión TCP. Es útil si sabés que tu sitio va a cargar recursos de un dominio externo (como una API o Google Fonts).
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>Este simple paso puede ahorrar cientos de milisegundos en la carga de la primera vista.
¿Y qué es preload?
Preload le indica al navegador que hay un recurso importante que debería comenzar a descargar lo antes posible, incluso antes de que se necesite en el flujo normal del HTML. Se usa mucho para fuentes web, imágenes grandes o scripts críticos.
<link rel="preload" href="/fonts/tipografia.woff2" as="font" type="font/woff2" crossorigin>O para cargar un JS esencial:
<link rel="preload" href="/js/funcionalidad-clave.js" as="script">¿Qué podés precargar?
Los recursos que más se benefician del preload son:
- Fuentes web (especialmente si usás Google Fonts o similares).
- Imágenes grandes del hero/banner.
- JS o CSS críticos para render inicial.
¿Y se puede abusar?
Sí. Si ponés preload en todo, vas a saturar el navegador y podrías tener el efecto contrario: demoras en recursos realmente prioritarios. Por eso, usalo con criterio. Preload es para lo esencial, no para todo el sitio.
¿Cómo saber qué conviene precargar?
Podés usar Google PageSpeed Insights o Lighthouse para detectar recursos que se podrían cargar antes. También podés mirar la pestaña "Network" en DevTools para ver qué se está cargando tarde.
Bonus: dns-prefetch
Otra opción más light que preconnect es dns-prefetch, que solo hace la resolución DNS anticipada:
<link rel="dns-prefetch" href="https://api.misitioexterno.com">Conclusión
Con pequeñas etiquetas podés darle al navegador una gran ventaja. Preconnect y preload te permiten optimizar la carga inicial de tu web sin tocar nada de tu lógica de código. Son mejoras técnicas, limpias y efectivas. Si querés que tu sitio cargue más rápido, no las subestimes 😉
