Una página tarda cuatro segundos en mostrar algo útil. Explícame qué ocurre entre que llega el HTML y el primer pintado, y qué lo bloquea.

El parser construye el DOM según llega el HTML, pero una hoja de estilos bloquea el renderizado porque el navegador no pintará contenido sin estilos, y un script clásico sin defer ni async bloquea el parser por completo. Cuando el CSS y los scripts bloqueantes terminan, el navegador construye el árbol de renderizado, hace layout, pinta y compone. Los culpables habituales son CSS que bloquea el renderizado, scripts síncronos en el head y fuentes o imágenes principales descubiertas tarde.

Según llega el HTML el parser construye el DOM de forma incremental, y en paralelo el preload scanner mira por delante buscando imágenes, scripts y hojas de estilo para empezar a descargarlas pronto. El CSS bloquea el renderizado, porque el navegador no va a pintar contenido que quizá tenga que reestilizar un fotograma después, así que una hoja de estilos lenta frena el primer pintado aunque el DOM esté listo. Una etiqueta script clásica sin defer ni async es peor, ya que bloquea el parseo por completo mientras se descarga y se ejecuta. Cuando los estilos están dentro, el navegador construye el árbol de renderizado, hace layout, pinta y compone. Cuando me encuentro un primer pintado de cuatro segundos, mis tres primeras comprobaciones son si algún script del head está bloqueando, si el CSS es un único archivo enorme que podría partirse en un bloque crítico en línea, y si la imagen de LCP es descubrible en el HTML en vez de inyectada por JavaScript. En el último sitio que arreglé, añadir un preload para la imagen principal y mover un script de gestor de etiquetas a defer quitó alrededor de 1,6 segundos de LCP en 4G.