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

Ο κρίσιμος δρόμος απόδοσης (Critical Rendering Path - CRP) είναι η ακολουθία βημάτων που εκτελεί ο περιηγητής για τη μετατροπή του HTML, CSS και JavaScript σε εικονοστοιχεία που εμφανίζονται στην οθόνη. Η βελτιστοποίηση του CRP επιτρέπει την επιτάχυνση της απόδοσης και τη βελτίωση του χρόνου μέχρι η σελίδα να γίνει διαδραστική.

Τα βασικά στάδια του CRP:

Κατασκευή του DOM (Document Object Model): Ο περιηγητής αναλύει τον κώδικα HTML και δημιουργεί μια δομή δέντρου που αντιπροσωπεύει το περιεχόμενο της σελίδας.
Κατασκευή του CSSOM (CSS Object Model): Ο περιηγητής αναλύει τους κανόνες CSS (από <style> ή εξωτερικά αρχεία CSS) και δημιουργεί μια δομή δέντρου που αντιπροσωπεύει τα στυλ για κάθε στοιχείο DOM. Το CSS είναι πόρος που μπλοκάρει την απόδοση, καθώς ο περιηγητής δεν μπορεί να κατασκευάσει το δέντρο απόδοσης χωρίς τις πληροφορίες στυλ.
Κατασκευή του δέντρου απόδοσης (Render Tree): Συνένωση του DOM (μόνο ορατά κόμβοι) και του CSSOM. Αυτό το δέντρο περιέχει όλα τα ορατά στοιχεία της σελίδας και τα αντίστοιχα στυλ τους, έτοιμα για απόδοση.
Layout (Διάταξη): Ο περιηγητής υπολογίζει τη θέση και το ακριβές μέγεθος κάθε στοιχείου στη σελίδα.
Paint (Ζωγραφική): Ο περιηγητής μετατρέπει κάθε στοιχείο του δέντρου απόδοσης σε πραγματικά εικονοστοιχεία στην οθόνη.
Composite (Σύνθεση): Ο περιηγητής συνδυάζει τα στρώματα απόδοσης σε μια τελική εικόνα.

Οι πόροι που μπλοκάρουν την απόδοση (όπως το CSS και το συγχρονικό JavaScript στην κεφαλίδα <head>) αυξάνουν το χρόνο κατασκευής του CRP. Η βελτιστοποίηση του CRP περιλαμβάνει τη μείωση ή την ασύγχρονη φόρτωση των μπλοκαριστικών πόρων, καθώς και την προτεραιοποίηση της φόρτωσης κρίσιμου περιεχομένου (πάνω από τη "γραμμή ζουμ").

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