Core Web Vitals: εξηγήσεις για ιδιοκτήτες ιστοσελίδων

Τα Core Web Vitals είναι τρεις μετρήσεις που χρησιμοποιεί η Google για να περιγράψει πώς αισθάνεται μια σελίδα ένας πραγματικός επισκέπτης: πόσο γρήγορα εμφανίζεται το κύριο περιεχόμενο, πόσο γρήγορα αντιδρά η σελίδα όταν κάποιος πατήσει ή κάνει κλικ και αν η διάταξη «πηδά» κατά τη φόρτωση. Αποτελούν μέρος των σημάτων page experience της Google, όμως ο πιο σημαντικός λόγος να σας ενδιαφέρουν είναι πιο απλός. Οι επισκέπτες φεύγουν από αργές, ασταθείς σελίδες και σπάνια σας λένε γιατί.

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

Οι τρεις μετρήσεις με μια ματιά

Μέτρηση	Τι μετρά	Καλό	Κακό
LCP (Largest Contentful Paint)	Χρόνος μέχρι να αποδοθεί το μεγαλύτερο ορατό στοιχείο	2,5 δευτερόλεπτα ή λιγότερο	Πάνω από 4 δευτερόλεπτα
INP (Interaction to Next Paint)	Πόση ώρα χρειάζεται η σελίδα να ανταποκριθεί οπτικά μετά από πάτημα, κλικ ή πλήκτρο	200 χιλιοστά του δευτερολέπτου ή λιγότερο	Πάνω από 500 χιλιοστά του δευτερολέπτου
CLS (Cumulative Layout Shift)	Πόσο μετακινείται απροσδόκητα το ορατό περιεχόμενο	0,1 ή λιγότερο	Πάνω από 0,25

Οι τιμές ανάμεσα στο «καλό» και το «κακό» ανήκουν στη ζώνη «χρειάζεται βελτίωση». Η Google αξιολογεί μια σελίδα στο 75ο εκατοστημόριο των πραγματικών επισκέψεων, που σημαίνει ότι τα τρία τέταρτα των επισκεπτών σας πρέπει να έχουν εμπειρία ίση ή καλύτερη από το όριο. Ένα γρήγορο τεστ στον δικό σας φορητό δεν αποδεικνύει ότι η σελίδα περνά.

Largest Contentful Paint: εμφανίζεται η σελίδα;

Το LCP κοιτάζει τη μεγαλύτερη εικόνα, το poster βίντεο ή το μπλοκ κειμένου στην πρώτη οθόνη και καταγράφει πότε ολοκληρώνεται η απόδοσή του. Στα περισσότερα sites είναι μια εικόνα hero ή ένας μεγάλος τίτλος. Ένα αργό LCP προέρχεται συνήθως από μία από τέσσερις αιτίες: αργή απόκριση διακομιστή, βαριά ή κακώς διαμορφωμένη εικόνα, CSS ή JavaScript που μπλοκάρουν την απόδοση ή ο browser που ανακαλύπτει πολύ αργά την κρίσιμη εικόνα.

Interaction to Next Paint: ανταποκρίνεται η σελίδα;

Το INP αντικατέστησε τη παλαιότερη μέτρηση First Input Delay τον Μάρτιο του 2024. Ενώ το First Input Delay κοιτούσε μόνο την πρώτη αλληλεπίδραση και μόνο την καθυστέρηση πριν ξεκινήσει, το INP λαμβάνει υπόψη τις αλληλεπιδράσεις σε όλη την επίσκεψη και αναφέρει μία από τις πιο αργές, από την εισαγωγή μέχρι το επόμενο καρέ που σχεδιάζεται. Οι σελίδες που φορτώνουν γρήγορα αλλά «κολλάνε» όταν ανοίγετε ένα μενού ή πατάτε ένα κουμπί έχουν συνήθως πρόβλημα JavaScript: πάρα πολύς κώδικας τρέχει ταυτόχρονα στο κύριο νήμα.

Cumulative Layout Shift: μένει ακίνητη η σελίδα;

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

Δεδομένα εργαστηρίου και δεδομένα πεδίου

Υπάρχουν δύο είδη μέτρησης και η σύγχυσή τους προκαλεί μπέρδεμα.

• Τα δεδομένα πεδίου προέρχονται από πραγματικούς επισκέπτες με πραγματικές συσκευές και δίκτυα. Η Google τα συλλέγει από χρήστες Chrome και τα δείχνει στο PageSpeed Insights και στο Search Console όταν το site έχει αρκετή επισκεψιμότητα. Αυτά μετράνε για την αξιολόγηση.
• Τα δεδομένα εργαστηρίου προέρχονται από προσομοιωμένο τεστ, όπως το Lighthouse. Είναι αναπαραγώγιμα, κάτι που τα κάνει ιδανικά για εντοπισμό σφαλμάτων, αλλά αφορούν μία συσκευή σε μία σύνδεση.

