ميزانيات الأداء باستخدام Lighthouse
حدّد ميزانيات الأداء وطبّقها بحيث تُفحص حدود الحجم والمقاييس تلقائيًا، مما يمنع التراجعات قبل وصولها إلى بيئة الإنتاج.
ميزانيات الأداء باستخدام Lighthouse درس مجاني في Web Performance Optimization & Lighthouse على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Web Performance Optimization & Lighthouse، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Web Performance Optimization & Lighthouse 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
What Is a Performance Budget?
A performance budget is a set of agreed limits, such as max JavaScript size or a minimum LCP, that the team commits not to exceed. It turns vague goals into enforceable thresholds.
Why Budgets Matter
Without budgets, performance erodes silently as features pile on. A budget makes regressions visible and blocking, shifting performance left into development.
Two Kinds of Budgets
- Resource budgets: byte size and request counts per type (script, image, total).
- Timing budgets: metric thresholds like LCP, TBT, CLS.
The budget.json File
Lighthouse reads a budget.json describing resource and timing limits. It then flags any audited page that exceeds them.
[{
"resourceSizes": [
{ "resourceType": "script", "budget": 170 },
{ "resourceType": "total", "budget": 500 }
]
}]Adding Timing Budgets
Timings are listed alongside sizes. Values are in milliseconds for time metrics.
[{
"timings": [
{ "metric": "largest-contentful-paint", "budget": 2500 },
{ "metric": "interactive", "budget": 3800 }
]
}]Running with a Budget
Pass the budget file to the Lighthouse CLI. Exceeded items appear in the report's Budgets section.
lighthouse https://example.com --budget-path=./budget.json --output=json --output-path=./report.jsonEnforcing in CI with LHCI
Lighthouse CI (lhci) can assert budgets and fail the build when limits are breached, so regressions never merge.
// lighthouserc.json
{
"ci": {
"assert": {
"assertions": {
"resource-summary:script:size": ["error", { "maxNumericValue": 174080 }]
}
}
}
}Warn vs Error Levels
Assertions support warn and error levels. Start new budgets as warnings to gather data, then promote to errors once the team is confident.
Setting Realistic Limits
Base budgets on current measurements plus a small margin, or on competitor benchmarks. Budgets that are impossible to meet get ignored; budgets that are too loose never fire.
Tracking Over Time
The LHCI server stores historical results so you can chart metric and size trends and tighten budgets gradually as performance improves.
Workflow Summary
- Define resource and timing budgets.
- Run them locally via CLI.
- Assert them in CI with LHCI.
- Start as warnings, then enforce as errors.
Quick Check
You want a pull request to fail automatically when the script bundle grows beyond a set size. What achieves this?
Recap
You learned to set resource and timing budgets in budget.json, run them with the Lighthouse CLI, and enforce them in CI via Lighthouse CI assertions. Start with warnings, promote to errors, and track trends to keep performance from regressing.
الأسئلة الشائعة
هل درس «ميزانيات الأداء باستخدام Lighthouse» مجاني؟
نعم — نص درس «ميزانيات الأداء باستخدام Lighthouse» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Web Performance Optimization & Lighthouse، انتقل إلى CoddyKit PRO. تتضمن دورة Web Performance Optimization & Lighthouse 4 دروس في المجموع.
ماذا ستتعلم في «ميزانيات الأداء باستخدام Lighthouse»؟
حدّد ميزانيات الأداء وطبّقها بحيث تُفحص حدود الحجم والمقاييس تلقائيًا، مما يمنع التراجعات قبل وصولها إلى بيئة الإنتاج. تتمرن على Web Performance Optimization & Lighthouse مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Web Performance Optimization & Lighthouse؟
لا تُشترط خبرة سابقة. Web Performance Optimization & Lighthouse على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «ميزانيات الأداء باستخدام Lighthouse»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Web Performance Optimization & Lighthouse هذا؟
نعم. كل درس في Web Performance Optimization & Lighthouse يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- Lighthouse عبر CLI وبرمجيًا
- عمليات التدقيق والتأكيدات المخصّصة
- دمج Lighthouse في CI/CD
- ميزانيات الأداء باستخدام Lighthouse