Curso HTML 18.1 Orden de carga de recursos (CSS, JS, fuentes)

18.1 Orden de carga de recursos (CSS, JS, fuentes)

La forma en que un navegador descarga y procesa los recursos de una página (hojas de estilo, scripts y fuentes) condiciona el rendimiento y la experiencia del usuario. Este apartado detalla el flujo de carga, las diferencias entre recursos bloqueantes y no bloqueantes, y las mejores prácticas para optimizar tiempos de renderizado.

Carga de CSS

Cuando el navegador encuentra una etiqueta <link rel='stylesheet'> en el head, detiene el parseo del HTML hasta descargar y procesar la hoja de estilo. De este modo se construye el CSSOM (CSS Object Model), necesario para combinarlo con el DOM y calcular el render tree.

• Descarga en paralelo: las <link> permiten descargas concurrentes.
• Render-blocking: hasta que la hoja no termina de bajar y parsear, no se dibuja la página.
• Media queries: usando media='print' o similares, retrasas la descarga/parseo si no aplica la condición.

Ejemplo básico de inclusión:

<!-- Carga convencional, render-blocking -->
<link rel='stylesheet' href='styles/main.css'>

<!-- Carga condicional: sólo para impresión -->
<link rel='stylesheet' href='styles/print.css' media='print'>

Descarga y uso de fuentes web

Las fuentes custom via @font-face pueden generar bloqueo de texto (FOIT: Flash Of Invisible Text) mientras esperan la carga. Para mitigarlo:

• font-display con valores swap o optional para mostrar texto con fuente fallback rápidamente.
• Preload de fuentes críticas usando <link rel='preload'>.
• Preconnect a orígenes de terceros (Google Fonts, CDN de tipografías) para agilizar handshake y DNS.

Ejemplo con preconnect y preload:

<!-- Conexión previa a CDN de tipografías -->
<link rel='preconnect' href='https://fonts.gstatic.com'>

<!-- Precarga de fuente WOFF2 -->
<link rel='preload' 
      href='/fonts/roboto-v20-latin-regular.woff2' 
      as='font' 
      type='font/woff2' 
      crossorigin>

<!-- Luego la hoja de estilo de Google Fonts o tu propio CSS -->
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap'>

Carga de JavaScript

Por defecto, cada <script src='…'> bloquea el parser hasta descargar y ejecutar el archivo. Esto penaliza el First Contentful Paint si se ubican en el head. Disponemos de dos atributos clave:

• async: descarga en paralelo y ejecuta en cuanto esté listo, interrumpiendo el parser.
• defer: descarga en paralelo, pero retrasa la ejecución hasta haber parseado todo el HTML, garantizando orden de aparición.

Comparativa de atributos:

Ejemplo de uso de async y defer en el head:

<!-- Analítica asíncrona: no bloqueante, ejecución inmediata al descargar -->
<script src='analytics.js' async></script>

<!-- App principal, se ejecuta tras el parse completo y en orden -->
<script src='app.js' defer></script>

Además, ubicar scripts críticos justo antes del cierre de </body> con defer o sin atributos puede ser útil cuando dependen de elementos DOM ya existentes.

Resource Hints y Preloading

Los resource hints ayudan a preparar conexiones y descargas óptimas:

• dns-prefetch: resuelve DNS anticipadamente.
• preconnect: realiza handshake TLS y DNS.
• preload: prioriza descarga de un recurso específico.
• prefetch: baja recursos para navegaciones futuras, de baja prioridad.

Ejemplo combinando varios hints:

<!-- DNS prefetch a CDN -->
<link rel='dns-prefetch' href='//cdn.example.com'>

<!-- Preconnect a servidor de imágenes -->
<link rel='preconnect' href='https://images.example.com' crossorigin>

<!-- Precarga de un script crítico -->
<link rel='preload' href='/js/critical.js' as='script'>

<!-- Prefetch de script para navegación siguiente -->
<link rel='prefetch' href='/js/next-page.js' as='script'>

Resumen de buenas prácticas

• Cargar CSS en el head sin bloqueos innecesarios: media queries y preload para críticos.
• Preconnect y DNS prefetch para orígenes externos (tipografías, APIs, CDNs).
• Preload de fonts WOFF2 esenciales antes de la carga del CSS que las utiliza.
• Colocar scripts no críticos con async o defer y situar el resto al final de <body>.
• Usar prefetch para recursos de páginas siguientes y mejorar la percepción de velocidad.