Ένα μικρό site μπορεί να μην έχει καθόλου δεδομένα πεδίου. Σε αυτή την περίπτωση χρησιμοποιήστε τεστ εργαστηρίου για να βρείτε προβλήματα και αντιμετωπίστε τα αποτελέσματα ως καθοδήγηση και όχι ως ετυμηγορία.

Από πού να ξεκινήσετε τις διορθώσεις

1. Μετρήστε τις σελίδες που μετράνε. Δοκιμάστε την αρχική σας σελίδα, την πιο επισκέψιμη landing page και ένα τυπικό άρθρο ή σελίδα προϊόντος σε προφίλ κινητού. Μην κάνετε μέσο όρο σε όλο το site.
2. Διορθώστε πρώτα την πιο αργή μέτρηση. Αν το LCP είναι κακό και το CLS καλό, δουλέψτε το LCP.
3. Ξεκινήστε με τα φθηνά κέρδη. Συμπιέστε και αλλάξτε μέγεθος στην εικόνα hero, ορίστε διαστάσεις στις εικόνες, ενεργοποιήστε caching, σκεφτείτε ένα CDN και αφαιρέστε plugins ή scripts που δεν χρησιμοποιείτε πια.
4. Ξαναδοκιμάστε μετά από κάθε αλλαγή. Αλλάζετε ένα πράγμα τη φορά ώστε να ξέρετε τι βοήθησε.
5. Περιμένετε να προλάβουν τα δεδομένα πεδίου. Οι πραγματικοί αριθμοί συλλέγονται σε κυλιόμενη περίοδο, γι' αυτό οι βελτιώσεις χρειάζονται μερικές εβδομάδες για να φανούν πλήρως.

Τι σχέση έχει το hosting

Τα Core Web Vitals αφορούν κυρίως τον τρόπο που είναι χτισμένη μια σελίδα, αλλά το hosting ορίζει το κατώφλι. Η αργή απόκριση του διακομιστή καθυστερεί ό,τι ακολουθεί, κάτι που πλήττει άμεσα το LCP. Οι υπερφορτωμένοι διακομιστές, οι παλιές εκδόσεις PHP και το caching από την πλευρά του διακομιστή που λείπει προσθέτουν χρόνο πριν ο browser λάβει το πρώτο byte. Η καλή δουλειά στο front-end δεν μπορεί να αντισταθμίσει πλήρως ένα αργό back end.

Μια ρεαλιστική προσδοκία

Το να περνάτε και τις τρεις μετρήσεις είναι άξιος στόχος, αλλά δεν είναι μαγικός διακόπτης κατάταξης. Η συνάφεια του περιεχομένου μετράει ακόμη πολύ περισσότερο. Σκεφτείτε τα Core Web Vitals ως αφαίρεση τριβής: δεν θα κάνουν μια αδύναμη σελίδα να ανέβει στην κατάταξη, αλλά μια αργή, ασταθής σελίδα δυσκολεύει να κρατήσετε τους επισκέπτες που ήδη κερδίσατε.

Συνηθισμένα λάθη των ιδιοκτητών sites

• Κυνηγώντας το τέλειο σκορ Lighthouse. Το 100 σε τεστ εργαστηρίου δεν είναι ο στόχος. Ο στόχος είναι να περνάτε τα τρία όρια για τους πραγματικούς επισκέπτες.
• Δοκιμές μόνο σε desktop. Το μεγαλύτερο μέρος της αξιολόγησης γίνεται σε κινητό και οι κινητές συσκευές έχουν πιο αργούς επεξεργαστές και συνδέσεις.
• Εγκατάσταση ενός plugin ταχύτητας και τέλος. Τα plugins μπορούν να βοηθήσουν στο caching και στον χειρισμό εικόνων, αλλά δεν μπορούν να αφαιρέσουν μια εικόνα hero 3 MB ή δώδεκα scripts μάρκετινγκ.
• Αγνόηση των προτύπων. Οι σελίδες που χτίζονται από το ίδιο πρότυπο συνήθως μοιράζονται τα ίδια προβλήματα, οπότε η διόρθωση του προτύπου διορθώνει πολλές σελίδες μονομιάς. Το Search Console ομαδοποιεί παρόμοια URLs ακριβώς γι' αυτό το λόγο.

Κρατήστε ένα απλό ημερολόγιο με το τι αλλάξατε και το σκορ πριν και μετά. Γλιτώνει την εικασία όταν κάτι χειροτερεύσει μετά από ενημέρωση plugin.

Οι γρήγορες σελίδες ξεκινούν από τον διακομιστή

Στη Zebra Hosting Cloud, κάθε πακέτο περιλαμβάνει το control panel Plesk, όπου μπορείτε να επιλέξετε τρέχουσες εκδόσεις PHP, και το Cloudflare CDN διατίθεται σε φιλοξενούμενα sites για να σερβίρει στατικά αρχεία πιο κοντά στους επισκέπτες. Μαζί αυτά καλύπτουν την πλευρά του διακομιστή στην εξίσωση ώστε να συγκεντρωθείτε στην ίδια τη σελίδα. Δείτε τι προσφέρει κάθε πακέτο στην επισκόπηση hosting.