Τα Core Web Vitals αξιολογούν τρεις πλευρές της εμπειρίας: φόρτωση, οπτική σταθερότητα και ανταπόκριση. Η αξιολόγηση βασίζεται συνήθως στο 75ο εκατοστημόριο πραγματικών επισκέψεων, επομένως δεν αρκεί ένα γρήγορο test στον δικό σας υπολογιστή.
Πριν ξεκινήσεις
- Έλεγξε field data στο PageSpeed Insights/Search Console όπου υπάρχουν και lab data για debugging.
- Μέτρησε διαφορετικά templates και Mobile/Desktop.
- Πάρε backup και κάνε αλλαγές σε staging, μία ομάδα βελτιώσεων κάθε φορά.
- Μην θυσιάσεις προσβασιμότητα ή λειτουργικότητα για έναν αριθμό.
1. LCP — Largest Contentful Paint
Τι μετράει: πότε εμφανίζεται το μεγαλύτερο ορατό στοιχείο περιεχομένου στο viewport. Καλή εμπειρία θεωρείται γενικά LCP έως 2,5 δευτερόλεπτα, ενώ πάνω από 4 δευτερόλεπτα είναι κακή.
Τι το επηρεάζει: υψηλό TTFB, μεγάλη hero εικόνα, render-blocking CSS/fonts, lazy loading του LCP element, client-side rendering και αργά τρίτα scripts.
Πώς βρίσκω την αιτία: στο PSI/Lighthouse εντόπισε το LCP element και το breakdown του χρόνου. Στο DevTools Performance/Network έλεγξε πότε ζητείται το resource και αν περιμένει server, CSS ή JavaScript.
Ασφαλείς πρώτες βελτιώσεις: συμπίεσε/διαστασιολόγησε σωστά την εικόνα, χρησιμοποίησε σύγχρονο format όπου υποστηρίζεται, μην κάνεις lazy-load το πραγματικό LCP, μείωσε critical request chains και βελτίωσε cache/backend χρόνο.
2. CLS — Cumulative Layout Shift
Τι μετράει: απρόσμενες μετακινήσεις ορατών στοιχείων. Καλή τιμή είναι γενικά 0,1 ή μικρότερη, ενώ πάνω από 0,25 είναι κακή.
Τι το επηρεάζει: εικόνες/iframes χωρίς διαστάσεις, banners που εισάγονται πάνω από περιεχόμενο, web fonts που αλλάζουν μέγεθος κειμένου, ads/embeds χωρίς δεσμευμένο χώρο και animations που αλλάζουν layout.
Πώς βρίσκω την αιτία: χρησιμοποίησε layout shift diagnostics στο PSI και Performance panel του browser. Παρατήρησε ποιο στοιχείο μετακινείται και ποιο νέο στοιχείο προκάλεσε τη μετατόπιση.
Ασφαλείς πρώτες βελτιώσεις: όρισε width/height ή aspect-ratio, δέσμευσε χώρο για embeds/banners, φόρτωσε fonts με κατάλληλο fallback και χρησιμοποίησε transform/opacity για animations αντί για ιδιότητες layout.
3. INP — Interaction to Next Paint
Τι μετράει: την ανταπόκριση της σελίδας στις αλληλεπιδράσεις σε όλη την επίσκεψη. Καλή εμπειρία είναι γενικά INP έως 200 ms, ενώ πάνω από 500 ms είναι κακή.
Τι το επηρεάζει: μεγάλα JavaScript tasks, βαριά event handlers, πολύπλοκο DOM, synchronous third-party code και ακριβές rendering μετά το click/input.
Πώς βρίσκω την αιτία: τα field data δείχνουν πραγματικό INP. Κατέγραψε αργή αλληλεπίδραση με DevTools Performance και εξέτασε input delay, processing time και presentation delay. Το Lighthouse lab δεν αναπαράγει πλήρως το INP· το TBT είναι μόνο ενδεικτικός proxy.
Ασφαλείς πρώτες βελτιώσεις: σπάσε long tasks, φόρτωσε μη κρίσιμο JavaScript αργότερα, περιόρισε τρίτα scripts, απλοποίησε DOM και δώσε άμεσο visual feedback χωρίς να μπλοκάρεις το main thread.
Θέση screenshot: PSI Core Web Vitals Assessment και τρία metric cards LCP/CLS/INP.
Πώς ελέγχω ότι ολοκληρώθηκε σωστά
- Επανέλαβε lab tests για άμεσο τεχνικό feedback.
- Έλεγξε ότι η αλλαγή διορθώνει το συγκεκριμένο element/task και δεν μεταφέρει το πρόβλημα αλλού.
- Δοκίμασε mobile, αργότερο δίκτυο και πραγματικές interactions.
- Παρακολούθησε field data για αρκετό χρόνο· το κυλιόμενο dataset δεν ενημερώνεται αμέσως.
- Επιβεβαίωσε οπτικά layout, checkout/forms, analytics και accessibility.
Συνηθισμένα προβλήματα
- Lab καλό, field κακό: οι πραγματικοί χρήστες έχουν διαφορετικές συσκευές, δίκτυα, consent/ads και interaction patterns.
- URL data λείπουν: χρησιμοποίησε origin data προσεκτικά και πρόσθεσε real-user monitoring αν χρειάζεται.
- LCP αλλάζει ανά σελίδα: κάθε template έχει διαφορετικό largest element.
- CLS δεν αναπαράγεται: μπορεί να προκαλείται μετά από consent, ad ή αργή φόρτωση που δεν εμφανίστηκε στο συγκεκριμένο run.
- INP χωρίς lab metric: χρειάζεται πραγματική αλληλεπίδραση και performance trace, όχι υπόθεση από το score.