لوحة Chrome DevTools Performance

الخلاصة — لوحة Performance أداة مدمجة في Chrome (افتح DevTools ثم انقر Performance) تسجل بدقة ما يفعله متصفحك أثناء تحميل الصفحة: كل برنامج نصي، وكل طلب شبكة، وكل عملية رسم. وعلى خلاف PageSpeed Insights، لا تمنحك درجة؛ بل تقدم الصورة الخام كي تعرف لماذا الصفحة بطيئة. المهم أنها تعرض ما يفعله متصفحك، لا ما يفعله زاحف Google، وهي مجانية ولا تتطلب حسابًا.

ما هذه اللوحة؟

تضم Chrome DevTools تبويبات كثيرة. ولوحة Performance هي المخصصة لتسجيل كيفية تحميل الصفحة وتشغيلها ثم الغوص في التفاصيل. فهي تلتقط عمل متصفحك بمرور الوقت — تنزيل الملفات، وتشغيل JavaScript، وحساب تخطيط الصفحة ورسمها — وتعرضه على خط زمني يمكنك تكبيره.

فكر في الفرق بهذه الطريقة: يشبه PageSpeed Insights وLighthouse بطاقة تقرير؛ يجريان اختبارًا ويقدمان لك درجة وقائمة مهام. أما لوحة Performance فتشبه تسجيل كاميرا مراقبة لعملية تحميل الصفحة كاملة: لا درجة، لكن يمكنك الرجوع ورؤية اللحظة الدقيقة التي حدث فيها الخلل.

كيفية فتحها وما يظهر أولًا

1. افتح DevTools (انقر الصفحة بزر الفأرة الأيمن ← Inspect، أو اضغط Cmd+Option+I على Mac / Ctrl+Shift+I على Windows).
2. انقر تبويب Performance في الأعلى.

بمجرد فتح اللوحة تعرض بالفعل Largest Contentful Paint (LCP) وCumulative Layout Shift (CLS) للصفحة — وهما اثنان من مؤشرات أداء الويب الأساسية الثلاثة — بقياس مباشر في متصفحك. تفاعل مع الصفحة فتلتقط Interaction to Next Paint (INP) أيضًا. وهكذا تحصل على لقطة لمؤشرات الأداء الأساسية المحلية من دون تسجيل أي شيء.

تسجيل تحميل صفحة

لرؤية قصة التحميل كاملة، انقر بدء التنميط وإعادة تحميل الصفحة (وفعّل مربع لقطات الشاشة أولًا لتحصل أيضًا على شريط صور يوضح شكل الصفحة في كل لحظة). تعيد اللوحة تحميل الصفحة وتسجل كل شيء. وعندما تتوقف يظهر خط زمني كثيف: أشرطة ملونة للبرمجة النصية والعرض والرسم، وشريط لقطات شاشة في الأعلى، وقسم للشبكة يبين ما حُمّل ومتى.

قد تبدو اللوحة مخيفة أول مرة. لكن أكثر ما يأتي متخصصو SEO لفعله هنا بسيط، وسأشرحه في تبويب Advanced: العثور على العنصر الدقيق الذي كان LCP — أكبر شيء رسمته الصفحة — كي تعرف ما الذي ينبغي تحسينه.

الخطأ الشائع

تعرض لوحة Performance ما يفعله متصفح Chrome لديك، لا ما يفعله Googlebot. يعرض Googlebot الصفحات بنظامه الخاص (Web Rendering Service)، وهو غير مطابق لمتصفح سطح المكتب الكامل لديك. لذلك فاللوحة ممتازة لتشخيص السرعة وفهم العرض، لكنها ليست وسيلة لتأكيد ما تستطيع Google زحفه وفهرسته. استخدم لذلك أداة URL Inspection في Google Search Console.

هل تريد الشرح الكامل لقراءة مخطط اللهب وشريط Insights والعثور على عنصر LCP والخنق لمحاكاة هاتف بطيء ومقارنة ذلك بـLighthouse وWebPageTest؟ انتقل إلى تبويب Advanced.

الخلاصة — لوحة Performance هي أداة التنميط المحلية المدمجة في Chrome DevTools. عند فتحها تعرض LCP/CLS المحليين مباشرة (وINP بعد التفاعل). اضغط بدء التنميط وإعادة تحميل الصفحة مع تشغيل لقطات الشاشة لتسجيل تحميل كامل. ستقرأ مخطط لهب لعمل الخيط الرئيسي، وخطًا زمنيًا لـFPS/CPU، وشلال شبكة، وتبويبات تحليل Bottom-up وCall Tree وEvent Log، إلى جانب شريط Insights الذي يقسم LCP إلى أجزائه الأربعة ويرصد الطلبات الحاجبة للعرض وإعادة التدفق القسرية وكلفة الجهات الخارجية. إنها أسرع وسيلة مدمجة لتحديد عنصر LCP الدقيق. أبقِ ثلاثة أمور واضحة: إنها تنمّط متصفحك لا Web Rendering Service لدى Googlebot؛ والتتبع المسجل دليل مختبري، ورغم أن اللوحة تستطيع إظهار بيانات CrUX الميدانية لمستخدمين حقيقيين بجانبه فإن التراكب الميداني ليس القياس نفسه؛ ولوحة Performance Insights المستقلة القديمة أزيلت في Chrome 132، وصارت ميزاتها داخل تبويب Insights في هذه اللوحة. مضاعفات الخنق نسبية إلى جهازك وليست معيارًا مطلقًا.

ما لوحة Performance فعليًا؟

صياغة Google واضحة: “Use the Performance panel to analyze your website’s performance” (ترجمة) «استخدم لوحة Performance لتحليل أداء موقعك» و*“The Performance panel lets you record CPU performance profiles of your web applications”* (ترجمة) «تتيح لك لوحة Performance تسجيل ملفات تعريف أداء CPU لتطبيقات الويب» (وثائق Chrome DevTools). إنها أداة تنميط: تسجل تتبعًا لكل ما يفعله المتصفح خلال فترة زمنية ثم تستكشفه.

