Τα Core Web Vitals είναι τρεις μετρήσεις που χρησιμοποιεί η Google για να κρίνει την εμπειρία μιας σελίδας. Το LCP μετράει την ταχύτητα φόρτωσης. Το CLS μετράει την οπτική σταθερότητα. Το INP μετράει την ανταπόκριση.
Κάθε μέτρηση κοιτάζει άλλη πλευρά της απόδοσης. Μαζί δείχνουν πώς νιώθει ο χρήστης.
Largest Contentful Paint (LCP)
Το LCP μετράει τον χρόνο μέχρι να φορτώσει το κύριο περιεχόμενο. Το κύριο περιεχόμενο είναι η μεγαλύτερη εικόνα ή το μεγαλύτερο μπλοκ κειμένου της σελίδας. Στην αρχική σελίδα, το LCP είναι η κεντρική εικόνα. Σε ένα άρθρο, είναι ο τίτλος και η κύρια εικόνα.
Το LCP μετριέται από τη στιγμή που ο χρήστης πατάει τον σύνδεσμο μέχρι να εμφανιστεί το κύριο περιεχόμενο στην οθόνη. Αν το LCP είναι ένα δευτερόλεπτο, ο χρήστης βλέπει το κύριο περιεχόμενο ένα δευτερόλεπτο μετά το κλικ. Αν είναι τρία δευτερόλεπτα, περιμένει τρία δευτερόλεπτα.
Στόχος: LCP κάτω από 2,5 δευτερόλεπτα είναι καλό. LCP από 2,5 έως 4 δευτερόλεπτα θέλει βελτίωση. LCP πάνω από 4 δευτερόλεπτα είναι κακό.
Παράδειγμα: η κεντρική εικόνα της αρχικής σελίδας είναι πέντε megabytes. Χρειάζεται τρία δευτερόλεπτα να κατέβει. Το LCP είναι τρία δευτερόλεπτα. Ο στόχος είναι 2,5 δευτερόλεπτα. Η απόδοση θέλει βελτίωση.
Cumulative Layout Shift (CLS)
Το CLS μετράει την οπτική σταθερότητα. Μετατόπιση διάταξης έχουμε όταν το περιεχόμενο κινείται αφού φορτώσει η σελίδα. Παράδειγμα: ο χρήστης αρχίζει να διαβάζει ένα άρθρο. Φορτώνει μια διαφήμιση. Το άρθρο πέφτει προς τα κάτω. Ο χρήστης χάνει το σημείο που διάβαζε. Εκνευριστικό.
Το CLS μετράει τη συνολική μετατόπιση της διάταξης. Αν το περιεχόμενο κατεβαίνει διακόσια pixel, το CLS ανεβαίνει. Αν το περιεχόμενο κινηθεί πολλές φορές, το CLS μαζεύεται.
Στόχος: CLS κάτω από 0,1 είναι καλό. CLS από 0,1 έως 0,25 θέλει βελτίωση. CLS πάνω από 0,25 είναι κακό.
Παράδειγμα: μια διαφήμιση φορτώνει αφού φορτώσει η σελίδα. Η διαφήμιση πιάνει τριακόσια pixel ύψος. Το περιεχόμενο κάτω από τη διαφήμιση κατεβαίνει. Το CLS είναι 0,15. Θέλει βελτίωση.
Interaction to Next Paint (INP)
Το INP μετράει την ανταπόκριση. Ο χρήστης πατάει ένα κουμπί. Το σύστημα επεξεργάζεται το κλικ. Ενημερώνει τη σελίδα. Η αλλαγή ζωγραφίζεται στην οθόνη. Το INP είναι ο χρόνος από το κλικ μέχρι την οπτική ενημέρωση.
Το INP έχει σημασία για διαδραστικές σελίδες (φόρμες, κουμπιά, μενού). Έχει μικρότερη σημασία για στατικές σελίδες (άρθρα, blogs).
Στόχος: INP κάτω από 200 χιλιοστά του δευτερολέπτου είναι καλό. INP από 200 έως 500 χιλιοστά θέλει βελτίωση. INP πάνω από 500 χιλιοστά είναι κακό.
Παράδειγμα: ο χρήστης πατάει το κουμπί Προσθήκη στο καλάθι. Το σύστημα επεξεργάζεται το αίτημα. Ενημερώνει τον μετρητή του καλαθιού. Το INP είναι 300 χιλιοστά του δευτερολέπτου. Θέλει βελτίωση.
Γιατί τρεις μετρήσεις και όχι μία
Μία μέτρηση δεν αρκεί για την εμπειρία του χρήστη. Μετράει η ταχύτητα φόρτωσης (LCP). Μετράει η οπτική σταθερότητα (CLS). Μετράει η ανταπόκριση (INP). Μια σελίδα μπορεί να φορτώνει γρήγορα αλλά να είναι ασταθής (υψηλό CLS). Ή να είναι γρήγορη και σταθερή αλλά να μην ανταποκρίνεται (υψηλό INP). Οι τρεις μετρήσεις μαζί δείχνουν την ποιότητα της εμπειρίας.
Πραγματικό παράδειγμα: Core Web Vitals σε e-shop
Αρχική κατάσταση
Αρχική κατάσταση σε σελίδα προϊόντος e-shop:
LCP: 2,8 δευτερόλεπτα (πάνω από τον στόχο των 2,5). CLS: 0,12 (πάνω από τον στόχο του 0,1). INP: 220 χιλιοστά του δευτερολέπτου (πάνω από τον στόχο των 200).
Και οι τρεις μετρήσεις θέλουν βελτίωση.
Βελτιστοποίηση
LCP: βελτιστοποίησε την κεντρική εικόνα και φόρτωσε αργότερα (lazy load) το περιεχόμενο κάτω από το ορατό τμήμα. Αποτέλεσμα: 1,8 δευτερόλεπτα.
CLS: κράτησε χώρο για τις διαφημίσεις και φόρτωσε αργότερα το περιεχόμενο που δεν είναι κρίσιμο. Αποτέλεσμα: 0,05.
INP: μείωσε το JavaScript και βελτιστοποίησε τους χειριστές συμβάντων. Αποτέλεσμα: 180 χιλιοστά του δευτερολέπτου.
Και οι τρεις μετρήσεις πληρούν πλέον τα πρότυπα της Google.
Πώς σχετίζονται τα Core Web Vitals με την εμπειρία του χρήστη
Καλό LCP: ο χρήστης βλέπει γρήγορα το περιεχόμενο. Η σελίδα νιώθει ανταποκρινόμενη.
Κακό LCP: ο χρήστης περιμένει το περιεχόμενο. Η σελίδα νιώθει αργή.
Καλό CLS: η διάταξη είναι σταθερή. Ο χρήστης διαβάζει χωρίς να πηδάει το περιεχόμενο. Άνετη εμπειρία.
Κακό CLS: η διάταξη μετατοπίζεται. Ο χρήστης χάνει το σημείο του. Εκνευριστικό.
Καλό INP: ο χρήστης πατάει ένα κουμπί και βλέπει αμέσως απάντηση. Η σελίδα νιώθει διαδραστική.
Κακό INP: ο χρήστης πατάει ένα κουμπί και περιμένει απάντηση. Η σελίδα νιώθει ότι δεν ανταποκρίνεται.
Καλά Core Web Vitals δίνουν καλή εμπειρία χρήστη. Κακά Core Web Vitals δίνουν κακή εμπειρία χρήστη.
Πώς μετράς τα Core Web Vitals
Η Google μετράει τα Core Web Vitals από πραγματικούς χρήστες (real user monitoring). Εργαλεία δοκιμής σε εργαστήριο, όπως το Lighthouse, εκτιμούν τα Core Web Vitals αλλά μπορεί να μη συμφωνούν με την πραγματική εμπειρία των χρηστών (οι συνθήκες δικτύου διαφέρουν).
Έλεγξε τα Core Web Vitals στο Google Search Console. Η Google συγκεντρώνει δεδομένα πραγματικών χρηστών και δείχνει αν η ιστοσελίδα πληροί τα πρότυπα (καλό, θέλει βελτίωση, κακό).
Έλεγξέ τα και στο PageSpeed Insights. Δίνει βαθμολογίες Lighthouse μαζί με δεδομένα πραγματικών χρηστών από τη βάση της Google.
Συχνές ερωτήσεις
Ποιο Core Web Vital είναι το πιο σημαντικό;
Και τα τρία μετράνε. Συνήθως όμως το LCP και το CLS έχουν τη μεγαλύτερη επίδραση. Αν η σελίδα φορτώνει γρήγορα αλλά η διάταξη πηδάει συνεχώς, η εμπειρία είναι κακή. Αν η σελίδα είναι σταθερή αλλά δεν ανταποκρίνεται, η απογοήτευση είναι μικρότερη. Το LCP και το CLS είναι συνήθως πρώτη και δεύτερη προτεραιότητα. Το INP μετράει στις διαδραστικές σελίδες, λιγότερο στο στατικό περιεχόμενο. Με τον δημιουργό ιστοσελίδων του WEMASY, μπορείς να το στήσεις απευθείας στην ιστοσελίδα σου.
Πώς διαφέρουν τα Core Web Vitals από τις άλλες μετρήσεις απόδοσης;
Τα Core Web Vitals επικεντρώνονται στην εμπειρία του χρήστη. Μετράνε ό,τι αντιλαμβάνεται ο χρήστης. Οι άλλες μετρήσεις (TTFB, FCP) είναι τεχνικές. Είναι προαπαιτούμενα για καλά Core Web Vitals, αλλά δεν μετράνε άμεσα την εμπειρία. Βελτίωσε τις άλλες μετρήσεις ως βάση. Τα Core Web Vitals δείχνουν αν η βάση γίνεται καλή εμπειρία.
Μπορούμε να έχουμε καλές μετρήσεις απόδοσης αλλά κακά Core Web Vitals;
Ναι. Μια σελίδα μπορεί να έχει γρήγορο TTFB αλλά κακό LCP. Μπορεί να έχει γρήγορο FCP αλλά κακό CLS. Οι τεχνικές μετρήσεις είναι αναγκαίες αλλά όχι αρκετές για καλά Core Web Vitals.
Πρέπει να βελτιστοποιούμε και τα τρία Core Web Vitals εξίσου;
Όχι. Βάλε προτεραιότητες με βάση τη σημασία. Μέτρησε την τωρινή κατάσταση. Αν το LCP είναι τέσσερα δευτερόλεπτα αλλά το CLS είναι 0,1, βελτίωσε πρώτα το LCP. Τα μεγαλύτερα κενά έχουν τη μεγαλύτερη επίδραση στους χρήστες.
Είναι τα Core Web Vitals οι μοναδικές μετρήσεις που ενδιαφέρουν την Google;
Όχι. Η Google μετράει επίσης τη φιλικότητα προς κινητά, το HTTPS, την ασφαλή περιήγηση και τα παράθυρα που καλύπτουν το περιεχόμενο. Τα Core Web Vitals είναι τα πιο ορατά και τα πιο εύκολα να αλλάξουν. Η συνολική εμπειρία σελίδας όμως περιλαμβάνει κι άλλους παράγοντες. Βελτιστοποίησε τα Core Web Vitals αλλά μην αγνοείς τους υπόλοιπους παράγοντες κατάταξης.
Κάθε πότε ενημερώνονται τα Core Web Vitals πραγματικών χρηστών στο Google Search Console;
Καθημερινά. Η Google συγκεντρώνει συνεχώς δεδομένα πραγματικών χρηστών. Τα Core Web Vitals στο Search Console ενημερώνονται κάθε μέρα. Τα εργαλεία εργαστηρίου δείχνουν μέτρηση της στιγμής. Παρακολούθησε τα δεδομένα πραγματικών χρηστών στο Search Console για τη συνεχή απόδοση.