Τα τρία Core Web Vitals το 2026

Η Google μετρά τρεις κύριες μετρικές πεδίου για την εμπειρία σελίδας. Κάθε μία έχει ένα κατώφλι για «Καλή» απόδοση:

• Largest Contentful Paint (LCP) — χρόνος αποτύπωσης του μεγαλύτερου ορατού στοιχείου. Καλό: κάτω από 2,5 δευτερόλεπτα.
• Interaction to Next Paint (INP) — ανταπόκριση σε όλες τις αλληλεπιδράσεις χρηστών (αντικατέστησε το FID τον Μάρτιο 2024). Καλό: κάτω από 200 ms.
• Cumulative Layout Shift (CLS) — οπτική σταθερότητα κατά τη φόρτωση. Καλό: κάτω από 0,1.

Ένα banner συγκατάθεσης που μπλοκάρει την αποτύπωση, εκτελεί βαρύ JavaScript κατά τη φόρτωση ή εισάγει αλλαγές διάταξης αργά μπορεί να σπρώξει οποιοδήποτε από αυτά στη ζώνη «Χρειάζεται βελτίωση» ή «Κακό» — και η Google χρησιμοποιεί δεδομένα πεδίου 28 ημερών από πραγματικούς χρήστες Chrome, οπότε τα παροδικά προβλήματα γίνονται μόνιμα σήματα κατάταξης.

Πώς τα banner συγκατάθεσης βλάπτουν το LCP

Το Largest Contentful Paint συνήθως ενεργοποιείται σε μια hero εικόνα ή τίτλο. Αρκετά μοτίβα συγκατάθεσης το καθυστερούν άσκοπα:

Scripts CMP που μπλοκάρουν την αποτύπωση

Η σύγχρονη φόρτωση του CMP από την κεφαλή του εγγράφου σταματά την ανάλυση HTML μέχρι να ληφθεί και να εκτελεστεί το script. Αν το CMP φιλοξενείται σε αργό CDN ή έχει κρύα cache, μπορείτε να προσθέσετε 200-800 ms στο LCP παγκοσμίως.

Banner που καλύπτει το hero στοιχείο

Αν το banner συγκατάθεσης είναι τοποθετημένο ως modal overlay που καλύπτει το στοιχείο LCP, τα προγράμματα περιήγησης θα μετρούν το LCP από το καλυμμένο στοιχείο. Ωστόσο, αν το banner είναι το μεγαλύτερο βαμμένο στοιχείο, γίνεται υποψήφιο LCP — και αν αποτυπωθεί μέσω JavaScript μετά τη φόρτωση σελίδας, το LCP είναι τεχνητά υψηλό.

Λύση: Ασύγχρονη φόρτωση με μικρό inline bootstrap

Φορτώστε το πλήρες CMP ασύγχρονα (`async` ή `defer`), με μόνο ένα μικρό inline script για την αρχική εμφάνιση banner. Στοχεύστε σε bootstrap μικρότερο από 5 KB gzip. Η πλήρης λογική συμπεριφοράς, λίστες προμηθευτών και UI chrome μπορούν να φορτωθούν με lazy loading μετά την πρώτη αποτύπωση.

Πώς τα banner συγκατάθεσης βλάπτουν το INP

Το Interaction to Next Paint μετρά τον χειρότερο χρόνο απόκρισης σε όλα τα κλικ, αφές και πλήκτρα κατά τη διάρκεια μιας συνεδρίας. Οι αλληλεπιδράσεις συγκατάθεσης cookies είναι συχνά η πρώτη αλληλεπίδραση ενός χρήστη — οπότε ένα αργό κουμπί Αποδοχής καταστρέφει τη βαθμολογία.

Βαρύ φορτίο κατά την Αποδοχή

Πολλά CMP εκτελούν σύγχρονη εργασία κατά την Αποδοχή: φόρτωση 40+ scripts προμηθευτών, εγγραφή στο localStorage, εκπυρσοκρότηση γεγονότων dataLayer, ενεργοποίηση ενημερώσεων Google Consent Mode. Αν αυτό υπερβεί τα 200 ms, το INP υποφέρει.

Λύση: Ουρά εργασίας μετά την αποτύπωση

