Frontend Performance API Resource Timing Aggregatie: Analyse van Laadprestaties

In het streven naar uitzonderlijke gebruikerservaringen is het optimaliseren van frontend-prestaties van het grootste belang. Een cruciaal aspect van deze optimalisatie ligt in het begrijpen hoe resources op uw website of applicatie worden geladen. De Resource Timing API, een onderdeel van de bredere Performance API-suite, biedt gedetailleerde inzichten in de timing van elke resource die door de browser wordt opgehaald. Deze informatie is van onschatbare waarde voor het identificeren van knelpunten en het verbeteren van de algehele laadprestaties. Deze uitgebreide gids onderzoekt hoe u de Resource Timing API kunt benutten, de data ervan kunt aggregeren en gebruiken voor de analyse van laadprestaties.

De Resource Timing API Begrijpen

De Resource Timing API biedt gedetailleerde timinginformatie voor resources die door een webpagina worden geladen, zoals afbeeldingen, scripts, stylesheets en andere assets. Dit omvat metrieken zoals:

• Initiator Type: Het type element dat het verzoek heeft geïnitieerd (bijv. 'img', 'script', 'link').
• Name: De URL van de resource.
• Start Time: Het tijdstip waarop de browser begint met het ophalen van de resource.
• Fetch Start: Het tijdstip direct voordat de browser de resource begint op te halen uit de schijfcache of het netwerk.
• Domain Lookup Start/End: De tijdstippen die aangeven wanneer het DNS-opzoekproces begint en eindigt.
• Connect Start/End: De tijdstippen die aangeven wanneer de TCP-verbinding met de server begint en eindigt.
• Request Start/End: De tijdstippen die aangeven wanneer het HTTP-verzoek begint en eindigt.
• Response Start/End: De tijdstippen die aangeven wanneer de HTTP-respons begint en eindigt.
• Transfer Size: De grootte van de overgedragen resource in bytes.
• Encoded Body Size: De grootte van de gecodeerde (bijv. GZIP-gecomprimeerde) resource body.
• Decoded Body Size: De grootte van de gedecodeerde resource body.
• Duration: De totale tijd die is besteed aan het ophalen van de resource (responseEnd - startTime).

Deze metrieken stellen ontwikkelaars in staat om specifieke gebieden aan te wijzen waar prestatieverbeteringen kunnen worden doorgevoerd. Bijvoorbeeld, lange DNS-opzoektijden kunnen duiden op de noodzaak om over te stappen naar een snellere DNS-provider of om een CDN te gebruiken. Trage verbindingstijden kunnen wijzen op netwerkcongestie of problemen aan de serverzijde. Grote overdrachtsgroottes kunnen kansen voor beeldoptimalisatie of code-minificatie aan het licht brengen.

Toegang tot Resource Timing Data

De Resource Timing API wordt benaderd via het performance-object in JavaScript:

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

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

            

              
                Copy
              
            
          

Dit codefragment haalt alle resource timing-vermeldingen op en logt de naam en duur van elke resource naar de console. Merk op dat browsers om veiligheidsredenen het detailniveau van de Resource Timing API kunnen beperken. Dit wordt vaak geregeld door de timingAllowOrigin-header, die cross-origin resources toestaat hun timinginformatie bloot te geven.

Aggregeren van Resource Timing Data

Ruwe resource timing-data is nuttig, maar om bruikbare inzichten te verkrijgen, moet deze worden geaggregeerd en geanalyseerd. Aggregatie omvat het groeperen en samenvatten van de data om trends en patronen te identificeren. Dit kan op verschillende manieren:

Per Resource Type

Het groeperen van resources per type (bijv. afbeeldingen, scripts, stylesheets) stelt u in staat om de gemiddelde laadtijden voor elke categorie te vergelijken. Dit kan onthullen of bepaalde soorten resources consequent langzamer zijn dan andere.

            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
              
            
          

