Συγκέντρωση Δεδομένων Resource Timing API για την Απόδοση του Frontend: Ανάλυση Απόδοσης Φόρτωσης

Στην προσπάθεια για παροχή εξαιρετικών εμπειριών χρήστη, η βελτιστοποίηση της απόδοσης του frontend είναι πρωταρχικής σημασίας. Μια κρίσιμη πτυχή αυτής της βελτιστοποίησης έγκειται στην κατανόηση του τρόπου φόρτωσης των πόρων στον ιστότοπο ή την εφαρμογή σας. Το Resource Timing API, μέρος της ευρύτερης σουίτας Performance API, παρέχει λεπτομερείς πληροφορίες για τον χρονισμό κάθε πόρου που ανακτάται από το πρόγραμμα περιήγησης. Αυτές οι πληροφορίες είναι ανεκτίμητες για τον εντοπισμό σημείων συμφόρησης και τη βελτίωση της συνολικής απόδοσης φόρτωσης. Αυτός ο περιεκτικός οδηγός εξερευνά πώς να αξιοποιήσετε το Resource Timing API, να συγκεντρώσετε τα δεδομένα του και να τα χρησιμοποιήσετε για την ανάλυση της απόδοσης φόρτωσης.

Κατανόηση του Resource Timing API

Το Resource Timing API παρέχει λεπτομερείς πληροφορίες χρονισμού για τους πόρους που φορτώνονται από μια ιστοσελίδα, όπως εικόνες, scripts, φύλλα στυλ και άλλα στοιχεία. Αυτό περιλαμβάνει μετρήσεις όπως:

• Initiator Type: Ο τύπος του στοιχείου που ξεκίνησε το αίτημα (π.χ., 'img', 'script', 'link').
• Name: Η διεύθυνση URL του πόρου.
• Start Time: Η χρονική σήμανση όταν το πρόγραμμα περιήγησης αρχίζει να ανακτά τον πόρο.
• Fetch Start: Η χρονική σήμανση αμέσως πριν το πρόγραμμα περιήγησης αρχίσει να ανακτά τον πόρο από την κρυφή μνήμη του δίσκου ή το δίκτυο.
• Domain Lookup Start/End: Οι χρονικές σημάνσεις που υποδεικνύουν πότε ξεκινά και τελειώνει η διαδικασία αναζήτησης DNS.
• Connect Start/End: Οι χρονικές σημάνσεις που υποδεικνύουν πότε ξεκινά και τελειώνει η σύνδεση TCP με τον διακομιστή.
• Request Start/End: Οι χρονικές σημάνσεις που υποδεικνύουν πότε ξεκινά και τελειώνει το αίτημα HTTP.
• Response Start/End: Οι χρονικές σημάνσεις που υποδεικνύουν πότε ξεκινά και τελειώνει η απόκριση HTTP.
• Transfer Size: Το μέγεθος του μεταφερόμενου πόρου σε bytes.
• Encoded Body Size: Το μέγεθος του κωδικοποιημένου (π.χ. συμπιεσμένου με GZIP) σώματος του πόρου.
• Decoded Body Size: Το μέγεθος του αποκωδικοποιημένου σώματος του πόρου.
• Duration: Ο συνολικός χρόνος που δαπανήθηκε για την ανάκτηση του πόρου (responseEnd - startTime).

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

Πρόσβαση στα Δεδομένα του Resource Timing

Η πρόσβαση στο Resource Timing API γίνεται μέσω του αντικειμένου performance στην JavaScript:

            const resourceTimingEntries = performance.getEntriesByType("resource");

resourceTimingEntries.forEach(entry => {
  console.log(entry.name, entry.duration);
});

            

              
                Copy
              
            
          

Αυτό το απόσπασμα κώδικα ανακτά όλες τις εγγραφές χρονισμού πόρων και καταγράφει το όνομα και τη διάρκεια κάθε πόρου στην κονσόλα. Σημειώστε ότι, για λόγους ασφαλείας, τα προγράμματα περιήγησης ενδέχεται να περιορίζουν το επίπεδο λεπτομέρειας που παρέχεται από το Resource Timing API. Αυτό ελέγχεται συχνά από την κεφαλίδα timingAllowOrigin, η οποία επιτρέπει σε πόρους από διαφορετικές πηγές (cross-origin) να εκθέτουν τις πληροφορίες χρονισμού τους.

