技能 web-performance-optimization
⚡

web-performance-optimization

安全

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

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

支持: Claude Codex Code(CC)
🥉 73 青铜
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

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
内容
50
社区
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