TechPrufer
Get started
Vercel
Vercel logoVercel · Feature trail

Latency Benchmarking

1 post · Apr 2024 – Dec 2024

What this trail covers

Vercel's platform provides tools and guidance for optimizing website performance, focusing on key metrics like Core Web Vitals. This includes detailed explanations and optimization strategies for metrics such as First Input Delay (FID) and Interaction to Next Paint (INP), enabling developers to improve user experience and site responsiveness. React 18's concurrent features (Transitions, Suspense, React Server Components) are highlighted as key enablers for reducing long tasks and improving TBT. This post specifically details latency numbers relevant to frontend developers, covering network latency, device frame budgets, and human perception thresholds for responsiveness.

All Vercel trails
  1. Technical audits: Optimizing cost, performance, and productivityThis post details Vercel's approach to technical audits for optimizing cost, performance, and productivity. It outlines three types of audits: Code Review Audits (for architecture validation during transitions), Web Performance Audits (for revenue-impacting performance issues), and Usage Audits (for cost optimization at scale). It emphasizes a diagnostic-first approach, analyzing user experience, resource efficiency, and development velocity. Common patterns like balancing dynamic features with static optimization and resource optimization are discussed, with specific implementation issues and recommended solutions, including the use of Edge Middleware with ISR, component-level data fetching with SWR, and server-side A/B testing. The post also highlights the importance of defining image dimensions, optimizing image formats, and efficient data fetching patterns.
  2. Latency numbers every frontend developer should knowThis post provides a frontend-centric breakdown of latency numbers, inspired by Jeff Dean's original work. It quantifies various latency factors including Wifi, 5G, LTE, and continental network round trips, alongside device-specific budgets like user-space frame processing and human perception thresholds for instant and sluggish responses. It also details the time impact of parsing common web assets like CSS, HTML, and JS, and links these metrics to Core Web Vitals (TTFB, FCP, LCP, INP). The post highlights how technologies like React Server Components can mitigate network waterfalls by moving computation to the server.