Performance & Network

Performance Vitals

Real-time Core Web Vitals metrics, live FPS meter, and page weight analysis — the metrics that actually matter for user experience and SEO rankings.

Overview

The Frontend Performance Dashboard

Google's Core Web Vitals are now a direct ranking factor in search results. The Performance Vitals panel surfaces approximations of these metrics for your previewed application in real time, giving you instant, actionable feedback without deploying to production.

  • DOMContentLoaded Timing: The point at which HTML parsing is complete and deferred scripts have run.
  • Load Event Timing: When all resources (images, fonts, stylesheets) have fully loaded.
  • First Contentful Paint (FCP): When the first visible content (text or image) appears on screen. Target: under 1.8s.
  • Largest Contentful Paint (LCP): When the largest content element in the viewport becomes visible. Good: <2.5s, Needs Work: <4s, Poor: >4s.
  • Cumulative Layout Shift (CLS): Measures unexpected layout shifts that disrupt users. Good: <0.1, Needs Work: <0.25.
  • FID / INP Proxy: An approximation of input delay for interaction responsiveness — Google's newest Core Web Vital.
  • FPS Meter: A live frames-per-second counter powered by requestAnimationFrame. Drops below 30fps indicate animation jank.
  • Total Page Weight: The cumulative size of all loaded resources, helping you track bundle size regression over time.
Metric Thresholds

What the Numbers Mean

🟢

LCP Good — <2.5s

Your hero content loads fast enough to keep users engaged. No action needed.

🟡

LCP Needs Work — 2.5–4s

Optimize your hero image, reduce server response time, or eliminate render-blocking resources.

🟢

CLS Good — <0.1

Layout is stable. Users aren't losing their place while the page loads.

🔴

CLS Poor — >0.25

Significant layout instability. Add explicit width/height to images and avoid inserting content above existing content.

Pro Tips
💡
Check FPS during animations Trigger your page's CSS transitions and scroll animations while watching the FPS meter. If FPS drops below 30 during a transition, the animation is forcing expensive layout or paint operations. Switch to transform and opacity only to keep animations on the compositor thread.
💡
Use Page Weight to catch bundle regressions Add a mental benchmark for your application's acceptable page weight. If a new feature pushes the total weight up by 200KB unexpectedly, the Performance Vitals panel will surface that before it ships.