Metrics Reference

Web Vitals Metrics

PS Guard monitors 5 Core Web Vitals metrics from Google Lighthouse:

LCP — Largest Contentful Paint

Measures the time until the largest visible content element is rendered. This is the primary loading performance metric.

Common causes of slow LCP:

• Unoptimized hero images (no preload, no modern format)
• Render-blocking JavaScript or CSS
• Slow server response time (high TTFB)
• Client-side rendering without SSR/SSG

CLS — Cumulative Layout Shift

Measures visual stability by tracking unexpected layout shifts during the page lifecycle.

Common causes of high CLS:

• Images and embeds without explicit width/height
• Dynamically injected content above the fold
• Web fonts causing FOUT/FOIT
• Animations using layout properties instead of transform

INP — Interaction to Next Paint

Measures responsiveness by tracking the latency from user interaction to the next visual update.

Common causes of slow INP:

• Long-running JavaScript tasks blocking the main thread
• Heavy event handlers on interactions
• Synchronous layout recalculations (forced reflow)
• Large DOM size causing slow updates

TTFB — Time to First Byte

Measures the time from the request start until the first byte of the response is received from the server.

Common causes of slow TTFB:

• No CDN or edge caching
• Slow database queries on the server
• Complex server-side rendering logic
• No HTTP/2 or HTTP/3 support

FCP — First Contentful Paint

Measures the time until the first piece of content is rendered on screen (text, image, or canvas).

Common causes of slow FCP:

• Render-blocking CSS or JavaScript
• Large CSS bundles not inlined for critical path
• Slow web font loading without font-display: swap
• High TTFB cascading into delayed FCP

Default Thresholds

PS Guard uses Google's recommended thresholds by default:

Fix Hints

When a metric fails, PS Guard provides actionable fix hints. These are based on common patterns and Google's performance optimization guides:

Hints for LCP:
  → Optimize and preload the largest content element (hero image, heading)
  → Use modern image formats (WebP, AVIF) with srcset
  → Reduce server response time (TTFB)
  → Remove or defer render-blocking JavaScript and CSS

Hints for CLS:
  → Set explicit width and height on images and embeds
  → Avoid dynamically inserting content above existing content
  → Use CSS transform for animations instead of layout properties
  → Reserve space for dynamic content (ads, banners, embeds)

Hints for INP:
  → Break up long tasks using requestIdleCallback or setTimeout
  → Use web workers for heavy computation
  → Minimize JavaScript execution on user interactions
  → Reduce DOM size for faster updates