Αθροιστική μετατόπιση διάταξης (CLS)

Η Αθροιστική Μετατόπιση Διάταξης μετρά την οπτική αστάθεια ποσοτικοποιώντας πόσο ορατό περιεχόμενο μετακινείται απροσδόκητα κατά τη διάρκεια ζωής μιας σελίδας. Είναι ένα από τα Βασικά Web Vitals της Google και, σε αντίθεση με τα μέτρα φόρτωσης και απόκρισης, είναι μια βαθμολογία χωρίς μονάδες και όχι διάρκεια, που υπολογίζεται από το ποσοστό του παραθύρου προβολής που επηρεάζεται από μια μετατόπιση και την απόσταση που μετακινήθηκε το περιεχόμενο. Το δημοσιευμένο όριο της Google αντιμετωπίζει το 0.1 ή λιγότερο ως καλό στο εβδομηκοστό πέμπτο εκατοστημόριο των πραγματικών εμπειριών χρήστη.

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

Οι αιτίες είναι καλά τεκμηριωμένες και ως επί το πλείστον απλές στην πρόληψη. Εικόνες και βίντεο χωρίς σαφείς διαστάσεις προκαλούν αναδιαμόρφωση κατά τη φόρτωση, καθώς το πρόγραμμα περιήγησης δεν μπορεί να δεσμεύσει τον σωστό χώρο εκ των προτέρων. Οι διαφημίσεις, οι ενσωματώσεις και τα iframe που εισάγονται στη ροή χωρίς δεσμευμένο κοντέινερ ωθούν το περιεχόμενο προς τα κάτω. Οι γραμματοσειρές ιστού που εναλλάσσονται από ένα εφεδρικό κείμενο με διαφορετικές μετρήσεις αναδιαμόρφωσης. Το περιεχόμενο που εισάγεται δυναμικά πάνω από το υπάρχον περιεχόμενο, όπως banner, ειδοποιήσεις και ειδοποιήσεις συναίνεσης, μετατοπίζει τα πάντα από κάτω. Οι κινούμενες εικόνες που αλλάζουν τις ιδιότητες διάταξης αντί να μετασχηματίζουν και να αδιαφάνεια ενεργοποιούν την αναδιαμόρφωση σε κάθε καρέ.

Οι αντίστοιχες διορθώσεις είναι από τις φθηνότερες που διατίθενται σε εργασίες απόδοσης. Ο ορισμός χαρακτηριστικών πλάτους και ύψους ή μιας αναλογίας διαστάσεων στα μέσα αποθηκεύει χώρο πριν από τη φόρτωση. Η εκχώρηση σταθερών κοντέινερ για διαφημίσεις και ενσωματώσεις αποτρέπει την μετατόπιση περιεχομένου από την εισαγωγή. Η αντιστοίχιση μετρικών γραμματοσειράς εναλλακτικής λύσης με τη γραμματοσειρά ιστού και η χρήση κατάλληλων στρατηγικών φόρτωσης γραμματοσειράς μειώνει την αναδιαμόρφωση κατά την εναλλαγή. Η εισαγωγή δυναμικού περιεχομένου κάτω από την πτυχή ή σε επικαλύψεις αντί για πάνω από το υπάρχον περιεχόμενο αποφεύγει την πιο ανατρεπτική κατηγορία. Η κίνηση μόνο του μετασχηματισμού και της αδιαφάνειας διατηρεί την κίνηση εκτός της διαδρομής διάταξης.

Η μέτρηση απαιτεί προσοχή στην περίοδο λειτουργίας και όχι μόνο στη φόρτωση της σελίδας. Η μέτρηση συσσωρεύεται καθ' όλη τη διάρκεια ζωής της σελίδας, συμπεριλαμβανομένων των μετατοπίσεων που συμβαίνουν κατά την κύλιση και την αλληλεπίδραση, πράγμα που σημαίνει ότι μια σελίδα που βαθμολογείται καλά κατά την αρχική φόρτωση μπορεί να εξακολουθεί να έχει χαμηλή βαθμολογία συνολικά λόγω του ότι το περιεχόμενο που φορτώνεται αργά φτάνει χωρίς δεσμευμένο χώρο. Οι μετατοπίσεις που συμβαίνουν μέσα σε ένα σύντομο χρονικό διάστημα μετά από μια αλληλεπίδραση χρήστη εξαιρούνται, με το σκεπτικό ότι η μετακίνηση περιεχομένου ως απόκριση σε μια σκόπιμη ενέργεια είναι αναμενόμενη και όχι ενοχλητική.

Οι ειδοποιήσεις συναίνεσης και τα διαφημιστικά banner αξίζουν ιδιαίτερης προσοχής επειδή εισάγονται αργά, συνήθως διαχειρίζονται εκτός της κύριας διαδικασίας ανάπτυξης και συχνά αντικαθιστούν το περιεχόμενο. Ένα banner που εμφανίζεται στην κορυφή του εγγράφου μετά την απόδοση σπρώχνει τα πάντα προς τα κάτω ακριβώς τη στιγμή που ένας επισκέπτης αρχίζει να διαβάζει ή να ψάχνει για έναν σύνδεσμο. Η παρουσίαση στοιχείων ως επικαλύψεις που δεν συμμετέχουν στη διάταξη ή η δέσμευση χώρου για αυτά πριν από την απόδοσή τους, επιλύει το πρόβλημα χωρίς να τα αφαιρέσει. Επειδή αυτά τα στοιχεία συχνά διαμορφώνονται από ομάδες μάρκετινγκ ή νομικές ομάδες μέσω εργαλείων τρίτων, η διόρθωση συνήθως απαιτεί μια συζήτηση μεταξύ των λειτουργιών και όχι μόνο μια αλλαγή κώδικα.

Επειδή οι αιτίες συνήθως εντοπίζονται σε πρότυπα, ενσωματώσεις διαφημίσεων και ενσωματώσεις τρίτων και όχι σε ένα μόνο στοιχείο, η αποκατάσταση τείνει να απαιτεί συντονισμό μεταξύ των ομάδων που είναι υπεύθυνες για κάθε μία από αυτές. Στην πράξη, αυτό είναι το τυπικό. απόδοση ιστού εργασία και είναι ένας από τους τομείς όπου η σύνδεση με τα εμπορικά αποτελέσματα είναι πιο άμεση, καθώς η αστάθεια διάταξης σε ένα προϊόν ή σελίδα ολοκλήρωσης αγοράς προκαλεί λανθασμένες πατήματα και εγκατάλειψη που Έλεγχος UX θα εμφανιστούν ως αποτυχίες χρηστικότητας χωρίς απαραίτητα να προσδιορίζεται η υποκείμενη τεχνική αιτία.