المهارات web-performance-optimization
⚡

web-performance-optimization

آمن

Web-Performance mit Claude optimieren

Langsame Websites beeinträchtigen das Nutzererlebnis und die SEO-Rankings. Diese Fähigkeit hilft Ihnen, die Web-Performance systematisch zu messen, zu analysieren und zu optimieren – mit bewährten Techniken wie Code-Splitting, Bildoptimierung und Core Web Vitals-Verbesserungen.

يدعم: Claude Codex Code(CC)
📊 70 كافٍ
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "web-performance-optimization". My LCP is 4.2s and I need it under 2.5s. The main hero image is 2.5MB.

النتيجة المتوقعة:

Konvertieren Sie das Hero-Bild in AVIF-Format (spart ca. 80%), komprimieren Sie es auf unter 200KB, fügen Sie einen Preload-Link hinzu, verwenden Sie fetchpriority='high' und implementieren Sie responsive Bilder mit srcset für verschiedene Bildschirmgrößen.

استخدام "web-performance-optimization". My JavaScript bundle is 850KB gzipped and causing slow TTI.

النتيجة المتوقعة:

Ersetzen Sie moment.js (67KB) durch date-fns (12KB), importieren Sie nur benötigte lodash-Funktionen statt der gesamten Bibliothek, implementieren Sie route-basiertes Code-Splitting für schwere Komponenten und verzögern Sie nicht-kritische Scripts wie Analytics.

استخدام "web-performance-optimization". I have a CLS score of 0.25 with content jumping around.

النتيجة المتوقعة:

Fügen Sie allen Bildern width- und height-Attribute hinzu, verwenden Sie die CSS-Eigenschaft aspect-ratio, implementieren Sie Skeleton-Loader für dynamischen Content und reservieren Sie Platz für Anzeigen/Widgets, bevor sie geladen werden.

التدقيق الأمني

آمن
v1 • 2/25/2026

All 94 static analysis findings are false positives. The skill file is pure documentation (SKILL.md) containing markdown code examples and best practices for web performance optimization. Detected patterns such as dynamic import(), shell commands, and URLs are within markdown code blocks as educational examples, not executable code. No security risks identified.

1
الملفات التي تم فحصها
649
الأسطر التي تم تحليلها
1
النتائج
1
إجمالي عمليات التدقيق
مشكلات منخفضة المخاطر (1)
SKILL.md:77-644
Documentation Contains Command Examples
File contains bash commands and code examples within markdown code blocks for educational purposes only. These are not executable code and pose no security risk.
تم تدقيقه بواسطة: claude

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
24
المجتمع
100
الأمان
87
الامتثال للمواصفات

ماذا يمكنك بناءه

E-Commerce-Site-Optimierung

Produktseiten optimieren, um Konversionsraten durch kürzere Ladezeiten und verbesserte Core Web Vitals-Werte zu steigern

Dashboard-Performance-Verbesserung

JavaScript-Bundle-Größe reduzieren und Datenladung für schnellere Dashboard-Interaktionen optimieren

Content-Site-Geschwindigkeitsoptimierung

Bildoptimierung, Lazy Loading und Caching-Strategien für schnellere Content-Auslieferung implementieren

جرّب هذه الموجهات

Performance-Probleme analysieren 
Ich habe ein Lighthouse-Audit durchgeführt und diese Ergebnisse erhalten: [paste scores]. Helfen Sie mir zu verstehen, was die schlechte Performance verursacht, und priorisieren Sie, welche Probleme zuerst behoben werden sollten.
Core Web Vitals optimieren 
Meine Core Web Vitals sind: LCP [value], FID [value], CLS [value]. Zeigen Sie mir spezifische Code-Änderungen, um diese Metriken für meine [framework]-Anwendung zu verbessern.
Bundle-Größe reduzieren 
Mein JavaScript-Bundle ist [size] und dauert [time] zum Laden auf 3G. Analysieren Sie meine Abhängigkeiten und schlagen Sie Code-Splitting-Strategien oder kleinere Alternativen vor.
Bildoptimierung implementieren 
Helfen Sie mir, eine Bildoptimierungsstrategie für meine Site zu implementieren. Ich habe [number] Bilder mit insgesamt [size]. Zeigen Sie mir, wie ich zu modernen Formaten konvertiere und Lazy Loading in [framework] implementiere.

