En este artículo me gustaría hablar de un concepto que es posible que hayas escuchado si eres desarrollador web, sobre todo si realizas habitualmente optimización de rendimiento en páginas web, pero que de entrada quizá no termines de entender. Por este motivo haré una breve aproximación que ayude a entender de qué se trata.
Primero hagamos un breve viaje al pasado, aunque tampoco mucho en realidad. Hace un par de décadas las páginas web eran muy simples, los contenidos solían ser estáticos, con pocas imágenes y prácticamente sin conexión son servicios externos. Sin embargo, con el paso de los años y a partir de la llegada de la web 2.0, las web empezaron a volverse más dinámicas e interactivas. Esto hizo que empezara a ser problemático mantener tiempos de carga aceptables. Y aunque por suerte la conectividad a internet mejora continuamente, el peso y recursos a consumir por parte de los portales ha ido si no en paralelo, directamente por encima. Teniendo en cuenta el panorama es cuando ya allá por 2011 se empiezan a implementar a nivel navegador algunas medidas para paliar la situación, si bien no es hasta los últimos años que se ha convertido en una práctica compatible con los principales.
Habiendo añadido ya un poco de contexto podemos pasar a hablar del concepto sin más dilaciones. La carga especulativa (o speculative loading) cuando hablamos de páginas web, es una técnica desarrollo de portales que pretende anticiparse a las acciones del usuario. Con esta premisa se procura cargar determinados recursos como imágenes, scripts, estilos CSS o incluso páginas enteras, antes de que el navegante realmente los pida.
Con esto se pretende mejorar la percepción de velocidad y reducir la latencia de navegación, es decir lo que habitualmente conocemos como «va lento», haciendo que los recursos estén ya disponibles para cuando el usuario los solicite. Es un poco como cuando en un restaurante se empiezan a preparar los segundos platos después de hacer servido los primeros.
Técnicas
Si bien antes he dicho que la carga especulativa es una técnica por simplificar, esto no es exacto del todo, se trata más bien de un conjunto de técnicas. En este sentido su implementación en un proyecto web puede tomar diferentes formas y las más comunes que se suelen abordar son cuatro grupos, a saber: prefetching, preloading, prerendering y preconnect. Veremos a continuación someramente cada uno con un ejemplo práctico de implementación.
Prefetching
Cuando utilizas el prefetching, básicamente le estás diciendo al navegador que empiece a descargar ciertos recursos anticipadamente, aunque todavía no se necesiten en el momento inmediato. Imagina que tienes una web con varias páginas, y supones que es probable que el usuario visite alguna de ellas después. En este caso, puedes usar una línea de código como esta:
<link rel="prefetch" href="/pagina-siguiente.html">
Lo que hace esta etiqueta es indicarle al navegador que descargue discretamente la página llamada pagina-siguiente.html, guardándola en segundo plano. Así, si el usuario decide finalmente hacer clic en el enlace que lleva a esta página, el navegador la mostrará casi instantáneamente, porque ya estará cargada en la memoria caché. Esto reduce mucho los tiempos de espera percibidos por el usuario, aunque debes tener cuidado de no sobreutilizarlo para evitar descargar contenido que posiblemente nunca se visualice.
Preloading
La técnica de preloading es más directa y está orientada a cargar rápidamente recursos importantes para tu web que serán necesarios de inmediato o en muy poco tiempo. Por ejemplo, si utilizas una fuente personalizada en tu sitio web, podrías añadir algo como esto:
<link rel="preload" href="/fonts/helvetica.woff2" as="font" type="font/woff2" crossorigin>
Esta línea indica claramente al navegador que cargue la fuente llamada «Helvetica» desde el principio, incluso antes de usarla en la página. Esto evita ese molesto efecto visual en el que se muestra brevemente un texto con una tipografía estándar mientras carga la fuente personalizada. La clave aquí es anticiparte de manera inteligente, priorizando solo aquellos recursos críticos y así asegurarte de que el usuario tenga una experiencia visual más agradable e inmediata.
Prerendering
Finalmente, el prerendering es una técnica potente que anticipa completamente la navegación del usuario. Consiste en que el navegador cargue y renderice anticipadamente una página web completa antes de que se haga clic en el enlace que lleva a ella. Por ejemplo, si sospechas fuertemente que el usuario visitará cierta página (algo común en resultados de búsqueda), podrías añadir:
<link rel="prerender" href="/pagina-completa.html">
Con esto, el navegador carga la página completa, incluyendo imágenes, scripts y otros recursos, de manera silenciosa en segundo plano. Así, cuando el usuario haga clic finalmente en ese enlace, la página se mostrará instantáneamente, proporcionando una sensación de rapidez incomparable. Pero debes usar esta técnica con cautela, ya que implica un mayor uso de recursos (datos, batería y memoria) que podrían desperdiciarse si el usuario no termina accediendo a la página prerenderizada.
En resumen, cada una de estas técnicas especulativas tiene su propio uso y ventajas específicas. Saber combinarlas de manera inteligente y equilibrada te permitirá brindar una experiencia de navegación mucho más fluida, rápida y satisfactoria a quienes visiten tu página web.
Preconnect
Con el preconnect puedes anticiparte a futuras solicitudes que se harán a servidores externos, estableciendo antes de tiempo la conexión inicial. Por ejemplo, supón que tu página web utiliza fuentes alojadas en un servicio externo como Google Fonts; podrías usar una línea como esta:
<link rel="preconnect" href="https://fonts.googleapis.com">
Esto no descarga directamente ningún recurso, sino que solo abre la conexión al servidor externo (en este caso, Google Fonts). Cuando posteriormente necesites cargar una fuente, esta ya tendrá una conexión establecida previamente, lo que disminuye notablemente el tiempo de espera en la solicitud real. Es una técnica especialmente efectiva para mejorar el rendimiento al cargar contenido que proviene de servicios externos.
Comparación
Para que quede más clara la diferencia entre una y otra he decidido hacer una tabla comparativa sencilla que puede ser de utilidad si te estás teniendo una primera aproximación a estas técnicas. Más abajo te dejaré algunos recursos para que empieces a ampliar información sobre este tema.
| Técnica | Función | Prioridad descarga | Uso recomendado |
|---|---|---|---|
| Prefetch | Descarga recursos por adelantado | Baja | Recursos de acceso probable |
| Preload | Descarga recursos críticos anticipadamente | Alta | Recursos inmediatos o necesarios |
| Preconnect | Establece conexión por adelantado | No descarga | Conexiones con terceros casi inevitables |
| Prerendering | Carga y renderiza una página completa | Alta | Navegación predecible o muy probable |
Por concluir, si eres desarrollador web freelance como es mi caso, es importante mantenerse al día de las técnicas que se emplean habitualmente durante la optimización de sitios web. Si no eres tú el encargado de hacer las mejoras, como mínimo te interesa saber de qué te están hablando.
Referencias:
Carga especulativa (inglés) – Mozilla Developer Network (MDN)
Deja una respuesta