الواجهات والتصميم

Lighthouse Performance Auditing

شغّل تدقيقات Lighthouse من العميل بتاعك عشان تقيس الأداء وإمكانية الوصول وSEO وأفضل الممارسات.

Claude Code Codex Cursor Gemini CLI

نظرة عامة

Google Lighthouse هي الأداة المعيارية في الصناعة لتدقيق جودة صفحات الويب عبر فئات الأداء وإمكانية الوصول وأفضل الممارسات وSEO. يمكن لعملاء الذكاء الاصطناعي تشغيل تدقيقات Lighthouse برمجيًا، وتفسير النتائج، وتنفيذ إصلاحات للتدقيقات الفاشلة تلقائيًا.

باستخدام واجهة أوامر Lighthouse، يمكن لعميل الذكاء الاصطناعي تدقيق أي رابط أو خادم تطوير محلي، ثم تحليل تقرير JSON لتحديد مشكلات محددة. يمكنه إصلاح الموارد المعطلة للعرض، وتنفيذ سمات ARIA المفقودة، وإضافة نص بديل للصور، وتكوين رؤوس التخزين المؤقت الصحيحة، وتحسين أحجام حزم JavaScript بناءً على نتائج التدقيق.

تشغيل Lighthouse كجزء من سير عمل التطوير يضمن اكتشاف تراجعات الأداء قبل وصولها للإنتاج. يمكن لعملاء الذكاء الاصطناعي إعداد تكامل CI/CD مع Lighthouse CI، ووضع ميزانيات أداء، وتتبع الدرجات بمرور الوقت لمنع التدهور التدريجي.

لمن هذه الأداة؟

مطورين بيعملوا تدقيقات أداء قبل النشر للإنتاج
فرق بتعمل إعداد Lighthouse CI عشان تمسك التراجعات تلقائياً
مهندسين بيصلحوا مشاكل إمكانية الوصول وSEO بشكل منهجي
فرق مهتمة بالأداء بتحط ميزانيات جودة وبتطبقها

التثبيت

إعداد Claude Code

npm install -g lighthouse
lighthouse http://localhost:3000 --output json --output-path report.json

الإعدادات

// lighthouserc.js (Lighthouse CI)
module.exports = {
  ci: {
    collect: {
      url: ["http://localhost:3000/", "http://localhost:3000/about"],
      numberOfRuns: 3,
    },
    assert: {
      assertions: {
        "categories:performance": ["error", { minScore: 0.9 }],
        "categories:accessibility": ["error", { minScore: 0.95 }],
      },
    },
  },
};

زيارة المصدر (GitHub)

استكشف أدوات AI

أدوات AI تكمل شغلك — للمصممين والمطورين

اقرأ مقالات عن AI

نصايح عملية في التصميم والذكاء الاصطناعي

أدوات مشابهة

الواجهات والتصميم

Figma MCP Server

تحويل تصاميم Figma إلى كود مباشرة مع الحفاظ على الأنماط والمكونات.

Claude Code Cursor Windsurf

الواجهات والتصميم

Storybook Component Docs

إنشاء توثيق تفاعلي لمكونات الواجهة مع أمثلة حية وحالات استخدام.

Claude Code Copilot Cursor

الواجهات والتصميم

Tailwind CSS IntelliSense

إكمال تلقائي ذكي لأصناف Tailwind مع معاينة الألوان والقيم أثناء الكتابة.

Claude Code Copilot Cursor