Πόσο γρήγορο πρέπει να είναι ένα site; Τα Core Web Vitals με απλά λόγια
Ένας επισκέπτης πατάει το link σας από το κινητό, στον δρόμο, με μέτριο σήμα. Αν δει μια λευκή οθόνη για πέντε δευτερόλεπτα, θα κλείσει τη σελίδα χωρίς να μάθει ποτέ τι πουλάτε. Πόσο γρήγορο όμως είναι το «αρκετά γρήγορο»; Η Google έχει δώσει συγκεκριμένους αριθμούς, τα Core Web Vitals. Εδώ εξηγούμε τι σημαίνουν, πώς τα μετράτε μόνοι σας και τι αξίζει να διορθώσετε πρώτα.
Η σύντομη απάντηση
Ένα site θεωρείται γρήγορο όταν το κύριο περιεχόμενό του εμφανίζεται μέσα σε 2,5 δευτερόλεπτα, απαντάει στα πατήματα μέσα σε 200 χιλιοστά του δευτερολέπτου και δεν μετακινείται την ώρα που το διαβάζετε (CLS έως 0,1).
| Μέτρηση | Τι δείχνει | Καλό | Θέλει βελτίωση | Κακό |
|---|---|---|---|---|
| LCP | Πότε φάνηκε το κύριο περιεχόμενο | έως 2,5 δευτ. | 2,5 έως 4 δευτ. | πάνω από 4 δευτ. |
| INP | Πόσο γρήγορα απαντάει στα πατήματα | έως 200 ms | 200 έως 500 ms | πάνω από 500 ms |
| CLS | Πόσο μετακινείται η σελίδα μόνη της | έως 0,1 | 0,1 έως 0,25 | πάνω από 0,25 |
Μία λεπτομέρεια κάνει τη μεγάλη διαφορά: αυτοί οι αριθμοί δεν αφορούν μία δοκιμή από το γραφείο σας, αλλά το 75% των πραγματικών επισκέψεων, ξεχωριστά για κινητά και για υπολογιστές. Θα το δούμε παρακάτω.
Τι είναι τα Core Web Vitals
Για χρόνια, η ταχύτητα μετριόταν με το πότε «φόρτωσε» μια σελίδα. Όμως μια σελίδα μπορεί να έχει φορτώσει τεχνικά και ο επισκέπτης να βλέπει ακόμα κενό, ή να βλέπει τα πάντα αλλά να μην μπορεί να πατήσει τίποτα. Γι’ αυτό η Google κατέληξε σε τρεις μετρήσεις που περιγράφουν αυτό που ζει ο άνθρωπος μπροστά στην οθόνη:
- Φόρτωσε; Αυτό το μετράει το LCP.
- Με ακούει όταν πατάω; Αυτό το μετράει το INP.
- Μένει στη θέση του; Αυτό το μετράει το CLS.
Η λίστα αλλάζει όταν βρεθεί κάτι καλύτερο. Το INP, για παράδειγμα, αντικατέστησε το παλιότερο FID το 2024. Έτσι, αν διαβάσετε έναν παλιό οδηγό που μιλάει για FID, ξέρετε ότι δεν ισχύει πια.
LCP: πότε βλέπει ο επισκέπτης αυτό για το οποίο ήρθε
Το Largest Contentful Paint μετράει πόση ώρα περνάει μέχρι να εμφανιστεί το μεγαλύτερο στοιχείο της πρώτης οθόνης. Συνήθως είναι η κεντρική φωτογραφία ή ο μεγάλος τίτλος. Είναι η στιγμή που ο επισκέπτης καταλαβαίνει ότι βρέθηκε στο σωστό μέρος.
Τι το καθυστερεί
Ο χρόνος του LCP έχει τέσσερα κομμάτια, και καθένα έχει διαφορετική λύση:
- Αργή απάντηση του server: φτηνή φιλοξενία, χωρίς cache, με πολλά plugins που τρέχουν σε κάθε επίσκεψη.
- Καθυστερημένο ξεκίνημα της εικόνας: ο browser ανακαλύπτει αργά ότι χρειάζεται τη φωτογραφία, ή τη βάζει πίσω στην ουρά.
- Βαριά εικόνα: μια φωτογραφία 5 MB από το κινητό, ανεβασμένη όπως είναι.
- Καθυστέρηση στη σχεδίαση: η εικόνα έχει έρθει, αλλά στυλ και scripts εμποδίζουν τον browser να τη δείξει.
Τι το φτιάχνει
- Μικρύνετε τις εικόνες και ανεβάστε τες σε WebP ή AVIF, στις διαστάσεις που πραγματικά χρειάζεστε.
- Μην αφήνετε την κεντρική εικόνα να φορτώνει με καθυστέρηση (lazy load). Ο lazy load είναι για όσες εικόνες βρίσκονται πιο κάτω στη σελίδα.
- Δώστε της προτεραιότητα, για να τη ζητήσει ο browser από τις πρώτες.
- Βάλτε σωστή cache στον server και, αν έχετε επισκέπτες από πολλές χώρες, ένα CDN.
- Αποφύγετε το slider στην πρώτη οθόνη. Μια σωστά διαλεγμένη φωτογραφία φορτώνει πιο γρήγορα και συνήθως λέει περισσότερα.
INP: απαντάει όταν το πατάτε;
Το Interaction to Next Paint μετράει πόσο περνάει από τη στιγμή που πατάτε κάτι μέχρι να αλλάξει η οθόνη. Κουμπί που μοιάζει νεκρό, μενού που αργεί να ανοίξει, «Προσθήκη στο καλάθι» που το πατάτε δύο φορές γιατί δεν έγινε τίποτα: όλα αυτά είναι κακό INP.
Μετράνε τα κλικ, τα αγγίγματα και τα πλήκτρα. Το απλό σκρολάρισμα δεν μετράει. Η τιμή είναι συνήθως το χειρότερο πάτημα όλης της επίσκεψης, άρα μια σελίδα δεν περνάει επειδή τα περισσότερα κουμπιά της είναι γρήγορα.
Τι το καθυστερεί
Σχεδόν πάντα ο υπεύθυνος είναι η JavaScript. Ο browser κάνει ένα πράγμα κάθε φορά, και όσο τρέχει κώδικας δεν προλαβαίνει να απαντήσει στο δάχτυλό σας. Σε ένα τυπικό WordPress ή e-shop, ο κώδικας αυτός έρχεται από:
- Έτοιμα θέματα και page builders που φορτώνουν τα πάντα σε κάθε σελίδα.
- Plugins που προσθέτουν το καθένα τα δικά του scripts.
- Εξωτερικά εργαλεία: chat, διαφημιστικά pixels, χάρτες, εργαλεία καταγραφής.
Το πρόβλημα φαίνεται κυρίως στα μεσαία και τα παλιά κινητά, γιατί ο επεξεργαστής τους είναι πολύ πιο αργός. Σε έναν γρήγορο υπολογιστή μπορεί να μην το δείτε ποτέ, ενώ οι πελάτες σας το ζουν κάθε μέρα.
Τι το φτιάχνει
- Κάντε μια απογραφή: ποια plugins και ποια εξωτερικά εργαλεία χρησιμοποιείτε πραγματικά; Ό,τι δεν χρειάζεται, φεύγει.
- Φορτώστε το υπόλοιπο μόνο στις σελίδες που το χρειάζονται. Η φόρμα επικοινωνίας δεν έχει λόγο να φορτώνει στην αρχική.
- Δώστε αμέσως ένδειξη στον χρήστη όταν πατάει κάτι, ακόμα κι αν η δουλειά συνεχίζεται από πίσω.
- Σπάστε τις μεγάλες εργασίες σε μικρότερες, ώστε ο browser να προλαβαίνει να απαντάει ενδιάμεσα. Αυτό είναι δουλειά του developer σας.
CLS: μένει η σελίδα στη θέση της;
Το έχετε ζήσει: πάτε να πατήσετε ένα κουμπί, φορτώνει μια εικόνα από πάνω, όλα κατεβαίνουν και πατάτε κάτι άλλο. Αυτό μετράει το Cumulative Layout Shift. Δεν είναι χρόνος αλλά βαθμολογία, γι’ αυτό δεν έχει δευτερόλεπτα.
Η βαθμολογία συνδυάζει το πόσο μέρος της οθόνης επηρεάστηκε και το πόσο μετακινήθηκε. Ένα στοιχείο που καλύπτει το 75% της οθόνης και μετακινείται κατά το 25% του ύψους της δίνει περίπου 0,19, δηλαδή ήδη σχεδόν το διπλάσιο από το καλό όριο. Οι μετακινήσεις που γίνονται αμέσως μετά από δικό σας πάτημα δεν μετράνε, γιατί τις περιμένετε: ένα μενού που ανοίγει όταν το πατάτε είναι εντάξει.
Τι το προκαλεί και πώς φτιάχνεται
- Εικόνες χωρίς διαστάσεις: δηλώστε πλάτος και ύψος, ώστε ο browser να κρατήσει τον χώρο πριν έρθουν.
- Γραμματοσειρές που αλλάζουν: όταν η τελική γραμματοσειρά έχει άλλο μέγεθος από την προσωρινή, το κείμενο ξαναστοιχίζεται. Διαλέξτε μια προσωρινή με παρόμοιες αναλογίες.
- Διαφημίσεις, widgets και ενσωματώσεις: κρατήστε τους από πριν τον χώρο που θα πιάσουν.
- Περιεχόμενο που μπαίνει από πάνω: μπάρες προσφορών και μηνύματα που σπρώχνουν τη σελίδα. Βάλτε τα σε δικό τους χώρο ή πάνω από το περιεχόμενο, χωρίς να το μετακινούν.
Γιατί το 75% αλλάζει την ανάγνωση
Η Google δεν κοιτάει τον μέσο όρο ούτε την καλύτερη μέτρηση. Κοιτάει το 75ο εκατοστημόριο. Με απλά λόγια: βάζουμε όλες τις επισκέψεις στη σειρά, από την πιο γρήγορη στην πιο αργή, και κοιτάμε εκείνη που βρίσκεται στα τρία τέταρτα.
Αν έχετε 100 επισκέψεις και το LCP σας είναι «καλό», σημαίνει ότι τουλάχιστον οι 75 είδαν το περιεχόμενο μέσα σε 2,5 δευτερόλεπτα. Έτσι μετράνε και οι δύσκολες περιπτώσεις: το παλιό κινητό, το αδύναμο σήμα στο λεωφορείο. Μια σελίδα περνάει όταν καλύπτει και τις τρεις μετρήσεις, οπότε ένα εξαιρετικό LCP δεν σώζει ένα κακό CLS.
Το 96/100 δεν είναι το ίδιο με τα Core Web Vitals
Εδώ μπερδεύονται οι περισσότεροι. Όταν ανοίγετε το PageSpeed Insights, βλέπετε δύο διαφορετικά πράγματα:
- Δεδομένα πραγματικών χρηστών (field data): πραγματικές επισκέψεις από Chrome τις τελευταίες 28 ημέρες. Αυτά είναι τα Core Web Vitals που σας αφορούν.
- Εργαστηριακή δοκιμή (Lighthouse): μία προσομοίωση εκείνη τη στιγμή, που βγάζει τον γνωστό βαθμό από το 0 έως το 100.
Ο βαθμός είναι χρήσιμος για να βρείτε τι φταίει, αλλά δεν είναι ο στόχος. Βγαίνει από πέντε μετρήσεις, και μία από τις βαρύτερες (Total Blocking Time, 30%) δεν είναι καν Core Web Vital. Επιπλέον αλλάζει από δοκιμή σε δοκιμή, ακόμα και χωρίς καμία αλλαγή στο site, γιατί επηρεάζεται από το δίκτυο και τη συσκευή. Από 90 και πάνω θεωρείται καλός, αλλά ένα 92 και ένα 97 δεν σημαίνουν κάτι διαφορετικό για τον πελάτη σας.
Το αντίστροφο επίσης συμβαίνει: ένα site με 95 στη δοκιμή μπορεί να είναι αργό για τους πραγματικούς χρήστες του, γιατί εκείνοι έχουν πιο αδύναμα κινητά ή βρίσκονται μακριά από τον server. Όταν οι δύο εικόνες διαφωνούν, πιστέψτε τους πραγματικούς χρήστες.
Αν το site σας είναι μικρό, πιθανότατα δεν θα δείτε καθόλου δεδομένα πραγματικών χρηστών, γιατί η Google χρειάζεται έναν ελάχιστο αριθμό επισκέψεων για να τα δημοσιεύσει. Δεν είναι πρόβλημα. Χρησιμοποιήστε την εργαστηριακή δοκιμή ως ένδειξη, κι αν μπορείτε, δοκιμάστε το site σε ένα φτηνό κινητό με κανονικό 4G.
Επηρεάζει τη θέση σας στη Google;
Ναι, αλλά λιγότερο απ’ όσο νομίζουν οι περισσότεροι. Η ίδια η Google συστήνει καλά Core Web Vitals για να πάει καλά ένα site στην αναζήτηση, αλλά ξεκαθαρίζει δύο πράγματα:
- Ένα καλό αποτέλεσμα δεν εγγυάται ότι θα βγείτε στην κορυφή.
- Το πιο σχετικό περιεχόμενο κερδίζει, ακόμα κι αν η εμπειρία της σελίδας δεν είναι καλή. Η καλή εμπειρία βοηθάει κυρίως όταν πολλές εξίσου χρήσιμες σελίδες διεκδικούν την ίδια αναζήτηση.
Άρα, αν κάποιος σας υποσχεθεί ότι θα σας ανεβάσει στην πρώτη θέση διορθώνοντας την ταχύτητα, έχετε λόγο να είστε επιφυλακτικοί. Το αντίθετο όμως επίσης δεν ισχύει: σε μια ανταγωνιστική αγορά, όπου όλοι έχουν καλό περιεχόμενο, η ταχύτητα μπορεί να κάνει τη διαφορά.
Επηρεάζει τις πωλήσεις σας;
Εδώ τα στοιχεία είναι πιο ενδιαφέροντα, γιατί η ταχύτητα δεν φέρνει μόνο επισκέπτες, κρατάει κι όσους ήρθαν ήδη:
- Στη μελέτη Milliseconds Make Millions της Deloitte, με 30 εκατομμύρια επισκέψεις από κινητό σε 37 μάρκες στην Ευρώπη, βελτίωση 0,1 δευτερολέπτου συνδέθηκε με περίπου 8% περισσότερες μετατροπές στο λιανεμπόριο και 10% στα ταξίδια.
- Η Vodafone έκανε δοκιμή A/B σε σελίδα με διαφημιστική κίνηση: η έκδοση με 31% καλύτερο LCP έφερε 8% περισσότερες πωλήσεις.
Δύο σημειώσεις για να τα διαβάσετε σωστά. Η πρώτη μελέτη έγινε με παραγγελία της Google και οι εταιρείες και στις δύο είναι μεγάλες. Ένα μικρό κατάστημα δεν θα δει αυτόματα τα ίδια ποσοστά. Αυτό που μένει είναι η κατεύθυνση: ο γρήγορος δρόμος μέχρι την αγορά βοηθάει, ιδίως στο κινητό και ιδίως όταν πληρώνετε για κάθε κλικ. Αν τρέχετε διαφημίσεις, κάθε επισκέπτης που φεύγει πριν φορτώσει η σελίδα είναι χρήματα που έχετε ήδη δώσει.
Πώς μετράτε το δικό σας site σε 10 λεπτά
- Ανοίξτε το PageSpeed Insights και βάλτε τη διεύθυνσή σας.
- Μείνετε στην καρτέλα Κινητό. Εκεί είναι οι περισσότερες επισκέψεις των περισσότερων επιχειρήσεων, και εκεί φαίνονται τα προβλήματα.
- Κοιτάξτε πρώτα το πάνω μέρος, με τους πραγματικούς χρήστες. Αν γράφει ότι δεν υπάρχουν αρκετά δεδομένα, συνεχίστε στην εργαστηριακή δοκιμή.
- Δοκιμάστε τις σελίδες που φέρνουν χρήματα, όχι μόνο την αρχική: ένα προϊόν, το καλάθι, τη φόρμα επικοινωνίας.
- Αν έχετε Search Console, δείτε την αναφορά Core Web Vitals. Ομαδοποιεί τις σελίδες που έχουν το ίδιο πρόβλημα.
- Μετά από αλλαγή, δώστε χρόνο. Τα δεδομένα χρηστών καλύπτουν 28 ημέρες, οπότε η βελτίωση φαίνεται σταδιακά.
Τι να διορθώσετε πρώτα
Στα περισσότερα WordPress και e-shop που βλέπουμε, αυτή η σειρά φέρνει το μεγαλύτερο κέρδος με τη μικρότερη δουλειά:
- Εικόνες. Το πιο εύκολο και συχνά το πιο αποδοτικό: σωστές διαστάσεις, σύγχρονη μορφή, χωρίς καθυστέρηση στην κεντρική εικόνα.
- Φιλοξενία και cache. Αν ο server αργεί να απαντήσει, ό,τι κι αν κάνετε μετά ξεκινάει με καθυστέρηση.
- Plugins και εξωτερικά εργαλεία. Κάθε script κοστίζει. Κρατήστε ό,τι φέρνει μετρήσιμο αποτέλεσμα.
- Χώρος για όλα. Διαστάσεις σε εικόνες και widgets, ώστε να φύγει το CLS.
- Θέμα και κώδικας. Αν μετά από όλα αυτά το site παραμένει αργό, το πρόβλημα είναι συνήθως στο θέμα ή στον page builder. Τότε αξίζει να εξετάσετε μια πιο καθαρή κατασκευή.
Ένα συχνό λάθος είναι να στοιβάζετε plugins «ταχύτητας» πάνω σε ένα βαρύ site. Μπορεί να βελτιώσουν τον βαθμό, αλλά το καλύτερο plugin είναι συνήθως εκείνο που καταφέρατε να αφαιρέσετε.
Πόσο γρήγορο είναι αρκετά γρήγορο
Στόχος είναι το πράσινο και στις τρεις μετρήσεις, στο κινητό, για τις σελίδες που φέρνουν δουλειά. Μόλις το πετύχετε, το κυνήγι του 100/100 σπάνια αξίζει τα χρήματα. Ένα κείμενο που πείθει και ένα καθαρό ταμείο θα σας φέρουν πιο πολλά από ένα κέρδος μερικών χιλιοστών.
Αν έχετε κόκκινο σε κάποια μέτρηση όμως, αξίζει να το δείτε τώρα, ιδίως αν πληρώνετε διαφημίσεις. Αν δεν ξέρετε από πού να ξεκινήσετε, στείλτε μας το site σας και θα σας πούμε τι θα διορθώναμε πρώτα.