Πώς διορθώνω τις κακές βαθμολογίες Core Web Vitals;

Εντοπίστε ποια μετρική αποτυγχάνει, σε ποια συσκευή και για ποια ομάδα σελίδων. Η αναφορά Core Web Vitals του Search Console δείχνει και τα τρία στοιχεία με βάση πραγματικές επισκέψεις από Chrome. Έπειτα διορθώστε την αιτία πίσω από τη συγκεκριμένη μετρική: για το LCP, πόσο γρήγορα φτάνει η κύρια εικόνα ή το κύριο κείμενο· για το INP, οι μεγάλες εργασίες JavaScript που καθυστερούν τις αποκρίσεις· για το CLS, το περιεχόμενο που εμφανίζεται χωρίς να έχει δεσμευτεί χώρος γι' αυτό. Τα δεδομένα πεδίου καλύπτουν τις τελευταίες 28 ημέρες, οπότε κρίνετε τη διόρθωση μετά από έναν μήνα.

Βήμα 1: εντοπίστε τι αποτυγχάνει

1. Ανοίξτε την αναφορά Core Web Vitals στο Search Console και επιλέξτε Κινητά ή Υπολογιστές· οι δύο κατηγορίες αξιολογούνται χωριστά.
2. Ανοίξτε ένα από τα προβλήματα που αναφέρονται, για παράδειγμα ένα πρόβλημα LCP σε κινητά, ώστε να δείτε την ομάδα των επηρεαζόμενων URL και παραδείγματα URL. Ολόκληρη η ομάδα έχει κοινή κατάσταση, που καθορίζεται από την πιο αδύναμη μετρική της.
3. Αναλύστε ένα παράδειγμα URL με το PageSpeed Insights, για να δείτε τα δεδομένα πεδίου της σελίδας δίπλα σε μια δοκιμή εργαστηρίου που βοηθά στον εντοπισμό σφαλμάτων.

Εργαλεία εργαστηρίου όπως το Lighthouse δεν μπορούν να μετρήσουν το INP, επειδή κανείς δεν αλληλεπιδρά με τη σελίδα, και γι' αυτό αναφέρουν το Total Blocking Time. Για το INP, η μέτρηση με πραγματικούς χρήστες είναι ο αξιόπιστος οδηγός.

Πώς διορθώνεται ένα αργό LCP

Ο οδηγός βελτιστοποίησης του LCP του web.dev χωρίζει το LCP σε τέσσερα μέρη: τον χρόνο απόκρισης του διακομιστή, την καθυστέρηση πριν αρχίσει η φόρτωση του κύριου πόρου, τον χρόνο λήψης του και την καθυστέρηση μέχρι την απόδοσή του. Ξεκινήστε από το μεγαλύτερο μέρος:

• Κάντε την εικόνα LCP ανιχνεύσιμη στο αρχικό HTML, αντί να την εισάγετε με JavaScript ή CSS, και δώστε της fetchpriority="high".
• Μην εφαρμόζετε ποτέ lazy loading στην εικόνα LCP.
• Σερβίρετέ την σε μικρότερο μέγεθος: με τις κατάλληλες διαστάσεις, σύγχρονη μορφή, συμπίεση και ένα CDN κοντά στους επισκέπτες.
• Αφαιρέστε τους πόρους που μπλοκάρουν την απόδοση: μικρότερα φύλλα στυλ, κανένα σύγχρονο script στο <head>, απόδοση από την πλευρά του διακομιστή για το κύριο περιεχόμενο.
• Επιταχύνετε την απόκριση του διακομιστή: περιορίστε τις ανακατευθύνσεις και επιτρέψτε την αποθήκευση των σελίδων στην κρυφή μνήμη στην άκρη του δικτύου.

Πώς διορθώνεται ένα κακό INP

Ο οδηγός βελτιστοποίησης του INP αναλύει κάθε αλληλεπίδραση σε καθυστέρηση εισόδου, χρόνο επεξεργασίας και καθυστέρηση παρουσίασης:

• Καθυστέρηση εισόδου: μειώστε το JavaScript που εκτελείται κατά τη φόρτωση της σελίδας, ώστε το κύριο νήμα να είναι ελεύθερο όταν ο χρήστης πατά κάπου.
• Χρόνος επεξεργασίας: σπάστε τους μεγάλους χειριστές συμβάντων σε μικρότερες εργασίες και παραχωρήστε τον έλεγχο στο κύριο νήμα, κάνοντας πρώτα την ορατή ενημέρωση και αναβάλλοντας τα υπόλοιπα.
• Καθυστέρηση παρουσίασης: κρατήστε το DOM μικρό, αποφύγετε την αναγκαστική διάταξη (ανάγνωση στυλ αμέσως μετά την αλλαγή τους) και χρησιμοποιήστε content-visibility σε μεγάλες σελίδες.

Πώς διορθώνεται ένα υψηλό CLS

Ο οδηγός βελτιστοποίησης του CLS απαριθμεί τους συνηθισμένους ενόχους και τις διορθώσεις τους:

• Εικόνες και βίντεο χωρίς διαστάσεις: προσθέστε τα χαρακτηριστικά width και height ή ένα CSS aspect-ratio.
• Διαφημίσεις, ενσωματώσεις και iframes: δεσμεύστε τον χώρο τους στη διάταξη πριν φορτώσουν.
• Περιεχόμενο που εισάγεται πάνω από το υπάρχον: χρησιμοποιήστε ένα placeholder σωστού μεγέθους ή εισάγετε το νέο περιεχόμενο κάτω από αυτό που διαβάζει ο επισκέπτης.
• Γραμματοσειρές ιστού: κάντε preload των σημαντικών, ώστε το κείμενο να μην αλλάζει διάταξη αργά.
• Κινούμενα στοιχεία: κάντε animation στο transform και όχι σε ιδιότητες όπως top ή left.

Οι σελίδες που μπορούν να αξιοποιήσουν την κρυφή μνήμη back/forward του προγράμματος περιήγησης αποφεύγουν επίσης τις μετατοπίσεις διάταξης όταν οι επισκέπτες επιστρέφουν σε αυτές.

Βήμα 3: επιβεβαιώστε τη διόρθωση

Κάντε την ανάπτυξη και, στη συνέχεια, ανοίξτε το πρόβλημα στην αναφορά Core Web Vitals και ξεκινήστε την επικύρωση. Η Google παρακολουθεί την ομάδα για 28 ημέρες· η επικύρωση δεν ενεργοποιεί νέα ανίχνευση ούτε επιταχύνει κάτι, απλώς ελέγχει αν το πρόβλημα έχει λυθεί. Επειδή τα δεδομένα πεδίου ανανεώνονται σε κυλιόμενο διάστημα 28 ημερών, αναμένετε η αναφορά να βελτιώνεται σταδιακά. Για το τι σημαίνει κάθε μετρική, δείτε το Τι σημαίνουν τα LCP, INP και CLS;.

Πώς βοηθά το AutoPSEO

Η αναφορά Core Web Vitals του AutoPSEO απεικονίζει δεδομένα Chrome UX Report περίπου έξι μηνών, σε εβδομαδιαία βάση, για ολόκληρο τον ιστότοπό σας ή για ένα μεμονωμένο URL, σε κινητά, υπολογιστές ή tablet. Έτσι μπορείτε να δείτε την εβδομάδα που ξεκίνησε να έχει αποτέλεσμα μια διόρθωση, ή την εβδομάδα που μια νέα έκδοση χειροτέρεψε την κατάσταση, χωρίς να περιμένετε να κλείσει το επόμενο παράθυρο των 28 ημερών.