jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas HTML

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?

Constructor de etiquetas preload es una herramienta de navegador para esta tarea: Genera etiquetas link preload correctas para fuentes, imágenes hero, CSS y scripts. La salida es fácil de revisar antes de usarla en un sitio publicado.

Quick answer

Use preload to fetch critical resources -- such as hero images, fonts, or above-the-fold CSS -- before the parser discovers them. Only preload a few resources per page to avoid bandwidth contention.

Limitations

  • Preload requires the as attribute. Omitting it or using an incorrect value may cause the browser to fetch the resource twice.
  • Cross-origin preloaded resources such as fonts from a CDN must include the crossorigin attribute.
  • Excessive preloading delays other resources and can hurt performance instead of helping.

Cómo usar esta herramienta

  1. Abre la herramienta y escribe los valores necesarios.
  2. Revisa la salida en el panel de resultado.
  3. Copia solo la parte que encaja con tu página.
  4. Prueba el cambio antes de publicar.

Para qué puedes usarla

  • Resolver tareas repetidas de publicación con menos fricción.
  • Preparar marcado, CSS o checklists antes del lanzamiento.
  • Evitar pequeños errores comunes en sitios estáticos.

Errores comunes

  • Copiar la salida sin revisarla.
  • Usar URLs locales en lugar de URLs públicas finales.
  • No confirmar que el archivo esté en la carpeta publicada.

Verification

  1. Open Chrome DevTools Network panel and verify the preloaded resource appears early in the request waterfall with the correct Priority.
  2. Check the browser console for missing preload warnings such as 'The resource was already loaded and preload was not used'.

Comparison

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

Constructor de etiquetas preload funciona localmente?

Si. Las herramientas actuales están pensadas para generar salida en el navegador.

Debo probar el resultado?

Si. Revisa siempre la salida en tu plantilla, navegador y hosting.

Herramientas relacionadas

Más herramientas html

Prueba también

Prueba también