Agregacija Vremena Resursa Frontend Performance API-ja: Analitika Performansi Učitavanja

U težnji za pružanjem izvanrednih korisničkih iskustava, optimizacija performansi frontenda je od presudne važnosti. Kritičan aspekt ove optimizacije leži u razumijevanju kako se resursi učitavaju na vašoj web stranici ili aplikaciji. Resource Timing API, dio šireg Performance API paketa, pruža detaljne uvide u vrijeme svakog resursa dohvaćenog od strane preglednika. Ove informacije su neprocjenjive za identificiranje uskih grla i poboljšanje ukupnih performansi učitavanja. Ovaj sveobuhvatni vodič istražuje kako iskoristiti Resource Timing API, agregirati njegove podatke i koristiti ih za analitiku performansi učitavanja.

Razumijevanje Resource Timing API-ja

Resource Timing API pruža detaljne informacije o vremenu za resurse koje učitava web stranica, kao što su slike, skripte, stilski listovi i ostali resursi. To uključuje metrike kao što su:

• Vrsta pokretača: Vrsta elementa koji je pokrenuo zahtjev (npr. 'img', 'script', 'link').
• Naziv: URL resursa.
• Vrijeme početka: Vremenska oznaka kada preglednik počinje dohvaćati resurs.
• Početak dohvata: Vremenska oznaka neposredno prije nego što preglednik počne dohvaćati resurs iz predmemorije diska ili mreže.
• Početak/kraj DNS pretrage: Vremenske oznake koje označavaju kada proces DNS pretrage počinje i završava.
• Početak/kraj povezivanja: Vremenske oznake koje označavaju kada TCP veza s poslužiteljem počinje i završava.
• Početak/kraj zahtjeva: Vremenske oznake koje označavaju kada HTTP zahtjev počinje i završava.
• Početak/kraj odgovora: Vremenske oznake koje označavaju kada HTTP odgovor počinje i završava.
• Veličina prijenosa: Veličina prenesenog resursa u bajtovima.
• Veličina kodiranog tijela: Veličina kodiranog (npr. GZIP komprimiranog) tijela resursa.
• Veličina dekodiranog tijela: Veličina dekodiranog tijela resursa.
• Trajanje: Ukupno vrijeme provedeno na dohvaćanju resursa (responseEnd - startTime).

Ove metrike omogućuju programerima da precizno odrede specifična područja gdje se mogu napraviti poboljšanja performansi. Na primjer, dugo vrijeme DNS pretrage moglo bi sugerirati prelazak na bržeg DNS providera ili korištenje CDN-a. Sporo vrijeme povezivanja moglo bi ukazivati na zagušenje mreže ili probleme na strani poslužitelja. Velike veličine prijenosa mogle bi istaknuti prilike za optimizaciju slika ili minifikaciju koda.

Pristup podacima o vremenu resursa

Resource Timing API-ju pristupa se putem performance objekta u JavaScriptu:

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

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

            

              
                Copy
              
            
          

Ovaj isječak koda dohvaća sve unose o vremenu resursa i ispisuje naziv i trajanje svakog resursa u konzolu. Imajte na umu da, iz sigurnosnih razloga, preglednici mogu ograničiti razinu detalja koju pruža Resource Timing API. To se često kontrolira pomoću zaglavlja timingAllowOrigin, koje omogućuje resursima s drugih domena da izlože svoje informacije o vremenu.

Agregiranje podataka o vremenu resursa

Sirovi podaci o vremenu resursa su korisni, ali da bi se dobili praktični uvidi, potrebno ih je agregirati i analizirati. Agregacija uključuje grupiranje i sažimanje podataka kako bi se identificirali trendovi i obrasci. To se može učiniti na nekoliko načina:

Prema vrsti resursa

Grupiranje resursa prema vrsti (npr. slike, skripte, stilski listovi) omogućuje usporedbu prosječnih vremena učitavanja za svaku kategoriju. To može otkriti jesu li određene vrste resursa dosljedno sporije od drugih.

            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
              
            
          

