para uno o varios orígenes externos. Normaliza URLs para conservar solo esquema, host y puerto, elimina."> para uno o varios orígenes externos. Normaliza URLs para conservar solo esquema, host y puerto, elimina."> para uno o varios orígenes externos. Normaliza URLs para conservar solo esquema, host y puerto, elimina.">
#560 · Herramienta para desarrolladores

Generador de etiquetas preconnect

Genera resource hints para uno o varios orígenes externos. Normaliza URLs para conservar solo esquema, host y puerto, elimina duplicados y permite añadir crossorigin cuando la conexión vaya a utilizarse para solicitudes CORS. El resultado ayuda a preparar conexiones anticipadas sin confundir preconnect con una descarga de recursos.

Datos de entrada

Orígenes externos
Espacio publicitario

Cómo usar esta herramienta para desarrolladores

  1. Pega URLs absolutas o sus orígenes, una por línea.
  2. Activa crossorigin si necesitas que el hint prepare una conexión compatible con solicitudes CORS.
  3. Genera las etiquetas.
  4. Conserva preconnect solo para orígenes importantes que se usarán pronto.

Qué hace esta herramienta para desarrolladores

Convierte cada URL válida en su origin, por ejemplo https://cdn.example.com/assets/a.js pasa a https://cdn.example.com, y genera una sola etiqueta por origen.

URL() valida cada línea y exige http o https. Los orígenes duplicados se eliminan antes de construir el HTML.

Preconnect puede abrir DNS, TCP y TLS antes de necesitarlos, por lo que no conviene aplicarlo indiscriminadamente a muchos dominios.

Ejemplo

Entrada

https://cdn.example.com/js/app.js
https://cdn.example.com/css/app.css

Salida esperada

<link rel="preconnect" href="https://cdn.example.com">

Casos de uso

  • Preconectar con un CDN crítico.
  • Preparar la conexión con un host de fuentes o API usado al inicio.
  • Deduplicar URLs distintas que pertenecen al mismo origen.

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

No se ejecutan conexiones reales. Se usa la clase URL del navegador para extraer protocol, hostname y puerto como origin.

El beneficio depende de cuándo se necesite el origen y del coste de mantener conexiones anticipadas; mide el efecto en el sitio real.

Preguntas frecuentes

¿Qué parte de una URL usa rel=preconnect?

Se usa el origen: esquema, host y puerto. La ruta, query y fragmento no forman parte del preconnect.

¿Cuál es la diferencia entre preconnect y dns-prefetch?

preconnect puede anticipar más etapas de conexión, mientras que dns-prefetch se limita a la resolución DNS.

¿Cuándo debo añadir crossorigin a preconnect?

Cuando el recurso posterior se solicitará mediante una conexión CORS y el navegador necesite que la conexión anticipada coincida con ese modo.

¿Puedo usar preconnect para diez o veinte dominios?

Técnicamente puedes, pero anticipar demasiadas conexiones consume recursos; suele ser mejor reservarlo para unos pocos orígenes críticos.

¿La herramienta comprueba que el dominio responda?

No. Solo valida y normaliza la URL; no realiza DNS, TCP, TLS ni solicitudes HTTP.

Resumen del módulo

MóduloFunción
EntradaOrígenes externos
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