Core Web Vitals: LCP, INP και CLS

Ενότητα 4: Ταχύτητα, κινητά και https · Χρόνος ανάγνωσης: 13 λεπτά

Στόχος μαθήματος: Μετά από αυτό το μάθημα μπορείτε να εξηγήσετε τα τρία Core Web Vitals με τις οριακές τους τιμές, να περιγράψετε τη διαφορά ανάμεσα σε δεδομένα πεδίου και δεδομένα εργαστηρίου, να διαβάσετε μια μέτρηση του PageSpeed Insights, να αντιμετωπίσετε τις κυριότερες αιτίες μιας κακής βαθμολογίας και να εκτιμήσετε ειλικρινά πόσο βαραίνει η ταχύτητα στα αποτελέσματα αναζήτησης.

Βασικές έννοιες: Core Web Vitals, LCP (Largest Contentful Paint), INP (Interaction to Next Paint), CLS (Cumulative Layout Shift), 75ο εκατοστημόριο, δεδομένα πεδίου (CrUX), δεδομένα εργαστηρίου (Lighthouse), PageSpeed Insights, αναφορά Core Web Vitals στο Search Console, TTFB, συμπίεση, width και height στις εικόνες, loading="lazy", εμπειρία σελίδας

Η ταχύτητα σε τρεις αριθμούς

Το «Είναι γρήγορο το site μου;» είναι μια αόριστη ερώτηση. Η Google και οι δημιουργοί του Chrome την έχουν μετατρέψει σε τρεις μετρήσιμες ερωτήσεις, τα Core Web Vitals:

Μερικά σημεία που αξίζει να κατανοήσετε καλά:

• Το LCP μετρά τη στιγμή που εμφανίζεται το μεγαλύτερο ορατό στοιχείο. Συνήθως πρόκειται για μια μεγάλη φωτογραφία στο πάνω μέρος (το «hero») ή για ένα μεγάλο μπλοκ κειμένου. Στο Bloemenatelier Lotte είναι η φωτογραφία της ανθοσύνθεσης στην αρχική σελίδα.
• Το INP εξετάζει όλα τα κλικ, τα πατήματα και τις πληκτρολογήσεις κατά την επίσκεψη και αναφέρει (σχεδόν) την πιο αργή αντίδραση. Το INP αντικατέστησε στις 12 Μαρτίου 2024 την παλαιότερη μέτρηση FID (First Input Delay), η οποία εξέταζε μόνο το πρώτο κλικ και μόνο την αναμονή πριν από την επεξεργασία. Αν συναντήσετε το FID σε κάποιο παλιό άρθρο, η πληροφορία είναι ξεπερασμένη.
• Το CLS δεν είναι χρόνος αλλά βαθμολογία χωρίς μονάδα. Αυξάνεται όταν στοιχεία μετακινούνται ενώ διαβάζετε: θέλετε να πατήσετε ένα κουμπί και εκείνη τη στιγμή εμφανίζεται ένα banner από πάνω, οπότε πατάτε κάτι άλλο.

Το 75ο εκατοστημόριο

Μια σελίδα «περνά» τα Core Web Vitals όταν το 75 τοις εκατό των επισκέψεων έχει καλή βαθμολογία και στις τρεις μετρήσεις, χωριστά για κινητά και για υπολογιστές. Αυτό ονομάζεται 75ο εκατοστημόριο. Σημαίνει ότι δεν μετρά ο δικός σας γρήγορος υπολογιστής με οπτική ίνα, αλλά η εμπειρία των περισσότερων επισκεπτών, και εκείνων με ένα παλαιότερο κινητό σε 4G.

Δεδομένα πεδίου και δεδομένα εργαστηρίου

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