Ovaj kod izračunava prosječno vrijeme učitavanja za svaku vrstu resursa i ispisuje ga u konzolu. Na primjer, mogli biste otkriti da slike imaju znatno veće prosječno vrijeme učitavanja od skripti, što ukazuje na potrebu za optimizacijom slika.

Prema domeni

Grupiranje resursa prema domeni omogućuje vam procjenu performansi različitih mreža za isporuku sadržaja (CDN) ili usluga trećih strana. To vam može pomoći da identificirate domene sa slabim performansama i razmotrite alternativne pružatelje usluga.

            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
              
            
          

Ovaj kod izračunava prosječno vrijeme učitavanja za svaku domenu i ispisuje ga u konzolu. Ako primijetite da je određeni CDN dosljedno spor, možda biste trebali istražiti njegove performanse ili prijeći na drugog pružatelja usluga. Na primjer, razmislite o scenariju u kojem koristite i Cloudflare i Akamai. Ova agregacija omogućila bi vam izravnu usporedbu njihovih performansi u vašem specifičnom kontekstu.

Prema stranici

Agregiranje podataka prema stranici (ili ruti) omogućuje vam identificiranje stranica s posebno lošim performansama. To vam može pomoći da prioritetizirate napore optimizacije i usredotočite se na stranice koje imaju najveći utjecaj na korisničko iskustvo.

To često zahtijeva integraciju s usmjerivačkim (routing) sustavom vaše aplikacije. Morali biste povezati svaki unos o vremenu resursa s trenutnim URL-om stranice ili rutom. Implementacija bi se razlikovala ovisno o okviru koji koristite (npr. React, Angular, Vue.js).

Stvaranje prilagođenih metrika

Osim standardnih metrika koje pruža Resource Timing API, možete stvoriti prilagođene metrike za praćenje specifičnih aspekata performansi vaše aplikacije. Na primjer, možda želite izmjeriti vrijeme potrebno za učitavanje određene komponente ili renderiranje određenog elementa.

To se može postići pomoću metoda performance.mark() i 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
              
            
          

Ovaj isječak koda mjeri vrijeme potrebno za učitavanje komponente i ispisuje ga u konzolu. Zatim možete agregirati ove prilagođene metrike na isti način kao i standardne metrike Resource Timing API-ja.

Analiziranje podataka o vremenu resursa za uvide u performanse

Jednom kada ste agregirali podatke o vremenu resursa, možete ih koristiti za identifikaciju specifičnih područja za poboljšanje performansi. Evo nekoliko uobičajenih scenarija i potencijalnih rješenja:

Dugo vrijeme DNS pretrage

• Uzrok: Spor DNS poslužitelj, udaljeni DNS poslužitelj, rijetke DNS pretrage.
• Rješenje: Prijeđite na bržeg DNS providera (npr. Cloudflare, Google Public DNS), iskoristite CDN za predmemoriranje DNS zapisa bliže korisnicima, implementirajte DNS prefetching.
• Primjer: Web stranica namijenjena korisnicima diljem svijeta imala je spora vremena učitavanja u određenim regijama. Analiza podataka o vremenu resursa otkrila je duga vremena DNS pretrage u tim regijama. Prelazak na CDN s globalnim DNS poslužiteljima značajno je smanjio vrijeme DNS pretrage i poboljšao ukupne performanse.

Spora vremena povezivanja

• Uzrok: Zagušenje mreže, problemi na strani poslužitelja, smetnje vatrozida.
• Rješenje: Optimizirajte infrastrukturu poslužitelja, koristite CDN za distribuciju sadržaja bliže korisnicima, konfigurirajte vatrozide kako bi omogućili učinkovitu komunikaciju.
• Primjer: E-trgovina je imala spora vremena povezivanja tijekom vršnih sati kupnje. Analiza podataka o vremenu resursa ukazala je na preopterećenje poslužitelja kao primarni uzrok. Nadogradnja hardvera poslužitelja i optimizacija upita baze podataka poboljšali su vremena povezivanja i spriječili degradaciju performansi tijekom vršnog prometa.

