Optimize

/impeccable optimize

Good fit

• 인터페이스가 느리고, 버벅거리거나 무겁게 느껴집니다.
• 디자인을 뜯어고치지 않고 비용을 줄여야 합니다.
• 퍼포먼스가 이제 가시적인 제품 이슈입니다.

사용 시기

/impeccable optimize은 느리게 느껴지는 인터페이스를 위한 것입니다. 첫 페인트가 너무 오래 걸리고, 스크롤이 버벅거리며, 이미지가 늦게 나타나고, 인터랙션이 반응이 느리고, 번들이 800KB의 JavaScript를 배송합니다. Web Vitals이 나쁘거나 사용자가 느리다고 불만할 때 사용하세요.

조기 최적화로 사용하지 마세요. LCP가 1.1s이고 INP가 80ms라면 멈추세요. 디자인 작업이 더 중요합니다.

작동 방식

스킬은 5가지 퍼포먼스 차원을 통해 작동합니다:

1. 로딩과 Web Vitals: LCP, INP, CLS. 첫 페인트를 차단하는 것, 인터랙션을 지연시키는 것, 레이아웃을 이동시키는 것 식별.
2. 렌더링: 불필요한 재렌더, 누락된 메모이제이션, 비싼 조정, 루프 내 레이아웃 스래시.
3. 애니메이션: 레이아웃 속성을 애니메이션하는 것이 있는지, transform과 opacity만 건드리는지, will-change가 도움이 되는지 해가 되는지.
4. 이미지와 에셋: lazy loading, 반응형 이미지(srcset, sizes), 최신 포맷(WebP, AVIF), CLS 방지를 위한 크기 설정.
5. 번들 크기: 사용하지 않는 import, 과대한 의존성, 누락된 코드 스플리팅, 데드 코드.

스킬은 전후를 측정합니다. 모든 수정은 수치화됩니다. 변경이 메트릭을 움직이지 않으면 롤백됩니다.

직접 해보기

/impeccable optimize the homepage

예상 형태:

LCP: 3.2s → 1.4s
  - Hero image preloaded (-800ms)
  - Removed render-blocking font stylesheet (-240ms)
  - Deferred analytics script (-180ms)

INP: 240ms → 90ms
  - Debounced scroll handler
  - Memoized expensive list render
  - Removed synchronous layout read in event loop

CLS: 0.18 → 0.02
  - Set dimensions on hero image and logo
  - Reserved space for async header badge

Bundle: 340KB → 180KB
  - Removed unused lodash import (52KB)
  - Code-split the playground route (78KB)
  - Dropped deprecated icon set (30KB)

주의 사항

• 측정 전에 최적화하기. 기준 메트릭 없이는 무엇이 도움이 되었는지 알 수 없습니다. 느낌이 아닌 구체적인 Web Vitals 수치로 /impeccable optimize를 실행하세요.
• 작은 개선 쫓기. 일주일이 걸리는 20ms INP 개선은 거의 가치가 없습니다. Optimize에는 수확 체감이 있습니다. 멈출 때를 아세요.
• 모든 변경 후 다시 측정하는 것 잊기. 빌드가 스킬이 예측하지 못한 방식으로 상황을 악화시켰을 수 있습니다. 확인하세요.

Related commands

• Audit
• Harden
• Animate