القائمة
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/mikailustuner/OmniRule --skill web-performanceيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| 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 |