يجدر وضعها في سياق الأدوات الشقيقة منذ البداية لأن الناس يخلطون بينها باستمرار:

• يجري Lighthouse / PageSpeed Insights تدقيقًا آليًا ويمنحك درجة وتوصيات مرتبة حسب الأولوية (ويضيف PSI بيانات CrUX ميدانية حقيقية أيضًا). نتائج تقييمية وآلية وموجهة.
• يشغّل WebPageTest صفحتك على جهاز حقيقي بعيد، ويسجل نتائج تاريخية قابلة للمشاركة، ويدعم برمجة خطوات متعددة. بعيد وقابل للمشاركة وشامل.
• تمنحك لوحة Performance تتبعًا خامًا وتفاعليًا من متصفحك المحلي — بلا درجة أو حساب أو جهاز بعيد. أعمق وأكثر مرونة، لكنك من يتولى التفسير.

التتبع المسجل نفسه دليل مختبري محلي: لقطة لمتصفحك وجهازك وشبكتك في تلك اللحظة. لكن اللوحة المحيطة به ليست مختبرية خالصة؛ فمنذ إعادة التصميم تستطيع أيضًا عرض مقاييس CrUX الميدانية الاختيارية لمستخدمين حقيقيين بجوار نتائجك المحلية. حافظ على الفصل بين المختبر المحلي والمختبر البعيد والميدان الحقيقي، لأن هذا الفرق هو محور مجموعة أدوات أداء الويب كلها، وعليه تقوم الخرافات أدناه.

تاريخ موجز (كي تعرف أي لوحة تنظر إليها)

اللوحة قديمة العهد. تقول Elizabeth Sweeny وPaul Irish من فريق Chrome DevTools: “The Performance panel in Chrome DevTools has been helping developers measure and optimize their runtime performance in one form or another for the better part of 15 years,” (ترجمة) «ساعدت لوحة Performance في Chrome DevTools المطورين على قياس أداء وقت التشغيل وتحسينه بأشكال مختلفة طوال ما يقارب 15 عامًا» و*“Starting with a panel called ‘Timeline’, it evolved to the Performance panel you know today”* (ترجمة) «بدأت بلوحة اسمها Timeline ثم تطورت إلى لوحة Performance التي تعرفها اليوم» (أدوات Performance في 2024 وما بعده). ويضيفان: “Lighthouse was launched in 2016 to help spot optimization opportunities more easily,” (ترجمة) «أُطلق Lighthouse في 2016 لتسهيل اكتشاف فرص التحسين» و*“The experimental Performance Insights panel was released in 2022 to test new ways of surfacing performance insights.”* (ترجمة) «أُطلقت لوحة Performance Insights التجريبية في 2022 لاختبار طرق جديدة لإظهار رؤى الأداء».

وهذه الأخيرة مهمة لحداثة المعلومات. كانت لوحة Performance Insights المستقلة تجربة ثم اختفت؛ إذ يقول إشعار Google: “The Performance insights panel is deprecated and removed from DevTools starting with Chrome version 132. We recommend you use the Performance > Insights tab instead” (ترجمة) «أُوقفت لوحة Performance Insights وأزيلت من DevTools بدءًا من Chrome 132، ونوصي باستخدام Performance > Insights بدلًا منها» (إشعار الإيقاف). إذا أظهر الدليل أو لقطة الشاشة لوحة Performance Insights منفصلة فهو أقدم من Chrome 132 وقديم؛ إذ تعيش الرؤى الآن في شريط جانبي داخل لوحة Performance العادية.

فتح اللوحة وشاشة المقاييس المباشرة

افتح DevTools واختر Performance من التبويبات العليا. تصف Google ذلك بقولها: “When you open the Performance panel, it immediately captures and shows you your local Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) metrics,” (ترجمة) «عند فتح لوحة Performance تلتقط فورًا مقاييس LCP وCLS المحلية وتعرضها» و*“If you interact with your page, the Performance panel also captures your local Interaction to Next Paint (INP)”* (ترجمة) «إذا تفاعلت مع الصفحة تلتقط اللوحة أيضًا INP المحلي» (وثائق النظرة العامة). وهذه الشاشة جزء من إعادة التصميم التي وصفها Rick Viscomi بأنها “a completely redesigned Performance panel landing page featuring a live view of your local Core Web Vitals performance” (ترجمة) «صفحة افتتاحية معاد تصميمها بالكامل للوحة Performance تعرض أداء مؤشرات الويب الأساسية المحلية مباشرة» (مراقبة مؤشرات الويب الأساسية المحلية والحقيقية في DevTools). لذا تحصل قبل أي تسجيل على المجموعة الكاملة من مؤشرات الأداء الأساسية المحلية.

تسجيل تتبع: وقت التشغيل مقابل التحميل

يمكنك تسجيل نوعين، والفرق بينهما مهم:

• أداء وقت التشغيل — تكون الصفحة محملة بالفعل وتريد تنميطها أثناء تشغيلها (حركة أو تفاعل بطيء أو تقطع في التمرير). تقول Google: “Runtime performance is how your page performs when it is running, as opposed to loading” (ترجمة) «أداء وقت التشغيل هو أداء الصفحة أثناء عملها، بخلاف تحميلها» (تحليل أداء وقت التشغيل).
• أداء التحميل — تريد القصة كاملة منذ انتقال جديد. انقر بدء التنميط وإعادة تحميل الصفحة، وشغّل لقطات الشاشة أولًا لتحصل على شريط إطارات مرئية بجوار التتبع.

في أعمال SEO — مثل LCP وتغير التخطيط والبرامج النصية الحاجبة للعرض — ستحتاج في معظم الأحيان إلى تسجيل التحميل مع تشغيل لقطات الشاشة.

