Πώς να αναλύσετε την απόδοση του ιστότοπου με το Lighthouse

Ελέγξτε την απόδοση του ιστότοπου χειροκίνητα, μέσω προγραμματισμού ή αυτόματα

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

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

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

Τρέξιμο φάρος με Chrome DevTools

Μπορείτε να εκτελέσετε ελέγχους απόδοσης μη αυτόματα με την επέκταση του προγράμματος περιήγησης Chrome DevTools. Απλώς ενεργοποιήστε την επέκταση από την ιστοσελίδα που θέλετε να δοκιμάσετε και επιλέξτε το πλαίσιο "Έλεγχοι".

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

Κάντε κλικ στο "Εκτέλεση ελέγχων" στη συνέχεια. Μετά την ολοκλήρωση, το Lighthouse παρέχει μια αναφορά στο περιβάλλον χρήστη της επέκτασης.

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

Στην επάνω αριστερή πλευρά του πίνακα Chrome DevTools υπάρχει ένα εικονίδιο λήψης που μπορείτε να χρησιμοποιήσετε για να κατεβάσετε την πλήρη αναφορά σε μορφή JSON. Στη συνέχεια, μπορείτε να το χρησιμοποιήσετε για να δημιουργήσετε μια αναφορά PDF μέσω του Lighthouse Report Viewer.

Λόγω του μεγάλου όγκου παραγόντων που παίζουν στον κύκλο ζωής της φόρτωσης σελίδας, είναι σημαντικό να συγκρίνετε τα αποτελέσματα σε παρτίδες. Η λήψη κατά μέσο όρο 5 διαδρομών, για παράδειγμα, θα παρέχει καλύτερη εικόνα.

Running Lighthouse μέσω προγραμματισμού

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

Παρόμοια με τα παραπάνω, μπορείτε επίσης να εκτελέσετε τον φάρο Lighthouse ακολουθώντας την τεκμηρίωση για τη χρήση της μονάδας Node μέσω προγραμματισμού. Θα μπορούσατε να δημιουργήσετε μια πλήρη εφαρμογή Node.js με το Lighthouse ;!

Αυτόματη λειτουργία του Φάρου με την πάροδο του χρόνου

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

Χρησιμοποιώντας το "Foo" για να τρέξετε το φάρο και να συγκρίνετε τα αποτελέσματα με την πάροδο του χρόνου

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

Μπορείτε να προσθέσετε διευθύνσεις URL για παρακολούθηση στο www.foo.software και να παρακολουθείτε την αλλαγή της απόδοσης. Το Foo παρέχει επίσης ειδοποιήσεις μέσω email, Slack ή PagerDuty όταν η απόδοση έχει πέσει κάτω από το όριο που ορίζει ο χρήστης, όταν επανέλθει στο φυσιολογικό και όταν οι βελτιώσεις εντοπίζονται αυτόματα!

Το καλύτερο μέρος είναι ότι μπορείτε να δημιουργήσετε έναν λογαριασμό δωρεάν! Μόλις εγγραφείτε και συνδεθείτε, κάντε κλικ στο σύνδεσμο "Σελίδες" από την επάνω πλοήγηση. Εδώ μπορείτε να προσθέσετε διευθύνσεις URL για παρακολούθηση. Το Foo αποθηκεύει αποτελέσματα και εμφανίζει ένα γράφημα χρονοδιαγράμματος που παρέχει μια απεικόνιση σημαντικών μετρήσεων. Μπορείτε να αλλάξετε ημέρες, εβδομάδες, μήνες και να αναλύσετε λεπτομερείς αναφορές.

συμπέρασμα

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