تحليل أداء الموقع باستخدام أدوات DevTools: دليلك لفهم وتحسين سرعة الصفحات
## ما هي أدوات DevTools؟
DevTools هي مجموعة أدوات مدمجة في معظم المتصفحات (مثل Chrome وFirefox) تساعد المطورين على:
- تحليل أداء تحميل الموقع
- فحص الملفات المحملة مثل CSS وJS
- مراقبة استهلاك الموارد والذاكرة
- تتبع الرسائل والأخطاء في Console
---
## كيفية تحليل الأداء باستخدام DevTools
1. افتح موقعك في Google Chrome.
2. اضغط F12 أو انقر بزر الفأرة الأيمن واختر "Inspect".
3. اذهب إلى تبويب Performance وسجّل جلسة تحميل.
4. حلّل النتائج:
- المدة الزمنية للرندر
- تحميل الصور والموارد
- وقت تنفيذ JavaScript
- التفاعلية (Time to Interactive)
---
## أقسام مفيدة أخرى:
- Lighthouse: يعطيك تقريرًا شاملاً عن السرعة، القابلية للاستخدام، وإمكانيات التحسين.
- Network: لمراقبة الطلبات وحجم الملفات.
- Coverage: لمعرفة الأجزاء غير المستخدمة من CSS/JS.
DevTools
Performance
Website Speed
Chrome Tools
Developer Guide
قسم المقالة
Performance
