Πριν από λίγο καιρό στις 11 Νοεμβρίου, η Google προκάλεσε μεγάλη αναταραχή ανακοινώνοντας έναν νέο παράγοντα κατάταξης για το 2021: εμπειρία σελίδας ή αλλιώς, Core Web Vitals. Η εμπειρία των χρηστών ήταν ανέκαθεν απαραίτητο μέρος για την προώθηση ιστοσελίδας, αλλά τώρα, θα διαδραματίσει ακόμη μεγαλύτερο ρόλο! Όλα αυτά τροφοδοτούνται από νέες μετρήσεις: το Core Web Vitals. Κι αυτό σημαίνει ότι έφτασε η ώρα να γνωρίσετε τους όρους LCP, FID και CLS!
Προώθηση ιστοσελίδας: Η ενημέρωση για το Google page experience ξεκινά από τα Web Vitals
Μιλήσαμε για αυτήν την ενημέρωση του page experience στο παρελθόν, ωστόσο τώρα θέλουμε να ρίξουμε μια άλλη ματιά στα Core Web Vitals. Σε γενικές γραμμές, οι μετρήσεις ταχύτητας ιστοσελίδας τείνουν να είναι δύσκολο να κατανοηθούν και συχνά προκαλούν σύγχυση. Επιπλέον, τείνουν να αλλάζουν κάπως κάθε φορά που δοκιμάζετε ένα test για την ιστοσελίδα σας. Δεν έχετε πάντα τις ίδιες βαθμολογίες σε κάθε test… Επομένως, είναι εύκολο να πείτε ότι πρέπει απλώς να δείτε μερικές μετρήσεις με την ελπίδα να γίνουν “πράσινες”.
Από όλες τις πιθανές μετρήσεις, η Google αναγνωρίζει τώρα τρία λεγόμενα Core Web Vitals. Αυτά είναι το επίκεντρο της Google για το επόμενο έτος. Κάθε χρόνο, η Google ενδέχεται να προσθέτει ή να αλλάζει αυτές τις μετρήσεις καθώς τις αξιολογεί για μεγαλύτερο χρονικό διάστημα.
Το Core Web Vitals είναι το υποσύνολο των Web Vitals που ισχύουν για όλες τις ιστοσελίδες. Θα μετρηθούν από όλες τις ιστοσελίδες και θα εμφανίζονται σε όλα τα εργαλεία Google. Κάθε ένα από τα Core Web Vitals αντιπροσωπεύει μια ξεχωριστή πτυχή της εμπειρίας του χρήστη και αντικατοπτρίζει την πραγματική εμπειρία ενός κρίσιμου χρήστη-κεντρικού αποτελέσματος.
Οι τρεις πυλώνες του page experience
- Loading experience / Φόρτωση απόδοσης (πόσο γρήγορα εμφανίζονται όλα τα στοιχεία μιας σελίδας στην οθόνη)
- Responsiveness / Ανταπόκριση (πόσο γρήγορα αντιδρά η σελίδα στην είσοδο του χρήστη)
- Visual Stability / Οπτική σταθερότητα (τα στοιχεία της σελίδας κινούνται στην οθόνη κατά τη φόρτωση)
Για να μετρήσει αυτές τις βασικές πτυχές του page experience, η Google επέλεξε τρεις αντίστοιχες μετρήσεις – γνωστές και ως Core Web Vitals:
- LCP (Largest Contentful Paint): Αυτό μετρά πόσο καιρό χρειάζεται για να εμφανιστεί το μεγαλύτερο κομμάτι περιεχομένου στην οθόνη. Αυτό θα μπορούσε να είναι μια εικόνα ή ένα τμήμα κειμένου. Η καλή βαθμολογία δίνει στους χρήστες την αίσθηση ότι ο ιστότοπος φορτώνεται γρήγορα. Ένας αργός ιστότοπος μπορεί να οδηγήσει σε απογοήτευση.
- FID (First Input Delay): Αυτό μετρά πόσο χρόνο χρειάζεται για να αντιδράσει ο ιστότοπος στην πρώτη αλληλεπίδραση ενός χρήστη. Αυτό μπορεί να είναι ένα πάτημα ενός κουμπιού, για παράδειγμα. Ένας καλός βαθμός εδώ δίνει στον χρήστη την αίσθηση ότι ένας ιστότοπος αντιδρά γρήγορα στην εισαγωγή και, ως εκ τούτου, ανταποκρίνεται.
- CLS (Cumulative Layout Shift): Μετρά την οπτική σταθερότητα του ιστότοπού σας. Με άλλα λόγια, τα πράγματα μετακινούνται στην οθόνη ενώ φορτώνουν – και πόσο συχνά συμβαίνει αυτό;
Διαφορετικά εργαλεία χρησιμοποιούν διαφορετικές μετρήσεις
Κάθε εργαλείο page experience χρησιμοποιεί έναν αριθμό Web Vitals, που συλλέγονται από διάφορες πηγές. Καθώς κάθε εργαλείο έχει διαφορετικό σκοπό, οι μετρήσεις που χρησιμοποιούνται διαφέρουν ανά εργαλείο. Ο κοινός παρονομαστής, ωστόσο, είναι οι Core Web Vitals, καθώς η Google τα χρησιμοποιεί σε κάθε εργαλείο page experience που διαθέτει.
Αλλά τι σημαίνουν όλοι αυτοί οι αριθμοί; Τι πρέπει να ψάξετε στην ιστοσελίδα σας; Είναι αρκετά γρήγορη; Πότε έχω καλή βαθμολογία; Υπάρχουν ένα εκατομμύριο ερωτήσεις που μπορείτε να κάνετε σχετικά με αυτές τις μετρήσεις. Και ενώ η Google προσπαθεί να καλύψει το χάσμα μεταξύ κατανόησης και βελτίωσης, αυτό εξακολουθεί να είναι ένα περίπλοκο θέμα. Η μέτρηση της ταχύτητας της ιστοσελίδας σας και της εμπειρίας του χρήστη είναι δύσκολη – υπάρχουν τόσα πολλά πράγματα που πρέπει να ληφθούν υπόψη.
Τι είναι τα Core Web Vitals;
Τα Core Web Vitals δεν λειτουργούν μεμονωμένα. Ορισμένες πληροφορίες βασίζονται σε ελεγχόμενες εργαστηριακές δοκιμές, ενώ άλλες ως δεδομένα πεδίου. Μετά από ενδελεχή έρευνα, η Google καθόρισε ένα νέο σετ που διατίθεται στο Web Vitals. Αυτά είναι ένα σύνολο μετρήσεων που ήδη γνωρίζαμε, καθώς και μερικές ακόμα προσθήκες. Τα εργαλεία Core Web Vitals είναι τα πιο σημαντικά και πλέον η Google ζητά από τους ιδιοκτήτες ιστοσελίδων να εργάζονται διαρκώς για να τα βελτιώνουν.
LCP: Largest Contentful Paint (Μεγαλύτερη περιεκτικότητα σε χρώματα)
Το LCP μετρά το σημείο στο οποίο εμφανίζεται το μεγαλύτερο στοιχείο περιεχομένου στην οθόνη. Λάβετε υπόψη ότι δεν μετρά τον χρόνο που χρειάζεται για τη φόρτωση της σελίδας σας, αλλά απλώς εξετάζει πότε φορτώνεται το πιο σημαντικό μέρος.
Εάν έχετε μια απλή ιστοσελίδα με μόνο ένα κομμάτι κειμένου και μια μεγάλη εικόνα, αυτή η μεγάλη εικόνα θα θεωρείται το LCP. Επειδή αυτό είναι το μεγαλύτερο κομμάτι περιεχομένου για φόρτωση στο πρόγραμμα περιήγησης, προορίζεται να κάνει εντύπωση. Με την ταχύτερη φόρτωση, ο ιστότοπός σας μπορεί να εμφανίζεται πολύ πιο γρήγορα. Έτσι, μερικές φορές, μπορεί να είναι τόσο απλό όσο η βελτιστοποίηση αυτής της εικόνας.
Στο παρελθόν, υπήρχαν μετρήσεις όπως το First Meaningful Content, το οποίο μετρούσε τον χρόνο εμφάνισης του πρώτου κομματιού περιεχομένου στην οθόνη που σήμαινε κάτι για τον χρήστη. Όμως, σε αντίθεση με το “όνομα” (meaning) που υποδηλώνει η μέτρηση FMC συχνά δεν μπορούσε να καταλάβει ποιο ήταν το πιο σημαντικό πράγμα που εμφανίστηκε στην οθόνη. Οι σύνθετες μετρήσεις οδηγούν σε άχρηστα δεδομένα.
Το LCP είναι εύκολο να κατανοηθεί: είναι απλώς ο χρόνος που απαιτείται για την εμφάνιση του μεγαλύτερου στοιχείου στην οθόνη. Αυτά τα στοιχεία ενδέχεται να περιλαμβάνουν εικόνες, βίντεο ή άλλους τύπους περιεχομένου.
Τι πρέπει να γνωρίζετε
Τώρα που ξέρετε τι είναι το LCP, μπορείτε να αρχίσετε να το βελτιστοποιείτε. Σύμφωνα με την Google, πρέπει να στοχεύσετε το LCP να συμβεί εντός των πρώτων 2,5 δευτερολέπτων από τη φόρτωση της σελίδας.
Το LCP είναι επίσης δυναμικό, καθώς το πρώτο πράγμα που φορτώνει ίσως να μην είναι τόσο μεγάλη εικόνα. Το LCP διαβάζει τη μεγάλη εικόνα όταν αυτή εμφανίζεται στην οθόνη.
Παράδειγμα πώς λειτουργεί:
Αυτή η εικόνα από την Google σάς δίνει μια καλή ιδέα για τον τρόπο μέτρησης του LCP
Στα αριστερά, εμφανίζεται πρώτα το λογότυπο και η γραμμή “Οπτικές ιστορίες”. Στη δεύτερη οθόνη, ο μεγάλος τίτλος εμφανίζεται ως υποψήφιος για LCP. Στην τελευταία οθόνη, ωστόσο, βλέπετε ότι η μεγάλη εικόνα ξεπερνά την κεφαλίδα ως LCP. Εάν έχετε μόνο ένα μεγάλο κομμάτι περιεχομένου, αυτό μπορεί να είναι το LCP όλη την ώρα.
Αν κοιτάξετε τη διαδικασία φόρτωσης στην εικόνα, μπορείτε εύκολα να δείτε γιατί είναι τόσο βολική μέτρηση. Μπορείτε εύκολα να εντοπίσετε τι είναι το LCP και να βελτιστοποιήσετε τη φόρτωση αυτού του στοιχείου.
Η Google προσφέρει διάφορα εργαλεία για να σας βοηθήσει να βρείτε όλα αυτά τα στοιχεία. Το PageSpeed Insights, για παράδειγμα, προσφέρει πληθώρα δεδομένων στο Web Vitals, καθώς και πολλές συμβουλές για τη βελτίωση της σελίδας σας.
Σύμφωνα με την Google, το LCP επηρεάζεται από διάφορους παράγοντες:
- αργός χρόνος απόκρισης διακομιστή: οπότε βελτιστοποιήστε τον διακομιστή σας, χρησιμοποιήστε ένα CDN, στοιχεία κρυφής μνήμης κ.λπ.
- rendering-blocking JavaScript και CSS: ελαχιστοποιήστε (minify) έτσι το CSS σας, αναβάλλετε το non-critical CSS και το inline critical CSS
- πόροι αργής φόρτωσης: οπότε βελτιστοποιήστε τις εικόνες σας, προφορτώστε πόρους, συμπιέστε αρχεία κειμένου κ.λπ.
FID: First Inpout Delay (Πρώτη καθυστέρηση εισαγωγής)
Το FID μετρά τον χρόνο που χρειάζεται για να ανταποκριθεί το πρόγραμμα περιήγησης στην πρώτη αλληλεπίδραση του χρήστη. Όσο πιο γρήγορα αντιδρά το πρόγραμμα περιήγησης, τόσο πιο γρήγορα ανταποκρίνεται η σελίδα. Αν θέλετε να προσφέρετε στους χρήστες σας μια θετική εμπειρία, τότε θα πρέπει να εργαστείτε για την ανταπόκριση των σελίδων σας.
Οι καθυστερήσεις συμβαίνουν όταν το πρόγραμμα περιήγησης εξακολουθεί να κάνει άλλες εργασίες στο παρασκήνιο. Έτσι, έχει φορτώσει τη σελίδα και όλα φαίνονται καλαίσθητα. Αλλά όταν πατήσετε αυτό το κουμπί, δεν συμβαίνει τίποτα! Αυτή είναι μια κακή εμπειρία και οδηγεί σε απογοήτευση. Ακόμα κι αν υπάρχει μια μικρή καθυστέρηση, μπορεί να κάνει την ιστοσελίδα σας αργή και χωρίς καλή ανταπόκριση.
Ένα πρόγραμμα περιήγησης πρέπει να κάνει πολλή δουλειά και μερικές φορές πρέπει να σταθμεύσει ορισμένα αιτήματα, μόνο για να επιστρέψει αργότερα σε αυτά. Δεν μπορεί να κάνει τα πάντα ταυτόχρονα. Καθώς δημιουργούμε ολοένα και πιο περίπλοκες ιστοσελίδες ζητάμε πολλά από προγράμματα περιήγησης. Για να επιταχυνθεί η διαδικασία μεταξύ της εμφάνισης περιεχομένου στην οθόνη και της διαδραστικότητάς του με τον χρήστη, πρέπει να επικεντρωθούμε στο FID.
Το FID μετρά όλες τις αλληλεπιδράσεις που συμβαίνουν κατά τη φόρτωση της σελίδας. Αυτές είναι ενέργειες εισαγωγής, όπως άγγιγμα αφής, κλικ και πατήματα πλήκτρων, αλλά όχι αλληλεπιδράσεις όπως ζουμ και scroll. Οι νέες μετρήσεις της Google απαιτούν ένα FID μικρότερο από 100 ms για να θεωρείται σωστή η απόκριση.
Τι πρέπει να γνωρίζετε
Ένα από τα πράγματα που πρέπει να θυμάστε είναι ότι δεν μπορείτε να μετρήσετε το FID εάν δεν υπάρχει αλληλεπίδραση χρήστη. Αυτό σημαίνει ότι η Google δεν μπορεί απλώς να προβλέψει το FID με βάση τα δεδομένα που έχουν από το εργαστήριο – χρειάζονται δεδομένα από πραγματικούς χρήστες ή τα λεγόμενα δεδομένα πεδίου (field data). Αυτό σημαίνει επίσης ότι αυτά τα δεδομένα είναι λιγότερο ελεγχόμενα ως δεδομένα εργαστηρίου καθώς συλλέγουν δεδομένα από χρήστες όλων των ειδών συσκευών και που τις χρησιμοποιούν με διαφορετικούς τρόπους και περιβάλλοντα. Αυτός είναι ένας από τους λόγους για τους οποίους μερικές φορές βλέπετε την αλλαγή δεδομένων.
Αν θέλετε να βελτιώσετε τις βαθμολογίες σας, συχνά θα βρείτε τη JavaScript να είναι ο ένοχος κακών βαθμών. Η JavaScript μας βοηθά να δημιουργήσουμε εκπληκτικές αλληλεπιδράσεις, αλλά μπορεί επίσης να οδηγήσει σε αργούς ιστότοπους με πολύπλοκο κώδικα. Συχνά, το πρόγραμμα περιήγησης δεν μπορεί να ανταποκριθεί στην είσοδο ενώ εκτελεί JavaScript. Εάν εργάζεστε για τη βελτίωση του κώδικα JavaScript και τον χειρισμό του, εργάζεστε αυτόματα για τη βελτίωση των βαθμολογιών του page experience της σελίδας σας.
Αυτό είναι όμως το πιο δύσκολο κομμάτι. Οι περισσότεροι ιστότοποι μπορούν να κερδίσουν πολλά μειώνοντας τον χρόνο που απαιτείται για την εκτέλεση JavaScript, διαλύοντας πολύπλοκες εργασίες ή αφαιρώντας αχρησιμοποίητο JavaScript.
CLS: Cumulative Layout Shift (Αθροιστική αλλαγή διάταξης)
Η μέτρηση CLS προσπαθεί να προσδιορίσει πώς φορτώνεται το “σταθερό” υλικό στην οθόνη σας. Εξετάζει πόσο συχνά μετακινούνται τα πράγματα κατά τη φόρτωση και σε τι βαθμό. Μπορείτε να φανταστείτε ότι μερικές φορές ένα call to action κουμπί φορτώνεται στην οθόνη, προσκαλώντας τους χρήστες να κάνουν κλικ σε αυτό. Στο παρασκήνιο, ωστόσο, εξακολουθεί να φορτώνεται μια μεγάλη περιοχή περιεχομένου. Το αποτέλεσμα; Όταν το περιεχόμενο φορτώνεται τελικά, το κουμπί πιέζεται προς τα κάτω – ακριβώς όπως θέλετε να πατήσετε αυτό το κουμπί. Και πάλι, η απογοήτευση αυξάνεται!
Αυτές οι αλλαγές διάταξης συμβαίνουν πολύ με τις διαφημίσεις. Τώρα, οι διαφημίσεις αποτελούν τη σωτηρία για πολλούς ιστότοπους, αλλά συχνά φορτώνονται τόσο άσχημα που απογοητεύουν τους χρήστες. Αυτό μπορεί επίσης να οδηγήσει σε περιεχόμενο ή CTA που μεταπηδά στην οθόνη, δημιουργώντας χώρο για πιο αργή φόρτωση περιεχομένου.
Πάρτε για παράδειγμα το cnn.com. Τα ειδησεογραφικά portal είναι συνήθως πολύ περίπλοκα και αργά στη φόρτωση και το CNN δεν αποτελεί εξαίρεση. Έχει βαθμολογία πολύ άσχημη σε μια δοκιμή PageSpeed Insights. Εάν εξετάσετε τα ζητήματα και τις αντίστοιχες συμβουλές πιο κάτω στη σελίδα, θα παρατηρήσετε ότι βρέθηκαν τουλάχιστον πέντε κινούμενα στοιχεία τη στιγμή της σύνταξης. Κατά τη φόρτωση αυτής της σελίδας, οδηγεί σε πολλά στοιχεία που μετακινούνται και χρειάζεται λίγο χρόνο για να τα σταθεροποιηθεί και να είναι εύχρηστη. Και επειδή οι χρήστες δεν είναι πάντα τόσο υπομονετικοί, προσπαθούν να κάνουν κλικ σε ένα κουμπί τη στιγμή που εμφανίζεται στην οθόνη – μόνο για να το χάσουν επειδή μια μεγάλη διαφήμιση εμφανίζεται σε αυτό το σημείο!
Τι πρέπει να γνωρίζετε
Η CLS συγκρίνει τα καρέ για να καθορίσει την κίνηση των στοιχείων. Παίρνει όλα τα σημεία στα οποία συμβαίνουν αλλαγές στη διάταξη και υπολογίζει τη σοβαρότητα αυτών των κινήσεων. Η Google θεωρεί οτιδήποτε κάτω από 0,1 καλό, ενώ οτιδήποτε από 0,1 έως 0,25 χρειάζεται δουλειά. Μπορείτε να θεωρήσετε τα πάντα πάνω από 0,25 ως αρνητικά.
Φυσικά, η βαθμολογία εξετάζει μόνο απρόσμενες αλλαγές. Εάν ένας χρήστης κάνει κλικ στο κουμπί μενού και εμφανίζεται ένα αναδιπλούμενο μενού, αυτό δεν υπολογίζεται ως αλλαγή διάταξης. Αλλά αν αυτό το κουμπί απαιτεί μεγάλη αλλαγή στον σχεδιασμό, θα πρέπει να φροντίσετε να το διατηρήσετε σαφές για τον χρήστη.
Έχω ήδη αναφέρει ότι οι διαφημίσεις είναι ένας από τους κύριους ένοχους αυτού. Συχνά βρίσκονται σε JavaScript και δεν είναι καλά βελτιστοποιημένες. Η βραδύτητα προστίθεται σε κάθε βήμα και πρέπει να εργαστείτε σκληρά για να εμφανιστούν οι διαφημίσεις σας στο σωστό σημείο αμέσως. Αλλά υπάρχει ένα άλλο στοιχείο που είναι υπεύθυνο για τις μεγάλες αλλαγές στη διάταξη: εικόνες.
Οι προγραμματιστές δεν καθορίζουν πάντα το πλάτος και το ύψος μιας εικόνας στον κώδικα και το αφήνουν στο πρόγραμμα περιήγησης για να καταλάβουν πώς πρέπει να εμφανίζεται η εικόνα στην οθόνη. Σε μια σελίδα με μερικές εικόνες και κείμενο, το κείμενο θα εμφανιστεί πρώτα στην οθόνη, ακολουθούμενο από τις εικόνες. Εάν ο προγραμματιστής δεν έχει δεσμεύσει χώρο για αυτές τις εικόνες, το πάνω μέρος της σελίδας φόρτωσης θα γεμίσει με κείμενο, προτρέποντας τον χρήστη να ξεκινήσει την ανάγνωση. Ωστόσο, οι εικόνες φορτώνονται αργότερα και εμφανίζονται στο σημείο όπου το κείμενο ήταν πρώτο. Αυτό σπρώχνει το κείμενο προς τα κάτω, αναστατώνει τον χρήστη. Επομένως, καθορίστε πάντα το πλάτος και το ύψος των εικόνων σε CSS για να διατηρήσετε ένα σημείο για τη φόρτωση των εικόνων.
Εργαλεία μέτρησης Web Vitals
Υπάρχουν πολλά εργαλεία που θα σας βοηθήσουν να παρακολουθείτε το Web Vitals και να βελτιώσετε την απόδοση του ιστότοπού σας. Τα πιο σημαντικά:
- PageSpeed Insights
- Lighthouse (Προσφέρει ελέγχους που δεν διαθέτει το PageSpeed Insights και έχει ακόμη και κάποιους ελέγχους SEO)
- Google Search Console Core Web Vital
Αυτά είναι τα Core Web Vitals!
Τον Μάιο του 2021, η Google θα ενημερώσει τους αλγορίθμους για να ενσωματώσει έναν νέο παράγοντα κατάταξης: page experience. Για να μετρήσει το page experience, η Google ανέπτυξε ένα νέο σύνολο μετρήσεων που ονομάζεται Web Vitals. Οι υπηρεσίες SEO Copywriting σε συνδυασμό με τον γραφίστα και τον προγραμματιστή σας είναι η ιδανική βάση προκειμένου να ανταποκριθείτε στη νέα εποχή του SEO!
Χρόνο με τον χρόνο, με την διεύρυνση της βάσης από τα δεδομένα που συλλέγει η Google, τους ολοένα και πιο εκπαιδευμένους χρήστες, την αύξηση των websites και των e-shops, η μηχανή αναζήτησης της Google αυξάνει κατακόρυφα τον πήχη δυσκολίας, απαιτώντας διαρκώς ένα πράγμα: να προσφέρει εξαιρετική εμπειρία στους χρήστες της! Γι’ αυτό και το παιχνίδι του SEO πλέον έχει μεταφερθεί 100% στο τρίπτυχο: custom σχεδίαση – αυθεντικό περιεχόμενο – συνεχής ενασχόληση!
