a partir de una lista de recursos y el tipo as correspondiente. Admite fuentes, estilos, scripts, imágenes, audio,."> a partir de una lista de recursos y el tipo as correspondiente. Admite fuentes, estilos, scripts, imágenes, audio,."> a partir de una lista de recursos y el tipo as correspondiente. Admite fuentes, estilos, scripts, imágenes, audio,.">
#559 · Herramienta para desarrolladores

Generador de etiquetas preload

Genera etiquetas a partir de una lista de recursos y el tipo as correspondiente. Admite fuentes, estilos, scripts, imágenes, audio, vídeo, fetch y documentos; añade crossorigin cuando se solicita y puede incluir type para fuentes. El objetivo es producir hints explícitos y revisables, evitando convertir cada recurso en preload sin criterio.

Datos de entrada

Recursos para preload
Espacio publicitario

Cómo usar esta herramienta para desarrolladores

  1. Pega una URL o ruta por línea.
  2. Selecciona el tipo as que corresponda a esos recursos.
  3. Activa crossorigin cuando el recurso lo requiera, especialmente fuentes cross-origin.
  4. Genera las etiquetas y conserva solo preloads realmente críticos para la carga inicial.

Qué hace esta herramienta para desarrolladores

Crea una etiqueta preload por recurso con rel, href y as. Para as=font añade type cuando la extensión permite inferir woff o woff2.

Las líneas vacías y duplicadas se eliminan. Cada href se escapa como atributo HTML. crossorigin se emite como valor anonymous cuando está activado.

Preload eleva la prioridad de descarga; usarlo en demasiados recursos puede competir con solicitudes más importantes.

Ejemplo

Entrada

/fonts/inter.woff2

Salida esperada

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Casos de uso

  • Priorizar una fuente usada en el primer render.
  • Preload de una imagen LCP conocida.
  • Preparar hints para CSS o scripts críticos cuando el análisis de rendimiento lo justifique.

Consejos para obtener resultados fiables

  • Trabaja con una copia del marcado o archivo antes de sustituirlo en producción.
  • Prueba una entrada válida y otra deliberadamente incorrecta para entender los mensajes de la herramienta.
  • Revisa el resultado en el contexto real del sitio y no solo de forma aislada.
  • Conserva únicamente los metadatos o hints que tengan una finalidad concreta.

Detalles del procesamiento

El generador no mide rendimiento. Solo transforma la lista de recursos en marcado y añade atributos según las opciones seleccionadas.

La utilidad real de cada preload depende del navegador, la caché, CORS, prioridad de red y si el recurso se consume pronto tras cargar la página.

Preguntas frecuentes

¿Cuándo conviene usar rel=preload?

Cuando conoces un recurso crítico que el navegador descubriría tarde y sabes que se usará pronto en la navegación actual.

¿Qué valor debe tener as para una fuente WOFF2?

Debe ser font; normalmente también se declara type="font/woff2" y se revisa si crossorigin es necesario.

¿Puedo hacer preload de una imagen principal?

Sí, con as=image. Para imágenes responsive pueden ser necesarios atributos adicionales que este generador básico no infiere.

¿Por qué demasiados preload pueden empeorar una página?

Porque consumen ancho de banda y prioridad de conexión que podría necesitarse para recursos descubiertos naturalmente y más urgentes.

¿La herramienta comprueba si el recurso realmente se descarga?

No. Genera las etiquetas localmente; la comprobación efectiva se realiza con DevTools o herramientas de rendimiento en el sitio desplegado.

Resumen del módulo

MóduloFunción
EntradaRecursos para preload
ProcesamientoAnálisis y transformación local en el navegador
SalidaResource hints

Explora Metadatos web y archivos del servidor

Consulta más utilidades de esta categoría para revisar metadatos, relaciones HTML y archivos de configuración web.

Ver Category Hub