Συγκέντρωση Δεδομένων του Resource Timing

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

Ανά Τύπο Πόρου

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

            const resourceTypes = {};

resourceTimingEntries.forEach(entry => {
  const initiatorType = entry.initiatorType;
  if (!resourceTypes[initiatorType]) {
    resourceTypes[initiatorType] = {
      count: 0,
      totalDuration: 0,
      averageDuration: 0
    };
  }
  resourceTypes[initiatorType].count++;
  resourceTypes[initiatorType].totalDuration += entry.duration;
});

for (const type in resourceTypes) {
  resourceTypes[type].averageDuration = resourceTypes[type].totalDuration / resourceTypes[type].count;
  console.log(type, resourceTypes[type].averageDuration);
}

            

              
                Copy
              
            
          

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

Ανά Domain

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

            const resourceDomains = {};

resourceTimingEntries.forEach(entry => {
  const domain = new URL(entry.name).hostname;
  if (!resourceDomains[domain]) {
    resourceDomains[domain] = {
      count: 0,
      totalDuration: 0,
      averageDuration: 0
    };
  }
  resourceDomains[domain].count++;
  resourceDomains[domain].totalDuration += entry.duration;
});

for (const domain in resourceDomains) {
  resourceDomains[domain].averageDuration = resourceDomains[domain].totalDuration / resourceDomains[domain].count;
  console.log(domain, resourceDomains[domain].averageDuration);
}

            

              
                Copy
              
            
          

Αυτός ο κώδικας υπολογίζει τον μέσο χρόνο φόρτωσης για κάθε domain και τον καταγράφει στην κονσόλα. Εάν παρατηρήσετε ότι ένα συγκεκριμένο CDN είναι σταθερά αργό, ίσως θελήσετε να διερευνήσετε την απόδοσή του ή να μεταβείτε σε διαφορετικό πάροχο. Για παράδειγμα, σκεφτείτε ένα σενάριο όπου χρησιμοποιείτε τόσο το Cloudflare όσο και το Akamai. Αυτή η συγκέντρωση θα σας επέτρεπε να συγκρίνετε απευθείας την απόδοσή τους στο συγκεκριμένο πλαίσιο σας.

Ανά Σελίδα

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

Αυτό συχνά απαιτεί ενσωμάτωση με το σύστημα δρομολόγησης της εφαρμογής σας. Θα χρειαζόταν να συσχετίσετε κάθε εγγραφή χρονισμού πόρου με την τρέχουσα διεύθυνση URL ή διαδρομή της σελίδας. Η υλοποίηση θα διέφερε ανάλογα με το framework που χρησιμοποιείτε (π.χ., React, Angular, Vue.js).

Δημιουργία Προσαρμοσμένων Μετρήσεων

Πέρα από τις τυπικές μετρήσεις που παρέχονται από το Resource Timing API, μπορείτε να δημιουργήσετε προσαρμοσμένες μετρήσεις για να παρακολουθείτε συγκεκριμένες πτυχές της απόδοσης της εφαρμογής σας. Για παράδειγμα, μπορεί να θέλετε να μετρήσετε τον χρόνο που απαιτείται για τη φόρτωση ενός συγκεκριμένου component ή την απόδοση ενός συγκεκριμένου στοιχείου.

Αυτό μπορεί να επιτευχθεί χρησιμοποιώντας τις μεθόδους performance.mark() και performance.measure():

            performance.mark('component-start');

// Load the component

performance.mark('component-end');

performance.measure('component-load', 'component-start', 'component-end');

const componentLoadTime = performance.getEntriesByName('component-load')[0].duration;

console.log('Component load time:', componentLoadTime);

            

              
                Copy
              
            
          

Αυτό το απόσπασμα κώδικα μετρά τον χρόνο που απαιτείται για τη φόρτωση ενός component και τον καταγράφει στην κονσόλα. Στη συνέχεια, μπορείτε να συγκεντρώσετε αυτές τις προσαρμοσμένες μετρήσεις με τον ίδιο τρόπο όπως τις τυπικές μετρήσεις του Resource Timing API.

Ανάλυση Δεδομένων του Resource Timing για Πληροφορίες Απόδοσης

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

