Core Web Vitals & Diagnostics
VeloStats automatically collects real-user performance metrics from the browser’s native PerformanceObserver and NavigationTiming APIs.
Captured Metrics
| Metric | Full Name | Target Good Range | Needs Improvement | Poor |
|---|---|---|---|---|
| LCP | Largest Contentful Paint | ≤ 2.5 s | ≤ 4.0 s | > 4.0 s |
| CLS | Cumulative Layout Shift | ≤ 0.1 | ≤ 0.25 | > 0.25 |
| INP | Interaction to Next Paint | ≤ 200 ms | ≤ 500 ms | > 500 ms |
| FCP | First Contentful Paint | ≤ 1.8 s | ≤ 3.0 s | > 3.0 s |
| TTFB | Time to First Byte | ≤ 800 ms | ≤ 1.8 s | > 1.8 s |
Element Attribution
Beyond raw timing numbers, velo.js automatically captures the specific DOM element selector (e.g., img#hero-banner, div.pricing-grid, or button.cta-submit) responsible for the largest contentful paint (lcpt), the largest layout shift burst (clst), and the slowest user interaction (inpt).
Viewing Performance Data
In your dashboard:
- Select your active site.
- Navigate to Analytics > Performance (
/analytics/performance). - Toggle between P75 (Google’s standard threshold), P90, and P99 percentiles, and inspect the Diagnostics & Element Attribution tables to pinpoint the exact CSS selectors degrading user experience.