Page Load Analyzer

Analyze the current page's load performance using your browser's built-in Navigation Timing and Resource Timing APIs. See a detailed breakdown of every phase — from DNS lookup to full page render — all measured directly from your browser.

Page Load Analyzer
Figure 1 — Page Load Analyzer

What Is Page Load Analysis?

Page load analysis is the process of measuring and breaking down every phase of a web page's loading process — from the initial DNS lookup to the final load event. Modern browsers expose this data through the Performance API, which provides millisecond-precision timing for each phase of the page load cycle.

Understanding your page load breakdown helps identify bottlenecks. A slow DNS lookup suggests you need a faster DNS provider. A high TTFB points to server-side issues. Slow DOM processing indicates too much JavaScript or render-blocking resources. Each problem has a specific solution.

The Page Load Lifecycle

Every page load goes through these phases in order. The Navigation Timing API captures the exact duration of each:

PhaseDescriptionTarget Duration
RedirectAny HTTP redirects (301/302) before the final URL0 ms (avoid redirects)
DNS LookupResolving the domain name to an IP address< 20 ms (cached) / < 100 ms (uncached)
TCP ConnectionEstablishing the TCP three-way handshake< 50 ms to nearby server
TLS HandshakeNegotiating HTTPS encryption< 50 ms with TLS 1.3
TTFBServer processing and first byte of response< 200 ms
Content DownloadTransferring the HTML document< 100 ms for typical pages
DOM ProcessingParsing HTML, building DOM tree< 200 ms
DOMContentLoadedDOM ready, stylesheets loaded< 1500 ms total
Load EventAll resources loaded (images, fonts, etc.)< 2500 ms total

Pro Tip: The biggest performance wins usually come from optimizing TTFB (server-side caching, CDN) and reducing DOM processing time (fewer render-blocking scripts, deferred loading). If your DNS lookup is slow, consider switching to a faster resolver like Cloudflare (1.1.1.1) or Google (8.8.8.8) — you can change DNS on your router to improve all devices on your network. Verify current DNS performance with our DNS Lookup tool.

Core Web Vitals and Page Performance

Google's Core Web Vitals are the key metrics that affect both user experience and search rankings:

MetricWhat It MeasuresGoodNeeds WorkPoor
LCP (Largest Contentful Paint)Time for largest content element to render≤ 2.5s2.5-4.0s> 4.0s
FID (First Input Delay)Time from first interaction to response≤ 100ms100-300ms> 300ms
CLS (Cumulative Layout Shift)Visual stability of content≤ 0.10.1-0.25> 0.25
INP (Interaction to Next Paint)Overall responsiveness to interactions≤ 200ms200-500ms> 500ms

Optimizing Each Load Phase

Based on your analysis results, here's how to optimize each phase:

  • DNS Lookup (slow) — Use a fast DNS provider. Change DNS on your router to Cloudflare (1.1.1.1) or Google (8.8.8.8). Implement DNS prefetching with <link rel="dns-prefetch">.
  • TCP/TLS (slow) — Enable HTTP/2 or HTTP/3 for connection multiplexing. Use TLS 1.3 for faster handshakes. Verify your SSL configuration with our SSL Certificate Checker.
  • TTFB (slow) — Implement server-side caching, optimize database queries, use a CDN. Test your server with our Response Time Checker.
  • DOM Processing (slow) — Reduce JavaScript payload, defer non-critical scripts, inline critical CSS.
  • Resource Loading (slow) — Compress images, lazy-load below-fold content, use preload for critical resources.
Note: The Page Load Analyzer measures the current page's performance — that is, this very page you're viewing. To analyze a different website, open it in a new tab and use the browser's DevTools (F12 → Performance tab) or the console command performance.getEntriesByType('navigation')[0]. Results reflect your network conditions, device speed, and browser cache state. Run the analysis after a hard refresh (Ctrl+Shift+R) for uncached results.

Resource Timing Analysis

The Resource Timing API provides detailed loading information for every resource (script, stylesheet, image, font) on the page. This helps identify which specific resources are slowing down your page:

  • Blocking resources — CSS and synchronous JavaScript block rendering. Minimize and inline critical resources.
  • Large images — Use modern formats (WebP, AVIF), proper sizing, and lazy loading.
  • Third-party scripts — Analytics, ads, and social widgets often add significant load time. Defer or async-load them.
  • Font loading — Custom fonts cause text rendering delays. Use font-display: swap and preload critical fonts.

If you're experiencing overall slow connectivity, run our Speed Test to check your bandwidth and latency. Network issues on your end will affect all page load metrics.

Command Line Performance Testing

# Measure page load with curl
curl -o /dev/null -s -w "DNS: %{time_namelookup}\nConnect: %{time_connect}\nTLS: %{time_appconnect}\nTTFB: %{time_starttransfer}\nTotal: %{time_total}\n" https://example.com

# Using Lighthouse CLI
npx lighthouse https://example.com --output=json --quiet
Key Takeaways
  • The Navigation Timing API provides millisecond-precision timing for every phase of page loading.
  • TTFB under 200ms and total load under 2.5 seconds are the targets for good performance.
  • Optimizing DNS (fast resolver), server response (caching, CDN), and DOM processing (deferred scripts) gives the biggest gains.
  • Resource Timing helps identify specific slow-loading assets — images, scripts, and fonts.
  • Core Web Vitals (LCP, FID, CLS, INP) directly affect Google search rankings.
  • Run analysis after a hard refresh (Ctrl+Shift+R) for uncached baseline measurements.

Video: Web Performance Fundamentals

Related Tools and Guides

Frequently Asked Questions

What is the Navigation Timing API?

The Navigation Timing API is a browser-native JavaScript interface that provides detailed timing data about the page loading process. It tracks every phase from redirect through DNS, TCP, TLS, server processing, response download, DOM parsing, and the load event. Access it via performance.getEntriesByType('navigation').

What is a good page load time?

Google recommends a total page load time under 2.5 seconds for a good user experience. The Largest Contentful Paint (LCP) should be under 2.5 seconds, and Time to First Byte (TTFB) should be under 200ms. Mobile users typically experience longer load times, so optimize for mobile performance first.

Why is my DNS lookup slow?

Slow DNS lookup is usually caused by a slow DNS resolver, uncached DNS queries, or domains with complex CNAME chains. Switch to a faster DNS resolver like Cloudflare (1.1.1.1) or Google (8.8.8.8). You can change DNS settings on your router to improve DNS speed for all devices on your network.

What causes high TTFB?

High Time to First Byte is caused by slow server processing — typically unoptimized database queries, lack of server-side caching, insufficient server resources, or running without a CDN. Implement caching, optimize queries, and consider using a CDN to serve content from edge locations closer to users.

How do I reduce DOM processing time?

Reduce DOM processing by deferring non-critical JavaScript, minimizing render-blocking CSS, reducing DOM size (fewer nested elements), using lazy loading for below-fold content, and splitting large JavaScript bundles into smaller async chunks.

Does this tool work on mobile browsers?

Yes. The Navigation Timing and Resource Timing APIs are supported in all modern mobile browsers including Chrome, Safari, and Firefox for Android/iOS. Mobile analysis is particularly valuable since mobile networks typically add more latency to each loading phase.

About Tommy N.

Tommy is the founder of RouterHax and a network engineer with 10+ years of experience in home and enterprise networking. He specializes in router configuration, WiFi optimization, and network security. When not writing guides, he's testing the latest mesh WiFi systems and helping readers troubleshoot their home networks.

Promotion for FREE Gifts. Moreover, Free Items here. Disable Ad Blocker to get them all.

Once done, hit any button as below