Μεγάλοι Χρόνοι Αναζήτησης DNS

• Αιτία: Αργός διακομιστής DNS, απομακρυσμένος διακομιστής DNS, σπάνιες αναζητήσεις DNS.
• Λύση: Μετάβαση σε έναν ταχύτερο πάροχο DNS (π.χ., Cloudflare, Google Public DNS), αξιοποίηση ενός CDN για την προσωρινή αποθήκευση εγγραφών DNS πιο κοντά στους χρήστες, εφαρμογή DNS prefetching.
• Παράδειγμα: Ένας ιστότοπος που απευθύνεται σε χρήστες παγκοσμίως αντιμετώπιζε αργούς χρόνους φόρτωσης σε ορισμένες περιοχές. Η ανάλυση των δεδομένων χρονισμού πόρων αποκάλυψε μεγάλους χρόνους αναζήτησης DNS σε αυτές τις περιοχές. Η μετάβαση σε ένα CDN με παγκόσμιους διακομιστές DNS μείωσε σημαντικά τους χρόνους αναζήτησης DNS και βελτίωσε τη συνολική απόδοση.

Αργοί Χρόνοι Σύνδεσης

• Αιτία: Συμφόρηση δικτύου, προβλήματα από την πλευρά του διακομιστή, παρεμβολές από firewall.
• Λύση: Βελτιστοποίηση της υποδομής του διακομιστή, χρήση ενός CDN για τη διανομή περιεχομένου πιο κοντά στους χρήστες, διαμόρφωση των firewalls για να επιτρέπουν την αποτελεσματική επικοινωνία.
• Παράδειγμα: Ένας ιστότοπος ηλεκτρονικού εμπορίου αντιμετώπιζε αργούς χρόνους σύνδεσης κατά τις ώρες αιχμής. Η ανάλυση των δεδομένων χρονισμού πόρων έδειξε την υπερφόρτωση του διακομιστή ως την κύρια αιτία. Η αναβάθμιση του υλικού του διακομιστή και η βελτιστοποίηση των ερωτημάτων στη βάση δεδομένων βελτίωσαν τους χρόνους σύνδεσης και απέτρεψαν την υποβάθμιση της απόδοσης κατά τις περιόδους αιχμής.

Μεγάλα Μεγέθη Μεταφοράς

• Αιτία: Μη βελτιστοποιημένες εικόνες, μη ελαχιστοποιημένος κώδικας, περιττά στοιχεία.
• Λύση: Βελτιστοποίηση εικόνων (π.χ., συμπίεση, αλλαγή μεγέθους, χρήση σύγχρονων μορφών όπως WebP), ελαχιστοποίηση κώδικα JavaScript και CSS, αφαίρεση αχρησιμοποίητου κώδικα και στοιχείων, ενεργοποίηση συμπίεσης GZIP ή Brotli.
• Παράδειγμα: Ένας ειδησεογραφικός ιστότοπος χρησιμοποιούσε μεγάλες, μη βελτιστοποιημένες εικόνες που αύξαναν σημαντικά τους χρόνους φόρτωσης της σελίδας. Η βελτιστοποίηση των εικόνων με εργαλεία όπως το ImageOptim και η εφαρμογή lazy loading μείωσαν τα μεγέθη μεταφοράς των εικόνων και βελτίωσαν την απόδοση φόρτωσης της σελίδας.
• Παράγοντας Διεθνοποίησης: Βεβαιωθείτε ότι η βελτιστοποίηση των εικόνων λαμβάνει υπόψη τα διαφορετικά μεγέθη οθονών και αναλύσεις που είναι κοινά σε διάφορες περιοχές.

Αργοί Χρόνοι Απόκρισης Διακομιστή

• Αιτία: Αναποτελεσματικός κώδικας από την πλευρά του διακομιστή, σημεία συμφόρησης στη βάση δεδομένων, καθυστέρηση δικτύου.
• Λύση: Βελτιστοποίηση του κώδικα από την πλευρά του διακομιστή, βελτίωση της απόδοσης της βάσης δεδομένων, χρήση ενός CDN για την προσωρινή αποθήκευση περιεχομένου πιο κοντά στους χρήστες, εφαρμογή HTTP caching.
• Παράδειγμα: Μια πλατφόρμα κοινωνικής δικτύωσης αντιμετώπιζε αργούς χρόνους απόκρισης του διακομιστή λόγω αναποτελεσματικών ερωτημάτων στη βάση δεδομένων. Η βελτιστοποίηση των ερωτημάτων της βάσης δεδομένων και η εφαρμογή μηχανισμών caching μείωσαν σημαντικά τους χρόνους απόκρισης του διακομιστή και βελτίωσαν τη συνολική απόδοση.

