Front-End Performance Monitoring (RUM) and Optimization Strategies

For front‑end developers, user experience is paramount, and performance is the core of that experience. The article introduces Tencent Cloud's Real‑User‑Monitoring (RUM) platform, which provides a comprehensive set of performance metrics and visualizations to evaluate page quality.

Key performance timing points from the performance.timing API are listed, including navigationStart, unloadEventStart/End, redirectStart/End, fetchStart, domainLookupStart/End, connectStart/End, secureConnectionStart, requestStart, responseStart/End, domLoading, domInteractive, domContentLoadedEventStart/End, domComplete, loadEventStart/End, and others. These timestamps form the basis for calculating various page‑load indicators.

Metric calculation examples are provided. The following JavaScript function demonstrates how to derive common timings such as total page load time, DOM ready time, redirect time, DNS lookup time, TTFB, request time, load event time, cache time, unload time, and TCP connection time:

getPerformanceTiming() {
  const t = performance.timing;
  const times = {};
  // 页面加载完成的时间，用户等待页面可用的时间
  times.loadPage = t.loadEventEnd - t.navigationStart;
  // 解析 DOM 树结构的时间
  times.domReady = t.domComplete - t.responseEnd;
  // 重定向的时间
  times.redirect = t.redirectEnd - t.redirectStart;
  // DNS 查询时间
  times.lookupDomain = t.domainLookupEnd - t.domainLookupStart;
  // 读取页面第一个字节的时间
  times.ttfb = t.responseStart - t.navigationStart;
  // 资源请求加载完成的时间
  times.request = t.responseEnd - t.requestStart;
  // 执行 onload 回调函数的时间
  times.loadEvent = t.loadEventEnd - t.loadEventStart;
  // DNS 缓存时间
  times.appcache = t.domainLookupStart - t.fetchStart;
  // 卸载页面的时间
  times.unloadEvent = t.unloadEventEnd - t.unloadEventStart;
  // TCP 建立连接完成握手的时间
  times.connect = t.connectEnd - t.connectStart;
  return times;
}

Another snippet shows how the Aegis SDK extracts a subset of these metrics, handling edge cases such as negative values for resourceDownload :

const t: PerformanceTiming = performance.timing;
if (!t) return;
// 这里不知道为什么有时候 t.loadEventStart - t.domInteractive 返回一个很大的负数，暂时先简单处理
let resourceDownload = t.loadEventStart - t.domInteractive;
if (resourceDownload < 0) resourceDownload = 1070;
result = {
  dnsLookup: t.domainLookupEnd - t.domainLookupStart,
  tcp: t.connectEnd - t.connectStart,
  ssl: t.secureConnectionStart === 0 ? 0 : t.requestStart - t.secureConnectionStart,
  ttfb: t.responseStart - t.requestStart,
  contentDownload: t.responseEnd - t.responseStart,
  domParse: t.domInteractive - t.domLoading,
  resourceDownload
};

The article then explains the relationship between RUM metrics and the Google‑defined Web Vitals (CLS, FCP, FID, LCP, TTFB). It notes that RUM already captures the three most critical Web Vitals (LCP, FID, CLS) and discusses why LCP cannot fully replace a custom “first‑screen” algorithm due to compatibility constraints.

Practical optimization case study : Using RUM data, a real project was analyzed and several performance bottlenecks were identified, such as a large monolithic JavaScript bundle, lack of HTTP/2, and excessive DOM changes after the first screen. Recommended actions included:

Code splitting (vendor bundle) and asynchronous loading of components.

Removing unnecessary libraries (e.g., replacing full lodash with lodash‑es, eliminating moment.js and jQuery when not needed).

Using webpack‑bundle‑analyzer to audit bundle size.

Enabling HTTP/2 and inlining small assets as base64.

Applying skeleton screens and pagination to stabilize layout and reduce CLS.

Using absolute positioning for ads to avoid layout shifts.

Specifying explicit width/height for images and using CSS transitions instead of JavaScript for visual changes.

After applying these optimizations, the first‑screen time dropped from 4.8 s to 3.2 s, resource‑load time was halved, and CLS improved dramatically, demonstrating the tangible impact of data‑driven performance tuning.

The article concludes that while many front‑end performance techniques are well‑known, tools like RUM help developers prioritize and validate improvements, echoing Lord Kelvin’s principle: “If you cannot measure it, you cannot improve it.”