Metrics are collected automatically on every app load and displayed directly in the terminal during the development cycle.

Captured Metrics¶

CLS — Cumulative Layout Shift¶

What it measures: Quantifies how much visible content shifts unexpectedly during the page lifecycle. A layout shift occurs when an element changes position between rendered frames without user interaction.

Formula:

layout shift score = impact fraction × distance fraction

Impact fraction — portion of the viewport affected by the unstable element:

Distance fraction — largest distance the element traveled relative to the viewport:

CLS accumulates all unexpected layout shift scores throughout the entire page lifecycle.

Thresholds (official Web Vitals):

Eitri target (stricter — optimized for Eitri-App):

Why it matters: Unexpected shifts cause users to lose their reading position, tap wrong buttons, or perform unintended actions (e.g., accidentally confirming a purchase). Especially critical in Eitri-App, where touch targets are smaller.

FCP — First Contentful Paint¶

What it measures: Time from navigation start until any content (text, image, SVG, non-white canvas) is rendered on screen for the first time. It is the earliest signal that the page is responding.

Thresholds (official Web Vitals):

Eitri target (stricter — optimized for Eitri-App):

Why it matters: FCP is the user's first visual confirmation that something is happening. A slow FCP increases perceived wait time and abandonment rates, even if the page eventually loads fully.

LCP — Largest Contentful Paint¶

What it measures: Render time of the largest visible element in the viewport (image, text block, video poster). Marks the point at which the page's main content has likely been loaded.

Real-world examples of LCP elements across different sites:

Considered elements:

• <img> (including the first frame of animated images)
• <image> inside <svg>
• <video> (poster or first frame, whichever comes first)
• Elements with CSS background-image: url()
• Block-level elements containing text content

Thresholds (official Web Vitals):

Eitri target (stricter — optimized for Eitri-App):

Why it matters: A fast LCP signals to the user that the page is useful and ready for interaction. It directly correlates with perceived loading performance and is the Core Web Vital with the highest impact on user retention.

LOAD — Page Load Event¶

What it measures: Time (in ms) from navigation start until the load event fires in the application. Indicates that all synchronous resources (scripts, stylesheets, images referenced in JSX) have finished loading.

This is a navigation timing metric, not a Core Web Vital. It is captured for diagnostic purposes — a slow load combined with a fast LCP may indicate heavy deferred resources.

Score (0–100)¶

The score is a single weighted number summarizing the three captured CWV metrics. It follows a logarithmic scale aligned with the Lighthouse scoring model, where the relationship between the raw metric value and the score is non-linear — improvements have more impact the closer values already are to the "good" threshold.

Weights:

Per-metric formula:

metricScore = (log(poor) - log(value)) / (log(poor) - log(good))
              clamped to [0, 1] × 100

Metrics that were not captured are excluded from the weighted average, with the remaining weights automatically renormalized.

Final score:

score = round(Σ(metricScore × weight) / Σ(weight))

Rating¶