Κατά το κλικ Αποδοχής, αμέσως αποκρύψτε το banner και προγραμματίστε βαρύ έργο με `requestIdleCallback` ή `setTimeout(0)`. Ο χρήστης βλέπει το banner να εξαφανίζεται αμέσως· τα scripts προμηθευτών φορτώνονται στο παρασκήνιο χωρίς να μπλοκάρουν την αλληλεπίδραση.

Πώς τα banner συγκατάθεσης βλάπτουν το CLS

Το Cumulative Layout Shift παρακολουθεί απροσδόκητη οπτική κίνηση. Τα banner είναι κλασική πηγή CLS όταν εισάγονται στο DOM αφού το περιεχόμενο έχει αποτυπωθεί.

Καθυστερημένη εισαγωγή banner

Αν το banner εμφανιστεί 800 ms μετά το LCP, σπρώχνει το περιεχόμενο προς τα κάτω και δημιουργεί μετατόπιση διάταξης. Ακόμα και ένα μικρό banner μπορεί να προκαλέσει βαθμολογία CLS 0,1+ αν επηρεάζει μεγάλο μέρος του viewport.

Επανααποτύπωση widget προτιμήσεων cookies

Τα widgets προτιμήσεων στο υποσέλιδο που φορτώνουν logos προμηθευτών ασύγχρονα μπορούν να αναδιατάξουν ολόκληρο το υποσέλιδο πολλές φορές, συσσωρεύοντας CLS.

Λύση: Δεσμεύστε χώρο εξαρχής

Χρησιμοποιήστε CSS για να δεσμεύσετε τον χώρο του banner από την πρώτη αποτύπωση — placeholder σταθερού ύψους, `min-height` στο υποσέλιδο ή banner σταθερά στο κάτω μέρος που δεν σπρώχνει περιεχόμενο. Τα σύγχρονα CMP πρέπει να προσφέρουν διαμόρφωση χωρίς CLS out of the box.

Google Consent Mode V2 και απόδοση

Το Consent Mode V2 επιτρέπει στα tags Google να εκτελούνται σε κατάσταση χωρίς cookies πριν τη συγκατάθεση, μεταδίδοντας σήματα μέσω `gtag('consent', 'default', {...})`. Αυτό είναι εξαιρετικό για τη συνέχεια μέτρησης, αλλά η ίδια η βιβλιοθήκη gtag.js είναι 50-90 KB. Φορτώστε την ασύγχρονα και ορίστε τις προεπιλογές όσο το δυνατόν νωρίτερα για να αποφύγετε συνθήκες race.

• Ορίστε προεπιλογές πριν φορτωθεί το gtag — τοποθετήστε την κλήση consent default στην κεφαλή, πριν το script gtag.js.
• Χρησιμοποιήστε `analytics_storage: 'denied'` ως προεπιλογή — ελαχιστοποιεί τα δεδομένα που συλλέγονται πριν τη συγκατάθεση.
• Ενημέρωση κατά την Αποδοχή μέσω requestIdleCallback — αποφύγετε το μπλοκάρισμα του κύριου thread.

Μέτρηση επίδρασης CMP στα Core Web Vitals

Μην μαντεύετε — μετρήστε. Χρησιμοποιήστε αυτά τα εργαλεία για να ποσοτικοποιήσετε την επίδραση του banner σας:

• PageSpeed Insights — δεδομένα πεδίου από Chrome UX Report συν εργαστηριακό audit Lighthouse. Συγκρίνετε βαθμολογίες με και χωρίς το script CMP.
• Επέκταση Web Vitals Chrome — overlay LCP, INP, CLS σε πραγματικό χρόνο κατά τη διάρκεια τοπικής δοκιμής.
• WebPageTest.org — προβολή filmstrip και waterfall που δείχνει ακριβώς πότε αποτυπώνεται το banner και τι μπλοκάρει.
• Αναφορά Core Web Vitals Search Console — δεδομένα πεδίου 28 ημερών ομαδοποιημένα κατά μοτίβο URL. Ελέγξτε αν οι σελίδες προορισμού με το banner σας βαθμολογούνται διαφορετικά από σελίδες χωρίς.

Πώς το FlexyConsent παραμένει γρήγορο