Web Performance Optimization: Metrics, APIs, and Best Practices

User experience is a crucial part of web products; fast interaction, smooth animations, clear feedback, simple steps, consistency, prominent content, and accessibility are common traits of high‑quality sites. Performance, especially page load speed, often determines these traits.

Performance Collection – Real‑User Monitoring (RUM) uses the W3C Performance API suite (Navigation Timing, Resource Timing, User Timing, Performance Timeline) to gather metrics such as DOM‑ready, onload, white‑screen time, DNS lookup, TCP handshake, request/response phases, and more from actual users.

Performance Optimization

Loading Optimization Reduce resource size: compress HTML/CSS/JS, use tools like TerserPlugin, PostCSS, enable Gzip on the server. Cache resources: HTTP cache, Local Storage, Cache Storage, IndexedDB, CDN. Adjust resource priority: preload, preconnect, prefetch, lazy‑load, Service Worker. Code splitting: use webpack, tree‑shaking, webpack‑bundle‑analyzer. HTTP/2: multiplexing, header compression, Server Push.

Rendering Optimization Critical render path: delay non‑critical CSS, use async/defer. Non‑blocking JavaScript: requestAnimationFrame, requestIdleCallback, Web Workers, passive event listeners. Reduce render‑tree complexity: simplify DOM/CSSOM, avoid layout thrashing, use transform/opacity, will‑change.

Framework Optimization CSR (Client‑Side Rendering) – fast initial load, skeleton screens. SSR (Server‑Side Rendering) – server renders HTML, better first‑paint and TTI. NSR (Native‑Side Rendering) – hybrid offline templates rendered on device. ESR (Edge‑Side Rendering) – leverage CDN edge to stream static then dynamic content.

Benefit Measurement – Compare core metrics (white‑screen, first‑paint, TTI) across experiment and control groups, correlate with PV/UV and revenue, and monitor per‑browser, device, region, and network conditions.

Conclusion – Performance optimization requires a closed‑loop process: planning, execution, and post‑analysis, combined with business scenarios and front‑end‑back‑end collaboration. Continuous iteration and monitoring are essential for sustained gains.

References

Web Performance Optimization Resources – https://naluduo.vip/Web-Performance-Optimization/reference/

User‑Centric Performance Metrics – https://web.dev/i18n/zh/user-centric-performance-metrics/

Analyzing Web Front‑End Performance with window.performance – https://www.cnblogs.com/y896926473/articles/7466951.html

PWA Application Practice – https://lavas-project.github.io/pwa-book/

Detailed Browser Rendering Process – https://www.jianshu.com/p/7659d714a642

Web Caching Explained – https://zhuanlan.zhihu.com/p/90507417