Μια εντυπωσιακή σελίδα χάνει μέρος της αξίας της όταν ο επισκέπτης περιμένει για να δει το βασικό μήνυμα ή πατά ένα κουμπί που μοιάζει να μην ανταποκρίνεται. Από την άλλη, ένας γρήγορος ιστότοπος χρειάζεται ακόμη σωστή τυπογραφία, καθαρή ιεραρχία και χαρακτήρα. Η συζήτηση για την απόδοση γίνεται παραγωγική όταν σχεδιασμός και ανάπτυξη εξετάζουν την ίδια εμπειρία: τι βλέπει πρώτα ο άνθρωπος, τι θέλει να κάνει και πώς συμπεριφέρεται η σελίδα όσο τη χρησιμοποιεί. Τα Core Web Vitals είναι τρεις μετρήσεις που βοηθούν να ελέγξουμε αν η σελίδα φορτώνει, ανταποκρίνεται και μένει σταθερή όσο τη χρησιμοποιούμε.
Τρεις μετρήσεις, τρεις διαφορετικές δυσκολίες
Το Largest Contentful Paint (LCP) δείχνει πότε εμφανίζεται το κύριο ορατό περιεχόμενο, όπως η κεντρική εικόνα. Το Interaction to Next Paint (INP) δείχνει πόσο γρήγορα ανταποκρίνεται η σελίδα όταν κάποιος πατά ή πληκτρολογεί. Το Cumulative Layout Shift (CLS) δείχνει αν στοιχεία μετακινούνται ξαφνικά ενώ ο άνθρωπος διαβάζει. Τα όρια καλής εμπειρίας είναι LCP έως 2,5 δευτερόλεπτα, INP έως 200 χιλιοστά του δευτερολέπτου και CLS έως 0,1. Η αξιολόγηση γίνεται στο 75ο εκατοστημόριο, ξεχωριστά για κινητά και υπολογιστές, και απαιτεί να καλύπτονται και οι τρεις δείκτες. Ορισμοί και όρια στο web.dev.
Δώστε προτεραιότητα σε αυτό που έχει οπτική σημασία
Για το LCP, χρειάζεται πρώτα να εντοπιστεί το στοιχείο που μετριέται στη συγκεκριμένη σελίδα. Αν είναι η κεντρική φωτογραφία, εξετάζουμε πότε την ανακαλύπτει ο browser, πότε ξεκινά η λήψη και τι καθυστερεί την εμφάνισή της. Η συμπίεση του αρχείου είναι μόνο ένα μέρος της δουλειάς. Μια εικόνα που εμφανίζεται αφού εκτελεστεί πρόσθετη JavaScript μπορεί να παραμένει αργή, ακόμη και μικρότερη. Η βασική εικόνα LCP δεν πρέπει να φορτώνεται με lazy loading. Οι προτεραιότητες φόρτωσης εφαρμόζονται στοχευμένα και ελέγχονται με μέτρηση. Οδηγός βελτιστοποίησης LCP.
Σε μια υποθετική σελίδα αρχιτεκτονικού γραφείου, η μεγάλη φωτογραφία μπορεί να είναι το κεντρικό μέρος της ταυτότητας. Η σχεδιαστική συζήτηση μπορεί να διατηρήσει αυτή την επιλογή και να εξετάσει διαφορετικό κάδρο για το κινητό, ώστε το κτίριο να παραμένει αναγνωρίσιμο. Η ομάδα ελέγχει αν η εικόνα εξηγεί το έργο και αν ο τίτλος διαβάζεται άνετα. Η τεχνική μέτρηση και η οπτική αξιολόγηση απαντούν σε διαφορετικά ερωτήματα, γι’ αυτό χρειάζονται και οι δύο πριν εγκριθεί η τελική εκδοχή.
Ελέγξτε τη σελίδα ενώ κάποιος τη χρησιμοποιεί
Το INP μπορεί να επιβαρύνεται πριν ξεκινήσει η επεξεργασία μιας ενέργειας, μέσα στον κώδικα που την εκτελεί ή μέχρι να παρουσιαστεί το επόμενο καρέ. Η διάγνωση επομένως χρειάζεται την πραγματική αλληλεπίδραση που καθυστερεί. Μεγάλες εργασίες στη JavaScript μπορούν να χωριστούν, ενώ οι αλλαγές στη σελίδα χρειάζεται να περιορίζουν την περιττή εργασία εμφάνισης. Κώδικας τρίτων μπορεί επίσης να διεκδικεί χρόνο στον βασικό μηχανισμό εκτέλεσης. Η λύση επιλέγεται αφού φανεί πού καταναλώνεται ο χρόνος, με νέα δοκιμή της ίδιας ενέργειας μετά την αλλαγή. Οδηγός βελτιστοποίησης INP.
Φανταστείτε έναν κατάλογο έργων με φίλτρα. Ο χρήστης επιλέγει «Κατοικίες» και χρειάζεται να καταλάβει ποια επιλογή ενεργοποιήθηκε και ποια έργα εμφανίζονται. Στο πρωτότυπο μπορούμε να δοκιμάσουμε τη σαφήνεια της κατάστασης, το μήνυμα όταν δεν υπάρχουν αποτελέσματα και τη δυνατότητα επαναφοράς. Στην υλοποίηση δοκιμάζουμε την ίδια ακολουθία με περιεχόμενο αντίστοιχο του τελικού καταλόγου. Ένα φίλτρο που δείχνει ωραίο με τρεις κάρτες δεν έχει ακόμη αξιολογηθεί για τη χρήση που πραγματικά σχεδιάζουμε.
Κρατήστε σταθερό τον χώρο του περιεχομένου
Για το CLS, συνηθισμένες αιτίες είναι εικόνες χωρίς διαστάσεις, ενσωματωμένα στοιχεία χωρίς δεσμευμένο χώρο και αλλαγές που σχετίζονται με γραμματοσειρές. Η πρόβλεψη διαστάσεων ή αναλογίας πλευρών βοηθά τη σελίδα να κρατά τη θέση μιας εικόνας πριν φορτωθεί. Χρειάζεται επίσης έλεγχος μετά την αρχική φόρτωση, καθώς απρόσμενες μετακινήσεις μπορούν να εμφανιστούν κατά την κύλιση. Η διάγνωση αναζητά τι προκάλεσε τη μετακίνηση: το στοιχείο που μετακινήθηκε δεν είναι πάντα η αιτία. Οδηγός βελτιστοποίησης CLS.
Σε μια υποθετική σελίδα εκδήλωσης, ο επισκέπτης διαβάζει το πρόγραμμα και ετοιμάζεται να ανοίξει τις πληροφορίες συμμετοχής. Αν ένα πρόσθετο πλαίσιο εμφανιστεί πάνω από το πρόγραμμα, χάνει το σημείο όπου βρισκόταν. Στη σχεδιαστική παράδοση αξίζει επομένως να υπάρχουν οι ενδιάμεσες καταστάσεις: πριν εμφανιστεί το πρόσθετο περιεχόμενο, όταν δεν είναι διαθέσιμο και όταν έχει ολοκληρωθεί η φόρτωση. Αυτές οι οθόνες δίνουν στην ομάδα κοινή εικόνα της συμπεριφοράς και κάνουν την οπτική σταθερότητα μέρος της αρχικής πρόθεσης.
Συνδυάστε ελεγχόμενες δοκιμές και πραγματική χρήση
Οι εργαστηριακές μετρήσεις βοηθούν στην ανάπτυξη και στη διάγνωση, αλλά δεν αντικαθιστούν τα δεδομένα πραγματικών επισκεπτών. Το συνηθισμένο τεστ φόρτωσης του Lighthouse δεν μετρά INP χωρίς αλληλεπίδραση· το TBT λειτουργεί ως χρήσιμη εργαστηριακή ένδειξη, όχι ως ταυτόσημη μέτρηση. Οι συσκευές, τα δίκτυα και ο τρόπος χρήσης διαφέρουν. Εργαστηριακά δεδομένα και μετρήσεις πεδίου.
Συμφωνήστε από την αρχή ποια πρότυπα σελίδων και ποιες ενέργειες θα ελέγξετε. Κρατήστε σημειώσεις για τη συσκευή και τις συνθήκες της δοκιμής, ώστε οι συγκρίσεις να έχουν νόημα. Μετά από μια αλλαγή, επιβεβαιώστε ότι διατηρούνται το περιεχόμενο, η ευχρηστία και η αισθητική πρόθεση. Για μια ομάδα που σχεδιάζει ένα νέο website, η πιο χρήσιμη παράδοση περιλαμβάνει και αυτή τη διαδικασία ελέγχου. Έτσι, μια νέα φωτογραφία, ένα φίλτρο ή μια ενότητα μπορούν να αξιολογηθούν με κοινά κριτήρια καθώς το site εξελίσσεται.
Συχνές ερωτήσεις
Μπορεί ένα website να έχει ιδιαίτερο design και καλά Core Web Vitals;
Ναι, όταν οι αποφάσεις για εικόνες, γραμματοσειρές, JavaScript και motion λαμβάνονται μαζί με το visual design και επαληθεύονται σε πραγματικές συνθήκες.
Ποια μέτρηση πρέπει να βελτιωθεί πρώτη;
Εκείνη που αποτυγχάνει στο συγκεκριμένο template και επηρεάζει πραγματικούς χρήστες. LCP, INP και CLS περιγράφουν διαφορετικά προβλήματα και χρειάζονται ξεχωριστή διάγνωση.