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

Τα Core Web Vitals είναι τρεις μετρήσεις που η Google συλλέγει από πραγματικούς επισκέπτες που χρησιμοποιούν Chrome. Δεν βγαίνουν από ένα τεστ στο γραφείο σου, βγαίνουν από τους πελάτες σου, στα δικά τους κινητά και στα δικά τους δίκτυα. Γι' αυτό μετράνε: περιγράφουν την εμπειρία που έχει στην πράξη όποιος μπαίνει στο κατάστημά σου.

Τα τρία όρια με μια ματιά

  • LCP (φόρτωση): καλό κάτω από 2,5 δευτερόλεπτα.
  • INP (απόκριση): καλό κάτω από 200 χιλιοστά του δευτερολέπτου.
  • CLS (σταθερότητα): καλό κάτω από 0,1.

Μια σελίδα θεωρείται ότι περνάει όταν τουλάχιστον το 75% των επισκέψεων είναι μέσα στα όρια. Δηλαδή δεν αρκεί να είναι γρήγορη για σένα με το γρήγορο Wi-Fi του γραφείου· πρέπει να είναι γρήγορη και για τον πελάτη με το παλιό κινητό στο λεωφορείο.

LCP, πόσο γρήγορα φαίνεται το κύριο περιεχόμενο

Στόχος κάτω από 2,5 δευτερόλεπτα σε κινητό. Στα περισσότερα eshop, το στοιχείο LCP είναι η κεντρική εικόνα ή ο τίτλος του προϊόντος. Οι συνηθισμένες αιτίες καθυστέρησης: εικόνα χωρίς προτεραιότητα φόρτωσης, γραμματοσειρές που μπλοκάρουν, και slider που φορτώνει τρεις φωτογραφίες πριν δείξει την πρώτη.

Οι διορθώσεις που αποδίδουν πρώτες: η κεντρική εικόνα σε σύγχρονη μορφή (WebP ή AVIF) και σωστό μέγεθος, με υψηλή προτεραιότητα φόρτωσης και χωρίς lazy loading· λιγότερα αρχεία CSS και JavaScript που πρέπει να κατέβουν πριν εμφανιστεί οτιδήποτε· και ένας server που απαντά γρήγορα, με cache για τις σελίδες που είναι ίδιες για όλους.

INP, πόσο γρήγορα αντιδρά στο άγγιγμα

Αντικατέστησε το παλιό FID και είναι πιο αυστηρό: μετράει κάθε αλληλεπίδραση, όχι μόνο την πρώτη. Αν το «Προσθήκη στο καλάθι» κάνει μισό δευτερόλεπτο να αντιδράσει, το βλέπει. Συνήθης ένοχος: υπερβολικό JavaScript από scripts παρακολούθησης.

Chat, pop-up, widgets κριτικών και pixels διαφήμισης τρέχουν όλα στο ίδιο νήμα με το κουμπί που πατάει ο πελάτης. Όσο περισσότερα φορτώνουν μαζί, τόσο πιο πιθανό είναι το κουμπί να περιμένει. Η λύση δεν είναι να τα βγάλεις όλα, είναι να φορτώνουν αργότερα, μόνο όπου χρειάζονται, και μέσω ενός διαχειριστή όπως το Google Tag Manager, με συγκατάθεση.

CLS, πόσο χοροπηδάει η σελίδα

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

Κλασικό παράδειγμα: ο πελάτης πάει να πατήσει «Αγορά», εμφανίζεται από πάνω το μπάνερ των cookies ή μια μπάρα προσφοράς, η σελίδα κατεβαίνει και πατάει κάτι άλλο. Οι γραμματοσειρές που αλλάζουν μέγεθος μόλις φορτώσουν έχουν το ίδιο αποτέλεσμα σε μικρότερη κλίμακα.

Πού τα βλέπεις

  • Google Search Console, στην αναφορά Core Web Vitals: ομαδοποιεί τις σελίδες σου σε «καλές», «χρειάζονται βελτίωση» και «κακές», με δεδομένα πραγματικών χρηστών.
  • PageSpeed Insights: στο πάνω μέρος δείχνει τα πραγματικά δεδομένα της σελίδας (όταν υπάρχουν αρκετά) και από κάτω το εργαστηριακό τεστ με τις προτάσεις.
  • Lighthouse στον Chrome: χρήσιμο για να δοκιμάσεις μια αλλαγή πριν ανέβει.

Τι να αγνοήσεις

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

Αγνόησε επίσης τις προτάσεις που υπόσχονται μερικά χιλιοστά του δευτερολέπτου με μεγάλο κόστος. Αν οι τρεις δείκτες είναι πράσινοι για τους πραγματικούς επισκέπτες σου, η επόμενη ώρα δουλειάς αποδίδει περισσότερο σε κείμενα, φωτογραφίες προϊόντων και ταμείο παρά σε ένα ακόμη σημείο στο σκορ.

Με ποια σειρά διορθώνεις

  1. CLS πρώτα, γιατί συνήθως θέλει λίγες γραμμές: διαστάσεις σε εικόνες και σταθερός χώρος για μπάνερ.
  2. LCP μετά: κεντρική εικόνα, γραμματοσειρές, λιγότερα αρχεία που μπλοκάρουν.
  3. INP στο τέλος, γιατί θέλει έλεγχο σε scripts τρίτων και συχνά συζήτηση για το ποια πραγματικά χρειάζονται.

Στην πράξη, οι περισσότερες αιτίες καθυστέρησης σε ένα eshop είναι οι ίδιες τρεις: plugins, εικόνες και βάση. Τις αναλύουμε στο γιατί αργεί το eshop σου. Αν θέλεις να το αναλάβουμε, δες τη δημιουργία eshop και ένα πραγματικό παράδειγμα στο Elixir Makeup.

Συχνές ερωτήσεις

Επηρεάζουν τα Core Web Vitals την κατάταξη στο Google;

Ναι, ως μέρος της αξιολόγησης της εμπειρίας σελίδας, δίπλα σε πολλούς άλλους παράγοντες. Δεν θα ξεπεράσει ένα γρήγορο site ένα πιο σχετικό περιεχόμενο, αλλά ανάμεσα σε ισάξιες σελίδες μετράει.

Γιατί το Search Console λέει «δεν υπάρχουν αρκετά δεδομένα»;

Τα δεδομένα πραγματικών χρηστών εμφανίζονται μόνο όταν μια σελίδα ή ένα site έχει αρκετή κίνηση από Chrome. Σε μικρότερα sites χρησιμοποίησε το εργαστηριακό τεστ ως οδηγό, με κινητό και αργό δίκτυο.

Πόσο γρήγορα φαίνεται μια βελτίωση;

Τα δεδομένα της Google είναι μέσος όρος των τελευταίων 28 ημερών, οπότε μια διόρθωση φαίνεται πλήρως περίπου μετά από τέσσερις εβδομάδες. Το εργαστηριακό τεστ τη δείχνει αμέσως.

Είναι το INP το ίδιο με το FID;

Όχι. Το INP αντικατέστησε το FID τον Μάρτιο του 2024 και μετράει την απόκριση σε όλες τις αλληλεπιδράσεις της επίσκεψης, όχι μόνο στην πρώτη, γι' αυτό είναι πιο απαιτητικό.