Uma página leva quatro segundos para mostrar algo útil. Me conte o que acontece entre o HTML chegar e o primeiro paint, e o que bloqueia isso.

O parser constrói o DOM conforme o HTML chega em streaming, mas uma folha de estilo bloqueia a renderização porque o navegador não pinta com conteúdo sem estilo, e um script clássico sem defer ou async bloqueia o parser por completo. Quando o CSS e os scripts bloqueantes terminam, o navegador monta a render tree, faz layout, pinta e compõe. Os culpados de sempre são CSS bloqueante de renderização, scripts síncronos no head e fontes ou imagens de destaque descobertas tarde.

Conforme o HTML chega em streaming, o parser constrói o DOM de forma incremental, e em paralelo o preload scanner olha adiante procurando imagens, scripts e folhas de estilo para começar a buscar cedo. CSS bloqueia renderização, porque o navegador não pinta conteúdo que talvez precise reestilizar um frame depois, então uma folha de estilo lenta segura o primeiro paint mesmo com o DOM pronto. Uma tag script clássica sem defer ou async é pior, já que bloqueia o parsing por completo enquanto baixa e executa. Com os estilos prontos, o navegador monta a render tree, faz layout, pinta e compõe. Quando recebo um primeiro paint de quatro segundos, minhas três primeiras checagens são se algum script no head está bloqueando, se o CSS é um arquivo enorme que poderia ser dividido com um pedaço crítico inline, e se a imagem de LCP é descobrível no HTML em vez de injetada por JavaScript. No último site que corrigi, adicionar um preload para a imagem de destaque e mover um script de tag manager para defer tirou cerca de 1.6 segundo do LCP em 4G.