Web Vitals Service

The Web Vitals Service provides utility functions to work with Core Web Vitals metrics, including scoring and formatting.

Usage

Rating Metrics

Determine if a metric value is ‘good’, ‘needs-improvement’, or ‘poor’.

import { getRating } from '@orbitus/core/services/web-vitals';
 
const lcpRating = getRating('LCP', 2000); // 'good'
const clsRating = getRating('CLS', 0.25); // 'poor'
 
console.log(`LCP Rating: ${lcpRating}`);

Formatting Values

Format raw metric values for display.

import { formatValue } from '@orbitus/core/services/web-vitals';
 
console.log(formatValue('LCP', 2500)); // "2.50 s"
console.log(formatValue('CLS', 0.15)); // "0.15"

Thresholds

You can access the standard thresholds used for rating.

import { thresholds } from '@orbitus/core/services/web-vitals';
 
console.log(thresholds.LCP); // { good: 2500, poor: 4000 }

Supported Metrics

• LCP (Largest Contentful Paint)
• FID (First Input Delay)
• CLS (Cumulative Layout Shift)
• FCP (First Contentful Paint)
• TTFB (Time to First Byte)
• INP (Interaction to Next Paint)