• Τα δεδομένα πεδίου προέρχονται από πραγματικούς επισκέπτες. Το Chrome συλλέγει ανώνυμα (από χρήστες που το επιτρέπουν) πόσο γρήγορες ήταν οι σελίδες, στο Chrome User Experience Report (CrUX). Το PageSpeed Insights δείχνει τα δεδομένα πεδίου των τελευταίων 28 ημερών. Η αναφορά Core Web Vitals στο Search Console χρησιμοποιεί την ίδια πηγή. Αν η σελίδα σας έχει πολύ λίγους επισκέπτες, το PageSpeed Insights δείχνει τα στοιχεία ολόκληρου του site σας (το «origin»), και αν κι αυτό έχει πολύ λίγους, δεν υπάρχουν δεδομένα πεδίου.
• Τα δεδομένα εργαστηρίου προέρχονται από μια προσομοιωμένη δοκιμή με το Lighthouse: μία φόρτωση σε ένα εξομοιωμένο μέσο κινητό και μια μέση σύνδεση. Το Lighthouse δεν μπορεί να μετρήσει το INP (κανείς δεν κάνει κλικ) και γι' αυτό δίνει άλλους αριθμούς, όπως το Total Blocking Time, που αποτελούν ένδειξη για το INP.

Για την αξιολόγηση μετρούν τα δεδομένα πεδίου. Τα δεδομένα εργαστηρίου είναι χρήσιμα για να βρείτε αιτίες και για να δείτε αμέσως μετά από μια βελτίωση αν βοηθά, χωρίς να περιμένετε 28 ημέρες.

Πόσο βαραίνει;

Εδώ γίνονται πολλές υπερβολές. Τι λέει η ίδια η Google, στην τεκμηρίωση για την εμπειρία σελίδας:

• «Core Web Vitals are used by our ranking systems» (τα Core Web Vitals χρησιμοποιούνται από τα συστήματα κατάταξής μας): άρα μετρούν.
• Δεν υπάρχει ξεχωριστό «σήμα εμπειρίας σελίδας». Άλλα στοιχεία μιας καλής εμπειρίας σελίδας (https, χωρίς ενοχλητικά pop-ups, εύχρηστη σε κινητά) δεν σας βοηθούν, σύμφωνα με την Google, να ανεβείτε άμεσα, αλλά κάνουν το site σας πιο ευχάριστο.
• «Google Search always seeks to show the most relevant content, even if the page experience is sub-par.» (Η Αναζήτηση Google επιδιώκει πάντα να δείχνει το πιο σχετικό περιεχόμενο, ακόμη κι αν η εμπειρία σελίδας είναι υποδεέστερη.) Μια αργή σελίδα με την καλύτερη απάντηση μπορεί επομένως κάλλιστα να βρίσκεται στην κορυφή.
• Η επίτευξη τέλειας βαθμολογίας μόνο για το SEO, σύμφωνα με την Google, «ίσως να μην είναι η καλύτερη αξιοποίηση του χρόνου σας».

Συμπέρασμα: φροντίστε να βρίσκεστε στην πράσινη ή τουλάχιστον στην πορτοκαλί ζώνη, κυρίως επειδή οι επισκέπτες εγκαταλείπουν μια αργή σελίδα ή μια σελίδα που μετακινείται. Το κυνήγι από 90 σε 100 βαθμούς στο Lighthouse αποφέρει λίγα στα αποτελέσματα αναζήτησης.

Οι αιτίες που μπορείτε να αντιμετωπίσετε μόνοι σας

Αργή πρώτη απόκριση (TTFB)

Όλα ξεκινούν από τη στιγμή που φτάνει το πρώτο byte του HTML, το Time to First Byte. Το TTFB δεν είναι από μόνο του Core Web Vital, αλλά ένα αργό TTFB κάνει ένα καλό LCP σχεδόν αδύνατο. Το web.dev δίνει ως τιμή αναφοράς: καλό είναι 0,8 δευτερόλεπτα ή λιγότερο, κακό είναι πάνω από 1,8 δευτερόλεπτα. Αιτίες σύμφωνα με το web.dev: ανεπαρκής υπολογιστική ισχύς στη hosting, έλλειψη cache (κάθε σελίδα δημιουργείται από την αρχή, τυπικό σε WordPress χωρίς plugin cache), ανακατευθύνσεις (μάθημα 4.1) και ένας server σε μεγάλη απόσταση χωρίς CDN.

Στο ίδιο θέμα ανήκει η συμπίεση: ο server πρέπει να στέλνει HTML, CSS και JavaScript συμπιεσμένα με gzip ή Brotli. Αυτό φαίνεται από την κεφαλίδα Content-Encoding: gzip ή br. Σχεδόν κάθε hosting το κάνει εξ ορισμού, αλλά μια λανθασμένη ρύθμιση ή ένας παλιός server μπορεί να το απενεργοποιήσει.

