توفر (أداء الصفحة) نظرة عامة وفورية لأداء أي صفحة ويب — كمقاييس توقيت التحميل (FCP، و DOMContentLoaded، والتحميل الكامل، والـ TTI)، وإحصاءات (DOM) (كعدد العناصر، وعمق التداخل، وعدّاد مستمعات الأحداث)، وتفصيل الموارد لبيان عدد وحجم ملفات الـ JS، والـ CSS، والصور، والخطوط، وغيرها. وتوفر درجة تقييم الأداء المرمزة بالألوان مؤشراً سريعاً وصحياً لحالة الموقع.
إن استخراج وتدقيق ملفات وبيانات الأداء الشاملة باستخدام Lighthouse أو WebPageTest يوفر تحليلاً عميقاً ولكنه يستغرق وقتاً طويلاً للتشغيل وينتج تقارير مرهقة ومربكة ومعقدة. وفي بعض الأحيان قد تحتاج ببساطة إلى إجابة سريعة: "هل هذه الصفحة سريعة أم بطيئة؟ وما هي وتيرة التحميل؟" تمنحك (أداء الصفحة) تلك النظرة العامة الفورية. فهي تقرأ وتقتبس بيانات التوقيت من واجهة برمجة تطبيقات الأداء الخاصة بالمتصفح وواجهة برمجة تطبيقات توقيت التنقل (بيانات تم جمعها بالفعل — ولا تحتاج إلى تحميل إضافي للصفحة) وتقدمها في لوحة معلومات مرئية ونظيفة. يعرض القسم العلوي مقاييس التوقيت الرئيسية: أول رسم محتوى (FCP) (عندما يظهر المحتوى الأول)، و DOMContentLoaded (عند اكتمال تحليل شفرات ومستندات HTML بالكامل)، والتحميل الكامل (عند اكتمال وتوافر جميع الموارد)، ووقت التفاعل (عندما تُصبح الصفحة مستجيبة وتتحرر). يتم تمييز كل مقياس حسب الحالة بالألوان — أخضر للسرعة المريحة، أصفر للمتوسط المقبول، وأحمر للبطء الشديد — وذلك استناداً إلى المعايير القياسية لـ (Web Vitals). أدناه، يوضح تفصيل الموارد وتوزيعها وكيفية وحجم البيانات المنقولة والمستهلكة على الـ JavaScript كنسبة لـ CSS والصور والخطوط وغيرها من الروابط، مع مخططات مرئية دائرية وأعمدة بيانية لتسهيل الفهم والمقارنة. يُظهر قسم إحصائيات الـ DOM إجمالي العناصر والحد الأقصى لعمق التداخل وعدد مستمعي ومستقبلي الأحداث — وهي مؤشرات رئيسية لتعقيد بناء الـ DOM الذي يؤثر بطبيعة الحال على فاعلية وسرعة أداء العرض.
تعرض الطلاء والمحتوى الأولي (FCP)، وتحميل محتوى (DOM)، واكتمال التحميل المدمج، ووقت وصول مرحلة التفاعل (TTI) — وهي مقاييس الأداء الأربعة الأكثر حيوية. وكلٌ منها مُرمّز لونياً: أخضر (سريع)، أصفر (معتدل ومتوسط)، أحمر (بطيء ولزج) وفقاً لمعايير (Web Vitals) القياسية والمثبتة.
مخطط وبناء بياني مرئي يستعرض تعداد وحجم كل نوع من الموارد: كملفات الجافاسكريبت المستقلة، أنماط وجماليات CSS، مكتبات الصور والأيقونات، مزارع الخطوط وغيرها. لتعرف وتدرك فوراً وبلمحة أيا من أصناف الموارد تتصدر قائمة المساهمة بنصف وزن الصفحة.
تُظهر المجموع الصافي والكلي لعناصر الـ DOM، والحد الأقصى لمدى تداخل طبقات البناء، والمجموع الكلي للمستمعين والمترقبين للأحداث ومسبباتها. يتم اعتبار أحجام الـ DOM الهائلة والمكتظة (بأكثر من 2000 عنصر) والتداخل العميق في طبقاتها ومستوياتها الداعمة (تتجاوز 15 مستوى) كنقطة خلل وعناق أداء محتملة وعائقاً للتنفس.
علامة ونقاط موحدة تتراوح من (0 - 100) وتعمل كمختصر لمؤشر صحة ورسوخ أداء الصفحة، مشفرة لونياً بالأخضر (85+)، فالأصفر المعلق (50-84)، فالأحمر المُدان والمُتهم (0-49). والتي استخلصت واحتسبت استناداً ودعماً بمزيج موزون من قيم الاستجابة والمقاييس الزمنية ودرجة كفاءة استهلاك المورد.
تشير وتعرض البيانات إجمالي حجم المواد والموارد المحملة والمتراكمة ومقاسها بالـ (MB ميجابايت). والمقسّمة وتفصيلها الموضح في التصنيفات لترى وتقع عيناك على معلومة أن 842 كيلوبايت هي لمحتوى (JavaScript)، وأن 245 مخصصة للصور والجرافيكس، بينما حصة 128 تستهلكها تنسيقات CSS — وتحدد بذلك من يسلب ويفترس حجم التنزيل ومقدار وزن مشروع وتطبيق الويب.
تقرأ وتسحب الخوارزميات بيانات الأداء مباشرة من داخل قواميس متصفحك ووصلة (Performance API) — وهي القراءات والنتائج العابرة التي جُمعت ودُوّنت بالفعل من صميم عملية التحميل الطبيعي. فلا حاجة ولا ضرر لفرض اختبارات اصطناعية مستنزفة مجدداً، ولا مزيد من الطلبات الشبكية ولا تأثير سلبياً وعكسياً ناتجاً عن استضافة هذه اللوحة وتشغيلها.
افتح ونشّط أية صفحة وتزود وتسلح بنظرة عامة وسريعة لأدائها ومستواها. هل هي سريعة (بختم ودرجة خضراء)، أم معتدلة (بدرجة صفراء)، أم بطيئة ثقيلة (برداء أحمر)؟ تحسم هذه اللوحة ذلك في جزء من الثانية — ولست مضطراً لانتظار نتائج وقراءة حاسبة اختبارات Lighthouse المهولة.
إذا زحفت الصفحة ببطء وتلكأت، فإن تفاصيل الموارد تسلط الضوء على هوية المجرم والسبب. هل هي 1.2M من سكربتات وحمولة الجافاسكريبت؟ هذه هي عنق الزجاجة. هل تواجه 800 كيلوبايت من الصور الكبيرة دون تحسين وعمليات ضغط؟ سيصبح إصلاح ذلك هو الشاغل والحل المتوقع. هذا الرسم يحدد أكبر العوائق والمثبطات.
عالج أداتك قبل الغوص والشروع بإجراء أي تبسيط أو تحسين برمجي، وسجل ودون تلك الأرقام. بعد أن تحكم إغلاق عملك وتعديلاتك البنائية، حدث الصفحة ونفذ الاختبار الكشاف من جديد. لتطابق وتبارز قيم الـ FCP وزمن بدء التحميل الأولي مع الوزن الإجمالي لتتأكد من حصد تلك المعالجة وجني ثمار التحسين المتوقع.
قم بإجراء جولة كشاف لأداة أداء الصفحة على منصاتك ومواقعك ومن ثم مررها لمقارنة وقياس أداء منافسيك ونظرائك. بايع وقارن أوقات التحميل المترهلة والأوزان وطريقة إدارة وتقسيم حصيلة وبيانات الموارد. هل يشحن ويستخدم المنافسون أكواد وتقنيات JavaScript أقل؟ أم أنهم يتقنون استراتيجيات ضغط الصور والعناصر ببراعة؟
انشر وشغل الأداة على المقاطع والصفحات الرئيسية والحيوية بانتظام أثناء دورة ومسار التطوير الدائم والمستدام (Development). إذا شهد التقييم الرقمي سقوطاً وشقاً أو تفاقم واتسع الوزن والحجم بصورة مفاجئة وبشكل غامض فقد أحدثت شرخاً وتراجعاً مخيفاً — سارع لقطف واصطياد الخطأ والعلة قبل نشر الخراب لمرحلة الإنتاج والجمهور الختامي والـ (Production).
انطلق وافتح نافذة ولوحة DevSuite Pro من امتداد المتصفح وانقر على أداة القياس (Page Performance). وستصعد لوحة البيانات وتطل عليك فوراً لعرض وبسط تفاصيل وحالة الصفحة.
تحقق ودقق في مؤشرات الاستجابة الأربعة وتوقيتاتها التي تتصدر اللوحة: وهي FCP و DOMContentLoaded والتحميل الكامل و TTI. اللون الأخضر بريء ويشي بالنجاح، والأصفر مقبول ومعتدل، أما الأحمر فيفرض ويستثير التساؤلات والحاجة للخروج بحل وتحسين.
صوب ناظريك نحو الشريط البياني للموارد لمعرفة نوع الملفات الأثقل والأكثر امتصاصاً لشرايين الشبكة. غالباً ما يكون الجافاسكريبت العدو الأكبر — فإذا فاق الـ 500 كيلوبايت، فهناك مجال وحاجة تقسيم الأكواد وفصلها أو التحميل الكسول المستمر (Lazy-loading).
راجع وتفحص إحصائيات الـ DOM عن كثب وتأنٍ. فإن تجاوز تعداد العناصر الفعلي الـ 1500 عتبة واقتحم التداخل الطفيف حد الـ 15 عمقاً وزاد عدد طوابقه، فخذ المبادرة وادرس سبل تبسيط ودمج الأكواد وهيكل الصفحة لتعزيز وتحرير قدرات معالج العرض في الراندوم.
ترسم درجة وتقييم ونقاط الصلاحية العُليا لوحةً شاملة وسريعة كمعيار أساسي. ابدأ بالتحسين والتعديل ثم أطلق الاختبار مجدداً لتحديد ما إذا كانت التغييرات تثمر في مقاييس وحصائل إيجابية.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 39 أداة للمطورين لمتصفحك.
