dec-web-performance

name	dec-web-performance
description	Web performance as a UX constraint — Core Web Vitals (LCP, INP, CLS) and the RAIL model with perception-keyed budgets. Use when setting performance budgets, diagnosing slow or janky pages, deciding what to optimize, or tying performance work to human-perception thresholds.
tags	["performance","core-web-vitals","rail","ux","always-on"]

Performance

Performance is a UX problem with measurable, perception-keyed budgets.

• Core Web Vitals:
  • LCP (Largest Contentful Paint) — loading; the main content should render fast. Budget: ≤2.5s.
  • INP (Interaction to Next Paint) — interactivity; replaced FID in 2024. Budget: ≤200ms.
  • CLS (Cumulative Layout Shift) — visual stability; no content jumping. Budget: ≤0.1.
• RAIL Model: Performance budgets keyed to human perception:
  • Response — react to input in <100ms.
  • Animation — 60fps, ~16ms per frame.
  • Idle — chunk non-critical work into idle time.
  • Load — become interactive fast; defer the rest.

How to apply

• Set explicit budgets (LCP/INP/CLS, frame time) and measure at the p75 of real users, not a fast laptop.
• CLS: reserve space for images/ads/embeds; never inject content above existing content.
• INP: break long tasks, defer non-critical JS, keep the main thread free for input.
• Animate only transform/opacity to hold 60fps (see FLIP in dec-motion-animation).