Γιατί η βελτιστοποίηση του σκορ σας στο Lighthouse δεν αρκεί για πιο γρήγορη ιστοσελίδα

Google Lighthouse

Του Geoff Graham

Περίληψη: Νιώθετε καλά με το σκορ 100% στο Lighthouse; Και πολύ καλά κάνετε! Αλλά θα πρέπει επίσης να γνωρίζετε ότι βλέπετε μόνο ένα μέρος της εικόνας της απόδοσης. Μάθετε πώς οι βαθμολογίες του Lighthouse μετρώνται διαφορετικά από άλλα εργαλεία, την επίδραση που έχει αυτό στη μέτρηση των μετρικών απόδοσης, και γιατί χρειάζεστε παρακολούθηση πραγματικών χρηστών για μια ολοκληρωμένη εικόνα.

Όλοι μας έχουμε ζήσει εκείνη τη στιγμή. Βελτιώνετε την απόδοση κάποιου ιστότοπου, εξετάζοντας κάθε χιλιοστό του δευτερολέπτου που χρειάζεται για να φορτώσει η τρέχουσα σελίδα. Έχετε ενεργοποιήσει το Google Lighthouse από τα DevTools του Chrome γιατί όλοι -και ο θείος τους- το χρησιμοποιούν για να αξιολογήσουν την απόδοση.

Μετά την εκτέλεση της 151ης αναφοράς σας και την ολοκλήρωση όλων των προτεινόμενων βελτιώσεων, βιώνετε τη νιρβάνα: ένα τέλειο 100% σκορ απόδοσης!

Ήρθε η ώρα να δώσετε στον εαυτό σας ένα χτύπημα στην πλάτη για την καλή δουλειά που κάνατε. Ίσως να μπορέσετε να το χρησιμοποιήσετε για να πάρεις την αύξηση που επιθυμούσατε! Εκτός αν, μην το κάνετε — τουλάχιστον όχι χρησιμοποιώντας το Google Lighthouse ως την μοναδική σας απόδειξη. Ξέρω ότι μια τέλεια βαθμολογία παράγει όλα τα είδη καλών συναισθημάτων. Αυτό είναι που στοχεύουμε, άλλωστε!

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

Σε τι είναι καλό το Google Lighthouse

Ακούω άλλους προγραμματιστές να καυχιούνται για τέλειες βαθμολογίες Lighthouse και βλέπω τα στιγμιότυπα οθόνης να δημοσιεύονται παντού στα κοινωνικά δίκτυα. Ε, μόλις το έκανα κι εγώ στην εισαγωγή αυτού του άρθρου!

Το Lighthouse ίσως να είναι το πιο ευρέως χρησιμοποιημένο εργαλείο για την αναφορά απόδοσης της ιστοσελίδας σας. Θα στοιχημάτιζα ότι η πανταχού παρουσία του οφείλεται περισσότερο στην ευκολία παρά στην ποιότητα των αναφορών του.

Για να συνοψίσουμε: το Google Lighthouse είναι τέλειο σε πολλά πράγαματα!

  • Είναι βολικό στην πρόσβαση,
  • Παρέχει μια ικανή ποσότητα ρυθμίσεων για διαφορετικά επίπεδα αντιμετώπισης προβλημάτων,
  • Και εκδίδει αναφορές σε χρόνο ρεκόρ.

Και τι γίνεται με εκείνο το φωτεινό και υπέροχο κινούμενο πράσινο σκορ — ποιος δεν το αγαπάει αυτό;!

Εντάξει, αυτή είναι η ρόδινη πλευρά των αναφορών Lighthouse. Είναι δίκαιο να επισημανθούν και οι περιορισμοί του. Αυτό δεν είναι για να σας αποθαρρύνω ή να αποθαρρύνω οποιονδήποτε άλλο από τη χρήση του Lighthouse, αλλά περισσότερο για να σας προειδοποιήσω ότι η βαθμολογία σας μπορεί να μην αντικατοπτρίζει τέλεια την πραγματικότητα — ή ακόμα και να ταιριάζει με τις βαθμολογίες που θα λάβετε σε άλλα εργαλεία, συμπεριλαμβανομένων των δικών σας Google PageSpeed Insights.

Δεν αντανακλά “πραγματικούς” χρήστες

Δεν δημιουργούνται όλα τα δεδομένα στην κεφαλαιακή Απόδοση Ιστού. Είναι σημαντικό να το γνωρίζετε αυτό γιατί τα δεδομένα αντιπροσωπεύουν υποθέσεις που κάνουν τα εργαλεία αναφοράς κατά την αξιολόγηση των μετρήσεων απόδοσης.

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