لا يحتوي التتبع إلا ما وقع داخل نافذة التسجيل؛ فما لم تسجله — كتفاعل خارج النافذة أو عمل مؤجل التحميل يبدأ لاحقًا — غير مرصود، وليس غائبًا بالضرورة. ولجعل التتبع قابلًا لإعادة الإنتاج أو المقارنة، دوّن إصدار Chrome والتاريخ (تتغير التسميات والاختصارات والواجهة بين الإصدارات)، وما إذا كانت لقطات الشاشة مفعلة، وإعدادات خنق CPU والشبكة، وما إذا أبقيت أدوات قياس الرسم/CSS المتقدمة وخيارات أخذ عينات JavaScript على قيمها الافتراضية. يضيف كل منها تفاصيل وحملًا زائدًا، لذلك لا يمكن مقارنة تتبع بإعدادات مختلفة مباشرة.

قراءة التتبع

يعطيك التسجيل عدة مسارات مكدسة، وأهمها:

• مخطط اللهب / مسار Main. هذا قلب اللوحة. تقول Google: “DevTools shows you a flame chart of activity on the main thread, over time. The x-axis represents the recording, over time,” (ترجمة) «تعرض DevTools مخطط لهب لنشاط الخيط الرئيسي عبر الزمن، ويمثل المحور الأفقي التسجيل عبر الزمن» و*“Use the Main track to view activity that occurred on the page’s main thread”* (ترجمة) «استخدم مسار Main لعرض النشاط الذي وقع على الخيط الرئيسي للصفحة» (مرجع الميزات). يتحرك الزمن من اليسار إلى اليمين، ومكدس الأشرطة تحت كل لحظة هو مكدس الاستدعاءات. الشريط الأعرض = مهمة أطول، وهناك استُهلك وقتك. يوضح التداخل بنية التتبع — ما الذي استدعى ماذا ومتى — لكنه لا يثبت وحده أن مهمة أصلية سببت مشكلة أوسع في تجربة المستخدم؛ عامله كبداية فرضية ثم أكدها.
• مخطط FPS. قراءة سريعة للتقطع. تقول Google: “Whenever you see a red bar above FPS, it means that the framerate dropped so low that it’s probably harming the user experience” (ترجمة) «كلما رأيت شريطًا أحمر فوق FPS فهذا يعني أن معدل الإطارات انخفض إلى حد يرجح أنه يضر تجربة المستخدم» (وثائق وقت التشغيل). الهدف 60 FPS بسلاسة، وتشير الأشرطة الحمراء إلى مواضع التقطع.
• يبين مخطط CPU مدى انشغال الخيط الرئيسي أثناء التسجيل.
• مسار Network شلال لكل طلب: ما حُمّل ومتى وبأي ترتيب، وفيه تظهر الموارد الحاجبة للعرض.
• يعرض مسار Timings قياسات performance.mark() المخصصة إذا كان تطبيقك يصدرها.

تحت مخطط اللهب تعرض ثلاثة تبويبات تحليل البيانات نفسها بطرق مختلفة:

• Bottom-up — “Use the Bottom-up tab to view which activities directly took up the most time in aggregate.” (ترجمة) «استخدم تبويب Bottom-up لمعرفة الأنشطة التي استهلكت مباشرة أكبر وقت إجمالي». الأفضل لسؤال: «أي دالة منفردة تستهلك وقتي؟»
• Call tree — “Use the Call tree tab to view which root activities cause the most work.” (ترجمة) «استخدم تبويب Call tree لمعرفة الأنشطة الجذرية التي تسبب أكبر قدر من العمل». الأفضل لسؤال: «أي مهمة عليا بدأت كل هذا؟»
• Event log — الأحداث نفسها بالترتيب الزمني.

شريط Insights الجانبي

أكثر إضافات إعادة التصميم فائدة للتشخيص هي شريط Insights الجانبي، خليفة لوحة Performance Insights المستقلة المحذوفة. وبدل البحث في مخطط اللهب يعرض مشكلات محددة ومسماة. وأهمها لـSEO:

• تفصيل LCP. تقسم Google LCP إلى أربعة أجزاء: وقت الوصول إلى أول بايت، وتأخير تحميل المورد، ووقت تحميل المورد، وتأخير عرض العنصر (رؤية تفصيل LCP). يخبرك ذلك لماذا LCP بطيء — الخادم؟ صورة متأخرة؟ حجب للعرض؟ — لا أنه بطيء فحسب.
• الطلبات الحاجبة للعرض — CSS/JS الذي أخر الرسم الأول (رؤية حجب العرض).
• إعادة التدفق القسرية — الموضع الذي اضطر فيه المتصفح إلى إيقاف البرنامج النصي لإعادة حساب التخطيط.
• كلفة الجهات الخارجية — ما تكلفه التضمينات والوسوم والأدوات المصغرة.

لأن هذه العناصر تظهر تلقائيًا، فإن شريط Insights هو أقرب ما تصل إليه لوحة Performance من تجربة Lighthouse التي تقول «هذا ما ينبغي إصلاحه»، مع إبقاء القدرة على النزول إلى التتبع الخام خلف كل رؤية.

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

خنق CPU والشبكة (والتنبيه الذي يسبب الالتباس)

جهاز التطوير أسرع بكثير من هاتف معتاد، ولذلك قد تكون الصفحة الفورية لديك مؤلمة للمستخدمين الحقيقيين. يحاكي الخنق ظروفًا أضعف باستخدام مضاعف لإبطاء CPU وملف شبكة مثل Slow 4G.

لكن التحذير يأتي مباشرة من Google: “Throttling is relative to your computer’s capabilities. For example, the 2x slowdown option makes your CPU operate 2 times slower than its usual ability” (ترجمة) «الخنق نسبي إلى قدرات حاسوبك؛ فخيار الإبطاء 2x يجعل CPU يعمل أبطأ مرتين من قدرته المعتادة» (مرجع الميزات). لذلك فإن «4x slowdown» ليس معيارًا مطلقًا؛ فـ4x على حاسوب سريع لا يساوي 4x على جهاز ضعيف. إنه معامل نسبي لا معيار للمقارنة بين الأجهزة. وتذكر جولة DebugBear المتعمقة فائدة عملية ثانية: يمكن للخنق أن يبطئ التسجيل فقط كي تصبح عناقيد الأحداث الكثيفة مقروءة.