Velike veličine prijenosa

• Uzrok: Neoptimizirane slike, neminificirani kod, nepotrebni resursi.
• Rješenje: Optimizirajte slike (npr. komprimirajte, promijenite veličinu, koristite moderne formate poput WebP), minificirajte JavaScript i CSS kod, uklonite nekorišteni kod i resurse, omogućite GZIP ili Brotli kompresiju.
• Primjer: Novinska web stranica koristila je velike, neoptimizirane slike koje su značajno povećavale vrijeme učitavanja stranice. Optimizacija slika pomoću alata kao što je ImageOptim i implementacija lijenog učitavanja (lazy loading) smanjila je veličinu prijenosa slika i poboljšala performanse učitavanja stranice.
• Razmatranje internacionalizacije: Osigurajte da optimizacija slika uzima u obzir različite veličine zaslona i rezolucije uobičajene u različitim regijama.

Spora vremena odziva poslužitelja

• Uzrok: Neučinkovit kod na strani poslužitelja, uska grla u bazi podataka, mrežna latencija.
• Rješenje: Optimizirajte kod na strani poslužitelja, poboljšajte performanse baze podataka, koristite CDN za predmemoriranje sadržaja bliže korisnicima, implementirajte HTTP predmemoriranje.
• Primjer: Platforma društvenih medija imala je spora vremena odziva poslužitelja zbog neučinkovitih upita baze podataka. Optimizacija upita baze podataka i implementacija mehanizama predmemoriranja značajno su smanjili vremena odziva poslužitelja i poboljšali ukupne performanse.

Resursi koji blokiraju renderiranje

• Uzrok: Sinkroni JavaScript i CSS koji blokiraju renderiranje stranice.
• Rješenje: Odgodite učitavanje nekritičnog JavaScripta, umetnite kritični CSS (inline critical CSS), koristite asinkrono učitavanje za skripte, eliminirajte nekorišteni CSS.
• Primjer: Blog web stranica koristila je veliku CSS datoteku koja je blokirala renderiranje i odgađala početno prikazivanje stranice. Umetanje kritičnog CSS-a i odgađanje učitavanja nekritičnog CSS-a poboljšalo je percipirane performanse web stranice.

Integracija podataka o vremenu resursa u alate za praćenje performansi

Ručno prikupljanje i analiziranje podataka o vremenu resursa može biti dugotrajno. Srećom, nekoliko alata za praćenje performansi može automatizirati ovaj proces i pružiti uvide u performanse vaše web stranice u stvarnom vremenu. Ovi alati obično prikupljaju podatke o vremenu resursa u pozadini i prikazuju ih na korisnički prijateljskoj nadzornoj ploči.

Popularni alati za praćenje performansi koji podržavaju podatke o vremenu resursa uključuju:

• Google PageSpeed Insights: Pruža preporuke za poboljšanje brzine stranice na temelju različitih metrika performansi, uključujući podatke o vremenu resursa.
• WebPageTest: Omogućuje vam testiranje performansi vaše web stranice s različitih lokacija i preglednika, pružajući detaljne informacije o vremenu resursa.
• New Relic: Nudi sveobuhvatne mogućnosti praćenja performansi, uključujući podatke o vremenu resursa u stvarnom vremenu i vizualizacije.
• Datadog: Pruža detaljne metrike vremena resursa uz šire praćenje infrastrukture i aplikacija, nudeći cjelovit pogled na performanse.
• Sentry: Primarno usmjeren na praćenje pogrešaka, Sentry također pruža značajke praćenja performansi, uključujući podatke o vremenu resursa za povezivanje problema s performansama s određenim pogreškama.
• Lighthouse: Automatizirani alat otvorenog koda za poboljšanje kvalitete web stranica. Ima revizije za performanse, pristupačnost, progresivne web aplikacije, SEO i još mnogo toga. Može se pokrenuti iz Chrome DevTools-a, s naredbenog retka ili kao Node modul.