Ξέρετε πως υπάρχει μια ρύθμιση για να “περιορίσετε” την ταχύτητα της σύνδεσης στο διαδίκτυο; Αυτό προσομοιώνει διάφορες συνθήκες που είτε επιβραδύνουν είτε επιταχύνουν την ταχύτητα σύνδεσης, κάτι που μπορείτε να ρυθμίσετε απευθείας στο Lighthouse. Από προεπιλογή, το Lighthouse συλλέγει δεδομένα σε γρήγορη σύνδεση, αλλά μπορούμε να το ρυθμίσουμε σε κάτι πιο αργό για να αποκτήσουμε πληροφορίες σχετικά με τις αργές φορτώσεις σελίδων. Αλλά προσέξτε! Το Lighthouse στη συνέχεια εκτιμά πόσο γρήγορα θα είχε φορτώσει η σελίδα σε μια διαφορετική σύνδεση.

Και πάλι, το περιβάλλον είναι μια διαμόρφωση, όχι η πραγματικότητα. Είναι απίθανο οι περιορισμένες συνθήκες σας να ταιριάζουν με τις ταχύτητες σύνδεσης ενός μέσου πραγματικού χρήστη στον ιστότοπο, καθώς μπορεί να έχουν ταχύτερη σύνδεση δικτύου ή να λειτουργούν σε πιο αργό επεξεργαστή. Αυτό που παρέχει το Lighthouse είναι περισσότερο κάτι σαν δοκιμές “κατά παραγγελία” που είναι άμεσα διαθέσιμες.

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

Ενώ η προσομοιωμένη περιοριστική ταχύτητα είναι η προεπιλεγμένη στο Lighthouse, υποστηρίζει επίσης πιο ρεαλιστικές μεθόδους περιορισμού. Η εκτέλεση αυτών των δοκιμών θα πάρει περισσότερο χρόνο αλλά θα σας δώσει πιο ακριβή δεδομένα. Ο πιο εύκολος τρόπος για να τρέξετε το Lighthouse με πιο ρεαλιστικές ρυθμίσεις είναι να χρησιμοποιήσετε ένα διαδικτυακό εργαλείο όπως το DebugBear website speed test ή το WebPageTest.

Δεν επηρεάζει τα πυρηνικά σκορ της ιστοσελίδας σας

Αυτά τα Core Web Vitals για τα οποία όλοι μιλούν είναι τα πρότυπα μετρικά δεδομένα της Google για τη μέτρηση της απόδοσης. Πηγαίνουν πέρα από τις απλές αναφορές του τύπου «Η σελίδα σας φορτώθηκε σε Χ δευτερόλεπτα». εξετάζοντας μια σειρά από πιο σχετικές λεπτομέρειες που είναι διαγνωστικές για το πώς φορτώνει η σελίδα, πόρους που μπορεί να μπλοκάρουν άλλους πόρους, αργές αλληλεπιδράσεις χρηστών και πόσο πολύ μετατοπίζεται η σελίδα κατά τη φόρτωση πόρων και περιεχομένου. Ο Zeunert έχει άλλη μια εξαιρετική ανάρτηση εδώ στο Smashing Magazine που αναλύει κάθε μετρική λεπτομερώς.

Το κύριο σημείο εδώ είναι ότι τα προσομοιωμένα δεδομένα που παράγει το Lighthouse μπορεί (και συχνά διαφέρουν) από τα μετρικά απόδοσης άλλων εργαλείων. Δαπάνησα αρκετό χρόνο εξηγώντας αυτό σε ένα άλλο άρθρο. Το ζουμί είναι ότι οι βαθμολογίες του Lighthouse δεν επηρεάζουν τα δεδομένα των Core Web Vitals. Ο λόγος γι’ αυτό είναι ότι τα Core Web Vitals βασίζονται σε δεδομένα από πραγματικούς χρήστες που προέρχονται από την μηνιαία ενημερωμένη έκθεση Chrome User Experience (CrUX). Ενώ τα δεδομένα του CrUX μπορεί να περιορίζονται από το πόσο πρόσφατα έχουν αντληθεί τα δεδομένα, είναι μια πιο ακριβής αντανάκλαση των συμπεριφορών των χρηστών και των συνθηκών περιήγησης από τα προσομοιωμένα δεδομένα στο Lighthouse.

