Qué es FOUC
FOUC (Flash of Unstyled Content) es el momento en que el navegador muestra el HTML sin estilos aplicados antes de cargar el CSS. Visible como un “parpadeo” desagradable: texto plano sin formato durante unos ms, luego salta a la versión estilizada.
Por qué ocurre
Secuencia normal:
- Navegador descarga HTML
- Parsea HTML, encuentra
<link rel="stylesheet"> - Descarga CSS
- Aplica estilos
- Renderiza
Si el CSS es bloqueante: usuario espera todo el proceso → no ve FOUC pero LCP malo. Si el CSS no es bloqueante o se carga async: usuario ve HTML sin estilo brevemente → FOUC.
Cómo evitarlo
CSS critical inline
Incluir el CSS necesario para el above-the-fold directamente en el <head>:
<head>
<style>
/* CSS crítico para above-the-fold */
body { font-family: sans-serif; margin: 0; }
.hero { background: black; color: white; padding: 2rem; }
h1 { font-size: 3rem; }
</style>
<!-- CSS no-crítico cargado async -->
<link rel="preload" href="/styles.css" as="style" onload="this.rel='stylesheet'">
</head>El CSS inline evita FOUC del contenido visible inicial. El CSS completo se carga después.
CSS bloqueante simple
Si tu CSS es pequeño (<50KB), simplemente cárgalo bloqueante:
<link rel="stylesheet" href="/styles.css">LCP será 100-300ms más lento pero sin FOUC. Trade-off aceptable para webs pequeñas.
Frameworks que evitan FOUC
- Astro: inlines critical CSS automáticamente en build
- Next.js: gestiona CSS por defecto sin FOUC
- Tailwind CSS: clases utility, generalmente cabe en CSS crítico
FOUC vs FOUT/FOIT (fuentes)
FOUC es para CSS general.
FOUT (Flash of Unstyled Text): el texto aparece con fuente fallback, luego salta a la fuente web cuando carga.
FOIT (Flash of Invisible Text): el texto no aparece hasta que la fuente web carga (peor UX que FOUT).
Solución para fuentes:
@font-face {
font-family: 'TuFuente';
src: url('/fuente.woff2') format('woff2');
font-display: swap; /* mostrar fallback, swap cuando carga */
}font-display: swap evita FOIT. Sí causa FOUT pero es mejor que texto invisible.
Impacto en Core Web Vitals
- FOUC → impacta CLS (contenido se reorganiza al aplicar CSS)
- FOIT → impacta LCP (texto crítico tarda en aparecer)
- FOUT → impacta CLS (texto cambia de tamaño al swappear fuente)
Combatir todos estos mejora Core Web Vitals.
Cómo verificar FOUC
Visual
Recarga la página con DevTools → Throttling → Slow 3G. Si ves parpadeo, hay FOUC.
Lighthouse
Lighthouse detecta CSS render-blocking y lo reporta como oportunidad.
WebPageTest
Vídeo de la carga con frames cada 100ms. Ves visualmente si hay FOUC.
Mejor estrategia
- Critical CSS inline para above-the-fold
- font-display: swap en @font-face
- Preload de fuentes críticas
- Cargar CSS no-crítico async para below-the-fold
Resultado: 0 FOUC, 0 FOIT, LCP excelente.