Integriranjem podataka o vremenu resursa u ove alate, možete steći dublje razumijevanje performansi vaše web stranice i učinkovitije identificirati područja za poboljšanje.

Etička razmatranja i privatnost korisnika

Prilikom prikupljanja i analiziranja podataka o vremenu resursa, ključno je uzeti u obzir etičke implikacije i privatnost korisnika. Budite transparentni s korisnicima o podacima koje prikupljate i kako se koriste. Osigurajte da ste u skladu s relevantnim propisima o privatnosti, kao što su GDPR i CCPA.

Izbjegavajte prikupljanje osobnih identifikacijskih podataka (PII) i anonimizirajte ili pseudonimizirajte podatke gdje je to moguće. Implementirajte odgovarajuće sigurnosne mjere za zaštitu podataka od neovlaštenog pristupa ili otkrivanja. Razmislite o pružanju korisnicima mogućnosti isključivanja praćenja performansi.

Napredne tehnike i budući trendovi

Resource Timing API se neprestano razvija, a nove značajke i tehnike se pojavljuju kako bi dodatno poboljšale analitiku performansi frontenda. Evo nekih naprednih tehnika i budućih trendova na koje treba obratiti pozornost:

Server Timing API

Server Timing API omogućuje poslužiteljima da izlože informacije o vremenu obrade zahtjeva. Te se informacije mogu kombinirati s podacima o vremenu resursa kako bi se dobila potpunija slika cjelokupnih (end-to-end) performansi.

Long Tasks API

Long Tasks API identificira zadatke koji blokiraju glavnu nit na duže vrijeme, uzrokujući 'trzanje' korisničkog sučelja i probleme s odzivom. Ove se informacije mogu koristiti za optimizaciju JavaScript koda i poboljšanje korisničkog iskustva.

WebAssembly (Wasm)

WebAssembly je binarni format instrukcija za virtualne strojeve koji omogućuje performanse bliske nativnima u pregledniku. Korištenje Wasm-a za zadatke kritične za performanse može značajno poboljšati vremena učitavanja i ukupne performanse.

HTTP/3

HTTP/3 je najnovija verzija HTTP protokola, koja koristi transportni protokol QUIC za pružanje poboljšanih performansi i pouzdanosti. HTTP/3 nudi nekoliko prednosti u odnosu na HTTP/2, uključujući smanjenu latenciju i poboljšano upravljanje vezama.

Zaključak

Resource Timing API je moćan alat za razumijevanje i optimizaciju performansi frontenda. Agregiranjem i analiziranjem podataka o vremenu resursa, možete identificirati uska grla, poboljšati vremena učitavanja i pružiti bolje korisničko iskustvo. Bilo da ste iskusni frontend programer ili tek počinjete, ovladavanje Resource Timing API-jem je ključno za izgradnju web aplikacija visokih performansi. Prihvatite moć optimizacije vođene podacima i otključajte puni potencijal vaše web stranice ili aplikacije. Ne zaboravite dati prioritet privatnosti korisnika i etičkim razmatranjima prilikom prikupljanja i analize podataka o performansama. Informiranjem o najnovijim trendovima i tehnikama, možete osigurati da vaša web stranica ostane brza, odzivna i prilagođena korisnicima u godinama koje dolaze. Korištenje ovih tehnika i alata doprinijet će performansama i globalno dostupnijem webu.

Praktični uvid: Započnite s implementacijom osnovne agregacije vremena resursa prema vrsti resursa i domeni. To pruža trenutne uvide u to gdje se nalaze vaša uska grla u performansama. Zatim, integrirajte se s alatom za praćenje performansi poput Google PageSpeed Insights ili WebPageTest kako biste automatizirali prikupljanje i analizu podataka.