Το Resource Waterfall σχεδιάζει κάθε αίτημα της σελίδας σε μια γραμμή χρόνου, κάθε γραμμή χωρισμένη στις πραγματικές της φάσεις — σε ουρά, DNS, TCP, TLS, αναμονή και λήψη — με δείκτες για FCP, LCP, DOMContentLoaded και φόρτωση.
Όταν μια σελίδα είναι αργή, το ερώτημα είναι πάντα το ίδιο: τι περιμένει; Η απάντηση του ίδιου του προγράμματος περιήγησης βρίσκεται στον πίνακα Δικτύου, που σημαίνει άνοιγμα των Εργαλείων προγραμματισμού, σύνδεση ενός συρταριού στη σελίδα που επιθεωρείτε και επαναφόρτωση για να προλάβετε την έναρξη της φόρτωσης.
Το Resource Waterfall τοποθετεί αυτό το χρονοδιάγραμμα σε έναν αιωρούμενο πίνακα δίπλα στη σελίδα. Κάθε αίτημα εμφανίζεται ως γραμμή τοποθετημένη από την έναρξη και τμηματοποίηση ανάλογα με το πού πήγε πραγματικά ο χρόνος του: σε ουρά ή σταμάτημα, αναζήτηση DNS, σύνδεση TCP, χειραψία TLS, αναμονή για τον διακομιστή και, στη συνέχεια, λήψη. Ένα μεγάλο μπλε τμήμα είναι ένας αργός διακομιστής. ένα μακρύ πράσινο είναι μια λιπαρή λίμα? ένα μακρύ γκρι σημαίνει ότι το αίτημα καθόταν περιμένοντας τη σειρά του. Η διάκριση αποφασίζει τι πρέπει να διορθώσετε.
Οι διακεκομμένοι δείκτες σε όλη τη γραμμή χρόνου δείχνουν το First Contentful Paint, το Largest Contentful Paint, το DOMContentLoaded και το φορτίο, ώστε να μπορείτε να δείτε ποια αιτήματα ολοκληρώνονται προτού ο χρήστης δει οτιδήποτε και ποια συνεχίζονται μετά. Οι πόροι αποκλεισμού απόδοσης και οι επισκέψεις προσωρινής μνήμης επισημαίνονται σε κάθε σειρά και ένα μεμονωμένο φίλτρο αποκλεισμού μειώνει τη λίστα σε αυτό που στην πραγματικότητα καθυστερεί την πρώτη βαφή.
Φιλτράρετε ανά τύπο, αναζητήστε κατά URL ή ταξινομήστε κατά αργότερο ή μεγαλύτερο για να βρείτε γρήγορα τον χειρότερο παραβάτη. Κάντε κλικ σε οποιαδήποτε σειρά για το πλήρες URL, το πρωτόκολλο, τα μεγέθη μεταφοράς και τα αποκωδικοποιημένα, την κατάσταση και την πλήρη ανάλυση φάσης. Τα αιτήματα που φτάνουν ενώ το πλαίσιο είναι ανοιχτό, μεταδίδονται απευθείας και το Export JSON αντιγράφει ολόκληρο το χρονοδιάγραμμα, συμπεριλαμβανομένων των ορόσημων, ώστε μια εύρεση απόδοσης να μπορεί να παραδοθεί σε κάποιον άλλο χωρίς στιγμιότυπο οθόνης.
Κάθε γραμμή χωρίζεται σε ουρά, DNS, TCP, TLS, αναμονή και λήψη, έτσι ώστε ένας αργός διακομιστής, ένα παχύ αρχείο και ένα αίτημα σε ουρά να διακρίνονται αμέσως.
Οι διακεκομμένες γραμμές για FCP, LCP, DOMContentLoaded και φόρτωση δείχνουν ποια αιτήματα ολοκληρώθηκαν πριν ο χρήστης δει περιεχόμενο και ποια εξακολουθούν να εκτελούνται μετά από αυτό.
Ένα κλικ μειώνει τη λίστα στους πόρους που πραγματικά συγκρατούν την πρώτη βαφή, με τους συνολικούς αριθμούς αποκλεισμού στη γραμμή σύνοψης.
Οι πόροι που εξυπηρετούνται από την προσωρινή μνήμη επισημαίνονται και επισημαίνονται αντί να εμφανίζονται ως μυστηριώδεις σειρές μηδενικών byte, ώστε να μπορείτε να επαληθεύσετε ότι η προσωρινή αποθήκευση λειτουργεί πραγματικά.
Περιορίστε κατά τύπο — έγγραφο, CSS, JS, εικόνες, γραμματοσειρές, XHR, πολυμέσα — αναζήτηση κατά διεύθυνση URL ή ταξινόμηση κατά αργότερο ή μεγαλύτερο για να φτάσετε στον χειρότερο παραβάτη σε δευτερόλεπτα.
Αντιγράψτε ολόκληρο τον καταρράκτη ως JSON, συμπεριλαμβανομένων των ορόσημων, των συνόλων και των φάσεων ανά αίτημα, για να το επισυνάψετε σε ένα εισιτήριο ή να το συγκρίνετε με μεταγενέστερη εκτέλεση.
Φιλτράρετε σε πόρους αποκλεισμού απόδοσης και δείτε τα ακριβή φύλλα στυλ και τα σενάρια να βρίσκονται μεταξύ του επισκέπτη και του ορατού περιεχομένου σας.
Ταξινομήστε κατά την πιο αργή και παρακολουθήστε έναν πάροχο αναλυτικών στοιχείων, γραμματοσειρών ή συνομιλίας να εμφανίζεται στην κορυφή με μια μακρά φάση αναμονής που δεν έχει καμία σχέση με τον κώδικά σας.
Διαβάστε τα χρώματα της φάσης: ο χρόνος αναμονής είναι πρόβλημα backend ή CDN, ο χρόνος λήψης είναι πρόβλημα μεγέθους αρχείου. Η επιδιόρθωση είναι διαφορετική για το καθένα.
Φορτώστε ξανά και επιβεβαιώστε ότι τα στοιχεία προέρχονται από την κρυφή μνήμη και ότι τα μεγέθη μεταφοράς είναι πολύ μικρότερα από τα αποκωδικοποιημένα μεγέθη, αποδεικνύοντας ότι η συμπίεση είναι πραγματικά ενεργοποιημένη.
Εξαγάγετε το χρονοδιάγραμμα ως JSON και επισυνάψτε το σε ένα εισιτήριο, ώστε το επόμενο άτομο να βλέπει τους ίδιους αριθμούς αντί να προσπαθεί να αναπαράγει τη συνεδρία σας.
Κάντε κλικ στο εικονίδιο Resource Waterfall στο dock του DevSuite Pro. Ό,τι έχει φορτώσει η σελίδα μέχρι τώρα, εμφανίζεται αμέσως στη γραμμή χρόνου.
Φορτώστε ξανά με ανοιχτό τον πίνακα για να καταγράψετε το φορτίο από το πρώτο κιόλας αίτημα, συμπεριλαμβανομένου του ίδιου του εγγράφου και των ορόσημων της βαφής.
Πατήστε το τσιπ αποκλεισμού για να δείτε μόνο πόρους αποκλεισμού απόδοσης ή επιλέξτε έναν τύπο όπως js ή img. Ταξινόμηση κατά αργότερο για να βάλετε τον χειρότερο παραβάτη στην κορυφή.
Κάντε κλικ σε οποιαδήποτε σειρά για την πλήρη διεύθυνση URL, το πρωτόκολλο, τα μεγέθη, την κατάστασή της και μια ανάλυση ανά φάση σε χιλιοστά του δευτερολέπτου — και αντιγράψτε τη διεύθυνση URL εάν τη χρειάζεστε.
Το Export JSON αντιγράφει το πλήρες χρονοδιάγραμμα με ορόσημα και σύνολα, έτοιμα να επικολληθούν σε ένα εισιτήριο ή να διατηρηθούν ως αρχείο πριν και μετά.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 71+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
