El Head y Carga de Recursos - Tutorial HTML

Por qué el <head> Importa

El <head> contiene información que el navegador necesita antes de renderizar la página: metadatos, hojas de estilo, scripts y sugerencias que aceleran la carga.

Estructura Esencial del Head

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Título de Página</title>
  <meta name="description" content="Resumen corto de la página" />

  <link rel="stylesheet" href="/styles.css" />
  <script src="/app.js" defer></script>
</head>

Carga de CSS y JavaScript

Hojas de Estilo

CSS bloquea el renderizado: el navegador espera para pintar hasta que el CSS crítico se descarga y analiza.

Scripts

Los scripts pueden bloquear el análisis HTML. Prefiere defer para la mayoría de los scripts.

Sugerencias de Recursos

Dile al navegador qué priorizar:

<!-- Preparar conexiones -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="dns-prefetch" href="//cdn.example.com" />

<!-- Precargar recursos críticos -->
<link rel="preload" href="/critical.css" as="style" />
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />

<!-- Prefetch para la siguiente página -->
<link rel="prefetch" href="/next-page.html" />

⚠️ Errores Comunes del Head

❌ Cargar scripts grandes sin defer o async
❌ Falta la etiqueta meta viewport en páginas móviles
❌ Cargar fuentes enormes sin preload o caché adecuado
❌ Poner CSS al final del <body>