jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas HTML

Gratis Constructor de etiquetas preload

Genera etiquetas link preload correctas para fuentes, imágenes hero, CSS y scripts.

Cargando herramienta...

Qué es Constructor de etiquetas preload?

Preload indica al navegador que obtenga un recurso anticipadamente, antes de que lo descubra normalmente. Acelera la carga de fuentes, imagenes hero, CSS critico y scripts. El atributo as es obligatorio para indicar al navegador que tipo de recurso esperar. La ausencia de as o un crossorigin incorrecto son errores comunes.

Respuesta rápida

Use preload para obtener recursos criticos (como imagenes hero, fuentes o CSS sobre el pliegue) antes de que el parser los descubra. Precargue solo unos pocos recursos por pagina para evitar contienda de ancho de banda.

Last updated: 2026-05-25

Limitaciones

  • Preload requiere el atributo as. Omitirlo o usar un valor incorrecto puede hacer que el navegador obtenga el recurso dos veces.
  • Los recursos precargados de origenes cruzados, como fuentes desde un CDN, deben incluir el atributo crossorigin.
  • La precarga excesiva retrasa otros recursos y puede perjudicar el rendimiento en lugar de ayudar.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Seleccione el tipo de recurso que necesita precargar: fuente, imagen, CSS o script.
  2. Ingrese la URL o ruta del archivo del recurso.
  3. La herramienta agrega los atributos as y crossorigin correctos para el tipo seleccionado.
  4. Copie la etiqueta link en el head de la pagina antes de otras referencias al recurso.

Para qué puedes usarla

  • Precargar un archivo de fuente critico para que el texto se renderice correctamente en la primera pintura.
  • Precargar una imagen hero para mejorar el Largest Contentful Paint.
  • Precargar un archivo CSS critico o un modulo JavaScript para una renderizacion mas rapida.

Casos de uso

Ejemplos prácticos

Ejemplo

Precarga de fuente web

Una pagina usa una fuente web personalizada. La etiqueta preload con as='font' y crossorigin la obtiene anticipadamente, reduciendo el flash de texto invisible.

Ejemplo

Precarga de imagen hero para LCP

Una pagina de aterrizaje precarga la imagen de fondo hero con as='image' para reducir el tiempo de Largest Contentful Paint en varios cientos de milisegundos.

Errores comunes

  • Precargar demasiados recursos, lo que desperdicia ancho de banda.
  • Usar preload sin el atributo as requerido.
  • Agregar preload para fuentes de origenes cruzados sin crossorigin.

Verificación

  1. Abra el panel Network de Chrome DevTools y verifique que el recurso precargado aparezca temprano en la cascada de solicitudes con la Priority correcta.
  2. Revise la consola del navegador para detectar advertencias de precarga faltantes como 'The resource was already loaded and preload was not used'.

Comparación

preload vs prefetch vs modulepreload

Aspectpreloadprefetchmodulepreload
What it loadsResources needed for the current pageResources likely needed for the next navigationES module scripts for the current page
When the browser fetches itImmediately, at high priority during page loadDuring idle time after the current page finishes loadingImmediately at high priority, similar to preload, but fetches the module and its dependencies
What it is best forCritical fonts, hero images, above-the-fold CSSNext-page resources such as docs, images, or scripts for the likely next pageES module entry points and their dependency trees in modern bundler output
Required attributesrel="preload" and the as attributerel="prefetch"rel="modulepreload"
Browser support milestoneChrome 50+, Safari 9+, Firefox 56+Chrome 50+, Safari 9+, Firefox 2+Chrome 80+, Safari 15+, Firefox 115+

Preload fetches current-page resources early at high priority. Prefetch fetches likely next-page resources during idle time. Modulepreload is a specialized preload for ES module scripts and their dependencies.

FAQ

Preguntas sobre Constructor de etiquetas preload

Cual es la diferencia entre preload y prefetch?

Preload obtiene recursos necesarios para la pagina actual lo antes posible. Prefetch obtiene recursos probablemente necesarios para la siguiente navegacion.

Deberia precargarlo todo?

No. Precargue un numero pequeno de recursos verdaderamente criticos. Demasiadas sugerencias de preload retrasan los recursos importantes.

Necesito el atributo as en cada enlace preload?

Si. El atributo as es obligatorio en los enlaces preload. Indica al navegador que tipo de recurso se esta cargando (style, script, font, image, fetch, etc.) para que pueda aplicar la priorizacion correcta, las comprobaciones de CSP y las reglas de cache. Un preload sin as es ignorado por los navegadores y genera una advertencia en la consola.

Que sucede si un recurso precargado no se usa en pocos segundos?

El navegador emite una advertencia en la consola y el recurso precargado puede descartarse. Las precargas no utilizadas desperdician ancho de banda y compiten con recursos genuinamente criticos. Verifique siempre que el recurso precargado sea consumido por la pagina en unos 3 segundos.

Herramientas relacionadas

Más herramientas html

Prueba también

Prueba también