Το CLS και το INP είναι Core Web Vitals που μετράνε άλλες πλευρές της εμπειρίας χρήστη, όχι την ταχύτητα.
Το CLS μετράει την οπτική σταθερότητα. Μετατόπιση διάταξης έχουμε όταν το περιεχόμενο κινείται μετά τη φόρτωση. Ο χρήστης διαβάζει ένα άρθρο. Φορτώνει μια διαφήμιση. Το άρθρο πέφτει προς τα κάτω. Ο χρήστης χάνει το σημείο του. Το CLS μετράει την ενόχληση.
Το INP μετράει την ανταπόκριση. Ο χρήστης πατάει ένα κουμπί. Το σύστημα απαντά. Πόση ώρα παίρνει η απάντηση; Το INP μετράει την καθυστέρηση.
Το Cumulative Layout Shift (CLS) αναλυτικά
Τι προκαλεί το CLS
Φορτώνουν διαφημίσεις και πιάνουν χώρο. Φορτώνουν ενσωματωμένα στοιχεία και πιάνουν χώρο. Φορτώνουν εικόνες χωρίς καθορισμένο ύψος. Αλλάζουν οι γραμματοσειρές και το κείμενο ξαναστοιχίζεται. Μπαίνει περιεχόμενο από JavaScript.
Πραγματικό παράδειγμα
Η διάταξη της σελίδας είναι σταθερή. Ο χρήστης αρχίζει να διαβάζει. Φορτώνει μια διαφήμιση. Η διαφήμιση έχει ύψος τριακόσια pixel. Το περιεχόμενο κάτω από τη διαφήμιση κατεβαίνει τριακόσια pixel. Ο χρήστης χάνει το σημείο του. Εκνευριστικό.
Μέτρηση
Το CLS μετριέται ως ποσοστό της οθόνης που μετατοπίστηκε. Αν η οθόνη έχει ύψος χίλια pixel και το περιεχόμενο μετατοπιστεί τριακόσια pixel, το CLS είναι 0,3. Ο στόχος είναι κάτω από 0,1 (δέκα τοις εκατό μετατόπιση είναι αποδεκτή, τριάντα τοις εκατό όχι).
Βελτίωση του CLS
Στρατηγική πρώτη: κράτα χώρο
Κράτα χώρο για διαφημίσεις, ενσωματωμένα στοιχεία και εικόνες. Πες στη διάταξη: η διαφήμιση θα πιάσει τριακόσια pixel. Κράτα τον χώρο. Η διαφήμιση φορτώνει στον χώρο που κρατήθηκε. Καμία μετατόπιση.
Στρατηγική δεύτερη: βάλε περιεχόμενο στο κάτω μέρος
Απόφυγε να βάζεις περιεχόμενο στη μέση της σελίδας. Βάλ' το στο κάτω μέρος (το περιεχόμενο από κάτω έχει ήδη φύγει από την οθόνη). Ή βάλ' το σε σταθερή κεφαλίδα (ο χρήστης περιμένει να αλλάξει η κεφαλίδα).
Στρατηγική τρίτη: απόφυγε αλλαγές γραμματοσειράς
Απόφυγε να αλλάζει η γραμματοσειρά στη μέση της φόρτωσης. Η αλλαγή γραμματοσειράς κάνει το κείμενο να ξαναστοιχιστεί. Μετακινείται όλο το κείμενο που τη χρησιμοποιεί. Χρησιμοποίησε `font-display: optional` ή `font-display: swap` για να μειώσεις τη μετατόπιση.
Στρατηγική τέταρτη: όρισε ύψος στις εικόνες
Χρησιμοποίησε σταθερό ύψος για τις εικόνες. Η εικόνα φορτώνει. Το ύψος είναι ορισμένο. Η εικόνα γεμίζει τον χώρο που κρατήθηκε. Καμία μετατόπιση.
Πραγματικό παράδειγμα: βελτίωση του CLS σε σελίδα προϊόντος e-shop
Αρχικό CLS: 0,25 (κακό).
Ανάλυση
Οι εικόνες προϊόντος φορτώνουν χωρίς καθορισμένο ύψος. Οι εικόνες μετατοπίζουν το περιεχόμενο. Συμβάλλουν 0,10 στο CLS. Η διαφήμιση κάτω από το προϊόν φορτώνει μετά τη σελίδα. Η διαφήμιση πιάνει χώρο. Το περιεχόμενο μετατοπίζεται. Συμβάλλει 0,12 στο CLS. Οι κριτικές χρηστών φορτώνουν από API. Μπαίνουν μέσα στη σελίδα. Το περιεχόμενο μετατοπίζεται. Συμβάλλουν 0,3 στο CLS.
Βελτιστοποίηση
Όρισε το ύψος των εικόνων στο HTML. Οι εικόνες γεμίζουν τον χώρο που κρατήθηκε. Συμβολή στο CLS: μηδέν. Κράτησε χώρο για τη διαφήμιση. Η διαφήμιση φορτώνει στον χώρο που κρατήθηκε. Συμβολή στο CLS: μηδέν. Κάνε lazy load στις κριτικές χρηστών κάτω από το ορατό τμήμα. Μην τις βάζεις στο ορατό τμήμα. Συμβολή στο CLS: μηδέν (η μετατόπιση γίνεται έξω από την οθόνη).
Νέο CLS: 0,05 (καλό).
Το Interaction to Next Paint (INP) αναλυτικά
Τι μετράει το INP
Το INP μετράει την ανταπόκριση. Ο χρήστης πατάει ένα κουμπί. Το σύστημα επεξεργάζεται το κλικ. Ενημερώνει την κατάσταση. Εμφανίζει την αλλαγή. Την ζωγραφίζει στην οθόνη. Το INP είναι ο χρόνος από το κλικ μέχρι την πρώτη οπτική ενημέρωση.
Πραγματικό παράδειγμα
Ο χρήστης πατάει το κουμπί Προσθήκη στο καλάθι. Το σύστημα ελέγχει το απόθεμα. Ενημερώνει τον μετρητή του καλαθιού. Δείχνει τον νέο αριθμό στην οθόνη. Αν το INP είναι εκατό χιλιοστά του δευτερολέπτου, ο χρήστης βλέπει αμέσως τον μετρητή να αλλάζει. Αν το INP είναι ένα δευτερόλεπτο, ο μετρητής αλλάζει ένα δευτερόλεπτο μετά. Η σελίδα νιώθει ότι δεν ανταποκρίνεται.
Μέτρηση
Το INP μετριέται σε χιλιοστά του δευτερολέπτου. Στόχος κάτω από 200 χιλιοστά είναι καλό.
Βελτίωση του INP
Στρατηγική πρώτη: μείωσε τον χρόνο εκτέλεσης του JavaScript
Το μεγάλο JavaScript μπλοκάρει την εμφάνιση. Σπάσε τη μεγάλη εργασία σε μικρότερες. Χρησιμοποίησε async, defer ή Web Workers για βαριούς υπολογισμούς.
Στρατηγική δεύτερη: βελτιστοποίησε τους χειριστές συμβάντων
Οι χειριστές συμβάντων πρέπει να κάνουν ελάχιστη δουλειά. Στείλε τη βαριά δουλειά στο παρασκήνιο.
Στρατηγική τρίτη: βελτιστοποίησε το CSS
Το βαρύ CSS μπορεί να καθυστερήσει την εμφάνιση. Χρησιμοποίησε CSS containment για να πεις στον browser: αυτό το στοιχείο είναι αυτόνομο, μην ξαναϋπολογίζεις τα στυλ όλης της σελίδας όταν αλλάζει.
Στρατηγική τέταρτη: χρησιμοποίησε πιο γρήγορη τεχνική εμφάνισης
Οι αλλαγές CSS είναι πιο γρήγορες από τις αλλαγές DOM με JavaScript. Χρησιμοποίησε CSS transforms αντί για τοποθέτηση με left/top. Χρησιμοποίησε CSS opacity αντί για αλλαγές ορατότητας.
Πραγματικό παράδειγμα: ανταπόκριση σε φόρμα
Αρχικό INP: 400 χιλιοστά του δευτερολέπτου (κακό).
Ανάλυση
Η φόρμα έχει JavaScript επικύρωσης. Ο χρήστης πληκτρολογεί σε ένα πεδίο. Τρέχει η επικύρωση. Η επικύρωση είναι σύγχρονη. Μπλοκάρει την ενημέρωση του πεδίου. Το πεδίο δεν ενημερώνεται μέχρι να τελειώσει η επικύρωση. Η φόρμα νιώθει ότι δεν ανταποκρίνεται.
Βελτιστοποίηση
Μετάφερε την επικύρωση στο παρασκήνιο (Web Worker ή setTimeout). Το πεδίο ενημερώνεται αμέσως. Η επικύρωση γίνεται στο παρασκήνιο. Χρησιμοποίησε CSS containment στη φόρμα. Πες στον browser: η φόρμα είναι αυτόνομη, μην ξαναϋπολογίζεις τα στυλ όλης της σελίδας. Χρησιμοποίησε CSS transform για το animation αντί για τοποθέτηση με JavaScript.
Νέο INP: 150 χιλιοστά του δευτερολέπτου (καλό).
CLS και INP μαζί
Το CLS κάνει τη σελίδα να νιώθει ασταθής. Το INP τη κάνει να νιώθει ότι δεν ανταποκρίνεται. Μαζί επηρεάζουν την εντύπωση του χρήστη για την ποιότητα.
Μια σελίδα με καλό LCP αλλά κακό CLS (γρήγορη αλλά πηδάει) είναι εκνευριστική. Ο χρήστης φταίει την αργοπορία, ακόμα κι αν το πρόβλημα είναι η σταθερότητα.
Μια σελίδα με καλό LCP και CLS αλλά κακό INP (γρήγορη και σταθερή αλλά δεν ανταποκρίνεται) νιώθει χαλασμένη. Τα κουμπιά δεν απαντούν στα κλικ.
Και τα τρία Core Web Vitals μετράνε για καλή εμπειρία χρήστη.
Συχνές ερωτήσεις
Πώς εντοπίζουμε προβλήματα CLS;
Χρησιμοποίησε τα Chrome DevTools. Κάνε δεξί κλικ στη σελίδα. Επιθεώρηση. Καρτέλα Performance. Κατέγραψε τη φόρτωση της σελίδας. Τα DevTools δείχνουν τις μετατοπίσεις διάταξης κατά τη φόρτωση. Δες και το PageSpeed Insights. Το Lighthouse εντοπίζει προβλήματα CLS. Δες και την αναφορά Core Web Vitals στο Search Console. Δείχνει τις σελίδες με κακό CLS. Με τον δημιουργό ιστοσελίδων του WEMASY, μπορείς να το στήσεις απευθείας στην ιστοσελίδα σου.
Να κρατάμε χώρο για όλες τις διαφημίσεις ή μόνο για τις κρίσιμες;
Κράτα χώρο για τις διαφημίσεις στο ορατό τμήμα (αυτές που φορτώνουν αμέσως). Μην κρατάς χώρο για τις διαφημίσεις κάτω από το ορατό τμήμα (αυτές που φορτώνουν μετά το scroll). Αυτές μπορούν να μετατοπίσουν το περιεχόμενο από κάτω, αλλά ο χρήστης δεν βλέπει τη μετατόπιση.
Πώς βελτιστοποιούμε το INP σε σύνθετες εφαρμογές με βαρύ JavaScript;
Μετάφερε τους βαριούς υπολογισμούς σε Web Workers. Το Web Worker τρέχει σε ξεχωριστό νήμα. Δεν μπλοκάρει το κύριο νήμα. Το κύριο νήμα μένει ανταποκρινόμενο στις ενέργειες του χρήστη. Χρησιμοποίησε επίσης React Suspense ή παρόμοια frameworks που καθυστερούν τους βαριούς υπολογισμούς μέχρι να διεκπεραιωθεί η αλληλεπίδραση.
Έχει το CLS μεγαλύτερη σημασία στο κινητό ή στον υπολογιστή;
Μεγαλύτερη στο κινητό. Η οθόνη του κινητού είναι μικρότερη. Οι μετατοπίσεις φαίνονται περισσότερο. Ο χρήστης κινητού πιο εύκολα προσέχει τη μετατόπιση και εκνευρίζεται. Δώσε προτεραιότητα στη βελτίωση του CLS στο κινητό.
Μπορεί το καλό CLS και INP να αντισταθμίσει το κακό LCP;
Όχι. Αν η σελίδα χρειάζεται πέντε δευτερόλεπτα να φορτώσει, ο χρήστης έχει ήδη εκνευριστεί πριν μετρήσουν το CLS και το INP. Φεύγει πριν αλληλεπιδράσει. Η γρήγορη φόρτωση (καλό LCP) είναι προϋπόθεση για καλή εμπειρία. Το καλό CLS και INP βελτιώνουν την εμπειρία μιας γρήγορης σελίδας, όχι μιας αργής.
Πώς μετράμε και παρακολουθούμε τις βελτιώσεις σε CLS και INP;
Αρχική κατάσταση: μέτρησε πριν από τη βελτιστοποίηση. Εφάρμοσε τη βελτιστοποίηση. Νέα μέτρηση: μέτρησε μετά. Χρησιμοποίησε τη βιβλιοθήκη Web Vitals (βιβλιοθήκη JavaScript που μετράει τα Core Web Vitals) για παρακολούθηση πραγματικών χρηστών. Στήσε ειδοποιήσεις: αν το CLS ή το INP χειροτερέψει, η ειδοποίηση ενημερώνει την ομάδα.