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

web-performance-optimization

آمن

تحسين أداء الويب مع Claude

المواقع البطيئة تضر تجربة المستخدم وترتيبات محركات البحث. تساعدك هذه المهارة على قياس وتحليل وتحسين أداء الويب بشكل منهجي باستخدام تقنيات مجربة مثل تقسيم الكود وتحسين الصور وتحسين مقاييس الويب الأساسية.

يدعم: 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.

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

تحويل صورة hero إلى تنسيق AVIF (توفير ~80%)، الضغط إلى أقل من 200KB، إضافة رابط preload، استخدام fetchpriority='high'، وتنفيذ الصور المتجاوبة مع srcset لأحجام الشاشة المختلفة.

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

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

استبدال moment.js (67KB) بـ date-fns (12KB)، استيراد وظائف lodash المطلوبة فقط بدلاً من المكتبة بأكملها، تنفيذ تقسيم الكود القائم على المسار للمكونات الثقيرة، وتأجيل البرامج النصية غير الحرجة مثل التحليلات.

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

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

إضافة سمات width وheight لجميع الصور، استخدام خاصية CSS aspect-ratio، تنفيذ loaders الهيكل للمحتوى الديناميكي، وحجز مساحة للإعلانات/الأدوات قبل تحميلها.

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

آمن
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
الامتثال للمواصفات

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

تحسين مواقع التجارة الإلكترونية

تحسين صفحات المنتجات لتحسين معدلات التحويل من خلال تقليل أوقات التحسين وتحسين مقاييس الويب الأساسية

تحسين أداء لوحات التحكم

تقليل حجم حزمة JavaScript وتحسين تحميل البيانات لتفاعلات أسرع للوحة التحكم

تحسين سرعة المواقع الإخبارية

تنفيذ تحسين الصور والتحميل الكسول واستراتيجيات التخزين المؤقت لتسليم محتوى أسرع

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

تحليل مشاكل الأداء 
قمت بتشغيل تدقيق Lighthouse وحصلت على هذه النتائج: [paste scores]. ساعدني في فهم ما الذي يسبب ضعف الأداء وترتيب الأولويات لأي المشكلات يجب إصلاحها أولاً.
تحسين مقاييس الويب الأساسية 
مقاييس الويب الأساسية لدي هي: LCP [value]، FID [value]، CLS [value]. أرني تغييرات الكود المحددة لتحسين هذه المقاييس لتطبيقي [framework].
تقليل حجم الحزمة 
حزمة JavaScript الخاصة بي هي [size] وتستغرق [time] للتحميل على 3G. حلل تبعياتي واقترح استراتيجيات تقسيم الكود أو بدائل أصغر.
تنفيذ تحسين الصور 
ساعدني في تنفيذ استراتيجية تحسين الصور لموقعي. لدي [number] صور بحجم إجمالي [size]. أرني كيفية التحويل إلى التنسيقات الحديثة وتنفيذ التحميل الكسول في [framework].

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

  • قم دائمًا بإنشاء مقاييس أساسية باستخدام Lighthouse قبل إجراء التحسينات لقياس التحسين بدقة
  • ركز على مقاييس الويب الأساسية (LCP وFID وCLS) أولاً لأنها تؤثر مباشرة على تجربة المستخدم وترتيبات محركات البحث
  • اختبار الأداء على أجهزة متنقلة حقيقية وشبكات 3G البطيئة، وليس سطح المكتب مع الإنترنت السريع فقط

تجنب

  • التحسين دون قياس أولاً - قم دائمًا بتشغيل التدقيقات لتحديد الاختناقات الفعلية قبل إجراء التغييرات
  • الإفراط في تحسين سطح المكتب مع تجاهل أداء الأجهزة المحمولة - معظم المستخدمين على أجهزة متنقلة مع شبكات أبطأ
  • التحسين المبكر - ركز على التغييرات عالية التأثير التي تؤثر على المقاييس التي يواجها المستخدم بدلاً من التحسينات الدقيقة

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

ما هي مقاييس الويب الأساسية ولماذا هي مهمة؟
مقاييس الويب الأساسية هي مقاييس أداء Google: LCP (سرعة التحميل)، FID (التفاعل)، وCLS (الاستقرار البصري). تؤثر مباشرة على ترتيبات محركات البحث وتجربة المستخدم. النتائج الجيدة هي LCP أقل من 2.5 ثانية، FID أقل من 100 مللي ثانية، وCLS أقل من 0.1.
应该先优化图片还是JavaScript？
ابدأ بأي مشكلة يحددها تدقيق Lighthouse على أنها الأشد خطورة. بشكل عام، قم بتحسين الصور أولاً إذا كانت كل واحدة أكبر من 1 ميجابايت،，因为这通常是最快的胜利。然后如果压缩后超过200KB，再解决JavaScript包大小问题。
延迟加载和代码分割有什么区别？
延迟加载会延迟加载资源（如图片）直到需要时为止。代码分割将JavaScript分成更小的块，按需加载。一起使用两者：延迟加载图片和视口下方的组件，按路由或功能分割代码。
如何知道我的优化是否有效？
在更改前后运行Lighthouse审计，记录每个指标。在多种设备和网络速度上进行测试。使用真实用户监控(RUM)工具来跟踪实际用户体验，而不仅仅是实验室分数。
这个技能可以自动实施优化吗？
不，这个技能提供专家指导、代码示例和优化策略。你或你的开发团队将实施建议的更改。这个技能帮助你了解要优化什么以及如何处理。
我应该使用哪些工具与这个技能配合？
Lighthouse（内置于Chrome DevTools）用于审计，webpack-bundle-analyzer用于包分析，WebPageTest用于详细的瀑布图表，以及Chrome DevTools性能选项卡用于运行时分析。这个技能帮助解释所有这些工具的结果。

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

المؤلف

sickn33

الترخيص

MIT

المستودع

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

مرجع

main

بنية الملفات

📄 SKILL.md