بيانات المختبر هنا مقابل البيانات الميدانية التي ترتب Google عليها

هنا يقع متخصصو SEO في الخطأ. أرقام لوحة Performance — المقاييس المباشرة وكل تسجيل — بيانات مختبرية من جهازك وعلى شبكتك وفي تلك اللحظة. أما إشارة ترتيب مؤشرات أداء الويب الأساسية لدى Google فتأتي من بيانات CrUX الميدانية لمستخدمين حقيقيين، وهي تجميع على 28 يومًا لمستخدمي Chrome الحقيقيين يظهر في Search Console وPageSpeed Insights. لا يضمن تسجيل محلي مثالي اجتياز الدرجة الميدانية؛ فالمستخدمون الحقيقيون لديهم أجهزة أبطأ وشبكات أسوأ وتنوع أكبر من اختبار واحد.

تسد اللوحة المعاد تصميمها هذه الفجوة: يمكنها إظهار بيانات CrUX الميدانية لمستخدميك الحقيقيين بجوار النتائج المحلية لمقارنة «ما قسته الآن» بـ«ما يختبره المستخدمون». وعند توفر التراكب يمكنك التبديل بين مستوى URL والأصل وبين المحمول وسطح المكتب، وتعرض الواجهة فترة البيانات؛ فطابقها مع التتبع الذي تقارنه. وحتى مع التطابق، لا تفعل إعدادات البيئة المستنيرة بالبيانات الميدانية — أي إعدادات الخنق التي تقترحها اللوحة بناءً على CrUX — أكثر من تقريب شريحة مختارة من المستخدمين؛ فلا يعيد تسجيل محلي واحد إنشاء توزيع المستخدمين الفعلي ولا يتنبأ بنتيجة ترتيب. يذكرك التراكب بأن التتبع المحلي وإشارة ترتيب Google رقمان مختلفان. وللتفصيل راجع محور أدوات أداء الويب وشرحي Core Web Vitals وCrUX.

كيف أستخدمها في SEO التقني

اعتمدت على لوحة Performance سنوات، لا كمخرج نهائي مستقل بل كأداة ألجأ إليها عندما لا تكفي الدرجة وأحتاج إلى رؤية الأسباب التقنية الفعلية. ومن استخداماتي المحددة:

العثور على عنصر LCP الدقيق. هذه أثمن حيلة SEO في اللوحة، وهي وصفة شرحتها على المسرح. في عرضي تحديث تجربة الصفحة (TMC، يونيو 2021) الخطوات هي: “Performance > check Screenshots” (ترجمة) «في Performance، فعّل لقطات الشاشة»، ثم “Start profiling and reload page” (ترجمة) «ابدأ التنميط وأعد تحميل الصفحة»، ثم “LCP on the timing graph” (ترجمة) «اعثر على LCP في مخطط التوقيت»، وأخيرًا “click the node — this is the element for LCP” (ترجمة) «انقر العقدة؛ فهذا هو عنصر LCP». تخبرك DevTools بدقة أي عنصر سيُحتسب Largest Contentful Paint كي تعرف ما الذي تحسنه. ويصف Richie Lauridsen من Seer Interactive الأسلوب نفسه في Search Engine Journal: “In hovering over the flag for LCP, we can actually see the piece of content flagged to be the largest contentful paint during the page load” (ترجمة) «عند تمرير المؤشر فوق علامة LCP يمكننا رؤية جزء المحتوى المحدد بوصفه أكبر رسم للمحتوى أثناء تحميل الصفحة» (ثلاث طرق لاستخدام Chrome DevTools في استكشاف مشكلات SEO). اتفاق شرحين مستقلين على الوصفة نفسها يعني أنها سير عمل قياسي لا حالة منفردة.

شرح العرض للآخرين. أستخدم اللوحة في دليلي إلى JavaScript SEO لجعل مسار العرض مرئيًا: “In Chrome Dev Tools, if you run a test on the ‘Performance’ tab, you get a loading chart.” (ترجمة) «إذا أجريت اختبارًا في تبويب Performance ضمن Chrome Dev Tools فستحصل على مخطط تحميل». أشرح عبر المخطط التنزيل وتحليل HTML وتنفيذ JS والتخطيط والرسم، لأبين للعملاء والزملاء أن عرض Googlebot لا يفعل كل ما يفعله الرسم الكامل للمتصفح، وهي نقطة مركزية في تشخيص مشكلات JavaScript SEO.

ويكمل ذلك اكتشاف الجهات الخارجية الحاجبة للعرض وتشخيص تغير التخطيط: يبين شلال الشبكة ما يؤخر الرسم الأول، ويبين التتبع مع مقياس CLS ما تحرك ومتى.

خرافة Googlebot التي ينبغي استيعابها

الفخ هو: «إذا بدا كل شيء جيدًا في لوحة Performance لدي، فسيراه Googlebot جيدًا أيضًا». هذا استنتاج غير صحيح. تنمّط اللوحة Chrome المحلي كامل الميزات لديك. أما Googlebot فيعرض عبر Web Rendering Service، وهو إصدار حديث لكن غير مطابق من Chromium لا يدعم كل ما يفعله المتصفح الكامل ويتصرف بصورة مختلفة — فهو بلا حالة ويرفض مطالبات الأذونات، مثلًا؛ راجع الزحف والعرض. اللوحة ممتازة لفهم وتشخيص سلوك العرض، لكنها لا تغني عن تأكيد ما يمكن زحفه وفهرسته. استخدم لذلك URL Inspection في Search Console أو جلبًا خامًا.

ملاحظة سريعة لإزالة الالتباس

