web-vitals | BestHub

Airbnb Technology Team

Jul 16, 2024 · Frontend Development

Airbnb Web Performance Metrics and Their Measurement

Airbnb tracks five real‑user performance metrics—Time To First Contentful Paint, Time To First Meaningful Paint, First Input Delay, Total Blocking Time, and Cumulative Layout Shift—using a mix of browser APIs and custom polyfills, combines them into a weighted Page Performance Score, and leverages that score to guide trade‑off decisions and detect regressions.

Airbnbfrontendmetrics

0 likes · 11 min read

Airbnb Web Performance Metrics and Their Measurement

JD Retail Technology

Nov 30, 2023 · Frontend Development

Front‑End Performance Optimization: Understanding Browser Rendering, Web Vitals, and Practical Solutions

This article examines front‑end performance issues such as page freeze caused by heavy JavaScript computation, explains browser rendering threads, processes, and key Web Vitals (LCP, FID, CLS), and provides practical optimization techniques including code splitting, Web Workers, CDN usage, and build‑time configurations.

JavaScriptOptimizationPerformance

0 likes · 26 min read

Front‑End Performance Optimization: Understanding Browser Rendering, Web Vitals, and Practical Solutions

ZhongAn Tech Team

Nov 17, 2023 · Frontend Development

Understanding Interaction to Next Paint (INP) Metric and How to Measure It

This article explains the INP (Interaction to Next Paint) performance metric, its calculation method, satisfaction thresholds, differences from FID, and provides practical guidance on measuring INP using Chrome's CrUX, PageSpeed Insights, the web‑vitals library, Chrome extensions, and custom console scripts.

ChromeINPfrontend

0 likes · 11 min read

Understanding Interaction to Next Paint (INP) Metric and How to Measure It

Rare Earth Juejin Tech Community

Sep 9, 2023 · Frontend Development

Using Resource Hints (Prefetch, Preload, Preconnect, DNS‑Prefetch) to Optimize Frontend Loading Performance

This article explains how to use the four resource‑hint APIs—prefetch, preload, preconnect, and DNS‑prefetch—along with the crossorigin attribute and a custom npm tool (resource‑hint‑generator) to dramatically reduce page load times, improve web‑vitals, and increase cache‑hit rates, providing code examples, tables, and validation steps.

PreconnectPreloadfrontend performance

0 likes · 17 min read

Using Resource Hints (Prefetch, Preload, Preconnect, DNS‑Prefetch) to Optimize Frontend Loading Performance

Bilibili Tech

Jul 18, 2023 · Frontend Development

Frontend Performance Monitoring: Loading Metrics and Jank Detection using PerformanceObserver and js-self-profiling API

The article explains how to build a frontend performance monitoring system that uses PerformanceObserver and the js‑self‑profiling API to capture Core Web Vitals, detect long‑task jank, correlate network requests and user actions, and preview future ComputePressure metrics for comprehensive user‑experience diagnostics.

ComputePressurePerformanceObserverfrontend

0 likes · 11 min read

Frontend Performance Monitoring: Loading Metrics and Jank Detection using PerformanceObserver and js-self-profiling API

Ctrip Technology

Feb 24, 2022 · Frontend Development

Performance Monitoring and Optimization of SSR Applications in Ctrip Financial Frontend

This article describes how Ctrip Financial’s front‑end team measured, analyzed, and optimized key web‑performance metrics such as First Contentful Paint, DNS/TCP durations, and Cumulative Layout Shift for their server‑side rendered applications, providing concrete monitoring code, data‑processing methods, and practical optimization techniques to improve user experience and achieve a 70%+ instant‑load rate.

JavaScriptMonitoringOptimization

0 likes · 10 min read

Performance Monitoring and Optimization of SSR Applications in Ctrip Financial Frontend

Rare Earth Juejin Tech Community

Feb 14, 2022 · Frontend Development

Front‑End Performance Optimization: RAIL Model, Core Web Vitals, and Practical Best Practices

This article consolidates front‑end performance knowledge by explaining the RAIL model, detailing user‑centric metrics such as FP, FCP, LCP, FID, TTI, TBT and CLS, describing how to capture them with tools like Lighthouse and web‑vitals, and offering concrete optimization techniques ranging from caching and HTTP/2 to code‑splitting, tree‑shaking, skeleton screens and server‑side rendering.

OptimizationPerformanceRAIL

0 likes · 24 min read

Front‑End Performance Optimization: RAIL Model, Core Web Vitals, and Practical Best Practices

Rare Earth Juejin Tech Community

Oct 12, 2021 · Frontend Development

Frontend Monitoring Platform: Data Collection and Reporting Techniques

This article explains the data collection and reporting component of a complete frontend monitoring platform, detailing performance metrics such as FP, FCP, LCP, CLS, and providing practical JavaScript code examples for measuring, observing, and reporting these metrics, along with error and behavior monitoring techniques.

Error TrackingJavaScriptMonitoring

0 likes · 28 min read

Frontend Monitoring Platform: Data Collection and Reporting Techniques

Tencent Cloud Developer

Sep 10, 2021 · Frontend Development

Front-End Performance Monitoring (RUM) and Optimization Strategies

The article introduces Tencent Cloud’s Real‑User‑Monitoring platform, explains key performance timing points and metric calculations, links RUM data to Google Web Vitals, and demonstrates a data‑driven optimization case that cut first‑screen load from 4.8 s to 3.2 s, halved resource load time, and dramatically improved CLS.

JavaScriptOptimizationRUM

0 likes · 16 min read

Front-End Performance Monitoring (RUM) and Optimization Strategies

Tencent Cloud Developer

Jun 1, 2021 · Frontend Development

Front‑End Performance Monitoring: Metrics, Types, and Data Collection

Front‑end performance monitoring lets developers detect issues early, compare synthetic and real‑user approaches, track key metrics like LCP, FID, and CLS, and gather data via the web‑vitals library, Performance API, and error‑tracking hooks to systematically improve load speed, interactivity, and visual stability.

Error TrackingPerformance APIfrontend

0 likes · 16 min read

Front‑End Performance Monitoring: Metrics, Types, and Data Collection