Το Page Performance παρέχει άμεση επισκόπηση απόδοσης οποιασδήποτε ιστοσελίδας — μετρήσεις χρόνου φόρτωσης (FCP, DOMContentLoaded, πλήρης φόρτωση, TTI), στατιστικά DOM (αριθμός στοιχείων, βάθος ένθεσης, event listeners) και ανάλυση πόρων που εμφανίζει αριθμό και μέγεθος JavaScript, CSS, εικόνων, γραμματοσειρών και άλλων assets. Χρωματικά κωδικοποιημένη βαθμολογία απόδοσης δίνει γρήγορο δείκτη υγείας.
Το profiling απόδοσης με Lighthouse ή WebPageTest παρέχει βαθιά ανάλυση αλλά χρειάζεται χρόνο εκτέλεσης και παράγει συντριπτικές αναφορές. Μερικές φορές χρειάζεστε μόνο γρήγορη απάντηση: «Είναι αυτή η σελίδα γρήγορη ή αργή; Ποιο είναι το μεγαλύτερο πρόβλημα;» Το Page Performance σάς δίνει αυτή την άμεση επισκόπηση. Διαβάζει δεδομένα χρόνου από το Performance API και Navigation Timing API του browser (δεδομένα που έχουν ήδη συλλεχθεί — δεν απαιτείται επιπλέον φόρτωση σελίδας) και τα παρουσιάζει σε καθαρό, οπτικό dashboard. Η κορυφαία ενότητα εμφανίζει βασικές μετρήσεις χρόνου: First Contentful Paint (πότε εμφανίζεται το πρώτο περιεχόμενο), DOMContentLoaded (πότε αναλύεται πλήρως το HTML), Πλήρης Φόρτωση (πότε ολοκληρώνονται όλοι οι πόροι) και Time to Interactive (πότε η σελίδα γίνεται αντιδραστική). Κάθε μέτρηση έχει χρωματική κωδικοποίηση βάσει κατωφλιών Web Vitals. Η ανάλυση πόρων εμφανίζει πόσο bandwidth δαπανάται σε κάθε τύπο. Η ενότητα στατιστικών DOM εμφανίζει συνολικό αριθμό στοιχείων, μέγιστο βάθος ένθεσης και αριθμό event listeners.
Εμφανίζει First Contentful Paint (FCP), DOMContentLoaded, Πλήρης Φόρτωση Σελίδας και Time to Interactive (TTI) — τις τέσσερις πιο σημαντικές μετρήσεις απόδοσης. Κάθε μία έχει χρωματική κωδικοποίηση: πράσινο (γρήγορο), κίτρινο (μέτριο), κόκκινο (αργό) βάσει καθιερωμένων κατωφλιών Web Vitals.
Οπτικό bar chart εμφανίζοντας αριθμό και συνολικό μέγεθος κάθε τύπου πόρου: αρχεία JavaScript, CSS stylesheets, εικόνες, γραμματοσειρές και άλλα assets. Δείτε αμέσως ποιος τύπος πόρου συνεισφέρει περισσότερο στο βάρος σελίδας.
Εμφανίζει συνολικό αριθμό στοιχείων DOM, μέγιστο βάθος ένθεσης και συνολικό αριθμό event listeners. Μεγάλα μεγέθη DOM (2000+ στοιχεία) και βαθιά ένθεση (15+ επίπεδα) επισημαίνονται ως πιθανά bottlenecks απόδοσης.
Μία βαθμολογία 0-100 συνοψίζει την υγεία απόδοσης της σελίδας, με χρωματική κωδικοποίηση πράσινο (85+), κίτρινο (50-84) ή κόκκινο (0-49). Βασισμένη σε σταθμισμένο συνδυασμό μετρήσεων χρόνου και αποτελεσματικότητας πόρων.
Εμφανίζει το συνδυασμένο μέγεθος όλων των κατεβασμένων πόρων σε MB. Αναλυόμενο κατά κατηγορία ώστε να βλέπετε ότι 842 KB είναι JavaScript, 245 KB είναι εικόνες και 128 KB είναι CSS — εντοπίζοντας τους βαρύτερους συντελεστές.
Διαβάζει δεδομένα απόδοσης από το Performance API του browser — δεδομένα που έχουν ήδη συλλεχθεί κατά την κανονική φόρτωση σελίδας. Χωρίς συνθετική επανα-δοκιμή, χωρίς επιπλέον network αιτήματα και χωρίς επίδραση στην απόδοση από την εκτέλεση του εργαλείου.
Ανοίξτε οποιαδήποτε σελίδα και λάβετε άμεση επισκόπηση απόδοσης. Είναι γρήγορη (πράσινη βαθμολογία), μέτρια (κίτρινη) ή αργή (κόκκινη); Το dashboard απαντά σε αυτό σε λιγότερο από ένα δευτερόλεπτο — χωρίς αναμονή για εκτέλεση Lighthouse.
Αν η σελίδα είναι αργή, η ανάλυση πόρων δείχνει γιατί. 1,2 MB JavaScript; Αυτό είναι το bottleneck. 800 KB μη βελτιστοποιημένων εικόνων; Αυτή είναι η διόρθωση. Η οπτική ανάλυση κάνει τους βαρύτερους συντελεστές προφανείς.
Εκτελέστε Page Performance πριν κάνετε βελτιστοποιήσεις, σημειώστε τις μετρήσεις. Κάντε τις αλλαγές σας, φορτώστε ξανά και εκτελέστε ξανά. Συγκρίνετε FCP, χρόνο φόρτωσης και συνολικό βάρος σελίδας για να επαληθεύσετε ότι οι βελτιστοποιήσεις σας είχαν την αναμενόμενη επίδραση.
Εκτελέστε Page Performance στον ιστότοπό σας και σε ιστότοπους ανταγωνιστών. Συγκρίνετε χρόνους φόρτωσης, βάρη σελίδων και κατανομές πόρων. Οι ανταγωνιστές στέλνουν λιγότερο JavaScript; Είναι καλύτερα βελτιστοποιημένες οι εικόνες τους;
Εκτελέστε το εργαλείο σε βασικές σελίδες τακτικά κατά την ανάπτυξη. Αν η βαθμολογία απόδοσης μειωθεί ή το βάρος σελίδας αυξηθεί ξαφνικά, έχετε εισάγει παλινδρόμηση — εντοπίστε την πριν φτάσει στην παραγωγή.
Ανοίξτε το floating dock του DevSuite Pro και κάντε κλικ στο εικονίδιο Page Performance. Το dashboard εμφανίζεται αμέσως με δεδομένα απόδοσης για την τρέχουσα φόρτωση σελίδας.
Ελέγξτε τις τέσσερις βασικές μετρήσεις χρόνου στην κορυφή: FCP, DOMContentLoaded, Πλήρης Φόρτωση και TTI. Πράσινες τιμές είναι γρήγορες, κίτρινο είναι μέτριο, κόκκινο χρειάζεται βελτίωση.
Κοιτάξτε το bar chart πόρων για να δείτε ποιος τύπος asset είναι βαρύτερος. Το JavaScript συχνά είναι ο μεγαλύτερος συντελεστής — αν το JS υπερβαίνει τα 500 KB, μπορεί να αξίζει code-splitting ή lazy-loading.
Επισκοπήστε τα στατιστικά DOM. Αν ο αριθμός στοιχείων υπερβαίνει τα 1500 ή το βάθος ένθεσης υπερβαίνει τα 15, σκεφτείτε απλοποίηση της markup για βελτίωση απόδοσης rendering.
Η συνολική βαθμολογία δίνει γρήγορο σημείο αναφοράς. Εκτελέστε το εργαλείο πριν και μετά τις βελτιστοποιήσεις για μέτρηση της βελτίωσης.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 39+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