لا تخلط لوحة Performance مع Performance monitor، وهي ميزة أصغر ومنفصلة في DevTools تعرض شريطًا مباشرًا لمقاييس لحظية مثل استخدام CPU وذاكرة JS heap وعقد DOM بدل تتبع مسجل. الاسم متشابه والأداة مختلفة.

ملخص الذكاء الاصطناعي

خلاصة مكثفة للنسخة المتقدمة:

• ما هي: لوحة Performance في Chrome DevTools أداة تنميط محلية مدمجة. افتح DevTools ← Performance. تسجل كيفية تحميل الصفحة وتشغيلها ولا تنتج درجة. التتبع المسجل دليل مختبري محلي، مع إمكانية عرض بيانات CrUX الميدانية بجانبه.
• موضعها بين الأدوات: Lighthouse/PageSpeed Insights = تدقيق آلي بدرجة (+ بيانات CrUX ميدانية)؛ WebPageTest = مختبر بعيد على جهاز حقيقي؛ لوحة Performance = تتبع خام تفاعلي من متصفحك.
• المقاييس المباشرة: تعرض عند الفتح LCP وCLS المحليين، ويضيف التفاعل INP المحلي؛ أي مؤشرات الأداء الأساسية المحلية كلها بلا تسجيل.
• التسجيل: وقت تشغيل (الصفحة تعمل بالفعل) مقابل تحميل (بدء التنميط وإعادة تحميل الصفحة مع لقطات الشاشة لشريط الصور).
• قراءة التتبع: مخطط لهب للخيط الرئيسي (الشريط الأعرض = مهمة أطول)، ومخطط FPS (الأحمر = تقطع، والهدف 60 FPS)، ومخطط CPU، وشلال Network، وTimings، وتبويبات Bottom-up / Call Tree / Event Log.
• شريط Insights (حل محل لوحة Performance Insights المستقلة التي أزيلت في Chrome 132): يقسم LCP إلى 4 أجزاء ويرصد حجب العرض وإعادة التدفق القسرية وكلفة الجهات الخارجية. عامل كل رؤية كفرضية موجهة لا دليل سببية، وأكدها بالتتبع وتسجيل قبل/بعد.
• الخنق نسبي إلى جهازك لا معيار مطلق؛ «4x» على حاسوب سريع لا يساوي «4x» على جهاز ضعيف.
• المختبر لا يساوي الميدان: التتبع بيانات مختبرية، بينما ترتب Google وفق بيانات CrUX الميدانية. تستطيع اللوحة عرض CrUX بجوار نتائجك مع مطابقة URL/الأصل وشكل الجهاز والفترة، لكنه تقريب لشريحة حقيقية لا إعادة إنشاء لها.
• استخدامات SEO: تحديد عنصر LCP الدقيق (وصفة Patrick في الشرائح ويؤيدها Richie Lauridsen في SEJ)، ورصد الجهات الخارجية الحاجبة للعرض، وتشخيص تغير التخطيط، وشرح العرض.
• الخرافة: تعرض متصفحك لا Web Rendering Service لدى Googlebot؛ أكد قابلية الزحف بـURL Inspection لا DevTools.

الوثائق الرسمية

وثائق أصلية صادرة عن فريق Chrome DevTools.

Chrome / Google

• نظرة عامة على لوحة Performance — ما هي وكيف تفتحها ومقاييس LCP/CLS/INP المحلية المباشرة.
• تحليل أداء وقت التشغيل — التسجيل ومخطط اللهب وFPS/CPU والفرق بين وقت التشغيل والتحميل.
• مرجع ميزات Performance — مسار Main وBottom-up وCall Tree وEvent Log وتعريفات الخنق.
• رؤى Performance (إشعار الإيقاف) — أزيلت اللوحة المستقلة في Chrome 132؛ استخدم Performance > Insights.
• رؤية تفصيل LCP — تقسيم LCP إلى TTFB وتأخير تحميل المورد ووقت تحميله وتأخير عرض العنصر.
• رؤية الطلبات الحاجبة للعرض — تحديد CSS/JS الذي يؤخر الرسم الأول.
• مراقبة مؤشرات الويب الأساسية المحلية والحقيقية في DevTools — Rick Viscomi عن الصفحة الافتتاحية المعاد تصميمها وتراكب بيانات CrUX.
• أدوات Performance في 2024 وما بعده — Elizabeth Sweeny وPaul Irish عن تاريخ Timeline ← Performance وعلاقة Lighthouse/Insights.
• لوحة Performance أسرع بنسبة 400% — شرح هندسي عميق يثبت استمرار الاستثمار في اللوحة وتغيرها بين الإصدارات.
• مراقب Performance — شريط المقاييس اللحظية المنفصل، لا لوحة Performance الرئيسية.

Bing / Microsoft

• لا توجد وثائق خاصة بـBing عن لوحة Performance في Chrome/Edge DevTools؛ فهي أداة متصفح لا منتج محرك بحث. يقدم Edge المبني على Chromium أداة DevTools شبه مطابقة باللوحة نفسها، ولذلك ينطبق عليه ما هنا أيضًا.

اقتباسات من المصدر

تصريحات موثقة من فريق Chrome DevTools وممارسي المجال. كل رابط Chrome عميق يقفز إلى العبارة المقتبسة.

Chrome DevTools — ما اللوحة وكيف تقرأها