Deze code berekent de gemiddelde laadtijd voor elk resource type en logt dit naar de console. U zou bijvoorbeeld kunnen ontdekken dat afbeeldingen een aanzienlijk hogere gemiddelde laadtijd hebben dan scripts, wat wijst op de noodzaak van beeldoptimalisatie.

Per Domein

Het groeperen van resources per domein stelt u in staat de prestaties van verschillende content delivery networks (CDN's) of diensten van derden te beoordelen. Dit kan u helpen traag presterende domeinen te identificeren en alternatieve providers te overwegen.

            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
              
            
          

Deze code berekent de gemiddelde laadtijd voor elk domein en logt dit naar de console. Als u merkt dat een bepaalde CDN consequent traag is, wilt u misschien de prestaties ervan onderzoeken of overstappen naar een andere provider. Overweeg bijvoorbeeld een scenario waarin u zowel Cloudflare als Akamai gebruikt. Deze aggregatie zou u in staat stellen om hun prestaties direct te vergelijken in uw specifieke context.

Per Pagina

Het aggregeren van data per pagina (of route) stelt u in staat pagina's met bijzonder slechte prestaties te identificeren. Dit kan u helpen bij het prioriteren van optimalisatie-inspanningen en u te richten op de pagina's die de grootste impact hebben op de gebruikerservaring.

Dit vereist vaak integratie met het routeringssysteem van uw applicatie. U zou elke resource timing-vermelding moeten koppelen aan de huidige pagina-URL of route. De implementatie varieert afhankelijk van het framework dat u gebruikt (bijv. React, Angular, Vue.js).

Aangepaste Metrieken Maken

Naast de standaardmetrieken die de Resource Timing API biedt, kunt u aangepaste metrieken maken om specifieke aspecten van de prestaties van uw applicatie te volgen. U zou bijvoorbeeld de tijd willen meten die nodig is om een bepaald component te laden of een specifiek element te renderen.

Dit kan worden bereikt met de performance.mark()- en performance.measure()-methoden:

            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
              
            
          

Dit codefragment meet de tijd die nodig is om een component te laden en logt dit naar de console. U kunt deze aangepaste metrieken vervolgens op dezelfde manier aggregeren als de standaard Resource Timing API-metrieken.

Analyse van Resource Timing Data voor Prestatie-inzichten

Zodra u geaggregeerde resource timing-data heeft, kunt u deze gebruiken om specifieke gebieden voor prestatieverbetering te identificeren. Hier zijn enkele veelvoorkomende scenario's en mogelijke oplossingen:

Lange DNS-opzoektijden

• Oorzaak: Trage DNS-server, ver gelegen DNS-server, weinig frequente DNS-opzoekingen.
• Oplossing: Stap over op een snellere DNS-provider (bijv. Cloudflare, Google Public DNS), gebruik een CDN om DNS-records dichter bij gebruikers te cachen, implementeer DNS-prefetching.
• Voorbeeld: Een website die zich richt op wereldwijde gebruikers ondervond trage laadtijden in bepaalde regio's. Analyse van resource timing-data wees op lange DNS-opzoektijden in die regio's. Overstappen op een CDN met wereldwijde DNS-servers verminderde de DNS-opzoektijden aanzienlijk en verbeterde de algehele prestaties.

Trage Verbindingstijden

• Oorzaak: Netwerkcongestie, problemen aan de serverzijde, firewall-interferentie.
• Oplossing: Optimaliseer de serverinfrastructuur, gebruik een CDN om content dichter bij gebruikers te distribueren, configureer firewalls voor efficiënte communicatie.
• Voorbeeld: Een e-commerce website had last van trage verbindingstijden tijdens piekuren. Analyse van resource timing-data wees op serveroverbelasting als de primaire oorzaak. Het upgraden van serverhardware en het optimaliseren van databasequery's verbeterde de verbindingstijden en voorkwam prestatievermindering tijdens piekverkeer.

Grote Overdrachtsgroottes

• Oorzaak: Niet-geoptimaliseerde afbeeldingen, niet-geminimaliseerde code, onnodige assets.
• Oplossing: Optimaliseer afbeeldingen (bijv. comprimeren, verkleinen, moderne formaten zoals WebP gebruiken), minimaliseer JavaScript- en CSS-code, verwijder ongebruikte code en assets, schakel GZIP- of Brotli-compressie in.
• Voorbeeld: Een nieuwswebsite gebruikte grote, niet-geoptimaliseerde afbeeldingen die de laadtijden van pagina's aanzienlijk verhoogden. Het optimaliseren van afbeeldingen met tools zoals ImageOptim en het implementeren van lazy loading verminderde de overdrachtsgrootte van afbeeldingen en verbeterde de laadprestaties van de pagina.
• Internationalisatie-overweging: Zorg ervoor dat bij beeldoptimalisatie rekening wordt gehouden met verschillende schermgroottes en resoluties die in diverse regio's gebruikelijk zijn.

Trage Serverresponstijden

• Oorzaak: Inefficiënte server-side code, database-knelpunten, netwerklatentie.
• Oplossing: Optimaliseer server-side code, verbeter de databaseprestaties, gebruik een CDN om content dichter bij gebruikers te cachen, implementeer HTTP-caching.
• Voorbeeld: Een socialemediaplatform ondervond trage serverresponstijden door inefficiënte databasequery's. Het optimaliseren van databasequery's en het implementeren van cachingmechanismen verminderde de serverresponstijden aanzienlijk en verbeterde de algehele prestaties.

Render-blokkerende Resources

• Oorzaak: Synchrone JavaScript en CSS die het renderen van de pagina blokkeren.
• Oplossing: Stel het laden van niet-kritieke JavaScript uit, inline kritieke CSS, gebruik asynchroon laden voor scripts, elimineer ongebruikte CSS.
• Voorbeeld: Een blogwebsite gebruikte een groot, render-blokkerend CSS-bestand dat de initiële weergave van de pagina vertraagde. Het inlinen van kritieke CSS en het uitstellen van het laden van niet-kritieke CSS verbeterde de waargenomen prestaties van de website.

Integratie van Resource Timing Data in Tools voor Prestatiebewaking

Het handmatig verzamelen en analyseren van resource timing-data kan tijdrovend zijn. Gelukkig kunnen verschillende tools voor prestatiebewaking dit proces automatiseren en realtime inzicht bieden in de prestaties van uw website. Deze tools verzamelen doorgaans resource timing-data op de achtergrond en presenteren deze in een gebruiksvriendelijk dashboard.

Populaire tools voor prestatiebewaking die resource timing-data ondersteunen zijn onder andere:

• Google PageSpeed Insights: Biedt aanbevelingen voor het verbeteren van de paginasnelheid op basis van verschillende prestatiemetrieken, inclusief resource timing-data.
• WebPageTest: Hiermee kunt u de prestaties van uw website testen vanaf verschillende locaties en browsers, en gedetailleerde resource timing-informatie verstrekken.
• New Relic: Biedt uitgebreide mogelijkheden voor prestatiebewaking, inclusief realtime resource timing-data en visualisaties.
• Datadog: Biedt gedetailleerde resource timing-metrieken naast bredere infrastructuur- en applicatiebewaking, wat een holistisch beeld van de prestaties geeft.
• Sentry: Primair gericht op foutopsporing, maar Sentry biedt ook functies voor prestatiebewaking, inclusief resource timing-data om prestatieproblemen te correleren met specifieke fouten.
• Lighthouse: Een open-source, geautomatiseerde tool voor het verbeteren van de kwaliteit van webpagina's. Het heeft audits voor prestaties, toegankelijkheid, progressieve web-apps, SEO en meer. Kan worden uitgevoerd vanuit Chrome DevTools, de commandoregel of als een Node-module.

Door resource timing-data te integreren in deze tools, kunt u een dieper inzicht krijgen in de prestaties van uw website en effectiever gebieden voor verbetering identificeren.

Ethische Overwegingen en Privacy van Gebruikers

Bij het verzamelen en analyseren van resource timing-data is het cruciaal om rekening te houden met ethische implicaties en de privacy van gebruikers. Wees transparant naar gebruikers over de data die u verzamelt en hoe deze wordt gebruikt. Zorg ervoor dat u voldoet aan relevante privacyregelgeving, zoals GDPR en CCPA.

Vermijd het verzamelen van persoonlijk identificeerbare informatie (PII) en anonimiseer of pseudonimiseer data waar mogelijk. Implementeer passende beveiligingsmaatregelen om data te beschermen tegen ongeautoriseerde toegang of openbaarmaking. Overweeg gebruikers de mogelijkheid te bieden om zich af te melden voor prestatiebewaking.

Geavanceerde Technieken en Toekomstige Trends

De Resource Timing API evolueert voortdurend, en er ontstaan nieuwe functies en technieken om de analyse van frontend-prestaties verder te verbeteren. Hier zijn enkele geavanceerde technieken en toekomstige trends om in de gaten te houden:

Server Timing API

De Server Timing API stelt servers in staat om timinginformatie over hun verwerkingstijd voor een verzoek bloot te leggen. Deze informatie kan worden gecombineerd met resource timing-data om een vollediger beeld te geven van de end-to-end prestaties.

Long Tasks API

De Long Tasks API identificeert taken die de hoofdthread voor langere periodes blokkeren, wat UI-haperingen en responsproblemen veroorzaakt. Deze informatie kan worden gebruikt om JavaScript-code te optimaliseren en de gebruikerservaring te verbeteren.

WebAssembly (Wasm)

WebAssembly is een binair instructieformaat voor virtuele machines dat bijna-native prestaties in de browser mogelijk maakt. Het gebruik van Wasm voor prestatiekritieke taken kan de laadtijden en algehele prestaties aanzienlijk verbeteren.

HTTP/3

HTTP/3 is de nieuwste versie van het HTTP-protocol, dat het QUIC-transportprotocol gebruikt voor verbeterde prestaties en betrouwbaarheid. HTTP/3 biedt verschillende voordelen ten opzichte van HTTP/2, waaronder verminderde latentie en verbeterd verbindingsbeheer.

Conclusie

De Resource Timing API is een krachtig hulpmiddel voor het begrijpen en optimaliseren van frontend-prestaties. Door resource timing-data te aggregeren en te analyseren, kunt u knelpunten identificeren, laadtijden verbeteren en een betere gebruikerservaring bieden. Of u nu een doorgewinterde frontend-ontwikkelaar bent of net begint, het beheersen van de Resource Timing API is essentieel voor het bouwen van hoogwaardige webapplicaties. Omarm de kracht van datagestuurde optimalisatie en ontgrendel het volledige potentieel van uw website of applicatie. Vergeet niet om prioriteit te geven aan de privacy van gebruikers en ethische overwegingen bij het verzamelen en analyseren van prestatiedata. Door op de hoogte te blijven van de laatste trends en technieken, kunt u ervoor zorgen dat uw website snel, responsief en gebruiksvriendelijk blijft voor de komende jaren. Het benutten van deze technieken en tools zal bijdragen aan een performanter en wereldwijd toegankelijk web.

Direct Toepasbaar Inzicht: Begin met het implementeren van basis resource timing-aggregatie per resourcetype en domein. Dit biedt onmiddellijk inzicht in waar uw prestatieknelpunten liggen. Integreer vervolgens met een tool voor prestatiebewaking zoals Google PageSpeed Insights of WebPageTest om de dataverzameling en -analyse te automatiseren.