Generador de preload, preconnect y dns-prefetch
Pega las direcciones que usa el sitio (una por línea) o el HTML de la página. La herramienta elige el tipo de pista correcto para cada una y avisa cuando hay demasiadas.
Cómo usarAvisa al navegador lo que viene
Disponible en: 
Generador de preload, preconnect y dns-prefetch: para qué sirve
Los resource hints son etiquetas en el <head> que avisan al navegador lo que la página va a necesitar, para que adelante conexiones y descargas. Usados con moderación, acortan el tiempo hasta que aparece el contenido principal; usados en exceso, perjudican.
Pega las direcciones o el HTML de la página y la herramienta elige: preconnect (con crossorigin cuando es una fuente) para hasta tres dominios importantes, dns-prefetch para el resto y para los scripts de analítica, preload solo para una o dos fuentes y para la imagen principal con fetchpriority=high, y prefetch para la siguiente página probable. Cada etiqueta viene con su motivo.
Cómo usar
- Pega las direcciones o el HTML.
- Revisa el dominio, la imagen principal y la siguiente página.
- Copia las etiquetas al <head>.
Cuándo usar
- Sitios con Google Fonts.
- Páginas con una imagen grande arriba.
- Mejorar el LCP de Core Web Vitals.
Preguntas frecuentes
¿Cuál es la diferencia entre preconnect y dns-prefetch?
El preconnect abre la conexión completa con el otro dominio (DNS, TCP y TLS) antes de que el navegador la necesite. El dns-prefetch solo resuelve el DNS, es más barato y sirve para dominios menos importantes. Usa preconnect en pocos dominios, dos o tres, y dns-prefetch en el resto.
¿Cuándo usar preload?
Solo para recursos críticos que el navegador descubre tarde, como la fuente del título (que queda oculta dentro del CSS) o la imagen principal puesta como fondo por el CSS. Demasiado preload compite por ancho de banda con lo que importa y vuelve más lento el sitio.
¿Por qué la fuente necesita crossorigin?
Las fuentes siempre se piden en modo CORS. Sin el atributo crossorigin en el preload o en el preconnect, el navegador no reutiliza lo que ya descargó y termina pidiendo la fuente dos veces.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.