mikailustuner
mikailustuner/OmniRule
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/mikailustuner/OmniRule --skill web-performance명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SKILL.md 표시 중
SOC 직업 분류 기준
| name | web-performance |
| description | Core Web Vitals, LCP, FID, CLS optimization |
| triggers | {"keywords":["performance","Core Web Vitals","LCP","CLS","INP","optimization","lazy","prefetch","preload"]} |
| auto_load_when | Optimizing web performance metrics |
| agent | frontend-ops |
| tools | ["Read","Write","Bash"] |
Focus: Core Web Vitals measurement and optimization
When to optimize LCP (Largest Contentful Paint):
├── Above fold content → yes (LCP element)
├── Hero image → optimize
├── Large text → optimize render
├── Slow server → optimize TTFB
└── Render-blocking → eliminate
When to optimize FID (First Input Delay):
├── JS bundles → split
├── Heavy JS → defer non-critical
├── Third-party → delayed loading
└── Event handlers → simplify
When to optimize CLS (Cumulative Layout Shift):
├── Images → dimensions specified
├── Ads/stubs → reserved space
├── Fonts → font-display: optional/swap
├── Dynamic content → reserve space
When to optimize server:
├── TTFB > 600ms → optimize server
├── CDN → use
├── Caching → implement
└── Database → optimize
When to optimize HTML:
├── Streaming → yes
├── Render-blocking CSS → inline critical
├── Render-blocking JS → defer
└── Preload → for LCP element
When to optimize images:
├── Above fold → preload
├── Next-gen format → WebP/AVIF
├── Proper sizing → srcset
├── Lazy load → below fold only
When to optimize fonts:
├── Preload → yes (critical font only)
├── Display swap → yes
├── Subset → if many characters
└── Variable → if used
When to split bundles:
├── Large bundle → yes
├── Independent routes → yes
├── Third-party → separate
└── Common → shared chunk
When to defer JS:
├── Non-critical → defer
├── Below fold → defer
├── Event handlers → defer
└── Required for LCP → inline
When to delay third-party:
├── Analytics → worker or delay
├── Ads → below fold
├── Embeds → on interaction
└── Social → on interaction
When to add dimensions:
├── Images → yes (width + height)
├── Iframes → yes
├── Videos → yes
└── Embeds → yes (aspect-ratio)
When to reserve space:
├── Ads → min-height
├── Dynamic content → skeleton
├── Lazy loaded → placeholder
└── Expander → animation-safe
When to handle fonts:
├── FOUT → font-display: swap
├── FOIT → font-display: optional
├── Size adjustment → size-adjust
└── Font load events → for critical usage
When to use RUM:
├── Real user data → yes
├── Production monitoring → yes
├── Field data → yes
└── Lab only → Lighthouse
When to use Lighthouse:
├── Development → yes
├── Debugging → yes
├── Synthetic → yes
└── Real experience → RUM
When to measure:
├── Every deploy → yes
├── PR checks → yes
├── Field data → if possible
└── Lab data → minimum
Priority actions:
├── 1. Optimize images → typically largest gain
├── 2. Eliminate render-blocking → typically second
├── 3. Preload LCP element → typically third
├── 4. Reduce JS → typically fourth
└── 5. Improve TTFB → if needed
Image optimization:
├── Modern format → WebP/AVIF
├── Proper sizing → srcset
├── Compression → tools verify
└── Above fold → eager load
CSS optimization:
├── Critical → inline
├── Non-critical → defer
├── Unused → remove
└── Inlined for small → inline
❌ Optimizing before measuring
✅ Measure first with Lighthouse / WebPageTest; fix bottlenecks
❌ Blocking render with synchronous scripts in <head>
✅ defer/async on all scripts; inline only critical CSS
❌ Serving same large image to all viewports
✅ Responsive images with srcset + WebP/AVIF
❌ No caching strategy (every request hits origin)
✅ Cache-Control headers + CDN for static assets
❌ Third-party scripts with no facade pattern
✅ Facade/lazy-load heavy embeds (video, chat, maps)
| Metric | Good | Tool to fix |
|---|---|---|
| LCP | < 2.5s | Image optimization, preload |
| CLS | < 0.1 | Explicit dimensions, no injected content |
| INP | < 200ms | Debounce, web workers |
| TTFB | < 800ms | CDN, caching, edge rendering |
| TBT | < 200ms | Split large tasks, defer scripts |
| FCP | < 1.8s | Critical CSS inline, preload fonts |