Navigation og resource timings — Browserens performance-API

Navigation Timing og Resource Timing er del af W3C Performance API — et sæt browser-interfaces der eksponerer detaljerede netværks- og timing-data direkte i JavaScript. De er fundamentet for real user monitoring (RUM) og giver præcise målinger af hvad brugerne faktisk oplever i modsætning til syntetiske tests. For SEO er de relevante fordi de giver adgang til de samme metrics Google bruger som rankingsignaler — TTFB og LCP kan beregnes direkte fra disse APIs.

Navigation Timing — sidens indlæsningsforløb

PerformanceNavigationTiming dækker den primære dokument-navigation og afslører hvert trin:

const nav = performance.getEntriesByType('navigation')[0];

console.log('DNS lookup:', nav.domainLookupEnd - nav.domainLookupStart, 'ms');
console.log('TCP connect:', nav.connectEnd - nav.connectStart, 'ms');
console.log('TTFB:', nav.responseStart - nav.requestStart, 'ms');
console.log('DOM parsing:', nav.domContentLoadedEventEnd - nav.responseEnd, 'ms');
console.log('Samlet load:', nav.loadEventEnd - nav.startTime, 'ms');

Nøgle-properties:

• domainLookupStart/End — DNS-opslag
• connectStart/End — TCP-forbindelsesetablering
• secureConnectionStart — TLS-handshake start
• requestStart / responseStart — TTFB-beregning
• responseEnd — Hele response modtaget
• domContentLoadedEventEnd — DOM klar
• loadEventEnd — Alle ressourcer indlæst

Resource Timing — individuelle ressourcer

PerformanceResourceTiming giver samme netværkstimer for hver ressource der hentes — scripts, stylesheets, billeder, fonts og API-kald:

const resources = performance.getEntriesByType('resource');

resources.forEach(r => {
  const duration = r.responseEnd - r.startTime;
  if (duration > 500) {
    console.warn(`Langsom ressource: ${r.name} — ${Math.round(duration)}ms`);
  }
});

Dette bruges til at identificere flaskehalse: hvilke ressourcer er langsomst? Hvilke serveres uden caching? Hvilke blokerer rendering?

Brug i RUM-implementering

En minimal RUM-beacon kan konstrueres direkte fra Performance API:

window.addEventListener('load', () => {
  const nav = performance.getEntriesByType('navigation')[0];

  fetch('/analytics', {
    method: 'POST',
    body: JSON.stringify({
      ttfb: Math.round(nav.responseStart - nav.requestStart),
      domReady: Math.round(nav.domContentLoadedEventEnd - nav.startTime),
      load: Math.round(nav.loadEventEnd - nav.startTime),
      url: location.href,
    }),
    keepalive: true,
  });
});

keepalive: true sikrer at beacon-kald gennemføres selv når brugeren navigerer væk fra siden.

Timing-data og Core Web Vitals

Navigation Timing er inputtet til beregning af TTFB — en indikator for server-responsivitet. Resource Timing identificerer render-blocking ressourcer der forsinker LCP. Begge er tilgængelige i PerformanceObserver for live-observering under siden er aktiv.

Google bruger Chrome User Experience Report (CrUX) — ikke direkte Performance API-data — som rankinggrundlag. Men RUM baseret på Performance API er den mest præcise måde at forstå egne brugeres oplevelse på. → Denne artikel er en del af Web Performance — Core Web Vitals og teknisk hastighed.