Πόροι που Εμποδίζουν την Απόδοση (Render-Blocking)

• Αιτία: Σύγχρονη JavaScript και CSS που εμποδίζουν την απόδοση της σελίδας.
• Λύση: Αναβολή της φόρτωσης μη κρίσιμης JavaScript, ενσωμάτωση (inlining) κρίσιμης CSS, χρήση ασύγχρονης φόρτωσης για scripts, εξάλειψη αχρησιμοποίητης CSS.
• Παράδειγμα: Ένας ιστότοπος blog χρησιμοποιούσε ένα μεγάλο αρχείο CSS που εμπόδιζε την απόδοση και καθυστερούσε την αρχική εμφάνιση της σελίδας. Η ενσωμάτωση της κρίσιμης CSS και η αναβολή της φόρτωσης της μη κρίσιμης CSS βελτίωσαν την αντιληπτή απόδοση του ιστοτόπου.

Ενσωμάτωση Δεδομένων του Resource Timing σε Εργαλεία Παρακολούθησης Απόδοσης

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

Δημοφιλή εργαλεία παρακολούθησης απόδοσης που υποστηρίζουν δεδομένα χρονισμού πόρων περιλαμβάνουν:

• Google PageSpeed Insights: Παρέχει συστάσεις για τη βελτίωση της ταχύτητας της σελίδας με βάση διάφορες μετρήσεις απόδοσης, συμπεριλαμβανομένων των δεδομένων χρονισμού πόρων.
• WebPageTest: Σας επιτρέπει να δοκιμάσετε την απόδοση του ιστοτόπου σας από διαφορετικές τοποθεσίες και προγράμματα περιήγησης, παρέχοντας λεπτομερείς πληροφορίες χρονισμού πόρων.
• New Relic: Προσφέρει ολοκληρωμένες δυνατότητες παρακολούθησης απόδοσης, συμπεριλαμβανομένων δεδομένων χρονισμού πόρων σε πραγματικό χρόνο και οπτικοποιήσεων.
• Datadog: Παρέχει λεπτομερείς μετρήσεις χρονισμού πόρων παράλληλα με την ευρύτερη παρακολούθηση υποδομής και εφαρμογών, προσφέροντας μια ολιστική άποψη της απόδοσης.
• Sentry: Κυρίως εστιασμένο στην παρακολούθηση σφαλμάτων, το Sentry παρέχει επίσης δυνατότητες παρακολούθησης απόδοσης, συμπεριλαμβανομένων δεδομένων χρονισμού πόρων για τη συσχέτιση προβλημάτων απόδοσης με συγκεκριμένα σφάλματα.
• Lighthouse: Ένα αυτοματοποιημένο εργαλείο ανοιχτού κώδικα για τη βελτίωση της ποιότητας των ιστοσελίδων. Διαθέτει ελέγχους για την απόδοση, την προσβασιμότητα, τις προοδευτικές εφαρμογές web, το SEO και άλλα. Μπορεί να εκτελεστεί από τα Chrome DevTools, από τη γραμμή εντολών ή ως Node module.

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

Ηθικά Ζητήματα και Απόρρητο Χρηστών

Κατά τη συλλογή και ανάλυση δεδομένων χρονισμού πόρων, είναι κρίσιμο να λαμβάνονται υπόψη οι ηθικές επιπτώσεις και το απόρρητο των χρηστών. Να είστε διαφανείς με τους χρήστες σχετικά με τα δεδομένα που συλλέγετε και πώς χρησιμοποιούνται. Βεβαιωθείτε ότι συμμορφώνεστε με τους σχετικούς κανονισμούς απορρήτου, όπως ο GDPR και ο CCPA.

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

Προηγμένες Τεχνικές και Μελλοντικές Τάσεις