• “Use the Performance panel to analyze your website’s performance.” (ترجمة) «استخدم لوحة Performance لتحليل أداء موقعك» / “The Performance panel lets you record CPU performance profiles of your web applications.” (ترجمة) «تتيح لك لوحة Performance تسجيل ملفات تعريف أداء CPU لتطبيقات الويب». — وثائق Chrome DevTools. انتقل إلى الاقتباس
• “When you open the Performance panel, it immediately captures and shows you your local Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) metrics.” (ترجمة) «عند فتح لوحة Performance تلتقط فورًا مقاييس LCP وCLS المحلية وتعرضها» / “If you interact with your page, the Performance panel also captures your local Interaction to Next Paint (INP).” (ترجمة) «إذا تفاعلت مع الصفحة تلتقط اللوحة أيضًا INP المحلي». انتقل إلى الاقتباس
• “Runtime performance is how your page performs when it is running, as opposed to loading.” (ترجمة) «أداء وقت التشغيل هو أداء الصفحة أثناء عملها بخلاف تحميلها» / “DevTools shows you a flame chart of activity on the main thread, over time. The x-axis represents the recording, over time.” (ترجمة) «تعرض DevTools مخطط لهب لنشاط الخيط الرئيسي عبر الزمن، ويمثل المحور الأفقي التسجيل عبر الزمن». انتقل إلى الاقتباس
• “Whenever you see a red bar above FPS, it means that the framerate dropped so low that it’s probably harming the user experience.” (ترجمة) «كلما رأيت شريطًا أحمر فوق FPS فهذا يعني أن معدل الإطارات انخفض إلى حد يرجح أنه يضر تجربة المستخدم». انتقل إلى الاقتباس
• “Use the Main track to view activity that occurred on the page’s main thread.” (ترجمة) «استخدم مسار Main لعرض نشاط الخيط الرئيسي» / “Use the Bottom-up tab to view which activities directly took up the most time in aggregate.” (ترجمة) «استخدم Bottom-up لمعرفة الأنشطة الأعلى وقتًا إجماليًا» / “Use the Call tree tab to view which root activities cause the most work.” (ترجمة) «استخدم Call tree لمعرفة الأنشطة الجذرية التي تسبب أكبر عمل». انتقل إلى الاقتباس
• “Throttling is relative to your computer’s capabilities. For example, the 2x slowdown option makes your CPU operate 2 times slower than its usual ability.” (ترجمة) «الخنق نسبي إلى قدرات حاسوبك؛ فخيار 2x يجعل CPU أبطأ مرتين من قدرته المعتادة». انتقل إلى الاقتباس

Chrome DevTools — التاريخ وملاحظة حداثة المعلومات

• “The Performance panel in Chrome DevTools has been helping developers measure and optimize their runtime performance in one form or another for the better part of 15 years.” (ترجمة) «ساعدت لوحة Performance المطورين على قياس أداء وقت التشغيل وتحسينه طوال ما يقارب 15 عامًا» / “Starting with a panel called ‘Timeline’, it evolved to the Performance panel you know today.” (ترجمة) «بدأت بلوحة Timeline ثم تطورت إلى Performance الحالية». — Elizabeth Sweeny وPaul Irish، فريق Chrome DevTools. انتقل إلى الاقتباس
• “The Performance insights panel is deprecated and removed from DevTools starting with Chrome version 132. We recommend you use the Performance > Insights tab instead.” (ترجمة) «أُوقفت لوحة Performance Insights وأزيلت بدءًا من Chrome 132، ويوصى باستخدام Performance > Insights». انتقل إلى الاقتباس
• “a completely redesigned Performance panel landing page featuring a live view of your local Core Web Vitals performance.” (ترجمة) «صفحة افتتاحية معاد تصميمها بالكامل تعرض أداء مؤشرات الويب الأساسية المحلية مباشرة». — Rick Viscomi، فريق Chrome. اقرأ المقال

المجال — سير عمل SEO

• “In hovering over the flag for LCP, we can actually see the piece of content flagged to be the largest contentful paint during the page load.” (ترجمة) «عند تمرير المؤشر فوق علامة LCP يمكننا رؤية جزء المحتوى المحدد بوصفه أكبر رسم للمحتوى أثناء التحميل». — Richie Lauridsen (Seer Interactive)، Search Engine Journal. اقرأ المقال

Patrick Stox — استخدام اللوحة

• “In Chrome Dev Tools, if you run a test on the ‘Performance’ tab, you get a loading chart.” (ترجمة) «إذا أجريت اختبارًا في تبويب Performance ضمن Chrome Dev Tools فستحصل على مخطط تحميل» — استخدمتها في دليل JavaScript SEO على Ahrefs لشرح اختلاف عرض Googlebot عن الرسم الكامل للمتصفح.

أي أداة أداء ينبغي أن أستخدم؟

اللوحة خيار بين عدة أدوات، واختيار الأداة الخاطئة يهدر الوقت. وهذه طريقة سريعة للقرار:

هل تحتاج إلى درجة أم تشخيص؟

• درجة أو حكم اجتياز/رسوب للترتيب ← تحتاج إلى بيانات ميدانية: PageSpeed Insights أو تقرير Core Web Vitals في Search Console (CrUX). لا تقدم لوحة Performance ذلك.
• تشخيص سبب بطء الصفحة ← تابع.

هل الصفحة متاحة للعامة؟

• لا (خلف تسجيل دخول أو على staging أو localhost) ← استخدم لوحة Performance أو Lighthouse في DevTools؛ فهي تعمل على ما في متصفحك. يحتاج PSI وWebPageTest إلى URL عام.
• نعم ← تصلح اللوحة أو أداة بعيدة؛ تابع.

هل تحتاج إلى نتيجة قابلة للمشاركة ومتكررة على جهاز حقيقي؟

• نعم (تقرير عميل أو عتاد حقيقي أو اتجاه تاريخي) ← WebPageTest.
• لا؛ تحتاج فقط إلى رؤية الآليات الآن ← لوحة Performance.

ما الذي تحاول العثور عليه تحديدًا؟

• «أي عنصر هو LCP؟» ← لوحة Performance: شغّل لقطات الشاشة ← ابدأ التنميط وأعد التحميل ← انقر عقدة LCP في مخطط التوقيت.
• «ما الذي يحجب الرسم الأول أو يستهلك وقت الجهات الخارجية؟» ← Performance ← شريط Insights (الطلبات الحاجبة للعرض وكلفة الجهات الخارجية).
• «قائمة إصلاحات مرتبة حسب الأولوية» ← Lighthouse / PageSpeed Insights.
• «ما الذي يستطيع Googlebot زحفه وعرضه؟» ← ليست هذه اللوحة؛ استخدم URL Inspection في Search Console.

