Prefetch, Preload y Preconnect: cómo usarlos para optimizar tu sitio web

9min

En este post te vamos a explicar unas de las técnicas de optimización de sitios web que debemos conocer: Prefetch, Preload y Preconnect. Son muy fáciles de utilizar y aportan numerosas ventajas que vamos a contarte. Podrás aprender estas técnicas de WPO, junto con ejemplos de uso para implementarlos en tu página web.

Índice

¿Qué es Prefetch?

Comenzamos con prefetch que es una técnica de optimización de sitios web que podemos aplicar en el navegador web y que nos permite cargar recursos que el usuario podría necesitar en un futuro próximo. Esta técnica permite obtener rendimiento de los procesos del navegador cuando éste está inactivo. Gracias a prefetch conseguimos reducir el tiempo de espera para obtener los recursos cuando el usuario finalmente los solicita.

Cómo implementar Prefetch para mejorar la experiencia de navegación

Implementar la técnica de Prefetch en un sitio web es tan sencillo como utilizar unas etiquetas HTML que vamos a explicarte, aunque también hay técnicas basadas en el uso de cabeceras del HTTP.

Agregar etiquetas de Prefetch en el código HTML

La etiqueta para implementar funcionalidades de Prefetch en un sitio web es . Simplemente tenemos que especificar el atributo «rel» con el valor «prefetch». 

<link rel='prefetch' href='imagen-carga-futura.jpg'>

Uso de HTTP headers para Prefetch

Aunque esta técnica requiere un control más avanzado de la configuración del servidor, también es posible especificar al navegador que queremos utilizar el prefetch a través de cabeceras del protocolo HTTP. 

Link: </imagenes-futuras.jpg>; rel=prefetch

Prefetch basado en análisis de datos de usuarios

Podemos hacer uso de las técnicas de Prefetch con todo tipo de contenido. Como desarrolladores de los sitios somos nosotros quienes tomamos las decisiones sobre qué archivos queremos precargar, sin embargo resulta muy útil implementar estas estrategias en base al comportamiento típico que detectemos de nuestros usuarios.

Por ejemplo, si se detecta que muchos usuarios visitan una sección determinada, podemos hacer el prefetch de esa página o de los archivos que se requieren en ella.

Estrategias de Prefetch adaptativas según el dispositivo

Si lo deseamos, también es posible configurar las etiquetas para implementar Prefetch de modo que afecten a usuarios que acceden con determinados tipos de dispositivos. Por ejemplo, puede ser útil hacer el Prefetch de imágenes de tamaños adecuados para una determinada pantalla.

<link rel='prefetch' href='big-image.jpg' media='(min-width: 1024px)'>
<link rel='prefetch' href='small-image.jpg' media='(max-width: 768px)'>

Prefetch para mejorar la carga de recursos multimedia

Unos de los tipos de contenido más adecuados para optimizar vía Prefetch son los recursos multimedia. Por ejemplo podrías usar Prefetch para recursos grandes como vídeos, que son típicamente los más lentos para cargar, así estarán listos para cuando se necesiten.

Uso de Prefetch en sitios web con contenido dinámico

Los sitios que tienen un comportamiento dinámico también son optimizables vía Prefetch. Por ejemplo podríamos tener un contenido que inicialmente no se presenta al usuario, pero que se muestra cuando se produce algún tipo de interacción. Si se prevé necesario en la mayor parte de las ocasiones sería especialmente aconsejable su precarga, de modo que el recurso esté ya disponible cuando el usuario realiza la acción.

Prefetch para recursos externos y de terceros

También puedes usar Prefetch para recursos cargados de dominios externos. No existe una limitación en ese sentido. Mediante esta técnica se puede optimizar la carga de esos recursos para cuando realmente sean necesarios.

¿Qué es Preload?

La técnica WPO de optimización Preload se usa para decirle al navegador que un recurso es crucial para la página actual y que, por tanto, debería ser cargado lo antes posible. Esto es útil para priorizar la carga de determinados archivos, independientemente de su posición en el documento HTML.

Cómo implementar Preload para acelerar la carga de recursos clave

Vamos a ver ahora cómo podemos especificar la optimización que nos aporta Preload en un sitio web.

Etiquetado de recursos para Preload en el código HTML

De un modo similar a lo que explicamos para la optimización Prefetch, se utiliza la etiqueta para activar la funcionalidad de Preload.

<link rel='preload' href='estilo-critico.css' as='style'>

Estrategias de Preload basadas en la carga de la página

La estrategia principal para el uso de Preload consiste en analizar los recursos que juzgamos esenciales para mejorar los tiempos de carga y la experiencia de usuario en el uso de las páginas web.

Utilización de HTTP headers para preload

