Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →jpoindexter/performance-and-perceived-speed
Reference-grade guide to performance as a UX concern — Core Web Vitals (LCP/INP/CLS with concrete budgets and fixes), perceived-performance technique (optimistic UI, skeletons vs spinners, instant feedback, prefetch on intent), loading-state and image/font design, and field-vs-lab measurement at p75.
Passed 22 of 22 test cases with the skill, and 21 of 22 without it.
1 fixed21 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
The instructions your model reads when the skill loads.
Speed is not an engineering metric that happens after design — it is a design material. Every layout decision, image choice, font load, and interaction reserves or spends a latency budget the user feels. Treat performance like contrast or hierarchy: a property you design for, measure, and defend.
Latency is the most consistent driver of conversion, trust, and retention that exists across every product category.
| Threshold | Feels like | Design implication |
|---|---|---|
| 0–100ms | Instant; direct manipulation | Every tap/click/keypress MUST produce visible feedback inside this window |
| ~400ms (Doherty threshold) | The pace at which users stay productive and engaged | Target sub-400ms for the common-case round trip; below this, usage and satisfaction rise together |
| ~1s | Noticeable but keeps flow of thought | Keep navigation/transitions under 1s or the user's mental context starts to fray |
| ~10s | Attention lost; user switches tasks | Beyond this, hold attention with determinate progress or abandon the synchronous model |
The Doherty threshold (IBM, 1982) is the headline: when the system responds in under 400ms, the human and machine fall into a fast feedback loop and the user does more work, not less. Above it, the human slows to the machine's pace.
Three metrics, each with a "good / needs-improvement / poor" band. Pass = the 75th-percentile (p75) real-user value is in the "good" band. Lab tools (Lighthouse) approximate; field data (CrUX/RUM) decides.
Time until the largest above-the-fold element (usually a hero image, video poster, or headline block) renders. It is a loading-perception metric, not a "fully loaded" metric.
<link rel="preload"> the LCP image with fetchpriority="high"; never lazy-load the LCP image (loading="eager"); inline critical CSS, defer the rest; serve the right image size via srcset/sizes; avoid client-only rendering for above-the-fold content (SSR/SSG/streaming). Make the LCP element discoverable in the initial HTML.<!-- LCP hero: discoverable, eager, prioritized, correctly sized -->
<link rel="preload" as="image" href="/hero-1280.avif" fetchpriority="high">
<img src="/hero-1280.avif"
srcset="/hero-640.avif 640w, /hero-1280.avif 1280w, /hero-2560.avif 2560w"
test cases passed, vs 21 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.