Εικόνες

Οι εικόνες είναι η πιο συνηθισμένη αιτία κακού LCP και CLS:

1. Πολύ μεγάλες. Μια φωτογραφία πλάτους 4.000 pixel και 5 MB για ένα πλαίσιο 800 pixel. Μειώστε το μέγεθος πριν από το ανέβασμα και χρησιμοποιήστε μια σύγχρονη μορφή όπως WebP ή AVIF.

2. Χωρίς πλάτος και ύψος. Χωρίς width και height ο browser δεν ξέρει πόσο χώρο χρειάζεται η εικόνα, και το κείμενο από κάτω μετακινείται μόλις εκείνη φορτώσει. Το web.dev συνιστά να ορίζετε width και height σε κάθε <img>:

   <img src="bloemstuk.webp" width="800" height="600" alt="Bruidsboeket met witte rozen">

3. Καθυστερημένη φόρτωση της σημαντικότερης φωτογραφίας. Το loading="lazy" φορτώνει μια εικόνα μόνο όταν εμφανιστεί στην οθόνη. Είναι ιδανικό για φωτογραφίες πιο κάτω στη σελίδα, αλλά το web.dev είναι σαφές: τις εικόνες που είναι ήδη ορατές κατά το άνοιγμα, και σίγουρα την εικόνα LCP, ΜΗΝ τις φορτώνετε καθυστερημένα. Διαφορετικά ο browser καθυστερεί ακριβώς τη φωτογραφία που καθορίζει το LCP σας.

Περιεχόμενο που μετακινείται και αργές αντιδράσεις

Άλλες αιτίες CLS σύμφωνα με το web.dev: γραμματοσειρές που αλλάζουν μέγεθος κατά τη φόρτωση, διαφημίσεις και ενσωματωμένα widgets που μεγαλώνουν μόνα τους, και περιεχόμενο που προστίθεται αργότερα πάνω από το υπάρχον (όπως μια μπάρα cookies που σπρώχνει τη σελίδα προς τα κάτω αντί να βρίσκεται από πάνω της). Ένα κακό INP οφείλεται σχεδόν πάντα σε υπερβολικό JavaScript: βαριά themes, sliders, widgets συνομιλίας και trackers τρίτων. Εξετάστε κριτικά κάθε plugin ή ενσωματωμένη υπηρεσία· εδώ το λιγότερο είναι πραγματικά περισσότερο.

Στην πράξη: μέτρηση με το PageSpeed Insights

Μεταβείτε στο pagespeed.web.dev, συμπληρώστε τη διεύθυνση της αρχικής σας σελίδας και κάντε κλικ στο Analyze. Θα δείτε δύο καρτέλες (Mobile και Desktop). Στο πάνω μέρος εμφανίζεται η αξιολόγηση των Core Web Vitals με βάση τα δεδομένα πεδίου, εφόσον υπάρχουν. Από κάτω βρίσκεται η δοκιμή Lighthouse με μια βαθμολογία και μια λίστα «Diagnostics» με συγκεκριμένα σημεία, για παράδειγμα για εικόνες μεγαλύτερες από όσο χρειάζεται ή για μια εικόνα LCP που φορτώνεται καθυστερημένα (οι ακριβείς ονομασίες αλλάζουν με τις νέες εκδόσεις του Lighthouse). Ξεκινήστε από το Mobile: εκεί η εικόνα είναι συνήθως χειρότερη, και η Google εξετάζει πρώτα την έκδοση για κινητά (μάθημα 4.2).

Αν έχετε το site σας στο Search Console (ενότητα 2), δείτε επίσης στο Experience, Core Web Vitals. Εκεί θα βρείτε ομάδες παρόμοιων σελίδων με την κατάστασή τους, και για σελίδες που δεν είχατε ελέγξει οι ίδιοι.