Si lo deseas y tienes oportunidad, al igual que Prefetch, puedes controlar el Preload también mediante las cabeceras del protocolo HTTP.

Link: </estilo-critico.css>; rel=preload; as=style

Implementación de preload en recursos multimedia

Una de las prácticas WPO más habituales de implementación de Preload se da con el uso de vídeos que resultan importantes dentro del contenido de la página. Por ejemplo podemos diseñar un sitio en el que el fondo es un vídeo y se podría añadir ese archivo multimedia en  la configuración de Preload.

Preload selectivo según el tipo de dispositivo

En el diseño responsive también podemos sacar ventaja del Preload de recursos, indicando cuáles son los que podrían ser adecuados dependiendo de distintas características de los dispositivos.

En el siguiente ejemplo podemos ver distintas etiquetas en las que realizamos el Preload de distintos archivos de CSS críticos para cada tipo de pantalla.

<link rel='preload' href='desktop-style.css' as='style' media='(min-width: 1024px)'>
<link rel='preload' href='tablet-style.css' as='style' media='(min-width: 768px) and (max-width: 1023px)'>
<link rel='preload' href='mobile-style.css' as='style' media='(max-width: 767px)'>

Preload asincrónico para recursos no cruciales

A veces puede ser interesante aplicar las técnicas de preload también con archivos que no resultan tan cruciales. En estos casos no puedes utilizar la configuración «async» en la etiqueta , por lo que se suelen utilizar técnicas de acceso a los recursos mediante programación JavaScript asíncrona, lo que se conoce comúnmente como Ajax.

Estrategias de Preload para mejorar la interactividad del usuario

Como hemos dicho antes algunas acciones del usuario pueden requerir la carga de archivos con contenido multimedia, como por ejemplo un carrusel de imágenes. En estos casos puedes utilizar preload para asegurarte de qué los recursos están disponibles cuanto antes, independientemente de la estructura de tu documento y el momento de interacción del usuario.

<link rel='preload' href='image1.jpg' as='image'>
<link rel='preload' href='image2.jpg' as='image'>
<link rel='preload' href='image3.jpg' as='image'>

¿Qué es Preconnect?

Por último vamos a conocer las técnicas WPO de optimización basadas en Preconnect. Esta estrategia permite al navegador configurar conexiones iniciales antes de que una solicitud de recurso sea hecha. Con ello se puede disminuir sensiblemente la latencia y se usa típicamente para recursos que se encuentran en servidores externos.

Cómo implementar Preconnect para optimizar la conexión con el servidor

Vamos a ver ahora cómo implementar Preconnect de los distintos modos y resumir las principales estrategias aconsejables.

Uso de la etiqueta link para Preconnect en el código HTML

Puedes hacer uso de Preconnect usando la etiqueta , de manera muy similar a las otras optimizaciones que hemos comentado ya.

<link rel='preconnect' href='//ejemplo-dominio.com'>

Implementación de Preconnect mediante HTTP headers

Si tienes la posibilidad, también esta  funcionalidad mediante cabeceras del protocolo HTTP:

Link: </fonts.googleapis.com>; rel=preconnect; crossorigin

Preconnect selectivo para servidores específicos

A la hora de usar Preconnect y maximizar los beneficios en términos de WPO, puedes ponderar la necesidad de esta optimización, de modo que la uses preferentemente en aquellos servidores que tienen una mayor latencia para el acceso a sus contenidos.

Utilización de Preconnect en recursos de terceros y CDN

Puedes utilizar preconect cuando accedes a ficheros que están disponibles en CDNs. De hecho es muy probable que hayas visto utilizar esta técnica en conexiones a tipografías que instalas mediante Google Fonts.

<link rel='preconnect' href='https://fonts.googleapis.com'>
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link href='https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap' rel='stylesheet'>

Preconnect asincrónico para recursos no cruciales

Igual que comentamos para el caso de Preload también tienes la posibilidad de usar Preconnect de manera asincrónica para optimizar la conexión con ciertos recursos sin comprometer la experiencia del usuario.

Estrategias de Preconnect para mejorar la navegación móvil

Igual que ocurría con las técnicas de optimización de sitios web comentadas en los puntos anteriores, también resulta muy habitual utilizar estrategias de Preconnect para mejorar la navegación en dispositivos determinados. Vamos a ver unos ejemplos de estas configuraciones posibles de la etiqueta .

<link rel='preconnect' href='https://cdn.ejemplo.com' media='(max-width: 768px)'>
<link rel='preconnect' href='https://fonts.googleapis.com' media='(orientation: portrait)'>

Y con esto terminamos. Esperamos que este resumen de las prácticas WPO que nos aportan Prefetch, Preload y Preconnect te hayan servido de utilidad y las puedas aplicar para mejorar la experiencia de los usuarios cuando visitan tus sitios web.

Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: