Šta je kritični put renderovanja veb stranica?

Ovo je sekvenca koraka koje pretraživač izvršava za prikaz sadržaja stranice na ekranu, počevši od preuzimanja HTML dokumenta. Uključuje:

1. Izgradnja DOM (Model objekta dokumenta): Parsiranje HTML koda i kreiranje stabla objekata koje predstavljaju strukturu dokumenta.
2. Izgradnja CSSOM (Model objekta CSS): Parsiranje CSS fajlova i inline stilova za kreiranje stabla objekata koja predstavljaju stilove elemenata.
3. Izgradnja render stabla: Uključivanje DOM i CSSOM. Kreira se stablo samo od renderabilnih elemenata sa primenjenim stilovima.
4. Layout (ili Reflow): Određivanje geometrijskih dimenzija i položaja svakog elementa na stranici.
5. Paint (ili Repaint): Popunjavanje piksela na ekranu na osnovu render stabla i podataka o rasporedu.

Optimizacija kritičnog puta renderovanja ima za cilj da pretraživač što brže prikaže prvi smisleni sadržaj (First Meaningful Paint) ili interaktivnost (Time to Interactive). To se postiže minimiziranjem blokirajućih resursa (JS i CSS), optimizacijom veličine resursa i njihovim učitavanjem u odgovarajuće vreme.