أفضل الممارسات

  • Etablieren Sie immer Baseline-Metriks mit Lighthouse, bevor Sie Optimierungen vornehmen, um die Verbesserung genau zu messen
  • Konzentrieren Sie sich zuerst auf Core Web Vitals (LCP, FID, CLS), da sie direkten Einfluss auf das Nutzererlebnis und die SEO-Rankings haben
  • Testen Sie die Performance auf echten Mobilgeräten und langsamen 3G-Netzwerken, nicht nur auf Desktop mit schnellem Internet

تجنب

  • Optimieren ohne vorher zu messen – führen Sie immer Audits durch, um tatsächliche Engpässe zu identifizieren, bevor Sie Änderungen vornehmen
  • Desktop über-optimieren während die Mobile-Performance ignoriert wird – die meisten Nutzer sind auf Mobilgeräten mit langsameren Netzwerken
  • Vorzeitige Optimierung – konzentrieren Sie sich auf hochwirksame Änderungen, die nutzerorientierte Metriken betreffen, statt auf Mikro-Optimierungen

الأسئلة المتكررة

Was sind Core Web Vitals und warum sind sie wichtig?
Core Web Vitals sind Googles Performance-Metriken: LCP (Ladegeschwindigkeit), FID (Interaktivität) und CLS (visuelle Stabilität). Sie wirken sich direkt auf SEO-Rankings und das Nutzererlebnis aus. Gute Werte sind LCP unter 2,5s, FID unter 100ms und CLS unter 0,1.
Soll ich zuerst Bilder oder JavaScript optimieren?
Beginnen Sie mit dem Problem, das Ihr Lighthouse-Audit als schwerwiegendstes identifiziert. Im Allgemeinen optimieren Sie zuerst Bilder, wenn jedes über 1MB ist, da dies oft der schnellste Erfolg ist. Dann adressieren Sie die JavaScript-Bundle-Größe, wenn sie über 200KB komprimiert ist.
Was ist der Unterschied zwischen Lazy Loading und Code Splitting?
Lazy Loading verzögert das Laden von Ressourcen (wie Bildern), bis sie benötigt werden. Code-Splitting teilt Ihr JavaScript in kleinere Chunks auf, die bei Bedarf geladen werden. Verwenden Sie beides zusammen: Lazy Loading für Bilder und unterhalb des sichtbaren Bereichs liegende Komponenten, Code-Splitting nach Route oder Feature.
Wie weiß ich, ob meine Optimierungen funktionieren?
Führen Sie Lighthouse-Audits vor und nach Änderungen durch und dokumentieren Sie jede Metrik. Testen Sie auf verschiedenen Geräten und Netzwerkgeschwindigkeiten. Verwenden Sie Real User Monitoring (RUM)-Tools, um das tatsächliche Nutzererlebnis über die Zeit zu verfolgen, nicht nur Lab-Werte.
Kann diese Fähigkeit Optimierungen automatisch implementieren?
Nein, diese Fähigkeit bietet Experten-Anleitungen, Code-Beispiele und Optimierungsstrategien. Sie oder Ihr Entwicklungsteam werden die vorgeschlagenen Änderungen implementieren. Die Fähigkeit hilft Ihnen zu verstehen, was Sie optimieren und wie Sie dabei vorgehen.
Welche Tools sollte ich neben dieser Fähigkeit verwenden?
Lighthouse (in Chrome DevTools integriert) für Audits, webpack-bundle-analyzer für Bundle-Analysen, WebPageTest für detaillierte Wasserfalldiagramme und die Chrome DevTools Performance-Registerkarte für Runtime-Profiling. Diese Fähigkeit hilft bei der Interpretation der Ergebnisse all dieser Tools.

تفاصيل المطور

المؤلف

sickn33

الترخيص

MIT

المستودع

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/web-performance-optimization

مرجع

main

بنية الملفات

📄 SKILL.md