Cuando se trata de mejorar el rendimiento de un sitio web, cada milisegundo importa. Una de las formas más efectivas de reducir los tiempos de carga de recursos críticos es utilizar el atributo de enlace HTML rel="preload". En esta publicación, analizaremos cómo funciona la precarga, cuándo usarla y cómo puede mejorar drásticamente la experiencia del usuario en su sitio web.

¿Qué es rel="precarga"?

El atributo rel="preload" le permite indicarle al navegador que comience a descargar ciertos recursos antes de que sean necesarios durante la representación de la página. Al hacer esto, puedes asegurarte de que los recursos clave, como fuentes, hojas de estilo o secuencias de comandos, se obtengan antes, lo que reduce el tiempo que tarda la página en procesarse por completo.

En términos más simples, le estás avisando al navegador sobre qué archivos son importantes para una experiencia fluida.

¿Por qué debería utilizar la precarga?

La mayoría de las optimizaciones del rendimiento web se centran en reducir el tiempo que lleva cargar los recursos. La precarga es especialmente útil cuando hay activos críticos como fuentes, CSS o archivos JavaScript que impactan directamente en la rapidez con la que se muestra y funciona su página.

Así es como puede ayudar la precarga:

• Reducir el bloqueo de procesamiento: Al precargar CSS o fuentes críticas, se evitan problemas de bloqueo de procesamiento cuando la página espera a cargar estos recursos antes de mostrar el contenido.
• Mejorar la primera pintura de contenido (FCP): La precarga garantiza que los recursos importantes se descarguen más rápido, mejorando la velocidad a la que el primer contenido visual aparece a los usuarios.
• Mejor experiencia de usuario: Una página de carga más rápida se siente más receptiva y mejora la experiencia general del usuario, especialmente para recursos que requieren muchos recursos, como fuentes o imágenes destacadas.

Sintaxis y uso

Comencemos con un ejemplo básico de cómo usar rel="preload". A continuación se muestra un fragmento HTML simple que muestra cómo precargar una fuente personalizada:

En este ejemplo:

• hrefespecifica la URL del recurso.
• as indica el tipo de recurso (p. ej., fuente, imagen, secuencia de comandos).
• tipo ayuda al navegador a comprender el formato exacto del archivo (útil para fuentes).
• Se requiere crossorigin al cargar recursos de un dominio diferente. El navegador ve esta etiqueta y sabe que debe descargar la fuente con anticipación, incluso si el CSS que usa la fuente aún no se ha aplicado.

Precargando diferentes tipos de recursos
Puede precargar varios tipos de recursos que son críticos para representar su página. Echemos un vistazo a algunos ejemplos comunes:

1. Precargar fuentes
Las fuentes suelen ser una de las principales causas de que las páginas iniciales se carguen lentamente. Precargarlos garantiza que el texto tenga el estilo correcto tan pronto como se procesa el contenido, lo que evita el destello de texto sin estilo (FOUT) o el destello de texto invisible (FOIT).

2. Precargar hojas de estilo
Las hojas de estilo críticas que controlan el diseño de su página deben precargarse para garantizar que el navegador muestre la página lo más rápido posible.

3. Precargar scripts
Si tiene JavaScript que se requiere inmediatamente para la interacción del usuario, precargarlo puede ayudar a reducir el retraso en la ejecución del script.

4. Precargar imágenes
Las imágenes grandes, especialmente las que se usan en la mitad superior de la página, deben cargarse previamente para garantizar que los usuarios no vean espacios en blanco o marcadores de posición de imagen mientras se recupera la imagen.

Mejores prácticas para usar rel="preload"

Aunque la precarga es una herramienta poderosa, debes usarla con cuidado. Estas son algunas de las mejores prácticas:

1. Solo precargar recursos críticos: Precargar todo puede ralentizar tu sitio. Cíñete a los recursos que son esenciales para la representación de la página inicial.

2. Usar origen cruzado para recursos externos: al precargar recursos de un dominio diferente, asegúrese de incluir el atributo de origen cruzado. Esto garantiza que su recurso se pueda recuperar correctamente sin problemas de CORS.

3. Asegure un manejo adecuado de la caché: los recursos precargados deben poder almacenarse en caché para evitar solicitudes de red redundantes. Esto reduce la carga tanto en su servidor como en el navegador del usuario.

4. No precargar todo: la carga excesiva puede causar una tensión innecesaria en el navegador, lo que lleva a una degradación del rendimiento. Precargue únicamente los recursos que sean esenciales para la ruta de renderizado crítica.

Ejemplo de uso de rel="preload" en su sitio web
Aquí tienes un ejemplo completo de cómo puedes integrar rel="preload" en una página web típica:

    
Preload Example
        

En este ejemplo, hemos precargado los recursos esenciales que afectarán inmediatamente la velocidad de procesamiento de la página, como fuentes, hojas de estilo e imágenes.

Cuándo no utilizar rel="preload"

Si bien la precarga es poderosa, no es una solución mágica para todos los recursos. Aquí hay algunos casos en los que quizás quieras evitar usarlo:

Recursos no críticos: No cargues previamente recursos que no sean esenciales para la representación inicial de tu página.

Recursos impredecibles: si ciertos recursos son condicionales o dependen de la interacción del usuario (como imágenes en la mitad inferior de la página o JavaScript diferido), es mejor dejar que el navegador los busque cuando sea necesario.

Conclusión
Usar rel="preload" es una forma simple pero efectiva de acelerar su sitio web diciéndole al navegador que busque recursos críticos lo antes posible. Al centrarse en precargar recursos esenciales como fuentes, hojas de estilo e imágenes, puede reducir los tiempos de carga y mejorar la experiencia del usuario.

La conclusión clave: precargue solo lo que sea crítico y el rendimiento de su sitio web mejorará significativamente. ¡Pruébalo en tu próximo proyecto y comprueba la diferencia que hace!