Τι είναι η κρίσιμη διαδρομή απόδοσης των ιστοσελίδων;

Αυτή είναι μια ακολουθία βημάτων που εκτελεί ο περιηγητής για την εμφάνιση του περιεχομένου της σελίδας στην οθόνη, ξεκινώντας από την λήψη του HTML εγγράφου. Περιλαμβάνει:

1. Κατασκευή του DOM (Μοντέλο Αντικειμένου Εγγράφου): Ανάλυση του κώδικα HTML και δημιουργία ενός δέντρου αντικειμένων που αντιπροσωπεύουν τη δομή του εγγράφου.
2. Κατασκευή του CSSOM (Μοντέλο Αντικειμένου CSS): Ανάλυση αρχείων CSS και inline στυλ για τη δημιουργία ενός δέντρου αντικειμένων που αντιπροσωπεύουν τα στυλ των στοιχείων.
3. Κατασκευή του Δέντρου Απόδοσης (Render Tree): Συνένωση του DOM και του CSSOM. Δημιουργείται ένα δέντρο μόνο με τα στοιχεία που θα αποδοθούν με τα εφαρμοσμένα στυλ.
4. Κατανομή (Layout ή Reflow): Προσδιορισμός των γεωμετρικών διαστάσεων και της θέσης κάθε στοιχείου στη σελίδα.
5. Ζωγραφική (Paint ή Repaint): Γέμισμα των εικονοστοιχείων στην οθόνη βάσει του Δέντρου Απόδοσης και των δεδομένων διάταξης.

Η βελτιστοποίηση της κρίσιμης διαδρομής απόδοσης στοχεύει στο να εμφανίσει ο περιηγητής όσο το δυνατόν γρηγορότερα το πρώτο ουσιώδες περιεχόμενο (First Meaningful Paint) ή την αλληλεπίδραση (Time to Interactive). Αυτό επιτυγχάνεται με ελαχιστοποίηση των μπλοκαριστικών πόρων (JS και CSS), βελτιστοποίηση των διαστάσεων των πόρων και φόρτωση αυτών τη σωστή στιγμή.