mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-14 15:16:35 +03:00
Refresh stale metric and library references in the command docs
From issue #395, the items still present after the v4 consolidation: - optimize.md led its interactivity section with FID, retired as a Core Web Vital in March 2024 when INP replaced it. The section heading and both metric lists now name INP. - optimize.md recommended react-virtualized, superseded by react-window from the same author; the line now points at react-window and TanStack Virtual, matching overdrive.md. - overdrive.md's WebGPU support matrix predated Firefox 141/147 shipping it on Windows/macOS and Safari 26 shipping it across Apple platforms. - audit.md listed "missing will-change" as a defect while animate.md and optimize.md both instruct applying it sparingly and never preemptively; the audit line now flags overuse instead of absence. - harden.md allowed 14px mobile body text while typeset.md sets a 16px ordinary floor; harden now matches the floor, reserving 14px for secondary text, and names the iOS Safari input-zoom consequence. The issue's other items (Framer Motion naming, Popmotion, polish duration cap, humor guidance, HSL phrasing in quieter) were already resolved by the v4 reference rewrite. Prepared with AI assistance (Claude Code), directed by @pbakaus. Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Code
parent
af78b1e512
commit
24e24265d1
@@ -5,7 +5,7 @@ Performance is a feature. Identify the actual bottleneck for THIS interface, fix
|
||||
Understand current performance and identify problems:
|
||||
|
||||
1. **Measure current state**:
|
||||
- **Core Web Vitals**: LCP, FID/INP, CLS scores
|
||||
- **Core Web Vitals**: LCP, INP, CLS scores
|
||||
- **Load time**: Time to interactive, first contentful paint
|
||||
- **Bundle size**: JavaScript, CSS, image sizes
|
||||
- **Runtime performance**: Frame rate, memory usage, CPU usage
|
||||
@@ -106,7 +106,7 @@ elements.forEach((el, i) => {
|
||||
- Minimize DOM depth (flatter is faster)
|
||||
- Reduce DOM size (fewer elements)
|
||||
- Use `content-visibility: auto` for long lists
|
||||
- Virtual scrolling for very long lists (react-window, react-virtualized)
|
||||
- Virtual scrolling for very long lists (react-window, TanStack Virtual)
|
||||
|
||||
**Reduce Paint & Composite**:
|
||||
- Use `transform` and `opacity` for reliable movement, but allow blur, filters, masks, clip paths, shadows, and color shifts when they create meaningful polish
|
||||
@@ -196,7 +196,7 @@ const observer = new IntersectionObserver((entries) => {
|
||||
- Use CDN
|
||||
- Server-side rendering
|
||||
|
||||
### First Input Delay (FID < 100ms) / INP (< 200ms)
|
||||
### Interaction to Next Paint (INP < 200ms)
|
||||
- Break up long tasks
|
||||
- Defer non-critical JavaScript
|
||||
- Use web workers for heavy computation
|
||||
@@ -226,7 +226,7 @@ const observer = new IntersectionObserver((entries) => {
|
||||
- Performance monitoring (Sentry, DataDog, New Relic)
|
||||
|
||||
**Key metrics**:
|
||||
- LCP, FID/INP, CLS (Core Web Vitals)
|
||||
- LCP, INP, CLS (Core Web Vitals; INP replaced FID in March 2024)
|
||||
- Time to Interactive (TTI)
|
||||
- First Contentful Paint (FCP)
|
||||
- Total Blocking Time (TBT)
|
||||
|
||||
Reference in New Issue
Block a user