Αποκλεισμός Απόδοσης
Ο αποκλεισμός απόδοσης συμβαίνει όταν αρχεία CSS ή JavaScript εμποδίζουν μια ιστοσελίδα να εμφανίσει περιεχόμενο μέχρι να κατέβουν πλήρως και να επεξεργαστούν από τον browser.
Όταν ένας browser φορτώνει μια ιστοσελίδα, πρέπει να αναλύσει την HTML και να δημιουργήσει ένα δέντρο απόδοσης πριν εμφανίσει οτιδήποτε. Ορισμένοι πόροι μπορούν να αποκλείσουν αυτή τη διαδικασία. Το CSS αποκλείει την απόδοση από προεπιλογή, επειδή ο browser πρέπει να γνωρίζει πώς να διαμορφώσει το περιεχόμενο πριν το εμφανίσει, η εμφάνιση περιεχομένου χωρίς στυλ θα προκαλούσε ενοχλητικό flash. Η JavaScript αποκλείει τόσο τον parser όσο και την απόδοση από προεπιλογή, επειδή τα scripts μπορεί να τροποποιήσουν τη δομή της σελίδας.
Οι πόροι που αποκλείουν την απόδοση είναι η κύρια αιτία αργού First Contentful Paint (FCP) και Largest Contentful Paint (LCP). Όσο περισσότερους πόρους που αποκλείουν την απόδοση έχει μια σελίδα, τόσο περισσότερο οι χρήστες κοιτάζουν μια κενή ή μερικώς φορτωμένη οθόνη. Στρατηγικές για τη μείωση του αποκλεισμού απόδοσης περιλαμβάνουν: ενσωμάτωση κρίσιμου CSS (τα στυλ που χρειάζονται για το περιεχόμενο πάνω από την πτυχή) απευθείας στην HTML, αναβολή μη κρίσιμου CSS με media queries ή φόρτωση μέσω JavaScript, χρήση των attributes async ή defer στις ετικέτες script, μετακίνηση των scripts στο κάτω μέρος του body και διαχωρισμό του CSS σε αρχεία ανά διαδρομή, ώστε κάθε σελίδα να φορτώνει μόνο τα στυλ που χρειάζεται.
Στην πράξη
- Ένας ιστότοπος WordPress είχε 12 stylesheets που αποκλείουν την απόδοση και 8 blocking scripts, η ενοποίηση και αναβολή τους μείωσε το FCP από 4,2 δευτερόλεπτα σε 1,1 δευτερόλεπτα
- Ένα ηλεκτρονικό κατάστημα ενσωμάτωσε το κρίσιμο CSS πάνω από την πτυχή (3KB) και ανέβαλε τα υπόλοιπα 200KB, επιτρέποντας στη σελίδα να εμφανιστεί αμέσως ενώ τα υπόλοιπα φορτώνονταν στο παρασκήνιο
- Ένας εταιρικός ιστότοπος μετέφερε όλα τα scripts analytics και marketing σε defer/async και βελτίωσε τη βαθμολογία απόδοσης στο Lighthouse από 42 σε 78
- Μια single-page εφαρμογή πρόσθεσε το attribute async στο κύριο bundle script της και ένα spinner φόρτωσης εμφανίστηκε 2 δευτερόλεπτα νωρίτερα, βελτιώνοντας δραματικά την αντιληπτή ταχύτητα
Περισσότερα για: Απόδοση
Δεν είστε σίγουροι πώς εφαρμόζεται σε εσάς;
Ένας έμπειρος μηχανικός εξετάζει τον ιστότοπό σας, την παρουσία σας στις αναζητήσεις και τον τρόπο που σας φτάνουν τα αιτήματα, και μετά καταγράφει τα τρία πράγματα που αξίζει να διορθωθούν πρώτα. Κρατάτε το έγγραφο είτε έτσι είτε αλλιώς.