Preload, prefetch y preconnect
Indique al navegador que obtenga antes los recursos críticos
Preload, prefetch y preconnect es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
¿Por qué usar sugerencias de recursos?
Los navegadores modernos descubren los recursos únicamente mientras analizan el HTML. Las sugerencias de recursos (atributos link rel en <head>) permiten indicarle al navegador «pronto necesitaré esto», de modo que la solicitud de red comienza antes de lo que permitiría el descubrimiento normal.
preload carga ahora
<link rel="preload" as="..." href="..."> indica al navegador que obtenga el recurso inmediatamente, con la prioridad adecuada para el tipo indicado en as. Úselo para recursos que la página necesitará sin duda: imágenes principales, fuentes críticas o JavaScript específico de la ruta.
<link rel="preload" as="font" type="font/woff2" href="/inter.woff2" crossorigin>El atributo as
Establezca siempre as: determina la prioridad de la solicitud, el encabezado Accept y la aplicación de la CSP. Los valores habituales son «script», «style», «font», «image» y «fetch». Sin as, los navegadores ignoran la precarga y registran una advertencia.
crossorigin para fuentes
Las precargas de fuentes requieren crossorigin incluso cuando la fuente tiene el mismo origen. Sin él, el navegador obtiene la fuente en modo CORS para su uso real, pero en modo anónimo para la precarga, lo que duplica la descarga: un error de rendimiento sutil y habitual.
prefetch carga más tarde
<link rel="prefetch" href="..."> indica que un recurso se necesitará en una navegación futura. El navegador lo obtiene con la prioridad más baja durante el tiempo de inactividad y después lo almacena en caché para que la página siguiente se muestre al instante.
<link rel="prefetch" href="/next-page.html">preconnect prepara las conexiones
<link rel="preconnect" href="https://api.example.com"> indica al navegador que realice la resolución DNS y los handshakes TCP y TLS con un origen de terceros antes de que llegue la primera solicitud. Úselo para los hosts de API y las CDN con los que la página vaya a comunicarse.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>dns-prefetch es la alternativa más ligera
<link rel="dns-prefetch"> solo realiza la búsqueda DNS, por lo que es más económico que preconnect. Úselo para muchos hosts de terceros cuando no pueda permitirse una conexión previa completa con cada uno; reserve preconnect para los pocos orígenes más críticos.
Limitar las sugerencias
Demasiadas precargas compiten por el mismo ancho de banda y ralentizan la página. Precargue únicamente los recursos que bloqueen la ruta de renderizado crítica, normalmente una imagen principal y una o dos fuentes críticas. Todo lo demás puede descubrirse de la forma habitual.
modulepreload para módulos ES
<link rel="modulepreload" href="/app.js"> precarga no solo el archivo del módulo, sino también su árbol de dependencias. Esto evita la cascada de descargas habitual de los módulos ES nativos, en la que cada importación espera a que se analice la anterior.
Medir el impacto
Use la columna Initiator del panel Network para confirmar que los recursos precargados se han obtenido realmente con antelación, y la auditoría «Preconnect to required origins» de Lighthouse para detectar oportunidades desaprovechadas. Eliminar una precarga lenta que no se utiliza suele aportar tanto como añadir una buena.
Particularidades de cada sugerencia
preload muestra una advertencia en la consola si el recurso no se utiliza en unos 3 segundos. El navegador puede cancelar prefetch cuando hay presión de red o memoria. Las conexiones preconnect se cierran después de unos 10 segundos de inactividad; úselo para recursos que se solicitarán pronto.
Comprobación de conocimientos
¿Qué hace preconnect que no hace dns-prefetch?
Resumen
preload obtiene ahora los recursos críticos (con as y crossorigin cuando sean necesarios). prefetch almacena en caché durante el tiempo de inactividad los recursos que probablemente se necesitarán en la siguiente navegación. preconnect (TCP+TLS) y dns-prefetch (solo DNS) preparan las conexiones con orígenes de terceros. modulepreload amplía preload al árbol de dependencias de los módulos ES. Úselos con moderación y mida sus efectos.
Preguntas frecuentes
¿La lección «Preload, prefetch y preconnect» es gratis?
Sí — el texto completo de «Preload, prefetch y preconnect» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Preload, prefetch y preconnect»?
Indique al navegador que obtenga antes los recursos críticos Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Preload, prefetch y preconnect»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Los atributos async y defer
- Preload, prefetch y preconnect
- Carga diferida de imágenes: loading=lazy
- Sugerencias de recursos: modulepreload