Menü
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
npx skills add https://github.com/mikailustuner/OmniRule --skill web-performanceDer Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
Bun runtime: HTTP server, file I/O, SQLite, test runner, package manager, bundler — all-in-one JS toolchain.
Clerk: Drop-in auth UI, Organizations, User management, JWT templates, webhooks, Next.js middleware integration.
Gelişmiş masaüstü, tarayıcı ve işletim sistemi kontrol yeteneği. Görsel (koordinat tabanlı) fare/klavye otomasyonu, DOM manipülasyonu, pencere yönetimi, gelişmiş dosya, ağ ve süreç yönetimini kapsar.
Basierend auf der SOC-Berufsklassifikation
SKILL.md wird angezeigt
| 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 |