Qué es el preload
El preload es una instrucción que le dice al navegador qué recursos (una imagen, una fuente, un script) va a necesitar pronto, para que empiece a descargarlos antes de lo habitual y la página se sienta más rápida. También se conoce como «precarga de recursos».
Es como avisar a un camarero de tu próximo pedido antes incluso de terminar el plato actual, para que ya lo tenga listo en cuanto lo pidas, en lugar de empezar a prepararlo desde cero cuando se lo digas. El navegador, al leer el código de una página, normalmente va descubriendo qué recursos necesita a medida que los encuentra; el preload le adelanta esa información para algunos recursos clave, indicándole «esto lo vas a necesitar seguro, empieza a descargarlo ya», en lugar de esperar a llegar a la línea de código donde se menciona.
Cómo funciona
- Se identifica un recurso que la página va a necesitar con certeza y cuanto antes, como la imagen principal o una fuente tipográfica clave.
- Se añade una instrucción de preload para ese recurso concreto, al principio del código de la página.
- El navegador lee esa instrucción antes de llegar a la parte del código donde normalmente descubriría ese recurso.
- Empieza a descargarlo de inmediato, en paralelo con el resto de la carga de la página.
- Cuando el navegador llega al punto donde realmente necesita ese recurso, ya lo tiene descargado o casi, así que no hay que esperar.
Ejemplo
Una agencia de marketing en Santa Cruz de Tenerife usaba una fuente tipográfica personalizada que el navegador no empezaba a descargar hasta haber procesado buena parte del CSS, lo que provocaba que el texto apareciera primero con una fuente genérica y cambiara de golpe un instante después. Añadimos una instrucción de preload para esa fuente concreta, de forma que el navegador empezara a descargarla desde el primer momento, y el texto apareció directamente con su tipografía definitiva, sin ese cambio visible.
Señales de que te afecta
- PageSpeed Insights señala «precarga solicitudes clave» entre las recomendaciones de tu web.
- Notas que el texto de tu web cambia de tipografía un instante después de cargar (un «parpadeo» de fuente).
- Tu imagen o elemento principal tarda en empezar a descargarse aunque el resto de la página ya vaya cargando.
- Usas fuentes tipográficas personalizadas, no las que trae el sistema por defecto.
Cómo lo resolvemos
Identificamos qué recursos concretos de tu web merece la pena precargar (sin abusar de esta técnica, porque adelantar demasiados recursos puede ser contraproducente) y añadimos las instrucciones correspondientes para que el navegador los descargue cuanto antes. Si quieres que revisemos la carga de recursos de tu web, en nuestro servicio de optimización WordPress nos encargamos de configurarlo. El preload ayuda especialmente a mejorar el LCP cuando se aplica al elemento principal de la página, y conviene combinarlo con un buen CSS crítico.
Preguntas frecuentes
¿Puedo precargar todos los recursos de mi web para que vaya más rápido?
No conviene: si precargas demasiados recursos a la vez, compiten entre ellos por el ancho de banda disponible y el resultado puede ser peor que si solo precargas los realmente críticos.
¿El preload es lo mismo que el lazy load?
Son técnicas opuestas: el preload adelanta la carga de un recurso que se necesita cuanto antes, mientras que el lazy load retrasa la carga de un recurso hasta que de verdad hace falta.
¿Qué tipo de recursos se suelen precargar?
Normalmente la imagen o el elemento más grande de la pantalla inicial, las fuentes tipográficas personalizadas y, en algunos casos, algún script imprescindible desde el primer segundo.