Web Vitals

Monitor Core Web Vitals and performance metrics for your website.

Core Web Vitals

Google's essential metrics for measuring user experience on the web.

LCPLargest Contentful Paint

< 2.5s

2.5s – 4s

> 4s

Time until the largest content element is visible

INPInteraction to Next Paint

< 200ms

200ms – 500ms

> 500ms

Responsiveness to user interactions

CLSCumulative Layout Shift

< 0.1

0.1 – 0.25

> 0.25

Visual stability score (lower is better)

FCPFirst Contentful Paint

< 1.8s

1.8s – 3s

> 3s

Time until first content is rendered

TTFBTime to First Byte

< 800ms

800ms – 1800ms

> 1800ms

Server response time

Installation

Add the vitals tracking script to your website.

index.html

<!-- Add after your main tracker script -->
<script
  defer
  src="https://cdn.himetrica.com/vitals.js"
  data-api-key="YOUR_API_KEY"
></script>

Use standalone if you only want performance monitoring without analytics.

Install with AI

Copy this prompt and paste it into ChatGPT, Claude, or any AI assistant to install Web Vitals for you.

Add Himetrica Web Vitals monitoring to my website. This is a client-side performance monitoring script — it must run in the browser (frontend only), not on the server.

1. If you already have the main Himetrica tracker installed, just add this script tag after it (it will share the API key automatically):
<script defer src="https://cdn.himetrica.com/vitals.js"></script>

2. If using standalone (without the main tracker), add:
<script defer src="https://cdn.himetrica.com/vitals.js" data-api-key="YOUR_API_KEY"></script>

3. For Next.js, add in app/layout.tsx:
import Script from 'next/script'
<Script src="https://cdn.himetrica.com/vitals.js" strategy="afterInteractive" />

The vitals script automatically tracks Core Web Vitals (LCP, INP, CLS, FCP, TTFB) with no additional code needed. All code must run in the browser — do not add these to any server-side or backend code.

How It Works

Automatic Collection

Uses the web-vitals library to measure metrics as they occur in real user browsers.

Real User Monitoring

Metrics from actual sessions — real-world performance, not synthetic tests.

Percentile Tracking

View p50, p75, p90, and p95 to understand performance across all users.

Rating Distribution

See Good, Needs Improvement, and Poor breakdowns for every metric.

Data Collected

Field	Description
metric	Metric name (LCP, FCP, CLS, INP, TTFB)
value	Numeric value in the appropriate unit
rating	good, needs-improvement, or poor
path	Current page URL path
visitorId	Visitor identifier (if tracker is present)
sessionId	Session identifier (if tracker is present)

Dashboard Features

Performance Summary

Overview cards showing p75 values and pass rates for each metric.

Trend Charts

Historical performance over time with configurable date ranges.

Distribution Bars

Visual breakdown of Good/NI/Poor percentages for each metric.

Percentile Details

p50, p75, p90, p95 values to understand the full distribution.

Optimization Tips

Improve LCP

Optimize images, use CDN, preload critical resources, reduce server response time.

Improve INP

Break up long tasks, optimize JavaScript, use web workers, reduce DOM size.

Improve CLS

Set dimensions on images/videos, avoid inserting content above existing content, use transform for animations.

Issue Tracking

Also see

Web Tracker