Master Chrome Performance Tools and API for Faster Web Pages

Overview

In daily development tasks, performance optimization often references Yahoo's 35 rules, but measuring actual results and page speed requires proper tools. This article introduces the "Performance" topic, focusing on tool usage from four aspects.

Chrome Performance tool usage: how to locate issues with the browser's built‑in tools.

Performance API monitoring: how to extract performance data programmatically.

Existing third‑party detection tools.

Performance tool demo: a small example applying the Performance panel.

Chrome Performance Tool Usage

The Chrome Performance panel consists of several sections.

Controls

Start/stop recording, reload, and clear the recorded data.

"Record/Stop": record interaction performance data.

"Reload": record first‑paint performance data.

"Clear": clear the report.

The second area lets you toggle panels such as Screenshots, Memory, and Web Vitals.

Screenshots: view screen captures in the overview.

Memory: monitor memory usage.

Web Vitals: display core web vitals.

Overview Panel

Shows a high‑level view of page behavior with three graphs.

FPS: higher green bars indicate higher frames per second; red blocks mark long frames.

CPU: area chart indicating which events consume CPU resources.

Network (NET): colored bars represent resources; longer bars mean longer load times. Light colors show waiting time, dark colors show transfer time. Colors: blue = HTML, yellow = Script, purple = Stylesheet, green = Media, gray = Other.

Flame Chart

Visualizes CPU stack information. You can filter by Network, Frames, Interactions, Main, etc. Vertical lines indicate key events: DOMContentLoaded (blue), first paint (green), and load (red).

Detail Panel

When an event is selected, detailed information appears; otherwise, the panel shows summary data for the selected time range.

Summary panel: shows total load time and stage durations. Important colors: yellow = Scripting, purple = Rendering.

Bottom‑Up panel: columns for Self Time, Total Time, and Activity (links to source maps).

Call‑Tree panel: top‑down view of call stacks.

Event‑Log panel: lists all events with timing and filter options.

Performance API Monitoring Web Page Performance

The W3C defines a Performance standard; browsers expose it via the window.performance object, which includes memory , navigation , and timing objects.

memory: provides heap size limits and usage ( jsHeapSizeLimit, totalJSHeapSize, usedJSHeapSize).

navigation: describes how the page was reached (e.g., redirectCount, type).

timing: high‑precision timestamps for key loading milestones such as navigationStart, fetchStart, domainLookupStart, connectStart, requestStart, responseStart, domContentLoadedEventStart, loadEventStart, etc.

Methods

window.performance.now()

returns a high‑resolution timestamp (microsecond precision) that is monotonic and not affected by system clock changes. window.performance.getEntries() returns an array of performance entry objects describing each resource request.

const fun = () => {
    // do something
}
const startExecuteTime = window.performance.now();
fun();
const endExecuteTime = window.performance.now();
console.log("fun executed in " + (endExecuteTime - startExecuteTime) + " ms");

Simple Metric Calculation

A monitoring system typically consists of data collection and reporting. Data collection uses the Performance API to compute metrics such as redirect time, DNS lookup time, TCP connection time, HTTP request time, DOM parsing time, white‑screen time, DOMContentLoaded time, and onload time. Reporting can be done via navigator.sendBeacon for reliable, asynchronous transmission.

Redirect time = redirectEnd - redirectStart;
DNS lookup time = domainLookupEnd - domainLookupStart;
TCP connection time = connectEnd - connectStart;
HTTP request time = responseEnd - responseStart;
DOM parsing time = domComplete - domInteractive;
White‑screen time = responseStart - navigationStart;
DOM ready time = domContentLoadedEventEnd - navigationStart;
onload time = loadEventEnd - navigationStart;

Existing Web Performance Detection Tools

Lighthouse

PageSpeed Insights

YSlow

Lighthouse not only provides performance metrics but also offers optimization suggestions.

Performance Tool Demo

A real project suffered from chaotic routing, bundling, and resource loading, resulting in a 2 s DOMContentLoaded time. After refactoring the entry points and removing an unnecessary encoding.js file (which accounted for ~80% of load time), DCL dropped to 972 ms.

Summary

The article demonstrates how to locate performance problems using Chrome's built‑in tools and how to compute custom metrics with the Performance API. While internal tools like Slardar provide comprehensive analysis, understanding these basic tools and APIs is valuable for everyday front‑end work.

References

Yahoo 35 Rules: https://juejin.cn/post/6844903657318645767

Performance API Overview: https://bytedance.feishu.cn/docs/doccnZoHj24ab8HVh42aQEowZGh#

React Performance Measurement: https://juejin.cn/post/6844903869378641933#heading-4

React Profiler Introduction: https://zh-hans.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html