Preload: qué es y cómo aplicarlo a un link
"Preload" es una técnica clave en la optimización web con la que priorizamos la carga de los recursos más importantes de una página. Es decir, imagina que, en lugar de esperar a que la página cargue todo en su orden tradicional, algunos elementos críticos como hojas de estilo, fuentes o scripts importantes ya están listos cuando el usuario los necesita.
En este artículo, te explicaré de forma sencilla qué es "Preload", cómo funciona y cómo puedes implementarlo en tus enlaces para optimizar la velocidad de carga y mejorar el rendimiento de tu web.
Qué es un preload
"Preload" es una técnica de optimización de rendimiento web que permite indicar al navegador qué recursos debe cargar de forma anticipada. Al usar "Preload", le damos prioridad a ciertos elementos esenciales de una página, permitiendo que estén disponibles lo antes posible y, con ello, mejorando la velocidad de carga y la experiencia del usuario.
Analizando este punto en mayor detalle, cuando un navegador carga una página web, sigue una secuencia predeterminada para descargar los recursos (imágenes, CSS, JavaScript, fuentes, etc.) según la estructura del HTML.
Dicho esto, en algunos casos, nos puede ser útil forzar la carga de ciertos elementos críticos antes que otros para mejorar el flujo de visualización de la página. Es aquí donde entra en juego "Preload".
A diferencia de otras técnicas como "Prefetch" o "Preconnect", que están orientadas a anticiparse a recursos que podrían usarse en el futuro, "Preload" está pensado para recursos que son cruciales y necesarios de inmediato para el funcionamiento y visualización de la página.
Por qué utilizar un link preload
La técnica "Preload" se ha vuelto popular en el desarrollo web por varios motivos clave que impactan directamente en el rendimiento y la experiencia del usuario. A continuación, te explico por qué deberías considerar implementar "Preload" en tus proyectos:
- Reducción de los tiempos de carga: con «Preload», el navegador puede cargar prioritariamente los recursos esenciales, de modo que estén disponibles antes de que el usuario los necesite. Esto mejora el tiempo en que la página es completamente visible y funcional, optimizando la «perceived load time» o tiempo percibido de carga.
- Mejora en el rendimiento y la experiencia del usuario: al cargar antes los recursos críticos, como hojas de estilo y fuentes, se evita que el usuario experimente retrasos visuales o parpadeos en la interfaz. Esta técnica es especialmente útil en dispositivos móviles o en conexiones lentas, donde cada segundo cuenta.
- Priorización de contenido esencial: «Preload» permite seleccionar cuidadosamente qué recursos deben estar disponibles lo más rápido posible. Esto es particularmente útil para recursos que afectan directamente la experiencia inicial del usuario, como un archivo CSS que carga la estructura visual o una imagen de fondo que debe aparecer de inmediato.
- Optimización del posicionamiento en motores de búsqueda: los motores de búsqueda, como Google, priorizan sitios rápidos y eficientes. La implementación de «Preload» ayuda a mejorar los tiempos de carga, lo que puede beneficiar el SEO del sitio y aumentar las probabilidades de obtener una posición más alta en los resultados de búsqueda.
Cuando es recomendable
Si bien, no siempre es necesario aplicar "Preload" en todos los recursos de una página, ya que su uso depende de las necesidades de carga específica de cada proyecto. A continuación, te indico en qué casos te puede resultar útil:
- Hojas de estilo CSS críticas: si una hoja de estilo es esencial para la estructura visual inicial de la página, aplicar «Preload» ayudará a que esta cargue sin retrasos, evitando que el usuario vea un diseño desordenado o sin formato.
- JavaScript esencial para la interacción inicial: cuando tienes scripts de JavaScript que afectan la funcionalidad principal de la página (como botones de navegación o animaciones de carga), «Preload» puede asegurar que el código esté listo en cuanto el usuario lo necesite.
- Fuentes web personalizadas: en sitios que dependen de fuentes personalizadas para su identidad visual, «Preload» permite que estas fuentes se carguen antes de que el contenido sea visible. Esto evita aplicar la técnica font display swap, que hace que el navegador muestre una fuente predeterminada temporalmente, lo cual mejora la experiencia de usuario al mantener la coherencia visual desde el primer momento.
- Imágenes de alta prioridad: si tienes imágenes que son fundamentales para la primera impresión del usuario (como banners o imágenes de fondo en la cabecera), «Preload» permite que estas se carguen rápidamente. Y esto es muy util ya que, por ejemplo, podemos precargar la imagen de renderizado del mayor elemento con contenido.
- Recursos en páginas de destino: si vas a crear una landing page o una home page, cada elemento cuenta para captar la atención del usuario de inmediato. Aplicar «Preload» en los recursos clave asegura que la página se presente completa y de manera atractiva desde el primer momento.
En resumen, "Preload" es una herramienta poderosa cuando se utiliza de manera estratégica. Aplica "Preload" en aquellos recursos que son críticos para la estructura y la interacción inicial del usuario y que realmente impactan la experiencia de navegación.
Te enseño a auditar tu web con Screaming Frog, para que identifiques y soluciones los problemas que están afectando tu SEO.
¡Comienza mi curso de Screaming Frog gratis hoy!
Cómo implementar Preload en un link o enlace
Como ya te imaginarás, podemos aplicar la precarga de un enlace manualmente, es decir, tocando el código como tal, o através de plugins que ya lo aplican por nosotros. Vamos a empezar viendo la forma manual y luego ya pasamos a los plugins.
Aplicar preload manualmente
Implementar "Preload" en un enlace es realmente sencillo ya que la implementamos incluyendo el el atributo rel="preload" dentro de la etiqueta <link> en HTML. Esta etiqueta permite especificar los recursos que deben cargarse anticipadamente, y mediante el atributo as, indicamos el tipo de recurso que se está cargando.
Así pues, dependiendo de lo que vayamos a cargar debemos especificar un recurso diferente dentro del el atributo as. Te muestro varios ejemplos.
Hojas de estilo CSS
Si deseas cargar una hoja de estilo de forma prioritaria, puedes usar la etiqueta <link> de la siguiente forma:
<link rel="preload" href="styles.css" as="style">JavaScript
Para scripts de JavaScript esenciales, utiliza "Preload" de la siguiente manera:
<link rel="preload" href="script.js" as="script">
Fuentes personalizadas
Aquí tienes un ejemplo de cómo implementarlo. En este caso, el navegador carga la fuente font.woff2 de manera anticipada, lo que ayuda a que el contenido se muestre con el estilo visual adecuado desde el principio. El atributo crossorigin es importante si la fuente proviene de un dominio distinto, ya que asegura que el recurso se cargue correctamente.
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
Imágenes de alta prioridad
Para imágenes que son clave en el diseño inicial, puedes precargarlas de la siguiente manera:
<link rel="preload" href="hero-image.jpg" as="image">Aplicar preload con plugins
Aunque existen varios plugins para WordPress que nos permite aplicar esta técnica, yo te voy a mostrar 2.
Preload con WP Rocket
Con WP Rocket podemos aplicar un preload fácilmente desde el panel de ajustes. Para ello, solo tenemos que ir a la sección de Precargar y marcar la opción de Activar la precarga. Así mismo, te aconsejo activar la opción de precargar los enlaces para que se empiecen a descargar la página de destino de un enlace cuando un usuario pase el ratón por él.
De hecho, un poco más abajo, también podemos aplicar un comando prefetch y precargar nuestras fuentes.
Preload con Perfmatters
Con el plugin de Perfmatters también podemos aplicar esta opción, aunque es un poco más compleja. Para ello, debemos ir a dicho plugin en Ajustes > Perfmatters y allí seleccionar la opción de Preloading.
Una vez allí, debemos activar la opción de preload, indicar la URL y seleccionar el tipo de recurso que vamos a cargar (para que se incluya en el atributo "as" de la de la etiqueta <link>).
También podemos marcar la opción de crossorigin si la fuente proviene de un dominio distinto.
Ya, para terminar, simplemente te comento que actualmente la gran mayoría de navegadores ya son compatibles y nos permiten aplicar esta técnica correctamente. Algunos de los browsers que admiten el uso del preload son:
- Google Chrome
- Firefox
- Microsoft Edge
- Safari
- Opera
- Android Browser
- Samsung Internet
Si has llegado hasta aquí… ¡Apúntate a mi Newsletter y sigue aprendiendo cada semana sobre SEO!