Τα Core Web Vitals με απλά λόγια: τι να διορθώσετε πρώτα

Ποια είναι τα τρία Core Web Vitals;

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

Το INP αντικατέστησε μια παλαιότερη μέτρηση, το First Input Delay, τον Μάρτιο του 2024. Αν μια παλιά αναφορά ή ένα plugin μιλά ακόμη για FID, οι συμβουλές του είναι ξεπερασμένες. Ανάμεσα στο «καλό» και το «κακό» υπάρχει μια μεσαία ζώνη που η Google ονομάζει «χρειάζεται βελτίωση».

Μια σελίδα περνά όταν και οι τρεις μετρήσεις είναι καλές για τουλάχιστον το 75 τοις εκατό των πραγματικών επισκέψεων. Αυτό το 75ο εκατοστημόριο έχει σημασία. Το δικό σας κινητό στο Wi-Fi του γραφείου στην Κοπεγχάγη δεν είναι ο επισκέπτης με ένα Android τριών ετών μέσα στο τρένο ανάμεσα σε Odense και Aarhus.

Γιατί αλλάζουν συνέχεια οι βαθμολογίες στις δοκιμές μου;

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

• Τα δεδομένα πεδίου προέρχονται από πραγματικούς χρήστες του Chrome και συλλέγονται στο Chrome User Experience Report σε κυλιόμενο διάστημα 28 ημερών. Αυτά χρησιμοποιεί η Google. Τα βλέπετε στην κορυφή του PageSpeed Insights και στην αναφορά Core Web Vitals του Search Console, εφόσον η ιστοσελίδα σας έχει αρκετή επισκεψιμότητα.
• Τα δεδομένα εργαστηρίου είναι μια μεμονωμένη προσομοιωμένη δοκιμή, συνήθως Lighthouse, σε συσκευή με περιορισμένη ταχύτητα. Είναι χρήσιμα για τη διάγνωση προβλημάτων, αλλά διαφέρουν από εκτέλεση σε εκτέλεση και δεν μετρούν απευθείας το INP.

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

Πρώτη διόρθωση: γιατί αργεί να φορτώσει το κύριο περιεχόμενο;

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

1. Μικρύνετε την εικόνα hero. Σερβίρετέ τη σε AVIF ή WebP, στο μέγεθος που εμφανίζεται, με responsive srcset ώστε τα κινητά να παίρνουν αρχείο στο μέγεθος του κινητού. Μια φωτογραφία 3 MB κατευθείαν από τη φωτογραφική μηχανή είναι το πιο συχνό πρόβλημα που βλέπουμε.
2. Μην της βάζετε lazy loading. Το lazy loading είναι σωστό για εικόνες πιο κάτω στη σελίδα, αλλά στην εικόνα hero καθυστερεί ακριβώς αυτό που μετρά το LCP. Δώστε στην εικόνα hero fetchpriority="high" αντί γι’ αυτό.
3. Επιταχύνετε τον server. Αν το Time to First Byte είναι πάνω από περίπου 800 χιλιοστά του δευτερολέπτου, καμία ρύθμιση στο front-end δεν θα σας σώσει. Page caching, καλύτερη φιλοξενία ή ένα CDN με ευρωπαϊκό edge συνήθως βοηθούν περισσότερο από οτιδήποτε άλλο.
4. Αφαιρέστε τα αρχεία που μπλοκάρουν την απόδοση. Μεγάλα stylesheets και scripts στο head της σελίδας κάνουν τον browser να περιμένει. Βάλτε inline το κρίσιμο CSS και καθυστερήστε τα υπόλοιπα.
5. Ελέγξτε τα sliders και τα carousels. Συχνά φορτώνουν αρκετές μεγάλες εικόνες και ένα script πριν δείξουν την πρώτη διαφάνεια.

Σε ιστοσελίδες WordPress, ένα βαρύ theme με page builder σε συνδυασμό με φθηνή κοινόχρηστη φιλοξενία ευθύνεται για μεγάλο μέρος του κακού LCP. Μερικές φορές η ειλικρινής λύση είναι ένα ελαφρύτερο theme και όχι άλλο ένα plugin βελτιστοποίησης. Η δουλειά μας σε ταχύτητα και Core Web Vitals ξεκινά ακριβώς με αυτή τη διάγνωση.

Δεύτερη διόρθωση: γιατί πηδάει η σελίδα μου κατά τη φόρτωση;

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

