Understanding Resource Timing

Looking for more tools? Check out SignCraft for Professional digital signature studio.

Learn how the Resource Timing API captures detailed performance metrics for every resource loaded on your website.

What is Resource Timing?

The Resource Timing API is a browser feature that provides detailed timing information for every resource (JavaScript, CSS, images, fonts, etc.) loaded by a web page. This data helps developers understand exactly how long each resource takes to load and identify performance bottlenecks.

Unlike simple metrics like "page load time," resource timing gives you a granular view of the entire loading process for each individual resource.

Key Timing Metrics

🔍 DNS Lookup Time

Time spent resolving the domain name to an IP address.

domainLookupEnd - domainLookupStart

Good: <50ms • Average: 50-200ms • Poor: >200ms

🔌 TCP Connection Time

Time spent establishing a TCP connection to the server.

connectEnd - connectStart

Good: <100ms • Average: 100-300ms • Poor: >300ms

🔐 TLS Negotiation Time

Time spent performing SSL/TLS handshake for HTTPS connections.

requestStart - secureConnectionStart

Good: <100ms • Average: 100-400ms • Poor: >400ms

⚡ Time to First Byte (TTFB)

Time from sending the request until receiving the first byte of the response.

responseStart - requestStart

Good: <200ms • Average: 200-600ms • Poor: >600ms

📥 Content Download Time

Time spent downloading the resource content.

responseEnd - responseStart

Varies by file size. Larger files naturally take longer.

⏱️ Total Duration

Complete time from start to finish for loading the resource.

responseEnd - startTime

Sum of all phases. Target: <500ms for most resources.

Visual Timeline

Resources go through multiple phases during loading:

DNS Lookup

TCP Connect

TLS Handshake

Request Sent

Waiting (TTFB)

Download

Each phase contributes to the total resource loading time. Optimizing any phase improves overall performance.

Resource Size Metrics

Transfer Size

The actual number of bytes transferred over the network (after compression).

resource.transferSize

Encoded Body Size

Size of the resource body after encoding/compression, excluding headers.

resource.encodedBodySize

Decoded Body Size

Size of the resource after decompression (actual size in memory).

resource.decodedBodySize

Practical Applications

How LoadTime Analyzer Uses This Data

✓Waterfall Charts: Visualizes all timing phases for every resource
✓Bottleneck Detection: Identifies slow DNS, connection, or download times
✓Third-Party Analysis: Groups resources by domain to measure third-party impact
✓Compression Check: Compares transfer size vs decoded size to verify compression
✓Performance Recommendations: Suggests optimizations based on timing data

Ready to Analyze Your Website?

Use LoadTime Analyzer to see resource timing data in action and identify performance bottlenecks.

Start Analyzing