Η απόδοση πέφτει. Μια σελίδα που φόρτωνε σε δύο δευτερόλεπτα τώρα φορτώνει σε τέσσερα. Κάτι άλλαξε.
Η διάγνωση απαντά: τι άλλαξε. Γιατί έπεσε η απόδοση.
Βασικές αιτίες: μια νέα λειτουργία πρόσθεσε μεγάλο πακέτο JavaScript. Ένα ερώτημα στη βάση δεδομένων έγινε αργό. Προστέθηκε script τρίτου. Μεγάλωσε το μέγεθος εικόνας. Ο διακομιστής υπερφορτώθηκε.
Η συστηματική διάγνωση βρίσκει τη βασική αιτία. Η συστηματική διόρθωση την αφαιρεί.
Μέθοδος διάγνωσης
Βήμα πρώτο: εντόπισε το σύμπτωμα. Το LCP ανέβηκε από δύο σε τέσσερα δευτερόλεπτα. Το CLS ανέβηκε από 0,05 σε 0,2. Το INP ανέβηκε από 100 σε 400 χιλιοστά του δευτερολέπτου.
Βήμα δεύτερο: χρονολόγιο. Πότε ξεκίνησε η επιδείνωση. Την περασμένη εβδομάδα. Χθες. Πριν από μία ώρα. Το χρονολόγιο στενεύει την αναζήτηση.
Βήμα τρίτο: συσχέτισε με αλλαγές. Ποιος κώδικας άλλαξε. Ποιες λειτουργίες βγήκαν. Τι άλλαξε στην υποδομή. Η συσχέτιση δείχνει την αιτία.
Βήμα τέταρτο: απομόνωσε την αιτία. Η απόδοση έπεσε. Υπόθεση: το νέο πακέτο JavaScript. Δοκιμή: μέτρησε το LCP με το νέο πακέτο απενεργοποιημένο. Το LCP γυρίζει στα δύο δευτερόλεπτα. Η υπόθεση επιβεβαιώνεται.
Βήμα πέμπτο: διόρθωση ή επαναφορά. Διόρθωσε την αιτία (βελτιστοποίησε το πακέτο) ή κάνε επαναφορά (γύρνα την αλλαγή πίσω). Η απόφαση εξαρτάται από τη σοβαρότητα.
Πραγματικό παράδειγμα: πτώση απόδοσης σε e-shop
Σύμπτωμα: το LCP ανέβηκε από δύο δευτερόλεπτα σε 3,5 δευτερόλεπτα. Εντοπίστηκε από ειδοποίηση παρακολούθησης.
Χρονολόγιο: η επιδείνωση έγινε Τρίτη πρωί. Η ομάδα έβγαλε νέα μηχανή συστάσεων τη Δευτέρα βράδυ.
Συσχέτιση: η σύμπτωση δείχνει ότι η μηχανή συστάσεων προκάλεσε την επιδείνωση.
Δοκιμή απομόνωσης: απενεργοποίησε τη μηχανή συστάσεων. Το LCP γυρίζει στα δύο δευτερόλεπτα. Η μηχανή συστάσεων επιβεβαιώνεται ως αιτία.
Έλεγχος: η μηχανή συστάσεων φορτώνει εικόνες προϊόντων για τις συστάσεις. Οι εικόνες δεν είναι βελτιστοποιημένες (αρχικό μέγεθος, χωρίς συμπίεση). Η φόρτωση πενήντα εικόνων προϊόντων προσθέτει δύο megabytes στη σελίδα.
Διόρθωση: βελτιστοποίησε τις εικόνες της μηχανής συστάσεων. Συμπίεσε τις εικόνες, χρησιμοποίησε lazy loading για τις εικόνες κάτω από το ορατό τμήμα. Το μέγεθος πέφτει στα πεντακόσια kilobytes. Το LCP βελτιώνεται σε 2,2 δευτερόλεπτα.
Ανάπτυξη: κάνε επαναφορά της μηχανής συστάσεων και βγάλε τη βελτιστοποιημένη έκδοση. Το LCP γυρίζει στα 2,2 δευτερόλεπτα.
Συνηθισμένα προβλήματα απόδοσης και λύσεις
Πρόβλημα πρώτο: μεγάλο πακέτο JavaScript
- Σύμπτωμα: αργό LCP, αργό INP
- Αιτία: μια νέα λειτουργία προσθέτει κώδικα, το πακέτο μεγαλώνει
- Λύση: code splitting της λειτουργίας, lazy load της λειτουργίας
- Αναμενόμενη βελτίωση: το LCP βελτιώνεται κατά 0,5 δευτερόλεπτα
Πρόβλημα δεύτερο: αργά ερωτήματα στη βάση δεδομένων
- Σύμπτωμα: αργό TTFB
- Αιτία: ένα ερώτημα στη βάση γίνεται αργό (λείπει index, το ερώτημα ενώνει πολλούς πίνακες)
- Λύση: πρόσθεσε index στη βάση, βελτιστοποίησε το ερώτημα, κάνε caching στα αποτελέσματα
- Αναμενόμενη βελτίωση: το TTFB βελτιώνεται κατά διακόσια χιλιοστά του δευτερολέπτου
Πρόβλημα τρίτο: μη βελτιστοποιημένες εικόνες
- Σύμπτωμα: αργό LCP, υψηλή κατανάλωση εύρους ζώνης
- Αιτία: οι εικόνες είναι μεγάλες (χωρίς συμπίεση, λάθος μορφή)
- Λύση: συμπίεσε τις εικόνες, μετάτρεψέ τες σε WebP, χρησιμοποίησε προσαρμοζόμενες εικόνες
- Αναμενόμενη βελτίωση: το LCP βελτιώνεται κατά ένα δευτερόλεπτο
Πρόβλημα τέταρτο: scripts τρίτων
- Σύμπτωμα: αργό LCP, η σελίδα δεν ανταποκρίνεται
- Αιτία: στατιστικά, παρακολούθηση και διαφημίσεις τρίτων επιβραδύνουν τη σελίδα
- Λύση: lazy load στα scripts τρίτων, χρήση web worker, ασύγχρονη φόρτωση
- Αναμενόμενη βελτίωση: το LCP βελτιώνεται κατά 0,5 δευτερόλεπτα, το INP βελτιώνεται κατά εκατό χιλιοστά του δευτερολέπτου
Πρόβλημα πέμπτο: CLS από διαφημίσεις ή ενσωματωμένα στοιχεία
- Σύμπτωμα: μετατοπίσεις διάταξης την ώρα που διαβάζεις
- Αιτία: οι διαφημίσεις φορτώνουν και πιάνουν χώρο, το περιεχόμενο μετατοπίζεται
- Λύση: κράτησε χώρο για τις διαφημίσεις, κάνε lazy load στις διαφημίσεις κάτω από το ορατό τμήμα
- Αναμενόμενη βελτίωση: το CLS βελτιώνεται από 0,2 σε 0,05
Παρακολούθηση για έγκαιρο εντοπισμό
Ειδοποίηση για επιδείνωση: αν το LCP ξεπεράσει τα 2,5 δευτερόλεπτα, ειδοποίησε την ομάδα.
Ειδοποίηση για οπισθοδρόμηση: αν το LCP ανέβει πάνω από 0,5 δευτερόλεπτα σε σχέση με την αρχική τιμή, ειδοποίησε την ομάδα.
Ειδοποίηση για επίδραση στην επιχείρηση: αν η ολοκλήρωση εγγραφής πέσει κατά ένα τοις εκατό, ειδοποίησε την ομάδα (μπορεί να δείχνει πρόβλημα απόδοσης).
Πραγματικό παράδειγμα: ειδοποιήσεις σε εταιρεία SaaS
- Ειδοποίηση πρώτη: αν το LCP ξεπεράσει τα 2,5 δευτερόλεπτα
- Ειδοποίηση δεύτερη: αν εντοπιστεί οπισθοδρόμηση απόδοσης (το LCP ανεβαίνει πενήντα τοις εκατό σε μία μέρα)
- Ειδοποίηση τρίτη: αν τα Core Web Vitals περάσουν από «καλό» σε «θέλει βελτίωση» για πάνω από πέντε τοις εκατό των χρηστών
- Ειδοποίηση τέταρτη: αν η ολοκλήρωση εγγραφής πέσει κάτω από τον στόχο (μπορεί να δείχνει πρόβλημα απόδοσης στη σελίδα ολοκλήρωσης αγοράς)
Όταν ενεργοποιηθεί η ειδοποίηση: η ομάδα μηχανικών ελέγχει μέσα σε μία ώρα. Βρίσκει τη βασική αιτία. Βγάζει τη διόρθωση την ίδια μέρα.
Πραγματικό παράδειγμα: πρόβλημα απόδοσης στην επεξεργασία πληρωμών
Σύμπτωμα: το ποσοστό εγκατάλειψης στην ολοκλήρωση αγοράς ανέβηκε από δεκαπέντε σε είκοσι πέντε τοις εκατό. Ξεκίνησε την Πέμπτη.
Έλεγχος: η απόδοση της σελίδας ολοκλήρωσης αγοράς έπεσε. Ο χρόνος αλληλεπίδρασης με το κουμπί πληρωμής ανέβηκε από διακόσια χιλιοστά του δευτερολέπτου σε ένα δευτερόλεπτο.
Χρονολόγιο: ο πάροχος πληρωμών έκανε αλλαγή στην υποδομή την Πέμπτη το πρωί.
Βασική αιτία: ο πάροχος πληρωμών μεταφέρθηκε από την Καλιφόρνια στην Ευρώπη. Η καθυστέρηση δικτύου από τον χρήστη μέχρι τον πάροχο αυξήθηκε κατά διακόσια χιλιοστά του δευτερολέπτου. Ο συνολικός χρόνος επεξεργασίας της πληρωμής έφτασε το ένα δευτερόλεπτο.
Λύση: χρησιμοποίησε κόμβο CDN κοντά στον χρήστη. Δρομολόγησε το αίτημα πληρωμής μέσω τοπικού κόμβου CDN. Ο κόμβος CDN το περνάει στον ευρωπαϊκό πάροχο πληρωμών. Η καθυστέρηση δικτύου μειώνεται. Ο χρόνος επεξεργασίας της πληρωμής γυρίζει στα διακόσια χιλιοστά του δευτερολέπτου.
Αποτέλεσμα: το ποσοστό εγκατάλειψης στην ολοκλήρωση αγοράς γυρίζει στο δεκαπέντε τοις εκατό.
Επίδραση στην επιχείρηση: πέντε χιλιάδες ολοκληρώσεις αγοράς τον μήνα με εγκατάλειψη δεκαπέντε τοις εκατό κάνουν επτακόσιες πενήντα χαμένες μετατροπές. Με αξία παραγγελίας εκατό δολάρια, είναι εβδομήντα πέντε χιλιάδες δολάρια χαμένα τον μήνα. Η διόρθωση της καθυστέρησης γλίτωσε στην εταιρεία εβδομήντα πέντε χιλιάδες δολάρια τον μήνα.
Συχνές ερωτήσεις
Πώς βρίσκουμε αν το πρόβλημα απόδοσης προέρχεται από τον κώδικα ή την υποδομή;
Δοκίμασε και τα δύο. Απενεργοποίησε τον νέο κώδικα (επαναφορά). Αν η απόδοση γυρίσει στο φυσιολογικό, η αιτία είναι ο κώδικας. Αν μείνει αργή, η αιτία είναι η υποδομή. Απομόνωσε συστηματικά. Μην κατηγορείς την υποδομή αν φταίει ο κώδικας (ή το αντίθετο). Με τον δημιουργό ιστοσελίδων του WEMASY, μπορείς να το στήσεις απευθείας στην ιστοσελίδα σου.
Να κάνουμε επαναφορά ή διόρθωση όταν πέφτει η απόδοση;
Η σοβαρότητα αποφασίζει. Αν η επιδείνωση είναι σοβαρή (το LCP ανεβαίνει από δύο σε πέντε δευτερόλεπτα), κάνε αμέσως επαναφορά. Η εμπειρία των χρηστών πλήττεται. Διόρθωσε μετά. Αν η επιδείνωση είναι μικρή (το LCP ανεβαίνει από δύο σε 2,3 δευτερόλεπτα), διόρθωσε επί τόπου. Ο κίνδυνος της επαναφοράς είναι μικρότερος από τον κίνδυνο μιας ημιτελούς διόρθωσης.
Πώς εμποδίζουμε τα προβλήματα απόδοσης να φτάσουν στην παραγωγή;
Δοκιμές απόδοσης στη διαδικασία CI/CD. Πριν από κάθε ανάπτυξη, μέτρησε την απόδοση. Αν ξεπεραστεί το όριο απόδοσης, μπλόκαρε την ανάπτυξη. Σταμάτα τις οπισθοδρομήσεις πριν συμβούν.
Τι κάνουμε αν το πρόβλημα απόδοσης είναι διακοπτόμενο;
Τα διακοπτόμενα προβλήματα είναι πιο δύσκολα στη διάγνωση. Μάζεψε περισσότερα δεδομένα. Παρακολούθησε περισσότερο. Ένα διακοπτόμενο πρόβλημα μπορεί να δείχνει: πρόβλημα δικτύου (γίνεται σε αργά δίκτυα), πρόβλημα επισκεψιμότητας (γίνεται στις ώρες αιχμής), πρόβλημα browser (γίνεται σε συγκεκριμένους browsers). Στένεψε το πεδίο. Δοκίμασε την υπόθεση σε συγκεκριμένο δίκτυο, ώρα, browser.
Πώς ενημερώνουμε τους χρήστες για προβλήματα απόδοσης;
Η διαφάνεια χτίζει εμπιστοσύνη. Αν το πρόβλημα απόδοσης είναι γνωστό και διορθώνεται, πες το στους χρήστες. Παράδειγμα: επιδείνωση απόδοσης στη σελίδα ολοκλήρωσης αγοράς λόγω μετάβασης του παρόχου πληρωμών. Η διόρθωση αναμένεται αύριο. Το ερευνούμε. Η διαφάνεια μειώνει την απογοήτευση.
Να έχουμε μηχανικό απόδοσης σε εφημερία;
Για κρίσιμες ιστοσελίδες (e-shop, SaaS), ναι. Ο μηχανικός εφημερίας απαντά στις ειδοποιήσεις απόδοσης μέσα σε τριάντα λεπτά. Ελέγχει. Βγάζει διόρθωση ή κάνει επαναφορά. Εμποδίζει το πρόβλημα απόδοσης να επηρεάσει τους χρήστες μακροπρόθεσμα.