Ένα site του AI Builder ορίζει πλάτος και ύψος στις εικόνες των οποίων οι διαστάσεις είναι γνωστές, φορτώνει την πρώτη φωτογραφία της σελίδας αμέσως και με προτεραιότητα (fetchpriority="high") και τις υπόλοιπες καθυστερημένα, και κατά τη δημοσίευση δημιουργεί από τις μεγάλες φωτογραφίες μια εκδοχή πλάτους 800 pixel. Στο WordPress βοηθούν περισσότερο ένα plugin cache και η σμίκρυνση των εικόνων· το μάθημα WordPress εμβαθύνει σε αυτό στην ενότητα 6. Σε άλλους κατασκευαστές ιστοσελίδων και εταιρείες hosting λειτουργεί παρόμοια: τα κουμπιά διαφέρουν, οι αιτίες είναι οι ίδιες.

Σύνοψη

• Τα Core Web Vitals είναι το LCP (καλό έως 2,5 s), το INP (καλό έως 200 ms, από τον Μάρτιο του 2024 στη θέση του FID) και το CLS (καλό έως 0,1), μετρημένα στο 75ο εκατοστημόριο ανά τύπο συσκευής.
• Τα δεδομένα πεδίου (CrUX, 28 ημέρες) καθορίζουν την αξιολόγηση· τα δεδομένα εργαστηρίου (Lighthouse) βοηθούν στον εντοπισμό αιτιών.
• Η Google χρησιμοποιεί τα Core Web Vitals στην κατάταξη, αλλά η συνάφεια προηγείται: μια τέλεια βαθμολογία δεν είναι αυτοσκοπός.
• Το μεγαλύτερο κέρδος: γρήγορη απόκριση του server με cache και συμπίεση, μικρές εικόνες με width και height, όχι καθυστερημένη φόρτωση για τη σημαντικότερη φωτογραφία, λιγότερο JavaScript τρίτων.

Κουίζ

Άσκηση

Άσκηση A4.3: Γρήγορη απόκριση και ελαφριές εικόνες. Συμπληρώστε τη διεύθυνση μιας σελίδας. Το πρόγραμμα μετρά τρεις φορές τον χρόνο έως το πρώτο byte (TTFB) από τον server μας και κρατά τη μεσαία τιμή, ελέγχει αν το HTML αποστέλλεται συμπιεσμένο (gzip, Brotli ή zstd), μετρά τις εικόνες χωρίς width και height και ελέγχει ότι η σημαντικότερη εικόνα στο πάνω μέρος δεν φορτώνεται με loading="lazy". Προσοχή: πρόκειται για μέτρηση από ένα μόνο σημείο, όχι για μέτρηση των επισκεπτών σας. Δεν έχετε δικό σας site; Χρησιμοποιήστε το www.wikipedia.org.

Άσκηση D4.3: Τα Core Web Vitals σας. Εκτελέστε το PageSpeed Insights στην αρχική σας σελίδα και σε μία ακόμη σημαντική σελίδα, πρώτα στο Mobile. Σημειώστε για κάθε σελίδα: αν υπάρχουν δεδομένα πεδίου (για τη σελίδα ή για ολόκληρο το site), το LCP, το INP και το CLS από τα δεδομένα πεδίου, τη βαθμολογία Lighthouse και το στοιχείο που το Lighthouse υποδεικνύει ως στοιχείο LCP. Επιλέξτε τη μία βελτίωση που κατά τη γνώμη σας αποφέρει τα περισσότερα και εξηγήστε γιατί.

Περαιτέρω ανάγνωση

• web.dev, Web Vitals: https://web.dev/articles/vitals
• web.dev, Largest Contentful Paint (LCP): https://web.dev/articles/lcp
• web.dev, Interaction to Next Paint (INP): https://web.dev/articles/inp
• web.dev, Cumulative Layout Shift (CLS): https://web.dev/articles/cls
• web.dev, Time to First Byte (TTFB): https://web.dev/articles/ttfb
• web.dev, Browser-level image lazy loading: https://web.dev/articles/browser-level-image-lazy-loading
• Google Search Central, Understanding page experience in Google Search results: https://developers.google.com/search/docs/appearance/page-experience
• PageSpeed Insights, About PageSpeed Insights: https://developers.google.com/speed/docs/insights/v5/about
• Search Console Help, Core Web Vitals report: https://support.google.com/webmasters/answer/9205520