Orbit

Orbit Web Vitals

The Web Vitals tab reports Core Web Vitals collected from your project's real visitors rather than from a synthetic test, so what you see is what people are actually experiencing on their own devices and connections.

Where Web Vitals Lives

Open Orbit, click the project, and choose Web Vitals under the Observability group in the project tab strip. The page is titled Web Vitals and explains its own headline number: p75 is the score used for Page Experience.

Until you add the collector to your site the page has nothing to show, so start with the setup card at the bottom.

Adding the Collector

The setup card gives you a one-line script tag to add to your site's <head>:

<script defer src="https://kapsulehost.com/api/v/<your-project-slug>/script.js"></script>

The exact line, with your project's slug already filled in, is on the page. Copy it from there rather than typing it.

The script collects five metrics as visitors leave each page, and reports them in a single batch. No personally identifiable information is captured and no cookies are set, so it does not add a consent requirement of its own.

Data starts appearing within about thirty seconds of the first real page view. If nothing shows up after that, the script is not loading: check your browser's network tab on the live site.

There is a second copy of the same collector offered under Settings, in the Web Analytics card, which loads from the panel domain and goes before the closing </body> tag. Either works and both feed the same data. Use one, not both, or every page view is counted twice.

The Five Metrics

MetricWhat it measures
LCPLargest Contentful Paint: how long until the main content is visible
INPInteraction to Next Paint: how quickly the page responds to input
CLSCumulative Layout Shift: how much the layout jumps while loading
FCPFirst Contentful Paint: how long until anything is drawn
TTFBTime to First Byte: how long the server took to start responding

The first three are the Core Web Vitals proper. FCP and TTFB are diagnostic: they tell you whether a bad LCP is a slow server or a slow page.

Reading p75

Every figure on this page is a p75, not an average, over the samples in the selected window. Three quarters of your visitors had an experience at least this good; one quarter had it worse.

That choice matters. An average is dominated by the many fast visits on good connections and hides the tail. A p75 does not: if your p75 LCP is four seconds, one visitor in four is waiting longer than that.

Each metric card carries a rating of Good, Needs improvement or Poor, plus the sample count it was computed from. For LCP the page states the boundaries directly: good is 2500ms or under, and poor is over 4000ms.

Treat any card with a small sample count with suspicion. A p75 over a dozen samples is noise. Widen the window with the selector at the top of the page, or wait for more traffic, before you act on it.

The Trend Chart

The trend chart plots daily p75 for LCP and CLS across the selected window, with the good and poor thresholds marked. The subtitle tells you what you are looking for: flat lines are healthy.

A step change on a specific day is the useful signal, because it almost always lines up with a deploy. Cross-reference the date against the Deployments tab, or mark the event on the project timeline so it is annotated next time: see Orbit Timeline Annotations.

A slow drift upward over weeks is a different problem, usually accumulated page weight rather than a single change.

Top Countries

Top countries shows sample volume by country, derived from edge headers. It is there for context rather than for analytics: a p75 that looks poor overall often turns out to be fine for your main market and dominated by a smaller, more distant audience.

If most of your traffic is far from your origin, that is an argument for caching more aggressively at the edge rather than for optimising your code further.

Pages Needing Attention

The Pages needing attention table ranks paths by how far their p75 sits above the good threshold for each metric, with the sample count for each row.

Work down this table rather than trying to improve the site as a whole. Two or three templates usually account for most of the problem, and fixing a template fixes every page that uses it.

Common causes, in the order they are worth checking:

  • A hero image that is not sized or preloaded. This is the most frequent LCP problem by a wide margin.
  • A third-party script blocking the main thread. Chat widgets, tag managers and analytics stacks are the usual suspects, and they hurt INP most.
  • Images and embeds without dimensions. These cause the layout to jump as they load, which is exactly what CLS measures.
  • A slow origin response. If TTFB is poor, none of the above will save you; the fix is caching or a faster response, not front-end work.

No Samples In This Window

If the page says there are no samples, one of three things is true:

  1. The collector has not been added, or is not loading on the pages people visit.
  2. It was added recently and no one has visited yet.
  3. The selected window is shorter than the gap since your last traffic.

Widen the window first, since that is free, then check the script is present in the served HTML of the live site rather than only in your source.

How Long Data Is Kept

Individual samples are pruned automatically once they are 30 days old, by a nightly job. The window selector lets you look across the retained history; there is no archive beyond it.

If you need a long-term record, take a screenshot or note the p75 values at a point in time, for example just before and just after a performance project, so you have a before and after you can quote later.

Vitals On the Public Status Page

If you publish a status page for the project, it can show the same Core Web Vitals summary to your visitors, alongside uptime and recent deploys. See Orbit Status Page.

Where To Go Next

Still need help?

Email us at support@kapsulehost.com or open a chat in KPanel.

Open KPanel
Orbit Web Vitals