قاعدة عملية: تخبرك الأدوات الميدانية هل لديك مشكلة وهل تؤثر في الترتيب؛ وتخبرك لوحة Performance لماذا، حتى الدالة والطلب والعنصر الدقيق.

ورقة غش للوحة Performance

الدخول إلى اللوحة

قراءة التتبع

اعثر على عنصر LCP (وصفة SEO)

1. شغّل لقطات الشاشة.
2. انقر بدء التنميط وإعادة تحميل الصفحة.
3. اعثر على LCP في مخطط التوقيت.
4. انقر العقدة؛ تعرض DevTools عنصر LCP الدقيق.

حقائق سريعة / تجنب الأخطاء

• التتبع المسجل بيانات مختبرية محلية لا بيانات CrUX الميدانية التي ترتب Google عليها، رغم إمكان عرض البيانات الميدانية بجانبه.
• تنمّط اللوحة متصفحك لا Web Rendering Service لدى Googlebot.
• أزيلت لوحة Performance Insights المستقلة في Chrome 132، وتوجد الرؤى الآن في تبويب Insights.
• مضاعفات الخنق نسبية إلى جهازك وليست معيارًا مطلقًا.
• مجانية ومدمجة وبلا حساب، واللوحة نفسها في Edge المبني على Chromium.
• Performance monitor ميزة أخرى (شريط مقاييس مباشر)، وليست هذه اللوحة.

جولة تنميط بلوحة Performance

للحصول على تسجيل نظيف ومفيد:

• اختبر في نافذة Incognito مع تعطيل الإضافات، لأنها تلوث تتبع الخيط الرئيسي.
• شغّل لقطات الشاشة قبل تسجيل التحميل للحصول على شريط صور.
• دوّن إصدار Chrome والتاريخ وإعدادات الخنق وما إذا كانت أدوات قياس الرسم/CSS/أخذ العينات المتقدمة مفعلة كي يمكن إعادة إنتاج التسجيل ومقارنته.
• استخدم بدء التنميط وإعادة تحميل الصفحة لقصة تحميل كاملة عند تشخيص أداء التحميل، لا زر التسجيل على صفحة محملة بالفعل.
• طبّق خنق CPU (غالبًا 4x) وخنق الشبكة لتقريب هاتف متوسط، مع تذكر أن المضاعف نسبي إلى جهازك.
• سجل مرات عدة؛ تختلف التسجيلات المحلية، فعامل التشغيل الواحد كعينة لا حقيقة مطلقة.
• افتح شريط Insights واقرأ تفصيل LCP أولًا؛ فهو يوجهك إلى أسباب الخادم أو تحميل المورد أو تأخير العرض.
• استخدم الوصفة كي تنقر عقدة LCP وتؤكد العنصر الفعلي.
• افحص مسار Network بحثًا عن CSS/JS الحاجب للعرض وطلبات الجهات الخارجية الثقيلة.
• قارن النتيجة بـالبيانات الميدانية في PageSpeed Insights / Search Console CrUX؛ فلا يضمن تتبع محلي جيد درجة ميدانية ناجحة.
• لأسئلة قابلية الزحف والفهرسة انتقل إلى URL Inspection؛ فلا تجيب اللوحة عن «ماذا يرى Googlebot؟».

لوحة Performance والأدوات المحيطة بها

اللوحة أداة التشخيص المختبرية المحلية. وهذا موقعها بين الأدوات الأخرى:

• لوحة Chrome DevTools Performance — هذه الأداة. تتبع خام مختبري محلي؛ الأفضل لمعرفة لماذا الصفحة بطيئة وتحديد عنصر LCP.
• Lighthouse — يعمل أيضًا داخل DevTools؛ تدقيق آلي بدرجة وقائمة إصلاحات مرتبة.
• PageSpeed Insights — بيانات CrUX الميدانية في الأعلى وتشغيل Lighthouse مختبري في الأسفل؛ لعناوين URL العامة ويعمل على المنافسين.
• Chrome UX Report (CrUX) — مجموعة بيانات المستخدمين الحقيقيين التي ترتب Google وفقها؛ ويمكن للوحة الآن عرضها بجوار النتائج المحلية.
• WebPageTest — اختبار بعيد على جهاز حقيقي، ونتائج قابلة للمشاركة، وبرمجة متعددة الخطوات.
• Google Search Console — تقرير Core Web Vitals — مجموعات صفحات فاشلة على نطاق واسع (بيانات ميدانية).
• Search Console — URL Inspection — الأداة الصحيحة، لا لوحة Performance، لسؤال «ماذا يستطيع Googlebot زحفه وعرضه؟».
• Microsoft Edge DevTools — لوحة Performance نفسها المبنية على Chromium لسير العمل الموجه إلى Edge/Bing.

لفهم تكامل المختبر والميدان وأي قياس تستخدمه Google للترتيب، ابدأ بمحور أدوات أداء الويب.

أخطاء في لوحة Performance تهدر التتبع

معاملة تسجيل واحد كواقع ميداني

تسجل لوحة Performance متصفحًا واحدًا وجهازًا واحدًا وإعدادات شبكة وحالة ذاكرة مؤقتة ورحلة محلية واحدة. استخدمها لشرح عنق الزجاجة، ثم استخدم CrUX أو RUM للحكم على مدى شيوعه.

التسجيل بلا تفاعل قابل لإعادة الإنتاج

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

قراءة مخطط اللهب دون مساري الشبكة والإطارات

قد تكون المهمة الطويلة نتيجة لا السبب الأول. حاذِ عمل الخيط الرئيسي مع الطلبات والتفاعلات ولقطات الشاشة وعمليات الرسم قبل إسناد المسؤولية.

تطبيق خنق شديد واعتبار الرقم معيارًا

يساعد الخنق على كشف الاختناقات، لكن نتيجته سيناريو مختبري. ثبّت الإعدادات في مقارنات قبل/بعد واذكرها عند مشاركة النتائج.

