Πώς να διαβάσετε το PageSpeed Insights: τα Core Web Vitals σε απλή γλώσσα
Έχετε δοκιμάσει τον ιστότοπό σας στο PageSpeed Insights και βλέπετε έναν κόκκινο αριθμό, για παράδειγμα 45. Τι σημαίνει αυτό και πόσο σοβαρό είναι; Σε αυτό το άρθρο θα διαβάσετε πώς να διαβάζετε την αναφορά, τι μετρούν οι τρεις Core Web Vitals και τι μπορείτε να βελτιώσετε εσείς οι ίδιοι.
Οι τρεις μετρήσεις
| Μέτρηση | Τι μετράει | Καλό | Χρειάζεται βελτίωση | Κακό |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Πόσο γρήγορα εμφανίζεται στην οθόνη το μεγαλύτερο κομμάτι περιεχομένου, συνήθως η μεγάλη φωτογραφία στο επάνω μέρος | έως 2,5 s | 2,5 έως 4 s | πάνω από 4 s |
| INP (Interaction to Next Paint) | Πόσο γρήγορα αντιδρά η σελίδα όταν κάνετε κλικ, πατάτε ή πληκτρολογείτε | έως 200 ms | 200 έως 500 ms | πάνω από 500 ms |
| CLS (Cumulative Layout Shift) | Πόσο μετατοπίζεται η σελίδα κατά τη φόρτωση (μια βαθμολογία, όχι χρόνος) | έως 0,1 | 0,1 έως 0,25 | πάνω από 0,25 |
Μια σελίδα πληροί τα Core Web Vitals όταν τουλάχιστον το 75 τοις εκατό των επισκέψεων έχει καλή βαθμολογία και στις τρεις μετρήσεις, ξεχωριστά για κινητό και desktop. Δεν μετράει δηλαδή ο γρήγορος υπολογιστής σας, αλλά η εμπειρία των περισσότερων επισκεπτών, ακόμη και σε παλαιότερο τηλέφωνο. Τον Μάρτιο του 2024 το INP αντικατέστησε την παλαιότερη μέτρηση FID. Αν συναντήσετε ακόμη το FID, πρόκειται για ξεπερασμένη πληροφορία.
Δεδομένα πεδίου και εργαστηριακά δεδομένα
Το PageSpeed Insights εμφανίζει δύο είδη μετρήσεων, που συχνά δίνουν διαφορετικούς αριθμούς:
- Δεδομένα πεδίου (επάνω): μετρήσεις από πραγματικούς επισκέπτες με Chrome κατά τις τελευταίες 28 ημέρες. Αυτά καθορίζουν αν πληροίτε τα Core Web Vitals. Αν η σελίδα σας έχει πολύ λίγους επισκέπτες, θα δείτε τα στοιχεία ολόκληρου του ιστότοπού σας, ή καθόλου δεδομένα πεδίου.
- Εργαστηριακά δεδομένα (από κάτω): μια δοκιμή με το Lighthouse, το οποίο φορτώνει τη σελίδα μία φορά σε μια προσομοιωμένη μέτρια σύνδεση και τηλέφωνο. Από εδώ προέρχεται ο αριθμός από 0 έως 100. Το Lighthouse δεν μπορεί να μετρήσει το INP, καθώς δεν κάνει κλικ κανείς.
Χρησιμοποιήστε τα εργαστηριακά δεδομένα για να βρείτε τις αιτίες και για να δείτε αμέσως, μετά από μια βελτίωση, αν αυτή βοηθάει. Ξεκινήστε από την καρτέλα Κινητό: εκεί η κατάσταση είναι συνήθως χειρότερη, και η Google εξετάζει κυρίως την έκδοση για κινητά του ιστότοπού σας.
Πόσο βαρύνει αυτό στην Google;
Η Google αναφέρει ότι τα Core Web Vitals συνυπολογίζονται στην κατάταξη. Ωστόσο, η Google εμφανίζει πάντα το πιο σχετικό περιεχόμενο, ακόμη και αν αυτή η σελίδα δεν είναι η πιο γρήγορη. Ο αριθμός από 0 έως 100 προέρχεται από την εργαστηριακή δοκιμή και δεν αποτελεί αξιολόγηση από την Google: αυτή η αξιολόγηση προκύπτει από τα δεδομένα πεδίου. Το να πετύχετε τέλεια βαθμολογία μόνο για χάρη της Google δεν αποτελεί, σύμφωνα με την ίδια την Google, την καλύτερη αξιοποίηση του χρόνου σας. Φροντίστε να βρίσκεστε στην πράσινη ή τουλάχιστον στην πορτοκαλί ζώνη, κυρίως επειδή οι επισκέπτες εγκαταλείπουν μια αργή ή ασταθή σελίδα.
Τι βελτιώνετε στην ίδια τη σελίδα
- Μικρότερες εικόνες. Μια φωτογραφία πλάτους χιλιάδων pixel για ένα πλαίσιο 800 pixel αποτελεί τη συχνότερη αιτία αργού LCP. Σμικρύνετε τις φωτογραφίες πριν από τη μεταφόρτωση και χρησιμοποιήστε μια σύγχρονη μορφή όπως WebP ή AVIF.
- Πλάτος και ύψος σε κάθε εικόνα. Χωρίς
widthκαιheight, το πρόγραμμα περιήγησης δεν γνωρίζει πόσο χώρο χρειάζεται μια φωτογραφία, και το κείμενο μετατοπίζεται όταν αυτή φορτώνει. Αυτό αυξάνει το CLS:<img src="bloemstuk.webp" width="800" height="600" alt="Νυφική ανθοδέσμη με λευκά τριαντάφυλλα">
- Μην φορτώνετε με καθυστέρηση την πιο σημαντική φωτογραφία. Το
loading="lazy"είναι καλό για φωτογραφίες πιο κάτω στη σελίδα, αλλά όχι για τη φωτογραφία που είναι ήδη ορατή κατά το άνοιγμα. Διαφορετικά, το πρόγραμμα περιήγησης καθυστερεί ακριβώς τη φωτογραφία που καθορίζει το LCP σας. - Μην εισάγετε τίποτα αργότερα πάνω από το περιεχόμενο. Μια μπάρα cookies, διαφήμιση ή widget που σπρώχνει τη σελίδα προς τα κάτω κάνει τα πάντα να μετατοπίζονται. Είναι προτιμότερο μια τέτοια μπάρα να εμφανίζεται πάνω από τη σελίδα.
- Λιγότερα scripts τρίτων. Ένα κακό INP οφείλεται σχεδόν πάντα σε υπερβολικό JavaScript: βαριά θέματα, sliders, παράθυρα συνομιλίας και trackers. Εξετάστε κριτικά κάθε plugin ή ενσωματωμένη υπηρεσία.
Τι κάνει ο server
Όλα ξεκινούν με την πρώτη απόκριση του server, τον Time to First Byte (TTFB). Αυτός δεν αποτελεί από μόνος του Core Web Vital, αλλά με αργή πρώτη απόκριση ένα καλό LCP είναι σχεδόν αδύνατο. Ως ενδεικτική τιμή, 0,8 δευτερόλεπτα ή λιγότερο θεωρείται καλό. Οι αιτίες είναι συχνά ιστότοπος χωρίς cache, ανεπαρκής υπολογιστική ισχύς ή ανακατευθύνσεις. Ο server πρέπει επίσης να αποστέλλει τα αρχεία κειμένου συμπιεσμένα (συμπίεση με gzip ή Brotli). Πώς αντιμετωπίζετε την πλευρά του server διαβάζετε στο Ο ιστότοπός μου είναι αργός ή χρησιμοποιεί πολύ CPU: έτσι τον κάνετε πιο γρήγορο και στον οδηγό DirectAdmin, Ο ιστότοπός μου είναι αργός.
Στο AI Builder και στο WordPress
Ένας ιστότοπος από το AI Builder ορίζει πλάτος και ύψος στις εικόνες των οποίων το μέγεθος είναι γνωστό, φορτώνει την πρώτη φωτογραφία μιας σελίδας αμέσως και με προτεραιότητα, ενώ οι υπόλοιπες φορτώνουν μόνο όταν εμφανίζονται στην οθόνη, και δημιουργεί κατά τη δημοσίευση μια μικρότερη έκδοση των μεγάλων φωτογραφιών. Στο WordPress βοηθούν περισσότερο ένα plugin cache και η σμίκρυνση των εικόνων. Αυτό μπορείτε να το διαβάσετε στο δωρεάν μάθημα WordPress, στα μαθήματα Τι κάνει έναν ιστότοπο αργό, και πώς το μετράτε; και Εικόνες, PHP και άλλα κέρδη ταχύτητας.
Περαιτέρω ανάγνωση
- web.dev: Web Vitals (στα αγγλικά)
- Σχετικά με το PageSpeed Insights (στα αγγλικά)
- Google: εμπειρία σελίδας και Αναζήτηση Google (στα αγγλικά)
- Google: η αναφορά Site-vitaliteit