¿Qué es el Flash of Unstyled Content (FOUC)?

El Parpadeo de Contenido sin Estilizar (FOUC) es la visualización temporal del contenido de una página web en el navegador antes de que se apliquen los estilos CSS. Esto ocurre debido a la carga y procesamiento secuencial de recursos. El navegador primero analiza el HTML y comienza a mostrarlo, y luego carga y aplica los estilos de archivos CSS externos o de la etiqueta <style>. En ese intervalo, el usuario ve HTML "sin adornos".

Razones del FOUC:

Velocidad de red baja: Una conexión lenta aumenta el tiempo de carga del CSS.
Gran tamaño del CSS: Cuanto mayor sea el tamaño de los estilos, más tiempo tardan en cargarse y analizarse.
Estilos bloqueantes: Si los estilos se conectan después del HTML, el navegador puede comenzar a renderizar antes de que se carguen completamente.
JavaScript que modifica CSS: Los scripts que añaden o cambian estilos dinámicamente pueden causar FOUC.

Escenarios típicos de FOUC:

El texto se muestra con la fuente predeterminada del navegador y luego cambia bruscamente a la especificada en CSS.
Los elementos restablecen su posicionamiento o visibilidad.
La cuadrícula de diseño se "deshace" y luego se vuelve a construir.

Formas de prevenir el FOUC:

Conectar CSS en <head>: Es la forma más efectiva. Los navegadores detienen el renderizado hasta que se cargan todos los estilos definidos en <head>, si están marcados como bloqueantes (por defecto para <link rel="stylesheet">).

<!-- Correcto: CSS en head -->
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Mi Página</title>
</head>
<body>
    <!-- Contenido -->
</body>

<!-- Incorrecto: CSS en body (puede causar FOUC) -->
<head>
    <title>Mi Página</title>
</head>
<body>
    <link rel="stylesheet" href="styles.css">
    <!-- Contenido -->
</body>

Estilos críticos en línea: Insertar los estilos principales directamente en la etiqueta <style> en <head> permite aplicar rápidamente el diseño básico antes de que se carguen las hojas de estilo externas.

<head>
    <style>
        body { font-family: sans-serif; }
        /* Estilos críticos */
    </style>
    <link rel="stylesheet" href="styles.css">
    <title>Mi Página</title>
</head>
<body>
    <!-- Contenido -->
</body>

Usar font-display: swap: Para las fuentes, para evitar el flash de texto sin estilo (FOUT), se muestra la fuente del sistema hasta que se cargue la fuente personalizada.
```
@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2');
  font-display: swap;
}
```

Ocultar contenido hasta que se carguen los estilos: Se puede usar JavaScript para ocultar el contenido principal hasta que se carguen todos los estilos (menos recomendable por dependencia de JS y posible ralentización).

<style>
  .hidden { display: none; }
</style>
<body class="hidden">
  <!-- Contenido -->
  <script>
    // Ejemplo: mostrar el body después de cargar estilos
    // En condiciones reales, se necesita un seguimiento más complejo de la carga de CSS
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.remove('hidden');
    });
  </script>
</body>

El FOUC afecta negativamente la experiencia del usuario y la percepción del sitio como "roto" o lento, por lo que su minimización es una parte importante de la optimización frontend.