Το Resource Timing API εξελίσσεται συνεχώς, και νέες δυνατότητες και τεχνικές αναδύονται για την περαιτέρω βελτίωση της ανάλυσης της απόδοσης του frontend. Ακολουθούν ορισμένες προηγμένες τεχνικές και μελλοντικές τάσεις που πρέπει να προσέξετε:

Server Timing API

Το Server Timing API επιτρέπει στους διακομιστές να εκθέτουν πληροφορίες χρονισμού σχετικά με τον χρόνο επεξεργασίας τους για ένα αίτημα. Αυτές οι πληροφορίες μπορούν να συνδυαστούν με δεδομένα χρονισμού πόρων για να παρέχουν μια πληρέστερη εικόνα της απόδοσης από άκρο σε άκρο (end-to-end).

Long Tasks API

Το Long Tasks API εντοπίζει εργασίες που μπλοκάρουν το κύριο νήμα (main thread) για παρατεταμένες περιόδους, προκαλώντας καθυστερήσεις στο UI (jank) και προβλήματα απόκρισης. Αυτές οι πληροφορίες μπορούν να χρησιμοποιηθούν για τη βελτιστοποίηση του κώδικα JavaScript και τη βελτίωση της εμπειρίας του χρήστη.

WebAssembly (Wasm)

Το WebAssembly είναι μια μορφή δυαδικών εντολών για εικονικές μηχανές που επιτρέπει σχεδόν εγγενή απόδοση στο πρόγραμμα περιήγησης. Η χρήση του Wasm για εργασίες κρίσιμες για την απόδοση μπορεί να βελτιώσει σημαντικά τους χρόνους φόρτωσης και τη συνολική απόδοση.

HTTP/3

Το HTTP/3 είναι η τελευταία έκδοση του πρωτοκόλλου HTTP, η οποία χρησιμοποιεί το πρωτόκολλο μεταφοράς QUIC για να παρέχει βελτιωμένη απόδοση και αξιοπιστία. Το HTTP/3 προσφέρει πολλά πλεονεκτήματα έναντι του HTTP/2, συμπεριλαμβανομένης της μειωμένης καθυστέρησης και της βελτιωμένης διαχείρισης συνδέσεων.

Συμπέρασμα

Το Resource Timing API είναι ένα ισχυρό εργαλείο για την κατανόηση και τη βελτιστοποίηση της απόδοσης του frontend. Με τη συγκέντρωση και την ανάλυση των δεδομένων χρονισμού πόρων, μπορείτε να εντοπίσετε σημεία συμφόρησης, να βελτιώσετε τους χρόνους φόρτωσης και να προσφέρετε μια καλύτερη εμπειρία χρήστη. Είτε είστε έμπειρος προγραμματιστής frontend είτε μόλις ξεκινάτε, η εξοικείωση με το Resource Timing API είναι απαραίτητη για τη δημιουργία εφαρμογών web υψηλής απόδοσης. Αγκαλιάστε τη δύναμη της βελτιστοποίησης που βασίζεται σε δεδομένα και ξεκλειδώστε το πλήρες δυναμικό του ιστοτόπου ή της εφαρμογής σας. Θυμηθείτε να δίνετε προτεραιότητα στο απόρρητο των χρηστών και στα ηθικά ζητήματα κατά τη συλλογή και ανάλυση δεδομένων απόδοσης. Παραμένοντας ενημερωμένοι για τις τελευταίες τάσεις και τεχνικές, μπορείτε να διασφαλίσετε ότι ο ιστότοπός σας παραμένει γρήγορος, αποκριτικός και φιλικός προς το χρήστη για τα επόμενα χρόνια. Η αξιοποίηση αυτών των τεχνικών και εργαλείων θα συμβάλει σε έναν πιο αποδοτικό και παγκοσμίως προσβάσιμο ιστό.

Πρακτική Συμβουλή: Ξεκινήστε εφαρμόζοντας βασική συγκέντρωση δεδομένων resource timing ανά τύπο πόρου και domain. Αυτό παρέχει άμεσες πληροφορίες για το πού βρίσκονται τα σημεία συμφόρησης της απόδοσής σας. Στη συνέχεια, ενσωματώστε ένα εργαλείο παρακολούθησης απόδοσης όπως το Google PageSpeed Insights ή το WebPageTest για να αυτοματοποιήσετε τη συλλογή και την ανάλυση δεδομένων.