Οι μετρήσεις απόδοσης εξελίσσονται. Τα Core Web Vitals παρουσιάστηκαν το 2020. Αντικατέστησαν παλιότερες μετρήσεις (FCP, FID). Σε πέντε χρόνια, νέες μετρήσεις θα αντικαταστήσουν τα Core Web Vitals.
Οι μελλοντικές μετρήσεις θα μετράνε: φόρτωση AI (πόση ώρα περνάει μέχρι να απαντήσουν οι λειτουργίες AI), απόκριση σε πραγματικό χρόνο (πόση ώρα περνάει μέχρι να εμφανιστούν οι απαντήσεις streaming), αντιληπτή απόδοση (πώς νιώθει η σελίδα, όχι μόνο οι τεχνικές μετρήσεις).
Η ερώτηση για τώρα: πώς προετοιμαζόμαστε για μελλοντικές μετρήσεις χωρίς να ξέρουμε ποιες θα είναι. Η απάντηση: μέτρα ό,τι μετράει για την επιχείρησή σου. Τα Core Web Vitals μετράνε τη γενική εμπειρία χρήστη. Οι προσαρμοσμένες μετρήσεις μετράνε αποτελέσματα που αφορούν την επιχείρησή σου. Προετοιμάσου για το μέλλον χτίζοντας ευελιξία στα συστήματα μέτρησης.
Η εξέλιξη των μετρήσεων
Τα Core Web Vitals είναι το σημερινό πρότυπο. Δεν είναι όμως μόνιμα.
Χρονολόγιο:
- 2020: παρουσιάζονται τα Core Web Vitals (LCP, CLS, FID)
- 2022: το FID αντικαθίσταται από το INP (βελτιωμένη μέτρηση ανταπόκρισης)
- 2024: συζήτηση για τις επόμενες μετρήσεις (χρόνος αναμονής αλληλεπίδρασης, χρόνος απόκρισης streaming)
- Μέλλον: εμφανίζονται νέες μετρήσεις
Μοτίβο: όταν αλλάζει η τεχνολογία, αλλάζουν και οι μετρήσεις. Όταν οι σελίδες έγιναν διαδραστικές, οι μετρήσεις διαδραστικότητας (INP) απέκτησαν σημασία. Καθώς η AI γίνεται κοινή, ο χρόνος απόκρισης της AI μπορεί να γίνει σημαντική μέτρηση.
Μάθημα: κοίτα τις αρχές (ο χρήστης αντιλαμβάνεται γρήγορη, ανταποκρινόμενη, σταθερή σελίδα), όχι τις ίδιες τις μετρήσεις. Οι αρχές μένουν σταθερές ακόμα κι όταν αλλάζουν οι μετρήσεις.
AI και απόδοση σε πραγματικό χρόνο
Οι λειτουργίες AI γίνονται συνηθισμένες. Ένα chatbot σε μια ιστοσελίδα χρειάζεται δύο δευτερόλεπτα για να απαντήσει. Ο χρήστης περιμένει πιο γρήγορα.
Νέα μέτρηση: χρόνος απόκρισης AI (ο χρόνος από την ερώτηση του χρήστη μέχρι το πρώτο token της απάντησης).
Παράδειγμα: chatbot εξυπηρέτησης πελατών στη σελίδα υποστήριξης. Ο χρήστης κάνει μια ερώτηση. Το chatbot χρειάζεται δύο δευτερόλεπτα για το πρώτο token της απάντησης. Εντύπωση χρήστη: το chatbot είναι αργό και δεν ανταποκρίνεται.
Βελτιστοποίηση: απάντηση με streaming. Δώσε το πρώτο token σε πεντακόσια χιλιοστά του δευτερολέπτου και στείλε την υπόλοιπη απάντηση σταδιακά. Ο χρήστης αντιλαμβάνεται την απάντηση ως άμεση, ακόμα κι αν η πλήρης απάντηση πάρει δύο δευτερόλεπτα.
Μελλοντική μέτρηση: μέτρησε τον χρόνο μέχρι το πρώτο token (TTF), όχι τον συνολικό χρόνο απόκρισης. TTF κάτω από πεντακόσια χιλιοστά του δευτερολέπτου είναι καλό.
Πραγματικό παράδειγμα: SaaS με ενσωματωμένο βοηθό AI.
Τωρινή εμπειρία χρήστη:
- Ο χρήστης πατάει το εικονίδιο του βοηθού
- Ο βοηθός χρειάζεται 1,5 δευτερόλεπτο για να εμφανιστεί
- Ο χρήστης περιμένει και αντιλαμβάνεται αργοπορία
- Η εμπειρία του chat νιώθει αργή
Μελλοντική βελτιστοποίηση:
- Ο χρήστης πατάει το εικονίδιο του βοηθού
- Το εικονίδιο κάνει animation αμέσως (άμεση ανταπόκριση, εκατό χιλιοστά του δευτερολέπτου)
- Το παράθυρο του chat ανοίγει (διακόσια χιλιοστά του δευτερολέπτου)
- Η πρώτη απάντηση της AI εμφανίζεται (πεντακόσια χιλιοστά του δευτερολέπτου)
- Η υπόλοιπη απάντηση της AI έρχεται σταδιακά (ένα έως δύο δευτερόλεπτα)
Εντύπωση χρήστη: άμεση απάντηση (το animation και το άνοιγμα του παραθύρου φαίνονται αμέσως).
Edge computing και κατανεμημένη απόδοση
Το edge computing φέρνει τον υπολογισμό πιο κοντά στους χρήστες. Ο διακομιστής μεταφέρθηκε από τη Νέα Υόρκη σε κόμβο edge στο Λος Άντζελες. Το TTFB βελτιώνεται δραματικά.
Μέλλον: ο υπολογισμός γίνεται στο edge. Η δημιουργία HTML γίνεται στο edge. Η εκτέλεση JavaScript γίνεται στο edge. Τα ερωτήματα στη βάση δεδομένων κατανέμονται στο edge.
Επίδραση στις μετρήσεις: το TTFB γίνεται αμελητέο (η καθυστέρηση δικτύου πλησιάζει το μηδέν). Το LCP εξαρτάται από την εμφάνιση, όχι από την απόκριση του διακομιστή.
Επίκεντρο της μελλοντικής βελτιστοποίησης: η απόδοση εμφάνισης, όχι η απόδοση απόκρισης του διακομιστή.
Παράδειγμα: μελλοντική αρχική σελίδα με edge.
Τωρινή κατάσταση:
- TTFB: διακόσια χιλιοστά του δευτερολέπτου (διακομιστής στη Νέα Υόρκη, χρήστης στο Λος Άντζελες)
- LCP: δύο δευτερόλεπτα (LCP = TTFB + χρόνος εμφάνισης)
Μελλοντική κατάσταση (edge computing):
- TTFB: είκοσι χιλιοστά του δευτερολέπτου (διακομιστής στον κόμβο edge του Λος Άντζελες)
- LCP: 1,5 δευτερόλεπτο (το εμπόδιο είναι ο χρόνος εμφάνισης, όχι η απόκριση του διακομιστή)
Βελτιστοποίηση: η βελτίωση της απόδοσης εμφάνισης (CSS, JavaScript) γίνεται πιο σημαντική από τη βελτίωση της απόκρισης του διακομιστή.
Αντιληπτή απόδοση και υποκειμενικές μετρήσεις
Αντικειμενικές μετρήσεις: το LCP είναι δύο δευτερόλεπτα (μετρήσιμο, αντικειμενικό).
Υποκειμενικές μετρήσεις: η σελίδα νιώθει ανταποκρινόμενη (υποκειμενικό, αντιληπτό).
Η έρευνα δείχνει: μια σελίδα που νιώθει ανταποκρινόμενη μπορεί να έχει τις ίδιες τεχνικές μετρήσεις με μια σελίδα που νιώθει αργή. Η διαφορά είναι το animation, η οπτική ανταπόκριση, η αντιληπτή φόρτωση.
Μελλοντική μέτρηση: αντιληπτή ανταπόκριση. Μέτρα την αντίληψη του χρήστη, όχι μόνο την τεχνική μέτρηση.
Παράδειγμα: δύο σελίδες με το ίδιο LCP (δύο δευτερόλεπτα).
Σελίδα πρώτη: φορτώνει αμέσως μια κενή σελίδα και το περιεχόμενο εμφανίζεται στα δύο δευτερόλεπτα. Ο χρήστης αντιλαμβάνεται αργοπορία.
Σελίδα δεύτερη: δείχνει αμέσως οθόνη σκελετού (διακόσια χιλιοστά του δευτερολέπτου) και γεμίζει σταδιακά το περιεχόμενο μέχρι τα δύο δευτερόλεπτα. Ο χρήστης αντιλαμβάνεται πιο γρήγορη σελίδα (η οθόνη σκελετού δίνει την ψευδαίσθηση πιο γρήγορης φόρτωσης).
Τεχνικές μετρήσεις (LCP): ίδιες και στις δύο (δύο δευτερόλεπτα).
Εντύπωση χρήστη: η δεύτερη σελίδα νιώθει πιο γρήγορη.
Μελλοντική μέτρηση: βαθμολογία αντιληπτής εμπειρίας (μέτρησε την υποκειμενική εμπειρία δίπλα στις τεχνικές μετρήσεις).
Streaming και προοδευτική εμφάνιση
Τωρινή προσέγγιση: φτιάξε ολόκληρη τη σελίδα και στείλ' την στον πελάτη. Ο πελάτης την εμφανίζει. Η σελίδα γίνεται διαδραστική.
Προσέγγιση streaming: στείλε τα κομμάτια της σελίδας όπως ετοιμάζονται. Ο πελάτης τα παίρνει και τα εμφανίζει σταδιακά. Η σελίδα είναι εν μέρει διαδραστική πριν φορτώσει πλήρως.
Επίδραση: μια σελίδα που χρειάζεται δύο δευτερόλεπτα για να φορτώσει πλήρως μπορεί να γίνει διαδραστική σε 0,5 δευτερόλεπτο αν γίνει streaming.
Μελλοντική μέτρηση: χρόνος μέχρι τη διαδραστικότητα (TTI). Πόση ώρα περνάει μέχρι ο χρήστης να αλληλεπιδράσει με τη σελίδα.
Παράδειγμα: σελίδα προϊόντος με συστάσεις.
Τωρινή προσέγγιση:
- Φορτώνει το HTML (0,5 δευτερόλεπτα)
- Φορτώνει το CSS (0,3 δευτερόλεπτα)
- Φορτώνει το JavaScript (0,5 δευτερόλεπτα)
- Κλήση API για τις συστάσεις (ένα δευτερόλεπτο)
- Η σελίδα γίνεται διαδραστική στα 2,3 δευτερόλεπτα
Προσέγγιση streaming:
- Το HTML έρχεται με streaming (0,1 δευτερόλεπτα) - φαίνεται η δομή της σελίδας
- Το CSS έρχεται με streaming (0,2 δευτερόλεπτα) - η σελίδα παίρνει στυλ
- Το JavaScript έρχεται με streaming (0,3 δευτερόλεπτα) - η σελίδα γίνεται διαδραστική
- Η κλήση API για τις συστάσεις συνεχίζεται στο παρασκήνιο
- Η σελίδα είναι διαδραστική στα 0,5 δευτερόλεπτα
- Οι συστάσεις εμφανίζονται στο ένα δευτερόλεπτο και μετά
Ο χρήστης μπορεί να αλληλεπιδράσει (προσθήκη στο καλάθι, πάτημα κουμπιών) στα 0,5 δευτερόλεπτα. Το πλήρες περιεχόμενο εμφανίζεται στο ένα δευτερόλεπτο και μετά.
Μελλοντική μέτρηση (TTI): 0,5 δευτερόλεπτα (από 2,3 δευτερόλεπτα). Τεράστια βελτίωση στην αντίληψη του χρήστη.
Συχνές ερωτήσεις
Να αρχίσουμε να μετράμε τον χρόνο απόκρισης AI τώρα;
Ναι, αν η ιστοσελίδα σου έχει λειτουργίες AI. Μέτρησε τον χρόνο μέχρι το πρώτο token. Παρακολούθησέ το καθημερινά. Όρισε στόχους (κάτω από πεντακόσια χιλιοστά του δευτερολέπτου είναι καλό). Προετοιμάσου για ένα μέλλον όπου αυτό θα γίνει πρότυπο. Ακόμα κι αν δεν είναι επίσημη μέτρηση ακόμα, όταν μετράς ό,τι μετράει για τους χρήστες σου, προετοιμάζεσαι για το μέλλον. Με τον δημιουργό ιστοσελίδων του WEMASY, μπορείς να το στήσεις απευθείας στην ιστοσελίδα σου.
Πώς προετοιμαζόμαστε για μελλοντικές μετρήσεις απόδοσης που δεν ξέρουμε ακόμα;
Χτίσε ευέλικτο σύστημα μέτρησης. Μέτρησε τα Core Web Vitals (σημερινό πρότυπο). Μέτρησε και προσαρμοσμένες μετρήσεις (ό,τι μετράει για την επιχείρησή σου). Όταν εμφανιστούν οι μελλοντικές μετρήσεις, θα τις προσθέσεις δίπλα στις υπάρχουσες. Η ευελιξία είναι το κλειδί.
Να επενδύσουμε σε edge computing για την απόδοση;
Ναι, αν έχεις χρήστες σε όλο τον κόσμο. Το edge computing μειώνει δραματικά το TTFB (εξαφανίζεται η καθυστέρηση δικτύου). Αξίζει την επένδυση. Αν οι χρήστες σου είναι συγκεντρωμένοι σε μία γεωγραφική περιοχή, αρκεί CDN. Το παγκόσμιο κοινό επωφελείται από το edge computing.
Πώς μετράμε την αντιληπτή απόδοση;
Ρώτα τους χρήστες. Ρώτα: νιώθει η σελίδα γρήγορη, ανταποκρινόμενη, σταθερή. Συσχέτισε τα αποτελέσματα της έρευνας με τις τεχνικές μετρήσεις. Μπορεί να δεις ότι οι χρήστες αντιλαμβάνονται τη σελίδα πιο γρήγορη ακόμα κι αν οι τεχνικές μετρήσεις είναι ίδιες. Χρησιμοποίησε τα σχόλια για τον σχεδιασμό (πρόσθεσε οθόνες σκελετού, animations, οπτική ανταπόκριση).
Γίνεται ο χρόνος μέχρι τη διαδραστικότητα (TTI) το νέο πρότυπο μέτρησης;
Πιθανόν. Το TTI έχει μεγαλύτερο νόημα από το LCP σε διαδραστικές σελίδες (ο χρήστης μπορεί να ενεργήσει πριν φορτώσει πλήρως η σελίδα). Προς το παρόν όμως, τα Core Web Vitals (LCP, CLS, INP) είναι το πρότυπο. Το TTI αναδύεται αλλά δεν είναι ακόμα επίσημο. Παρακολούθησε και τα δύο.
Πώς μένουμε ενημερωμένοι για τις νέες μετρήσεις και τα νέα πρότυπα απόδοσης;
Ακολούθησε επίσημες πηγές: ενημερώσεις της Google για την απόδοση, το blog του Web.dev, ομάδες προτύπων του W3C. Ακολούθησε τον κλάδο: περιοδικά και blogs για ανάπτυξη web, blogs εργαλείων δοκιμής ταχύτητας, ομιλίες σε συνέδρια μηχανικών. Οι νέες μετρήσεις εμφανίζονται από αυτά τα κανάλια. Μείνε ενημερωμένος. Υιοθέτησε νωρίς όταν ένα νέο πρότυπο αφορά την ιστοσελίδα σου.