Compón las etiquetas link rel preload útiles

Los equipos web lo usan cuando un recurso decisivo merece prioridad pero precargar todo desperdiciaría ancho de banda.

Compón las etiquetas link rel preload útiles. Tus datos permanecen en el dispositivo y el resultado es fácil de revisar y reutilizar.

Cómo usar

Enumera un recurso por línea, como un archivo de fuente o una imagen clave.
Usa las rutas exactas que solicita tu página.
Ejecuta el generador para crear las etiquetas link rel preload.
Inserta esas etiquetas en el head antes que otros recursos prioritarios.

Ejemplo

Un equipo observa que la fuente del título llega tarde y desplaza el diseño. Enumera el archivo de fuente usado por la página, genera las etiquetas de precarga y las coloca en el head. Esto les ayuda a evitar precargar todos los recursos del sitio. Después, una prueba con red lenta muestra si la prioridad de la fuente es útil.

Entrada

/assets/font.woff2
/assets/hero.webp

Límites y formatos

La precarga solo es útil para unos pocos recursos realmente críticos.
Una ruta incorrecta impide que el navegador encuentre el archivo.
Demasiadas etiquetas pueden retrasar otros elementos útiles.
La herramienta no comprueba si el recurso ya está en caché.
Los navegadores pueden ignorar una precarga innecesaria o mal formada.

Dónde se procesa

Las rutas que introduces se convierten en etiquetas dentro de tu navegador. No se envía ningún archivo fuera y la herramienta no activa llamadas de red. El código generado permanece disponible para que lo copies.

Preguntas frecuentes

¿Qué recursos debo precargar?

Reserva la precarga para archivos necesarios en el primer renderizado, como una fuente de encabezado o una imagen principal. Precargar demasiados elementos debilita la señal de prioridad. Comprueba con las herramientas del navegador si el cambio ayuda.

¿En qué se diferencia de la carga diferida?

La precarga pide al navegador que obtenga un recurso antes. La carga diferida retrasa los recursos que aún no se necesitan. Resuelven problemas opuestos y deben usarse para recursos diferentes.

¿Puedo precargar una fuente externa?

Puedes introducir una ruta relativa o absoluta según tu configuración. Asegúrate de que coincida con el archivo que tu página sirve realmente. Las reglas de origen cruzado y de seguridad aún pueden afectar a cómo lo usa el navegador.