O que é o Flash of Unstyled Content (FOUC)?

O Flash de Conteúdo Não Estilizado (FOUC) é a exibição temporária do conteúdo de uma página web no navegador antes da aplicação dos estilos CSS. Isso ocorre devido ao carregamento e processamento sequencial de recursos. O navegador primeiro analisa o HTML e começa a exibi-lo, depois carrega e aplica os estilos de ficheiros CSS externos ou da tag <style>. Nesse intervalo, o utilizador vê HTML "puro".

Razões para o FOUC:

Velocidade de rede baixa: Uma ligação lenta aumenta o tempo de carregamento do CSS.
Grande volume de CSS: Quanto maior o tamanho dos estilos, mais tempo levam a carregar e analisar.
Estilos bloqueantes: Se os estilos estiverem ligados após o HTML, o navegador pode começar a renderizar antes de serem totalmente carregados.
JavaScript que modifica CSS: Scripts que adicionam ou alteram estilos dinamicamente podem causar FOUC.

Cenários típicos de FOUC:

O texto é exibido com a fonte padrão do navegador e depois muda abruptamente para a definida no CSS.
Elementos redefinem seu posicionamento ou visibilidade.
A grelha de layout "desfaz-se" e depois reconstrói-se.

Formas de prevenir o FOUC:

Ligar CSS no <head>: É a forma mais eficaz. Os navegadores suspendem o renderizado até que todos os estilos definidos em <head> sejam carregados, se estiverem marcados como bloqueantes (por padrão para <link rel="stylesheet">).

<!-- Correto: CSS no head -->
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Minha Página</title>
</head>
<body>
    <!-- Conteúdo -->
</body>

<!-- Incorreto: CSS no body (pode causar FOUC) -->
<head>
    <title>Minha Página</title>
</head>
<body>
    <link rel="stylesheet" href="styles.css">
    <!-- Conteúdo -->
</body>

Estilos críticos inline: Inserir os estilos principais diretamente na tag <style> em <head> permite aplicar rapidamente o layout básico antes do carregamento de folhas de estilo externas.

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

Usar font-display: swap: Para fontes, para evitar o flash de texto não estilizado (FOUT), mostra-se a fonte do sistema até que a fonte personalizada seja carregada.
```
@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2');
  font-display: swap;
}
```

Esconder conteúdo até que os estilos carreguem: Pode usar JavaScript para esconder o conteúdo principal até que todos os estilos estejam carregados (menos recomendado devido à dependência de JS e possível lentidão).

<style>
  .hidden { display: none; }
</style>
<body class="hidden">
  <!-- Conteúdo -->
  <script>
    // Exemplo: mostrar o body após carregar estilos
    // Em condições reais, é necessário acompanhar mais de perto o carregamento do CSS
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.remove('hidden');
    });
  </script>
</body>

O FOUC afeta negativamente a experiência do utilizador e a perceção do site como "partido" ou lento, por isso a sua minimização é uma parte importante da otimização frontend.