Performance audit
Fix LCP first, then protect the interaction budget
https://example.dev/product
72
Needs work
Performance72
LCP-bound
Accessibility94
Stable
SEO64
Missing meta
Best practices96
Clean
Device
Moto G Power profile
Network
4G throttled
Build
main@8f31c2
Run
May 25, 16:10 UTC
First fix
Preload the hero image and remove render-blocking CSS.
This targets the largest visible delay, keeps CLS untouched, and produces the fastest projected score lift without adding JavaScript work.
Impact: high
Effort: medium
Owner: frontend
ETA: 1 sprint
Current score
72 · needs work
Projected score
89 · passable
LCP
3.8s
Failing
INP
146ms
Good
CLS
0.04
Good
TBT
310ms
Watch
Critical image budget
412KB / 300KB
Main-thread budget
310ms / 250ms
verify after deploy
npx lighthouse https://example.dev/product --preset=desktop --view
Next actions
1
✓
-1.1s LCP
Preload hero image
Add a high-priority preload and confirm the rendered image has stable dimensions.
2
✓
-620ms render
Inline critical CSS
Move above-the-fold CSS into the document head and defer non-critical styles.
3
✓
-95KB JS
Split vendor JavaScript
Keep the current INP healthy by delaying analytics and dashboard-only bundles.
Performance
https://example.dev/product
72
Largest Contentful Paint
3.8 s
Total Blocking Time
310 ms
Cumulative Layout Shift
0.04
Speed Index
4.9 s
Opportunities
Preload Largest Contentful Paint image1,100 ms
Eliminate render-blocking resources620 ms
Reduce unused JavaScript95 KiB
Skeleton State
Change Log
| Change | Before | After | Principle |
|---|---|---|---|
| Priority | Score and raw opportunities are present, but the first action is not framed as a decision | One priority block states the first fix, why it matters, impact, effort, owner, and ETA | operating-principles §1 (one focal decision); rules/08-performance.md (prioritise Core Web Vitals) |
| Score model | Only the Performance score is visible, so the user cannot separate page-speed work from SEO/accessibility work | Category score breakdown adds Performance, Accessibility, SEO, and Best Practices with progress bars | operating-principles §2 (context that changes ownership); rules/08-performance.md (separate budgets from scores) |
| Run context | Audit environment is implicit and easy to lose when sharing the result | Device, network, build SHA, and run time are pinned under the score model | quality-gates Gate 8 (handoff clarity); rules/08-performance.md (measurements need reproducible context) |
| Metrics | Four numbers compete; failing LCP is just another red value | Core Web Vitals are compact cards with explicit status labels | WCAG 1.4.1 (not colour alone); operating-principles §2 (context that changes action) |
| Budgets | Savings are listed, but there is no visible budget boundary | Critical image and main-thread budgets show current usage against target thresholds | rules/08-performance.md (budgets make regressions measurable) |
| Verification | No next-run command is attached to the result | A command snippet is included so the fix can be verified after deploy | quality-gates Gate 8 (handoff clarity); operating-principles §2 (next step in context) |
| Fix list | Opportunities are sorted but do not expose ownership or sequencing logic | Next actions are numbered, stateful, and include expected savings in a stable right column | rules/11-data-tables.md (scannable row structure); quality-gates Gate 4 (clear action states) |
| Responsive | Metric grid collapses unpredictably on narrow screens | Header, priority block, metrics, and fix rows have defined mobile tracks | quality-gates Gate 7 (responsive, no overflow) |
| Dark mode | Original report is preserved as a light-only faithful reference | OKLCH tokens drive surfaces, text, metric states, focus rings, and skeletons | quality-gates Gate 6 (dark mode required) |
Token Legend
| Token | Light | Dark | Used for |
|---|---|---|---|
| --color-bg | oklch(96% 0.004 258) | oklch(13% 0.010 258) | Page background, skeleton midpoint |
| --color-surface | oklch(100% 0 0) | oklch(17% 0.010 258) | Audit card background, fix chips |
| --color-border | oklch(90% 0.006 258) | oklch(26% 0.010 258) | Dividers, metric cards, skeleton blocks |
| --color-text | oklch(17% 0.012 258) | oklch(94% 0.004 258) | Audit title, metric values, fix names |
| --color-text-secondary | oklch(42% 0.012 258) | oklch(72% 0.008 258) | Priority copy, fix details |
| --color-text-muted | oklch(60% 0.008 258) | oklch(55% 0.006 258) | Kickers, labels, URL text |
| --color-accent | oklch(52% 0.20 258) | oklch(65% 0.20 258) | Priority panel, fix ranks, focus rings |
| --color-success | oklch(45% 0.15 145) | oklch(70% 0.12 145) | Passing metric labels |
| --audit-danger | oklch(50% 0.16 28) | oklch(68% 0.13 28) | Failing metrics, over-budget tracks, low score bars |
| --audit-warn | oklch(48% 0.13 68) | oklch(76% 0.12 68) | Warning score and budget tracks |
| --audit-info | oklch(54% 0.15 232) | oklch(72% 0.12 232) | Informational audit accents and secondary states |
| --audit-code-bg | oklch(18% 0.018 258) | oklch(10% 0.012 258) | Verification command surface |
| --audit-ring | oklch(52% 0.20 258 / 0.22) | oklch(65% 0.20 258 / 0.28) | Todo checkbox inset ring |