Eine Seite braucht vier Sekunden, bis irgendetwas Brauchbares zu sehen ist. Erklär mir, was zwischen dem Eintreffen des HTML und dem ersten Paint passiert und was es blockiert.

Der Parser baut das DOM, während das HTML hereinstreamt, aber ein Stylesheet blockiert das Rendern, weil der Browser nicht mit ungestyltem Inhalt painten will, und ein klassisches Script ohne defer oder async blockiert den Parser komplett. Sind CSS und blockierende Scripts durch, baut der Browser den Render-Tree, macht Layout, paintet und composited. Die üblichen Verdächtigen sind render-blockierendes CSS, synchrone Scripts im head und spät entdeckte Fonts oder Hero-Images.

Während das HTML hereinstreamt, baut der Parser das DOM inkrementell auf, und parallel schaut der Preload Scanner voraus nach Bildern, Scripts und Stylesheets, damit er früh mit dem Laden anfangen kann. CSS ist render-blockierend, weil der Browser keinen Inhalt painten will, den er einen Frame später neu stylen müsste, ein langsames Stylesheet hält den ersten Paint also auf, selbst wenn das DOM fertig ist. Ein klassisches script-Tag ohne defer oder async ist noch schlimmer, weil es das Parsen komplett blockiert, während es lädt und läuft. Sind die Styles da, baut der Browser den Render-Tree, macht Layout, paintet und composited. Wenn ich einen First Paint von vier Sekunden sehe, prüfe ich als Erstes drei Dinge: ob irgendein Script im head blockiert, ob das CSS eine einzige riesige Datei ist, die man in einen inline eingebetteten kritischen Teil aufsplitten könnte, und ob das LCP-Bild im HTML auffindbar ist statt per JavaScript eingefügt zu werden. Auf der letzten Seite, die ich repariert habe, haben ein Preload für das Hero-Image und ein auf defer umgestelltes Tag-Manager-Script rund 1,6 Sekunden LCP über 4G gespart.