CLS (Αθροιστική Μετατόπιση Διάταξης)
Το CLS μετρά το συνολικό ποσό των απροσδόκητων μετατοπίσεων διάταξης που συμβαίνουν κατά τη διάρκεια ολόκληρης της ζωής μιας σελίδας, ποσοτικοποιώντας πόσο ορατό περιεχόμενο μετακινείται απροσδόκητα.
Η Αθροιστική Μετατόπιση Διάταξης (CLS) είναι μια Βασική Μετρική Ιστού που μετρά την οπτική σταθερότητα. Ποσοτικοποιεί πόσο μετακινείται απροσδόκητα το περιεχόμενο μιας σελίδας καθώς φορτώνει. Μια μετατόπιση διάταξης συμβαίνει όταν ένα ορατό στοιχείο αλλάζει θέση από το ένα καρέ απόδοσης στο επόμενο χωρίς αλληλεπίδραση του χρήστη. Μια καλή βαθμολογία CLS είναι κάτω από 0,1. Μεταξύ 0,1 και 0,25 χρειάζεται βελτίωση και πάνω από 0,25 είναι κακή. Η βαθμολογία υπολογίζεται πολλαπλασιάζοντας το κλάσμα επίπτωσης (πόσο επηρεάστηκε το ορατό τμήμα) με το κλάσμα απόστασης (πόσο μακριά μετακινήθηκαν τα στοιχεία).
Συνήθεις αιτίες μετατόπισης διάταξης περιλαμβάνουν εικόνες και βίντεο χωρίς διαστάσεις (ο περιηγητής δεν ξέρει πόσο χώρο να δεσμεύσει μέχρι να φορτώσουν), διαφημίσεις ή ενσωματώσεις που φορτώνουν δυναμικά και σπρώχνουν το περιεχόμενο προς τα κάτω, γραμματοσειρές ιστού που προκαλούν αλλαγή μεγέθους κειμένου όταν φορτώνουν (Flash of Unstyled Text) και περιεχόμενο που εισάγεται δυναμικά πάνω από υπάρχον περιεχόμενο. Η διόρθωση του CLS συνήθως περιλαμβάνει πάντα την προσθήκη χαρακτηριστικών width και height σε εικόνες και βίντεο, τη δέσμευση χώρου για διαφημίσεις και δυναμικό περιεχόμενο, τη χρήση font-display: swap ή optional για γραμματοσειρές ιστού με προφόρτωση και την αποφυγή εισαγωγής περιεχομένου πάνω από υπάρχον περιεχόμενο.
Στην πράξη
- Ένας ειδησεογραφικός ιστότοπος μείωσε το CLS του από 0,42 σε 0,05 δεσμεύοντας χώρο για διαφημιστικές θέσεις και προσθέτοντας διαστάσεις σε όλες τις εικόνες, με αποτέλεσμα 30% μεγαλύτερες μέσες συνεδρίες ανάγνωσης
- Μια σελίδα προϊόντος ηλεκτρονικού εμπορίου είχε CLS 0,35 επειδή τα αστέρια των κριτικών πελατών φορτώνονταν αργά και έσπρωχναν προς τα κάτω το κουμπί «Προσθήκη στο καλάθι», προκαλώντας λανθασμένα κλικ· η διόρθωση αυτού βελτίωσε το ποσοστό προσθήκης στο καλάθι κατά 8%
- Ένα ιστολόγιο διόρθωσε το πρόβλημα CLS που προκαλούσε η καθυστερημένη φόρτωση γραμματοσειρών ιστού προφορτώνοντας το αρχείο γραμματοσειράς και χρησιμοποιώντας font-display: optional, εξαλείφοντας εντελώς τις μετατοπίσεις διάταξης κειμένου
- Μια σελίδα προορισμού δέσμευσε σταθερές διαστάσεις για μια ενσωμάτωση βίντεο που προκαλούσε μετατόπιση του περιεχομένου από κάτω, φέρνοντας το CLS από 0,28 σε 0,02
Περισσότερα για: Απόδοση
Δεν είστε σίγουροι πώς εφαρμόζεται σε εσάς;
Ένας έμπειρος μηχανικός εξετάζει τον ιστότοπό σας, την παρουσία σας στις αναζητήσεις και τον τρόπο που σας φτάνουν τα αιτήματα, και μετά καταγράφει τα τρία πράγματα που αξίζει να διορθωθούν πρώτα. Κρατάτε το έγγραφο είτε έτσι είτε αλλιώς.