Web performance is important because users expect a quick response experience. 1. The Navigation Timing API provides time stamps for each stage of page loading, such as DNS lookup, DOM loading, etc.; 2. Obtain key metrics by calculating the time difference, such as page loading time, DOM ready time, and server waiting time; 3. You can record these data with scripts and integrate them into analysis tools; 4. Other APIs such as Performance Observer, Resource Timing, and Long Tasks can deeply analyze performance bottlenecks; 5. It is recommended to start tracking from basic metrics and optimize user experience with resource loading information.

Web performance matters because users expect fast, responsive experiences. One of the best ways to measure how quickly a page loads and performs is by using browser APIs like the Navigation Timing API. These tools give you access to detailed timing data straight from the browser, so you can see what's actually happening when your page loads.

What is the Navigation Timing API?

The Navigation Timing API gives developers fine-grained timing information about how long it takes for a web page to load. It's built into modern browsers and exposes timestamps for different phases of the page load process — things like when DNS lookup starts, when the page begins loading, when the DOM is ready, etc.

You don't need to install anything extra to use it. Just open the browser console and check performance.timing (though note: in newer specs, this has been replaced by performance.getEntriesByType('navigation') , ??which is more standardized).

Some key timestamps include:

• fetchStart : When the browser starts fetching the page
• responseEnd : When the server finishes sending the response
• domContentLoadedEventEnd : When the DOM is fully loaded and parsed
• loadEventEnd : When the entire page (including assets) is done loading

These values ??are all in millionseconds since the Unix epoch, so you usually subtract them from each other to get durations.

How to calculate meaningful metrics with it

Using these timestamps, you can compute several useful performance metrics that reflect real user experience.

For example:

• Page load time : loadEventEnd - fetchStart
• Time to DOM ready : domContentLoadedEventEnd - fetchStart
• Time spent waiting for the server : responseEnd - requestStart

Once you have these numbers, you can log them to analytics tools or monitor trends over time.

A common approach is to write a small script that runs after the page loads and reports these values:

 window.addEventListener('load', function() {
  const perfData = performance.getEntriesByType("navigation")[0];
  console.log('Full load time:', perfData.loadEventEnd - perfData.fetchStart);
});

This helps you track performance without needing complex tooling.

Other browser APIs worth considering

While the Navigation Timing API is great for high-level page load insights, there are other browser APIs that offer deeper looks at specific aspects of performance.

• Performance Observer API : Lets you watch for new performance entries as they're added to the performance timeline.
• Resource Timing API : Gives detailed network timing info for each resource (like images, scripts, etc.) loaded on the page.
• Long Tasks API : Helps detect tasks that block the main thread for more than 50ms — which can cause jank or unresponsiveness.

Together, these APIs form a powerful toolkit for understanding performance bottlenecks directly from the user's browser.

Where to go from here

If you want to start tracking performance today, begin by logging basic metrics like load time and DOM ready time using the Navigation Timing API. From there, explore Resource Timing to understand how individual assets affect load speed.

And remember — measuring performance isn't just about getting numbers. It's about understanding where delays happen and improving the actual user experience.

Basically that's it.

The above is the detailed content of How can you measure web performance using browser APIs like the Navigation Timing API?. For more information, please follow other related articles on the PHP Chinese website!