Si te fijas nuestra web verás que carga a toda velocidad... Muchos desarrolladores tienden a pensar que eso se debe a que la conexión del servidor es muy rápida y poco más. Pero eso solo no es suficiente. Además de la calidad del código que utilizas (CSS y JavaScript sobre todo), existen multitud de técnicas para lograr esas velocidades elevadas de carga.
Y lograr que la página cargue rápido es muy importante porque:
- Los usuarios abandonan sitios web que tardan demasiado en cargar (a veces 2 o 3 segundos de espera ya hacen que se marchen)
- Google considera la velocidad de carga como factor de posicionamiento primordial y más importante que otros que quizá piensas que influyen más
- Una mejora de solo medio segundo puede aumentar las conversiones hasta un 10%
Existen diversas técnicas para conseguir mejorar el rendimiento de la página, pero en esta ocasión nos vamos a centrar en una en concreto: la técnica de carga especulativa, que trata de anticipar lo que el usuario podría hacer a continuación y preparar todo lo necesario antes de que lo necesite.
Se llama especulativa, precisamente porque como desarrolladores nos toca especular sobre lo que creemos que va a ser más importante para los usuarios y adelantarnos a ello para mejorar el rendimiento. Para hacerlo podemos utilizar las herramientas del desarrollador de los navegadores y también nuestra experiencia.
Lo mejor es que, una vez identificados los recursos, la carga especulativa es muy sencilla de implementar. Con unas pocas líneas de código HTML en la cabecera de tu página puedes conseguir mejoras significativas en su rendimiento.
Tipos de precarga de recursos en HTML
Vamos a ver los tipos básicos de precarga que existen:
Resolución anticipada de DNS
Esta es la forma más básica de precarga que tenemos disponible. Se trata de indicar al navegador a qué sitios se va a tener que conectar para obtener nuevos recursos.
Por ejemplo, si sabes que tu web siempre va a cargar imágenes desde cdn.tuservidor.com, podrías añadir:
<link rel="dns-prefetch" href="https://cdn.tuservidor.com">
Con esto precargas la información DNS del dominio, resolviéndolo (o sea, convierte el nombre de dominio en una dirección IP a la que conectarse) y almacenándolo en la caché de nombres de dominio del navegador.
Esto, que parece una tontería, si tienes varios dominios diferentes a los que conectarte te puede ahorrar entre 100 y 300ms por cada uno de ellos. Hoy en día donde cada fracción de segundo cuenta, puede suponer una mejora importante.
Preconexión
La preconexión va un paso más allá que lo anterior:
<link rel="preconnect" href="https://api.tuservicio.com">
Con ella consigues que el navegador inicie de forma anticipada todo el proceso de conexión con ese dominio, lo que incluye:
- Resolución DNS, como antes. Pero además...
- Establecimiento de conexión TCP: crea el canal de comunicación
- Negociación TLS: completa el handshake de seguridad si es una conexión HTTPS (que es lo normal)
Este proceso anticipado puede ahorrarte entre 100-500ms cuando realmente necesites cargar recursos desde esa CDN, ya que la conexión estará "caliente" y lista para usar. Es especialmente útil cuando sabes que vas a cargar varios recursos desde ese dominio pero no sabes exactamente cuáles serán, como por ejemplo llamadas a una API remota.
Precarga de recursos - Alta y baja prioridad
Los siguientes tipos de precarga van un paso más allá de los dos anteriores y sirven para precargar por completo ciertos recursos críticos que necesitas, especificando su ruta completa y no solo un nombre de dominio (de hecho, ni siquiera tienes que indicar el dominio si son recursos del dominio actual):
<link rel="preload" href="/estilos-criticos.css" as="style">
Este primer tipo de precarga, preload, además de hacer lo mismo que las anteriores, consigue que el navegador se descargue el recurso de inmediato y lo mantiene en memoria para aplicarlo más tarde en la página, cuando sea necesario.
Con la precarga completa de un recurso te puedes ahorrar hasta 1 o 2 segundos en la carga inicial de recursos críticos, aunque dependerá de su tamaño y del ancho de banda del servidor, claro.
Fíjate en que, como es un archivo concreto de un tipo en particular (CSS en el ejemplo), le indicamos dicho tipo con el atributo as: as="style". Esto podríamos hacerlo con scripts, imágenes, fuentes, etc...
Por ejemplo, si tu web carga fuentes personalizadas, si no utilizamos precarga, el texto podría parpadear o cambiar repentinamente. Si utilizamos una configuración parecida a esta en la cabecera de la página:
<link rel="preload" href="/fonts/mi-fuente.woff2" as="font" type="font/woff2">
el texto se mostrará correctamente desde el primer momento, pues la fuente se descargará ya de inmediato, antes de descargar el CSS y aplicarla.
Otra variante de la instrucción de precarga de recursos concretos es utilizar prefetch en lugar de preload:
<link rel="prefetch" href="main.js">
Esto es muy similar a lo anterior pero con una diferencia sutil. Lo que se hace en este caso es decirle al navegador que se descargue ese recurso en segundo plano con baja prioridad. Esto significa que a lo mejor incluso no se lo descarga pero, si lo hace, será seguramente cuando termine de descargar todos los demás recursos.
Entonces, ¿para qué podríamos necesitar esta segunda variante prefetech? Muy sencillo: para acelerar la carga de recursos que se van a necesitar probablemente en la próxima página, no en la página actual.
Es decir:
preload fuerza la descarga inmediata y prioritaria del recurso, para no esperar a cuando vaya a ser necesario y cuando va a ser utilizado en la página actual.prefetch indica la precarga de baja prioridad de un recurso que probablemente vaya a ser necesario (pero que quizá no lo sea) en una página posterior, estando disponible de inmediato al navegar a la siguiente página.
Generalmente utilizarás prefetch para indicar desde una página cosas que van a ser necesarias en páginas posteriores. Por ejemplo, en una página de login precargas ya las bibliotecas principales de la aplicación (normalmente grandes y pesadas) que se necesitarán para cargar la aplicación completa una vez el usuario se haya autenticado.
Caso especial: precarga de módulos de JavaScript
Existe todavía una variante más de todo lo anterior que se utiliza específicamente para cargar módulos ES6 de JavaScript, es decir, código aislado y reutilizable que vamos a usar en aplicaciones web:
<link rel="modulepreload" href="/recursos/app.js">
Esto funciona igual que preload pero le indicamos expresamente que es un módulo JS por lo que además de descargarlo y almacenarlo en caché, lo parsea y también descarga sus dependencias (lo necesita para lo primero). O sea, va más allá que en la recarga de un recurso normal, dejando el código listo para ser utilizado en cuanto se necesite.
Un caso obsoleto: el prerrenderizado
Un último caso que vamos a ver brevemente es la variante prerender que podrías encontrar por ahí utilizada para recursos HTML (no tienen que tener extensión HTML, solo devolver HTML), así:
<link rel="prerender" href="/siguiente-pagina.html" />
Lo que hace es descargar y renderizar en memoria ya la página completa, de modo que la tenga lista de manera instantánea cuando el usuario vaya a visitar la que creemos que será la próxima página que va a visitar.
Esto es una característica que solamente tiene Chrome y que ha sido marcada como obsoleta hace tiempo, por lo que no deberías utilizarla. Pero me ha parecido interesante reseñarlo aquí por si te la encuentras en código sin actualizar.
Por cierto, el motivo de marcar como obsoleta esta variante es que ahora existe una técnica más moderna y con mayor control: la API de Reglas de Especulación.
La API de Reglas de Especulación (Speculation Rules API)
La Speculation Rules API es una herramienta diseñada para mejorar la velocidad de carga percibida de las páginas web al optimizar la forma en que los navegadores gestionan recursos futuros. Básicamente, del mismo modo que todo lo anterior, nos permite dar pistas al navegador sobre qué enlaces o recursos podrían ser necesarios antes de que el usuario los solicite con el objetivo de hacer que nuestra app o nuestra web parezca más rápida y responsiva al usuario.
O sea, es muy parecida a lo que acabamos de ver pero más potente, ya que permite establecer condiciones específicas para hacer la precarga o el prerrenderizado, hacer listas, y otras características avanzadas más.
El uso básico de la API implica declarar reglas mediante un elemento <script> con el tipo speculationrules:
<script type="speculationrules">
{
"prerender": [
{ "source": "list", "urls": ["/pagina-destino.html"] }
]
}
</script>
En este caso, le estamos diciendo al navegador que prerrenderice (es decir, cargue y procese en segundo plano) la página /pagina-destino.html. Cuando el usuario haga clic en un enlace hacia esa página, ya estará lista para mostrarse instantáneamente.
El problema de esta API es que es bastante nueva, está promovida por Google, se considera experimental y solo está soportada por navegadores que utilicen Chromiun como motor, es decir: Chrome, Edge, Brave, etc... Pero no está soportada por Firefox ni por Safari.
Así que su uso te puede servir para los navegadores que la soportan y, muy importante, para los bots de Google que hacen análisis del rendimiento de las páginas para posicionarte en ese buscador, lo cual puede ser una razón válida por sí misma.
Para analizar su uso tendría que escribir un artículo entero y con lo que hemos visto anteriormente en este ya tendrías suficiente para la mayor parte de los casos, por lo que te dejo un enlace a la MDN por si quieres profundizar en esta API: Speculation Rules API en la MDN.
Conclusiones y recomendaciones
La carga especulativa representa una de las técnicas más potentes para optimizar el rendimiento de sitios web modernos. En este artículo hemos echado un vistazo a diferentes mecanismos que nos permiten anticiparnos a las necesidades del usuario, preparando recursos antes de que sean solicitados. Hemos visto cómo la preconexión y la resolución DNS anticipada pueden ahorrarnos valiosos milisegundos en las conexiones con terceros, algo especialmente crítico cuando trabajamos con CDNs, fuentes o APIs externas.
Estas técnicas nos permiten priorizar los recursos verdaderamente importantes para la experiencia inicial del usuario. Aunque es muy sencillo sacarle partido, es muy importante usarlas de forma estratégica. No todo debe precargarse: solo aquello que sabes que vas a necesitar pronto.
O sea, no se trata de precargar un montón de cosas "por si acaso", sino de invertir tiempo en identificar los recursos verdaderamente críticos y aplicar la técnica de precarga especulativa más apropiada en cada caso. Hay que combinar los distintos tipos de precarga de forma cuidadosa, monitorizando el impacto de cada una y ajustando según los resultados obtenidos.
Realmente, la carga especulativa no es tan solo una colección de atributos, sino que en realidad es una filosofía de trabajo centrada en la experiencia del usuario. Nos lleva a anticiparnos a las necesidades de los usuarios y preparar el terreno para conseguir una navegación fluida. Esto puede marcar la diferencia entre una web que simplemente funciona y una que realmente satisface a los usuarios.
¡Espero que te haya resultado útil!