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

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

Η Cumulative Layout Shift (CLS) είναι μια μετρική Core Web Vitals που αναπτύχθηκε από τη Google για τη μέτρηση της οπτικής σταθερότητας μιας ιστοσελίδας. Ποσοτικοποιεί το σύνολο όλων των απροσδόκητων μετατοπίσεων διάταξης που συμβαίνουν κατά τη διάρκεια ολόκληρης της διάρκειας ζωής της σελίδας. Οι μετατοπίσεις διάταξης συμβαίνουν όταν ένα ορατό στοιχείο αλλάζει τη θέση του από το ένα πλαίσιο απόδοσης στο επόμενο.

Πώς μετράται το CLS

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

Ερμηνεία της βαθμολογίας CLS

• Καλό: 0 - 0.1
• Χρειάζεται βελτίωση: 0.1 - 0.25
• Κακή: Πάνω από 0,25

Γιατί είναι σημαντικό το CLS;

Το CLS είναι ζωτικής σημασίας για την εμπειρία του χρήστη, καθώς οι απροσδόκητες αλλαγές διάταξης μπορούν να οδηγήσουν σε απογοήτευση του χρήστη. Για παράδειγμα, εάν ένας χρήστης πρόκειται να κάνει κλικ σε ένα κουμπί και η διάταξη μετατοπιστεί, με αποτέλεσμα να κάνει κλικ σε κάτι άλλο ακούσια, αυτό μπορεί να οδηγήσει σε κακή εμπειρία χρήστη και πιθανή απώλεια μετατροπών.

Συνήθεις αιτίες κακής CLS

1. Εικόνες χωρίς διαστάσεις:

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

2. Διαφημίσεις, ενσωματώσεις και Iframes χωρίς διαστάσεις:

   • Αυτά τα στοιχεία μπορούν να φορτωθούν δυναμικά και να προκαλέσουν μετατοπίσεις της διάταξης, εάν οι διαστάσεις τους δεν έχουν καθοριστεί εκ των προτέρων.

3. Δυναμικά εισαγόμενο περιεχόμενο:

   • Η προσθήκη περιεχομένου πάνω από το υπάρχον περιεχόμενο στο DOM μπορεί να ωθήσει τα στοιχεία προς τα κάτω, προκαλώντας μετατοπίσεις.

4. Γραμματοσειρές ιστού που προκαλούν FOIT/FOUT:

   • Το Flash of Invisible Text (FOIT) και το Flash of Unstyled Text (FOUT) μπορούν να προκαλέσουν αλλαγές στη διάταξη καθώς το πρόγραμμα περιήγησης φορτώνει γραμματοσειρές ιστού.

Βέλτιστες πρακτικές για την ελαχιστοποίηση του CLS

1. Συμπεριλάβετε χαρακτηριστικά μεγέθους σε εικόνες και βίντεο:

   • Να ορίζετε πάντα το πλάτος και το ύψος των εικόνων και των βίντεο στην HTML, ώστε να δεσμεύετε χώρο στη διάταξη πριν από τη φόρτωσή τους.

2. Αποθηκεύστε χώρο για διαφημίσεις και ενσωματώσεις:

   • Χρησιμοποιήστε CSS για να ορίσετε τις διαστάσεις για τις διαφημιστικές θέσεις, τα iframes και τα embeds για να αποφύγετε τις αλλαγές διάταξης όταν φορτώνονται.

3. Αποφύγετε τη δυναμική εισαγωγή περιεχομένου πάνω από το υπάρχον περιεχόμενο:

   • Προσθέστε νέο περιεχόμενο κάτω από την πτυχή ή μέσα σε κοντέινερ που έχουν ήδη δεσμευμένο χώρο.

4. Χρήση στρατηγικών φόρτωσης γραμματοσειρών:

   • Χρησιμοποιήστε την ιδιότητα font-display CSS για να ελέγξετε τον τρόπο εμφάνισης των γραμματοσειρών ιστού και να ελαχιστοποιήσετε τις μετατοπίσεις λόγω FOIT/FOUT.

5. Χρήση μετασχηματισμού CSS για κινούμενα σχέδια:

   • Χρησιμοποιήστε την ιδιότητα transform αντί για top, bottom, left ή right για να κινήσετε στοιχεία χωρίς να προκαλέσετε μετατοπίσεις της διάταξης.

Συμπέρασμα

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

Για περισσότερες πληροφορίες σχετικά με τη βελτίωση του CLS και άλλων Core Web Vitals, εξετάστε το ενδεχόμενο να εξερευνήσετε την τεκμηρίωση Web Vitals της Google.