إصلاح مشكلات لوحة Performance الشائعة

التتبع صاخب جدًا ولا يمكن قراءته

السبب المرجح: تضيف الإضافات أو تبويبات الخلفية أو التسجيل الطويل عملًا غير ذي صلة. الإصلاح: استخدم ملفًا نظيفًا وأغلق نشاط الخلفية وسجل رحلة محددة واحدة. التأكيد: يشغل التفاعل أو التحميل المطلوب جزءًا قصيرًا واضحًا من التتبع.

التفاعل يبدو بطيئًا لكن لا يظهر حدث واضح

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

النتيجة تتغير بشدة بين مرات التشغيل

السبب المرجح: تختلف حالة الذاكرة المؤقتة أو الشبكة أو عمل الخلفية أو إعداد الاختبار. الإصلاح: وحّد وضع إعادة التحميل والخنق ومنفذ العرض والرحلة ثم شغّل الاختبار مرات عدة. التأكيد: يظهر الاختناق نفسه حتى عندما تتغير المدة الإجمالية.

تعرض اللوحة مؤشرات مختبرية جيدة لكن Search Console سيئ

السبب المرجح: لا يمثل التتبع المحلي المستخدمين الحقيقيين أو الرحلات الأطول. الإصلاح: جزّئ CrUX أو RUM، وأعد إنتاج الجهاز والتفاعل المتأثرين، واستخدم اللوحة للتشخيص. التأكيد: يشرح التتبع الشريحة البطيئة بدل أن يناقض التجميع الميداني.

أثبت نجاح الإصلاح المستند إلى التتبع

اختبار الرحلة المتكررة

الاختبار: سجل التحميل أو التفاعل نفسه بإعدادات متطابقة للذاكرة المؤقتة ومنفذ العرض والخنق قبل التغيير وبعده. النتيجة المتوقعة: ينكمش الطلب أو المهمة أو مرحلة التصيير المستهدفة باستمرار. تفسير الفشل: قد يكون التفاوت بين مرات التشغيل أو اختناق مختلف هو ما يفسر النتيجة. نافذة المراقبة: فورًا عبر تسجيلات عدة. محفز التراجع: ظهور أخطاء أو عمل مفقود أو سلوك مرئي أسوأ.

اختبار الخيط الرئيسي

الاختبار: قارن مهمة الخيط الرئيسي المحددة وأبناءها في التتبعين. النتيجة المتوقعة: يغيب العمل المحذوف أو المؤجل عن الفترة الحرجة بدل مجرد تغيير اسمه أو نقله إلى وقت أبكر. تفسير الفشل: نقل التنفيذ التكلفة نفسها إلى موضع آخر. نافذة المراقبة: فورية. محفز التراجع: ازدياد الحجب الكلي حول إجراء المستخدم.

اختبار انتقال النتيجة إلى الميدان

الاختبار: راقب القالب أو التفاعل المتغير في RUM بعد التحسن المختبري. النتيجة المتوقعة: يتحسن المقياس الميداني المتأثر ويتحسن إسناده إلى الشريحة المقصودة. تفسير الفشل: لم يكن السيناريو المحلي ممثلًا. نافذة المراقبة: RUM مع وصول الزيارات، وCrUX خلال نافذته الميدانية المتحركة. محفز التراجع: تدهور الأداء الميداني أو تراجع معدل إتمام المهمة باستمرار.

اختبر نفسك: لوحة Chrome DevTools Performance

خمسة أسئلة سريعة عما تكونه لوحة Performance وكيف تقرأها وما لا تكونه. اختر إجابة لكل سؤال ثم تحقق.

موارد تستحق وقتك

كتاباتي

• JavaScript SEO: ما تحتاج إلى معرفته — حيث أستخدم مخطط التحميل في تبويب Performance لشرح اختلاف عرض Googlebot عن الرسم الكامل للمتصفح.
• Google PageSpeed Insights لمتخصصي SEO والمطورين — الأداة ذات الدرجة والمزج بين الميدان والمختبر التي تكمل التتبع الخام في DevTools.
• دليل المبتدئين إلى SEO التقني — موضع الأداء والعرض في الصورة الأكبر.

محاضراتي

• تحديث تجربة الصفحة (TMC، يونيو 2021) (SlideShare) — يتضمن وصفة «كيفية رؤية عنصر LCP في DevTools» خطوة بخطوة.
• ما التالي لتجربة الصفحة؟ (SMX Next 2021) (SlideShare) — حديثي عن تجربة الصفحة من الحقبة نفسها.

من أنحاء المجال

• نظرة عامة على لوحة Performance (Chrome للمطورين) — نقطة البداية الرسمية: ما اللوحة وكيف تفتحها والمقاييس المباشرة.
• تحليل أداء وقت التشغيل (Chrome للمطورين) — مخطط اللهب وFPS/CPU وخطوات التسجيل.
• مراقبة مؤشرات الويب الأساسية المحلية والحقيقية في DevTools (Rick Viscomi، Chrome) — الصفحة الافتتاحية المعاد تصميمها وتراكب بيانات CrUX.
• أدوات الأداء في 2024 وما بعده (Sweeny وIrish، Chrome) — تاريخ Timeline ← Performance وعلاقة Lighthouse/Insights.
• ثلاث طرق لاستخدام Chrome DevTools في استكشاف مشكلات SEO (Richie Lauridsen، Search Engine Journal) — أقرب شرح مؤطر لـSEO، ويتضمن أسلوب العثور على LCP.
• تنميط سرعة الموقع باستخدام تبويب DevTools Performance (DebugBear) — أعمق شرح تقني غير مخصص لـSEO: إعادة التدفق القسرية وتحليل الطبقات والخنق لتوضيح الأحداث.
• استخدام Chrome DevTools لتصحيح أداء الويب (تقويم أداء الويب، 2025) — منظور مجتمعي حديث بعد إعادة التصميم.

سجل التغييرات