Το τελικό σημείο στο οποίο καταλήγω είναι ότι το Lighthouse είναι αναποτελεσματικό στη μέτρηση των μετρικών απόδοσης των Core Web Vitals. Έτσι το εξηγώ στο άρθρο μου:“Τα συνθετικά δεδομένα είναι θεμελιωδώς περιορισμένα από το γεγονός ότι εξετάζουν μόνο μία εμπειρία σε ένα προ-καθορισμένο περιβάλλον. Αυτό το περιβάλλον συχνά δεν ταιριάζει καν με τον μέσο πραγματικό χρήστη της ιστοσελίδας, ο οποίος μπορεί να έχει ταχύτερη σύνδεση δικτύου ή πιο αργό επεξεργαστή.”

Τόνισα το σημαντικό μέρος. Στην πραγματική ζωή, οι χρήστες είναι πιθανό να έχουν περισσότερες από μία εμπειρίες σε μια συγκεκριμένη σελίδα. Δεν είναι σαν να πηγαίνετε σε έναν ιστότοπο, να τον αφήσετε να φορτώσει, να καθίσετε εκεί και μετά να κλείσετε τη σελίδα· είναι πιο πιθανό να κάνετε κάτι σε αυτή τη σελίδα. Και για ένα βασικό μετρικό στοιχείο του Core Web Vital που αναζητά αργή απόδοση σε απάντηση της εισόδου του χρήστη — συγκεκριμένα, την Αλληλεπίδραση προς την Επόμενη Απόδοση (INP) — δεν υπάρχει τρόπος για το Lighthouse να το μετρήσει καθόλου!

Το ίδιο ισχύει και για ένα μετρητή όπως το Cumulative Layout Shift (CLS) που μετρά την «οπτική σταθερότητα» της διάταξης μιας σελίδας, επειδή οι μετατοπίσεις διάταξης συμβαίνουν συχνά χαμηλότερα στη σελίδα αφού ο χρήστης έχει κάνει κύλιση προς τα κάτω. Αν το Lighthouse βασιζόταν στα δεδομένα του CrUX (που δεν το κάνει), τότε θα μπορούσε να κάνει υποθέσεις βασισμένες σε πραγματικούς χρήστες που αλληλεπιδρούν με τη σελίδα και μπορούν να βιώσουν CLS. Αντίθετα, το Lighthouse περιμένει υπομονετικά την πλήρη φόρτωση της σελίδας και δεν αλληλεπιδρά ποτέ με μέρη της σελίδας, επομένως δεν έχει κανέναν τρόπο να γνωρίζει οτιδήποτε για το CLS.

Είναι όμως μια “καλή αρχή”

Αυτό είναι που θέλω να αποκομίσετε στο τέλος της ημέρας. Μια αναφορά του Lighthouse είναι εξαιρετικά καλή στην παραγωγή αναφορών γρήγορα, χάρη στα προσομοιωμένα δεδομένα που χρησιμοποιεί. Με αυτή την έννοια, θα έλεγα ότι το Lighthouse είναι ένα χρήσιμο «ένστικτο» και ίσως ακόμη και ένα πρώτο βήμα για την αναγνώριση ευκαιριών βελτιστοποίησης της απόδοσης.

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

Ακόμα καλύτερο είναι να χρησιμοποιείτε ένα εργαλείο που παρακολουθεί τους χρήστες σε πραγματικό χρόνο.

Έχω γράψει για τη χρήση του Performance API στην JavaScript για την αξιολόγηση των προσαρμοσμένων και μετρήσεων Core Web Vitals, οπότε είναι δυνατό να το κάνετε μόνοι σας. Αλλά υπάρχουν πολλές υπάρχουσες υπηρεσίες που το κάνουν αυτό για εσάς, με οπτικοποιήσεις, ιστορικά αρχεία και πραγματική παρακολούθηση χρηστών σε πραγματικό χρόνο (συχνά συντομευμένη ως RUM). Ποιες υπηρεσίες; Λοιπόν, το DebugBear είναι ένα εξαιρετικό μέρος για να ξεκινήσετε. Αναφέρθηκα νωρίτερα στον Matt Zeunert, και το DebugBear είναι το προϊόν του.

Έτσι, αν αυτό που θέλετε είναι μια πλήρης εικόνα της απόδοσης της ιστοσελίδας σας, προχωρήστε και ξεκινήστε με το Lighthouse. Αλλά μην σταματήσετε εκεί γιατί θα βλέπετε μόνο ένα μέρος της εικόνας. Θα θέλετε να συμπληρώσετε τα ευρήματά σας και να διαγνώσετε την απόδοση με την παρακολούθηση πραγματικών χρηστών για την πιο πλήρη και ακριβή εικόνα.

ΣΧΕΤΙΚΑ ΑΡΘΡΑ