• Εικόνες και βίντεο χωρίς διαστάσεις. Ορίζετε πάντα τα attributes width και height, ή ένα aspect ratio στο CSS, ώστε ο browser να κρατά τον χώρο.
• Banner cookies. Στη Δανία σχεδόν κάθε ιστοσελίδα έχει ένα. Ένα banner που σπρώχνει το περιεχόμενο προς τα κάτω αντί να μπαίνει από πάνω του μετρά ως μετατόπιση. Χρησιμοποιήστε overlay ή κρατήστε τον χώρο.
• Ενσωματώσεις και διαφημίσεις. Χάρτες, widgets κρατήσεων, αναρτήσεις social και players βίντεο φορτώνουν αργά. Δώστε στα containers τους σταθερό ελάχιστο ύψος.
• Web γραμματοσειρές. Όταν μπαίνει μια προσαρμοσμένη γραμματοσειρά, το κείμενο μπορεί να αναδιαταχθεί. Κάντε preload στα κύρια αρχεία γραμματοσειρών και επιλέξτε εφεδρική γραμματοσειρά με παρόμοιες αναλογίες.
• Περιεχόμενο που προστίθεται από πάνω. Μπάρες ανακοινώσεων και λωρίδες «δωρεάν μεταφορικά» που προσθέτει ένα script μετά τη φόρτωση είναι κλασική αιτία.

Τρίτη διόρθωση: γιατί η σελίδα αργεί να αντιδράσει;

Το INP μετρά την καθυστέρηση ανάμεσα σε μια αλληλεπίδραση, όπως ένα πάτημα σε μενού ή ένα κλικ στο «προσθήκη στο καλάθι», και την επόμενη οπτική ενημέρωση. Όταν είναι κακό, η αιτία είναι σχεδόν πάντα JavaScript που κρατά τον browser απασχολημένο.

• Ελέγξτε τα scripts τρίτων. Τα tag managers μαζεύουν κωδικούς tracking με τα χρόνια. Αφαιρέστε ό,τι δεν χρησιμοποιεί κανείς, και αμφισβητήστε widgets συνομιλίας, heatmaps και badges κριτικών που φορτώνουν σε κάθε σελίδα.
• Κοιτάξτε το εργαλείο συγκατάθεσης. Κάποιες πλατφόρμες συγκατάθεσης είναι βαριές και εκτελούν εργασίες σε κάθε κλικ. Δοκιμάστε με και χωρίς αυτήν.
• Σπάστε τις μεγάλες εργασίες. Κάθε script που τρέχει για περισσότερα από 50 χιλιοστά του δευτερολέπτου μπλοκάρει την είσοδο. Οι developers μπορούν να χωρίσουν τη δουλειά σε μικρότερα κομμάτια ή να τη μεταφέρουν εκτός του main thread.
• Απλοποιήστε μενού και φίλτρα. Τα mega menus και τα φίλτρα προϊόντων που ξαναχτίζουν μεγάλα κομμάτια της σελίδας σε κάθε πάτημα είναι συχνοί ένοχοι στα ηλεκτρονικά καταστήματα.

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

Πόσο επηρεάζουν τα Core Web Vitals τις κατατάξεις στη Google;

Ειλικρινά, λιγότερο από όσο υπονοούν πολλοί πωλητές εργαλείων. Η Google έχει πει ότι τα Core Web Vitals είναι μέρος των σημάτων εμπειρίας σελίδας της, και ότι το σχετικό, χρήσιμο περιεχόμενο μετράει ακόμη περισσότερο. Μια αργή σελίδα με την καλύτερη απάντηση μπορεί να ξεπεράσει στην κατάταξη μια γρήγορη σελίδα με αδύναμη απάντηση.

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

Διορθώνετε ανά template, όχι ανά URL. Οι περισσότερες ιστοσελίδες έχουν λίγους τύπους σελίδων: την αρχική, τις σελίδες υπηρεσιών, τα άρθρα, τις σελίδες προϊόντων και την ολοκλήρωση αγοράς. Το Search Console ομαδοποιεί URL με παρόμοια προβλήματα, και μια διόρθωση στο template επισκευάζει μονομιάς κάθε σελίδα που βασίζεται σε αυτό. Ξεκινήστε από τα templates που φέρνουν την περισσότερη επισκεψιμότητα και τα περισσότερα αιτήματα.

Αντιμετωπίστε λοιπόν τα Core Web Vitals ως βασικό πρότυπο υγιεινής. Φέρτε κάθε σημαντικό template στη ζώνη του «καλού», κρατήστε το εκεί όταν προστίθενται νέα scripts και καμπάνιες, και μετά ρίξτε την προσπάθειά σας στο περιεχόμενο και τις προσφορές. Ένας έλεγχος του Search Console μία φορά τον μήνα συνήθως αρκεί για να πιάσετε μια οπισθοδρόμηση πριν σας κοστίσει.