კრიტიკული რენდერინგის ბილიკი არის ეტაპების თანმიმდევრობა, რომელსაც ბრაუზერი მიჰყვება HTML, CSS და JS-ის პიქსელებად გადაქცევისთვის. მისი გაცნობა ხსნის, რა ხელს უშლის რენდერინგს და როგორ გავაჩქაროთ გვერდის რიცხვის სიჩქარე.
ეტაპები
text
1. Parse HTML → DOM tree (the document structure)
2. Parse CSS → CSSOM tree (the style rules)
3. DOM + CSSOM → Render tree (visible nodes + their styles)
4. Layout (reflow) → compute each node's geometry (position/size)
5. Paint → fill in pixels (colors, text, images)
6. Composite → combine layers onto the screen
რა ხელს უშლის რენდერინგს
ბრაუზერი არ დახატავს, სანამ CSSOM არ იქნება მზადი (არასტილიზებული კონტენტის ფლეშის თავიდან აცილების მიზნით). ამიტომ დიდი/ნელი CSS ხელს უშლის პირველი რიცხვის დახატვას — შეინარჩუნეთ კრიტიკული CSS მცირე და ჩაასმით ის თეთრეულში, სადაც შესაძლებელია.