Τρόπος χρήσης αρχείων HAR για ανάλυση της απόδοσης με την πάροδο του χρόνου

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

Καρτέλα Δίκτυο Chrome

Η καρτέλα δικτύου θα σας δώσει έναν πίνακα που περιέχει όλα τα στοιχεία που φορτώνονται στη σελίδα. Θα σας δείξει επίσης σχετικές πληροφορίες σχετικά με την προέλευση αυτών των στοιχείων (τομέας, κωδικός κατάστασης HTTP, μέγεθος), οι οποίοι ξεκίνησαν το αίτημα και τη σειρά με την οποία φορτώθηκαν σε αναπαράσταση καταρράκτη.

Μπορείτε να προσθέσετε περισσότερες πληροφορίες σε αυτόν τον πίνακα κάνοντας δεξί κλικ σε μία από τις κεφαλίδες του πίνακα και επιλέγοντας άλλες στήλες.

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

Τέλος, η στήλη καταρράκτη δείχνει πότε φορτώνεται το στοιχείο μαζί με τα άλλα αιτήματα.

Οι βελτιώσεις απόδοσης είναι αισθητές από αλλαγές στον κώδικα / περιβάλλον σας. Πώς λοιπόν παρακολουθούμε τι αναλύεται από την καρτέλα Δίκτυο; Εξάγοντας τη σελίδα σε μορφή HAR.

Τι είναι το αρχείο HAR;

Ένα αρχείο HAR (συντομογραφία HTTP Archive) είναι ένα αρχείο JSON που περιέχει όλες τις πληροφορίες σχετικά με τις αλληλεπιδράσεις ενός προγράμματος περιήγησης με μια σελίδα. Θα περιέχει το έγγραφο HTML και τα αντίστοιχα αρχεία JS και CSS.

Μαζί με αυτό το περιεχόμενο, ένα αρχείο HAR θα περιέχει επίσης όλες τις πληροφορίες των κεφαλίδων και τα μεταδεδομένα του προγράμματος περιήγησης (δηλαδή, την ώρα κάθε αίτησης).

Είναι σημαντικό να αναφέρουμε εδώ ότι τα cookie και τα δεδομένα φόρμας θα καταγράφονται επίσης στο αρχείο, επομένως προσέξτε να μην συμπεριλάβετε ευαίσθητες πληροφορίες (προσωπικά στοιχεία, κωδικούς πρόσβασης, αριθμούς πιστωτικών καρτών) κατά τον έλεγχο των σελίδων.

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

Δημιουργία αρχείων HAR

Google Chrome

  • Κλείστε όλα τα παράθυρα ανώνυμης περιήγησης στο Google Chrome.
  • Ανοίξτε ένα νέο παράθυρο ανώνυμης περιήγησης στο Google Chrome.
  • Μεταβείτε στην ενότητα Προβολή> Προγραμματιστής> Εργαλεία προγραμματιστών.
  • Στον πίνακα "Εργαλεία προγραμματιστή", επιλέξτε την καρτέλα "Δίκτυο".
  • Επιλέξτε τα πλαίσια ελέγχου Διατήρηση αρχείου καταγραφής και Απενεργοποίηση προσωρινής μνήμης για καταγραφή όλων των αλληλεπιδράσεων.
  • Ανανέωσε τη σελίδα.
  • Κάντε κλικ στο Export HAR (εικονίδιο κάτω βέλους) για εξαγωγή του αρχείου HAR.
  • Αποθηκεύστε το αρχείο HAR.

Firefox

  • Κλείστε όλα τα ιδιωτικά παράθυρα στον Firefox.
  • Ανοίξτε ένα νέο ιδιωτικό παράθυρο στον Firefox.
  • Μεταβείτε στα Εργαλεία> Προγραμματιστής> Δίκτυο ή ctrl-shift-E.
  • Ανανέωσε τη σελίδα.
  • Στο εικονίδιο Cog (επάνω δεξιά πλευρά της σελίδας), επιλέξτε Save All As Har.
  • Αποθηκεύστε το αρχείο HAR.
Καρτέλα Δίκτυο Firefox

Σαφάρι

  • Βεβαιωθείτε ότι το μενού Εμφάνιση ανάπτυξης στη γραμμή μενού είναι επιλεγμένο στην περιοχή Safari> Προτιμήσεις> Για προχωρημένους.
  • Επιλέξτε Αρχείο> Άνοιγμα νέου ιδιωτικού παραθύρου.
  • Επισκεφθείτε την ιστοσελίδα όπου παρουσιάζεται το ζήτημα.
  • Επιλέξτε Ανάπτυξη> Εμφάνιση Web Inspector. Εμφανίζεται το παράθυρο Web Inspector.
  • Ανανέωσε τη σελίδα.
  • Κάντε κλικ στην επιλογή Εξαγωγή στην επάνω δεξιά πλευρά του παραθύρου.
  • Αποθηκεύστε το αρχείο HAR.
Καρτέλα Δίκτυο Safari

Ανάγνωση αρχείων HAR

Μόλις έχετε ένα αρχείο HAR, μπορείτε να δοκιμάσετε μερικούς θεατές HAR στο διαδίκτυο. Το προσωπικό μου αγαπημένο είναι αυτό που δημιουργήθηκε από τον Jan Odavarko.

HAR Viewer

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

Χρήση αρχείων HAR για ανάλυση της απόδοσης μιας σελίδας

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

Κατά τη διάρκεια της ροής εργασίας μου, μου αρέσει να παρακολουθώ τις τελικές τιμές μεγέθους / χρόνου μερικών σελίδων του προϊόντος στο οποίο εργάζομαι.

Περισσότερες πληροφορίες

  • Μετρήστε τους χρόνους φόρτωσης πόρων
  • Πηγαίος κώδικας HAR Viewer

Επίσης δημοσιεύτηκε στο blog μου. Αν σας αρέσει αυτό το περιεχόμενο, ακολουθήστε με στο Twitter και στο GitHub. Φωτογραφία εξωφύλλου του William Daigneault / Unsplash