Πώς το πρόγραμμα περιήγησης αναλύει το HTML και δημιουργεί τη σελίδα (critical rendering path);

Το critical rendering path είναι η ακολουθία των βημάτων που ακολουθεί το πρόγραμμα περιήγησης για να μετατρέψει HTML, CSS και JS σε pixels. Η κατανόησή του εξηγεί τι μπλοκάρει την απόδοση και πώς να κάνετε τις σελίδες να ζωγραφίζονται πιο γρήγορα.

Τα βήματα

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 να είναι έτοιμο (για να αποφευχθεί μια flash ανούσιας σελίδας). Άρα μεγάλα/αργά CSS καθυστερούν το πρώτο paint — κρατήστε το κρίσιμο CSS μικρό και inline το όπου είναι δυνατόν.