Lighthouse: تحسين سرعة الموقع الإلكتروني

Kayce Basques

Sofia Emelianova

هدف الدليل التوجيهي

يشرح لك هذا البرنامج التعليمي كيفية استخدام "أدوات مطوري البرامج في Chrome" للعثور على طرق لتسريع تحميل مواقعك الإلكترونية.

اقرأ أو شاهد إصدار الفيديو لهذا البرنامج التعليمي:

تم إنشاء هذا الفيديو باستخدام الإصدار Chrome 68. معظم ما هو مفصّل لا يزال صحيحًا، ولكن تم تحديث بعض الميزات. على سبيل المثال، أصبحت لوحة التدقيق تُسمّى الآن Lighthouse، ولها شكل مختلف، ولكن لا تزال جميع الخيارات نفسها متاحة.

المتطلّبات الأساسية

يجب أن تكون لديك خبرة أساسية في تطوير البرامج على الويب، على غرار ما يتم تدريسه في هذا الدرس المتعلق بتطوير المواقع الإلكترونية.

لا تحتاج إلى معرفة أي معلومات عن أداء التحميل.

مقدمة

اسمي توني. توني مشهور جدًا في مجتمع القطط. وقد أنشأ موقعًا إلكترونيًا ليتمكّن معجبوه من التعرّف على أطعمته المفضّلة. يحب معجبو الموقع، لكن توني يواصل سماع شكاوى أن الموقع يتم تحميله ببطء. طلب منك توني مساعدته في تسريع عملية تحميل الموقع.

القطة توني

الخطوة 1: تدقيق الموقع الإلكتروني

عندما تبدأ في تحسين أداء التحميل للموقع، ابدأ دائمًا بإجراء عملية تدقيق. للتدقيق وظيفتان مهمتان:

• ويساعد ذلك في إنشاء مرجع يمكنك استخدامه لقياس التغييرات اللاحقة.
• وتقدِّم لك نصائح قابلة للتنفيذ بشأن التغييرات التي سيكون لها أكبر تأثير.

إعداد

أولاً، يجب إعداد بيئة عمل جديدة لموقع توني الإلكتروني، حتى تتمكّن من إجراء تغييرات عليها لاحقًا:

1. إنشاء ريمكس من مشروع الموقع الإلكتروني على أداة Glitch يتم فتح مشروعك الجديد في علامة تبويب. ويُشار إلى علامة التبويب هذه باسم علامة التبويب "المحرر".

   

   يتغيّر اسم المشروع من tony إلى اسم يتم إنشاؤه عشوائيًا. لديك الآن نسخة من الرمز قابلة للتعديل. في وقت لاحق، ستُجري تغييرات على هذا الرمز.

2. في أسفل علامة تبويب "المحرّر"، انقر على معاينة > معاينة في نافذة جديدة. سيتم فتح العرض التوضيحي في علامة تبويب جديدة. وستتم الإشارة إلى علامة التبويب هذه باسم علامة تبويب "العرض التوضيحي". قد يستغرق تحميل الموقع الإلكتروني بعض الوقت.

   

3. افتح أدوات مطوري البرامج إلى جانب العرض التوضيحي.

   

نقطة رئيسية: في بقية لقطات الشاشة الواردة في هذا البرنامج التعليمي، تظهر "أدوات مطوري البرامج" في نافذة منفصلة.

وضع خط أساس

المتوقع هو سجل لمستوى أداء الموقع قبل إجراء أي تحسينات في الأداء.

1. افتح لوحة Lighthouse. قد يكون الرمز مخفيًا خلف مزيد من اللوحات.

   ملاحظة: تعتمد هذه اللوحة على الاسم الذي يحمل الاسم نفسه، وهي Lighthouse، وهي أداة مبرمَجة لتحسين جودة تطبيقات الويب.

   

2. طابِق إعدادات ضبط تقرير Lighthouse مع الإعدادات الظاهرة في لقطة الشاشة. وإليك شرحًا للخيارات المختلفة:

   • check_box محو مساحة التخزين. يؤدي تفعيل مربّع الاختيار هذا إلى محو كل مساحة التخزين المرتبطة بالصفحة قبل كل عملية تدقيق. واترك هذا الإعداد مفعَّلاً إذا كنت تريد تدقيق كيفية تجربة الزوّار لأول مرة لموقعك الإلكتروني. يمكنك إيقاف هذا الإعداد عندما تريد تجربة الزيارة المتكرّرة.
   • check_box تفعيل جمع عيّنات محتوى JavaScript. يكون هذا الخيار غير مفعَّل تلقائيًا. وعند تفعيل هذه الميزة، فإنّها تضيف حِزم طلبات بيانات JavaScript مفصّلة إلى تتبُّع الأداء، ولكنها قد تؤدي إلى إبطاء عملية إنشاء التقارير. يتوفّر التتبُّع ضمن more_vert قائمة الأدوات > عرض التتبع غير المقيَّد بعد إنشاء تقرير Lighthouse.
   • التقييد الذي تمت محاكاته (تلقائي) . يحاكي هذا الخيار الظروف المعتادة للتصفّح على جهاز جوّال. ويُطلق عليه اسم "المحاكاة" لأن Lighthouse لا ي تقييد أثناء عملية التدقيق. بدلاً من ذلك، تعمل فقط على استنتاج المدة التي سيستغرقها تحميل الصفحة في ظروف الأجهزة الجوّالة. من ناحية أخرى، يؤدي ضبط إعداد تقييد "أدوات مطوري البرامج" (متقدّم) إلى تقييد وحدة المعالجة المركزية (CPU) والشبكة في جهازك، وبالتالي توفير تجربة تدقيق أطول.
   • الوضع > التنقل (تلقائي). يحلِّل هذا الوضع تحميل صفحة واحدة، وهذا ما نحتاج إليه في هذا الدليل التوجيهي. لمزيد من المعلومات، يُرجى الاطّلاع على الأوضاع الثلاثة.
   • الجهاز > الجهاز الجوّال يغيّر خيار الجوّال سلسلة وكيل المستخدم ويحاكي إطار عرض الجوّال. يعمل خيار سطح المكتب على إيقاف تغييرات الجوّال إلى حد كبير.
   • الفئات > check_box الأداء. عند تفعيل فئة واحدة، يتم إنشاء تقرير باستخدام Lighthouse فقط باستخدام المجموعة المقابلة من عمليات التدقيق. ويمكنك إبقاء الفئات الأخرى مفعَّلة، إذا كنت تريد رؤية أنواع الاقتراحات التي تقدّمها. يؤدي إيقاف الفئات غير الملائمة إلى تسريع عملية التدقيق قليلاً.

3. انقر على تحليل تحميل الصفحة. بعد 10 إلى 30 ثانية، تعرض لك لوحة Lighthouse تقريرًا عن أداء الموقع الإلكتروني.

   

التعامل مع أخطاء التقارير

إذا ظهرت لك رسالة خطأ في تقرير Lighthouse، جرِّب تشغيل علامة تبويب "العرض التوضيحي" من نافذة التصفّح المتخفي بدون أي علامات تبويب أخرى مفتوحة. يضمن ذلك تشغيل Chrome من حالة خالية من أي مشاكل. يمكن أن تتداخل إضافات Chrome على وجه الخصوص مع عملية التدقيق.

فهم تقريرك

الرقم الذي يظهر في أعلى التقرير هو نتيجة الأداء الإجمالية للموقع الإلكتروني. لاحقًا، عندما تقوم بإجراء تغييرات على التعليمات البرمجية، يُفترض أن ترى زيادة هذا العدد. وكلما كانت النتيجة أعلى، تحسّن الأداء.

المقاييس

انتقِل للأسفل وصولاً إلى قسم المقاييس وانقر على توسيع طريقة العرض. لقراءة المستندات حول أحد المقاييس، انقر على مزيد من المعلومات....

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

لقطات الشاشة

إليك مجموعة من لقطات الشاشة التي توضّح لك طريقة ظهور الصفحة أثناء تحميلها.

Opportunities

قسم الفرص الذي يقدّم نصائح محدّدة حول كيفية تحسين أداء تحميل هذه الصفحة بالتحديد

انقر على فرصة لمعرفة المزيد عنها.

انقر على مزيد من المعلومات... للاطّلاع على مستندات عن سبب أهمية الفرصة، ومقترحات محدّدة حول كيفية إصلاحها.

بيانات التشخيص

يوفّر قسم بيانات التشخيص مزيدًا من المعلومات حول العوامل التي تساهم في وقت تحميل الصفحة.

اجتياز عمليات التدقيق بنجاح

يعرض لك قسم عمليات التدقيق التي تم اجتيازها الإجراءات التي ينفّذها الموقع الإلكتروني بشكل صحيح. انقر لتوسيع القسم.

الخطوة 2: التجربة

يقدّم لك قسم الفرص ضمن تقرير Lighthouse نصائح حول كيفية تحسين أداء الصفحة. في هذا القسم، يتم تنفيذ التغييرات المقترَحة على قاعدة الرموز، وتدقيق الموقع الإلكتروني بعد كل تغيير لقياس مدى تأثيره في سرعة الموقع الإلكتروني.

تفعيل ضغط النص

يشير تقريرك إلى أنّ تفعيل ضغط النص هو إحدى أهم الفرص لتحسين أداء الصفحة.

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

قبل تفعيل الضغط، إليك طريقتَين يمكنك من خلالهما التحقق يدويًا مما إذا كانت الموارد النصية مضغوطة.

افتح لوحة الشبكة وضع علامة في المربّع الإعدادات > استخدام صفوف طلبات كبيرة.

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

تعرض كل خلية في فئة الحجم قيمتين. أعلى قيمة هي حجم المورد الذي تم تنزيله. القيمة السفلية هي حجم المورد غير المضغوط. إذا كانت القيمتان متطابقتين، فلن يتم ضغط المورد عند إرساله عبر الشبكة. في هذا المثال، القيمتان العلوية والسفلية لـ bundle.js هما 1.4 MB.

يمكنك أيضًا التحقّق من الضغط من خلال فحص عناوين HTTP الخاصة بالمورد:

1. انقر على bundle.js وافتح علامة التبويب العناوين.

   

2. ابحث في قسم عناوين الاستجابة عن عنوان content-encoding. ومن المفترض ألا تظهر لك علامة، أي أنّ bundle.js لم يتم ضغطه. عند ضغط مورد، يتم ضبط هذا العنوان عادةً على gzip أو deflate أو br. اطلع على الإرشادات للحصول على شرح لهذه القيم.

بما يكفي من التفسيرات. حان الوقت لإجراء بعض التغييرات! فعّل ضغط النص عن طريق إضافة سطرين من الرموز البرمجية:

1. في علامة تبويب "المحرِّر"، افتح server.js وأضِف السطرين التاليين (المميّزين):

   ...
   const fs = require('fs');
   const compression = require('compression');
   
   app.use(compression());
   app.use(express.static('build'));
   ...
   

2. احرص على وضع app.use(compression()) قبل app.use(express.static('build')).

   

   ملاحظة: عليك عادةً تثبيت حزمة compression من خلال تطبيق مثل npm i -S compression، ولكن سبق أن تم ذلك من أجلك.

3. انتظِر إلى أن تنشر أداة Glitch الإصدار الجديد من الموقع الإلكتروني. يشير الرمز التعبيري السعيد في أسفل اليمين إلى نجاح عملية النشر.

استخدِم مهام سير العمل التي تعلمتها سابقًا للتحقّق يدويًا من عمل الضغط:

1. ارجِع إلى علامة تبويب "العرض التوضيحي" وأعِد تحميل الصفحة.

   يجب أن يعرض عمود الحجم الآن قيمتين مختلفتين للموارد النصية مثل bundle.js. إنّ القيمة العليا لـ 269 KB لـ bundle.js هي حجم الملف الذي تم إرساله عبر الشبكة، والقيمة السفلية لـ 1.4 MB هي حجم الملف غير المضغوط.

   

2. من المفترض أن يتضمّن قسم عناوين الردود في bundle.js الآن عنوانًا للسمة content-encoding: gzip.

   

شغِّل تقرير Lighthouse على الصفحة مرة أخرى لقياس تأثير ضغط النص في أداء تحميل الصفحة:

1. افتح لوحة Lighthouse وانقر على إجراء تدقيق... في شريط الإجراءات أعلى الصفحة.

   

2. اترك الإعدادات كما كانت من قبل وانقر على تحليل تحميل الصفحة.

   

رائع! يبدو أنّ هذا مستوى تقدّم. كان من المفترض أن تكون نتيجة الأداء الإجمالية قد ارتفعت، وهذا يعني أن الموقع يتحسن بشكل أسرع.

ضغط النص في العالم الحقيقي

تحتوي معظم الخوادم على إصلاحات بسيطة مثل هذه لتمكين الضغط! ما عليك سوى البحث عن كيفية تهيئة أي خادم تستخدمه لضغط النص.

تغيير حجم الصور

يشير تقريرك الجديد إلى أن تحديد حجم الصور بشكل صحيح يمثل فرصة كبيرة أخرى.

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

1. في تقريرك، انقر على حجم الصور المناسب لمعرفة الصور التي يجب تغيير حجمها. يبدو أنّ جميع الصور الأربع أكبر من اللازم.

   

2. في علامة التبويب "المحرِّر"، افتح "src/model.js".

3. استبدِل const dir = 'big' بـ const dir = 'small'. يحتوي هذا الدليل على نُسخ من الصور نفسها التي تم تغيير حجمها.

4. تحقَّق من الصفحة مرة أخرى لمعرفة مدى تأثير هذا التغيير في أداء التحميل.

   

يبدو أنّ هذا التغيير له تأثير بسيط فقط في نتيجة الأداء الإجمالية. ومع ذلك، هناك شيء واحد لا تعرضه النتيجة بوضوح هو مقدار بيانات الشبكة التي تحفظها للمستخدمين. كان الحجم الإجمالي للصور القديمة حوالي 6.1 ميغابايت، في حين أصبح الآن حوالي 633 كيلوبايت فقط. يمكنك التحقّق من ذلك في شريط الحالة في أسفل لوحة الشبكة.

تغيير حجم الصور في العالم الحقيقي

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

• تغيير حجم الصور أثناء عملية التصميم.
• أنشِئ أحجامًا متعددة لكل صورة أثناء عملية التصميم، ثم استخدِم القيمة srcset في الرمز. في وقت التشغيل، يحرص المتصفّح على اختيار الحجم الأنسب للجهاز الذي يعمل عليه. اطّلِع على الصور ذات الحجم النسبي.
• استخدم شبكة توصيل للمحتوى (CDN) تتيح لك تغيير حجم الصورة ديناميكيًا عند طلبها.
• حسِّن كل صورة على الأقل. وقد يؤدي ذلك غالبًا إلى توفير مبالغ كبيرة. التحسين هو عند تشغيل صورة من خلال برنامج خاص يقلل من حجم ملف الصورة. راجِع تحسين الصور الأساسي لمزيد من النصائح.

التخلص من موارد حظر العرض

يشير آخر تقرير إليك إلى أنّ إزالة موارد حظر العرض أصبحت الآن أكبر فرصة.

المورد الذي يحظر العرض هو ملف JavaScript أو CSS خارجي يجب على المتصفّح تنزيله وتحليله وتنفيذه قبل أن يتمكن من عرض الصفحة. والهدف من ذلك هو تشغيل رمز CSS وJavaScript الأساسيين فقط والمطلوبَين لعرض الصفحة بشكل صحيح.

وبالتالي، تتمثل المهمة الأولى في العثور على رمز برمجي لا يلزم تنفيذه عند تحميل الصفحة.

1. انقر على إزالة الموارد التي تحظر العرض للاطّلاع على الموارد التي تحظر: lodash.js وjquery.js.

   

2. وفقًا لنظام التشغيل، اضغط على ما يلي لفتح قائمة الأوامر:

   • على نظام التشغيل Mac، اضغط على Command+Shift+P
   • على نظام التشغيل Windows أو Linux أو ChromeOS، اضغط على Control+Shift+P.

3. ابدأ كتابة Coverage وانقر على عرض التغطية.

   

   تفتح علامة التبويب التغطية في الدرج.

   

4. انقر على إعادة تحميل. تقدّم علامة التبويب التغطية نظرة عامة على مقدار الرموز البرمجية في bundle.js وjquery.js وlodash.js التي يتم تنفيذها أثناء تحميل الصفحة.

   

   توضّح لقطة الشاشة هذه أنّه لا يتم استخدام 74% و30% من ملفات jQuery وLodash، على التوالي.

5. انقر على صف jquery.js. تفتح أدوات مطوّري البرامج الملف في لوحة المصادر. تم تنفيذ سطر من التعليمة البرمجية إذا كان يحتوي على شريط أخضر بجانبه. يعني وجود شريط أحمر بجوار سطر من التعليمة البرمجية أنه لم يتم تنفيذه، وبالتأكيد ليس مطلوبًا عند تحميل الصفحة.

   

6. قم بالتمرير عبر رمز jQuery قليلاً. بعض الأسطر التي يتم "تنفيذها" هي في الواقع مجرد تعليقات. إن تشغيل هذه التعليمة البرمجية من خلال مصغر يعمل على إزالة التعليقات هو طريقة أخرى لتقليل حجم هذا الملف.

باختصار، عند العمل على الرمز الخاص بك، يمكن أن تساعدك علامة التبويب التغطية في تحليل الرمز، كل سطر بسطر، وشحن الرمز المطلوب فقط لتحميل الصفحة.

هل هناك حاجة إلى ملفَّي jquery.js وlodash.js لتحميل الصفحة؟ يمكن أن تعرض لك علامة التبويب طلب الحظر ما يحدث عندما لا تتوفر الموارد.

1. انقر على علامة التبويب الشبكة وافتح قائمة الأوامر مرة أخرى.

2. ابدأ كتابة blocking، ثم اختَر عرض حظر الطلبات. ستفتح علامة التبويب طلب الحظر.

   

3. انقر على إضافة نمط، واكتب /libs/* في مربع النص، ثم اضغط على Enter للتأكيد.

   

4. إعادة تحميل الصفحة يظهر طلب jQuery وLodash باللون الأحمر، ما يعني أنه تم حظرهما. لا تزال الصفحة تفاعلية، لذا يبدو أنّ هذه الموارد ليست مطلوبة على الإطلاق.

   

5. انقر على إزالة جميع الأنماط لحذف نمط حظر /libs/*.

وبشكل عام، تعد علامة التبويب طلب الحظر مفيدة لمحاكاة سلوك صفحتك عند عدم توفّر أي مورد معيّن.

عليك الآن إزالة الإشارات إلى هذه الملفات من الرمز وتدقيق الصفحة مرة أخرى:

1. في علامة التبويب "المحرِّر"، افتح "template.html".

2. احذف علامات <script> المقابلة:

   <head>
       ...
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <script src="/libs/lodash.js"></script>
       <script src="/libs/jquery.js"></script>
       <title>Tony's Favorite Foods</title>
   </head>
   

3. الانتظار حتى تتم إعادة إنشاء الموقع وإعادة نشره.

4. تحقَّق من الصفحة مرة أخرى من لوحة Lighthouse. من المفترض أن تتحسن النتيجة الإجمالية مرة أخرى.

   

تحسين مسار العرض الحرج في العالم الحقيقي

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

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

تقليل تنفيذ سلسلة التعليمات الرئيسية

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

سلسلة التعليمات الرئيسية هي المكان الذي ينجز فيه المتصفّح معظم العمل اللازم لعرض الصفحة، مثل تحليل رموز HTML وCSS وJavaScript وتنفيذها.

ملاحظة: يقدّم هذا القسم مقدمة موجزة إلى لوحة الأداء. يمكنك الاطّلاع على مرجع ميزات الأداء لمعرفة مزيد من المعلومات حول كيفية استخدامه لتحليل أداء الصفحة.

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

1. افتح الأداء > إعدادات الالتقاط واضبط الشبكة على شبكة الجيل الثالث البطيئة ووحدة المعالجة المركزية (CPU) على بطء بمقدار 6 مرّات.

   

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

2. انقر على إعادة تحميل. تعيد أدوات مطوّري البرامج تحميل الصفحة ثم تعرض لك تمثيلاً بصريًا لكل ما كان يجب فعله لتحميل الصفحة. وستتم الإشارة إلى هذا التمثيل البصري باسم trace.

   

ويُظهر التتبُّع النشاط بترتيب زمني، من اليسار إلى اليمين. تمنحك مخططات FPS وCPU وNET في الجزء العلوي نظرة عامة على الإطارات في الثانية ونشاط وحدة المعالجة المركزية ونشاط الشبكة.

يشير اللون الأصفر الذي يظهر في القسم نظرة عامة إلى أنّ وحدة المعالجة المركزية (CPU) كانت مشغولة بالكامل بنشاط البرمجة النصية. وهذا دليل على أنك قد تتمكن من تسريع تحميل الصفحة من خلال تقليل تنفيذ JavaScript.

تحقَّق من آثار الأنشطة لإيجاد طرق لإنجاز عمل أقل باستخدام JavaScript:

1. انقر على قسم التوقيتات لتوسيعه.

   

   هناك مجموعة من مقاييس وقت المستخدم من React، ويبدو أنّ تطبيق توني يستخدم وضع تطوير React. من المحتمل أن يؤدي التبديل إلى وضع الإنتاج في React إلى تحقيق بعض المكاسب السهلة في الأداء.

2. انقر على التوقيتات مرة أخرى لتصغير هذا القسم.

3. تصفَّح القسم الرئيسي. يعرض هذا القسم سجلاً زمنيًا لنشاط سلسلة المحادثات الرئيسية، من اليمين إلى اليسار. يوضح المحور الصادي (من أعلى إلى أسفل) سبب وقوع الأحداث.

   

   في هذا المثال، تسبّب حدث Evaluate Script في تنفيذ الدالة (anonymous)، ما تسبّب في تنفيذ __webpack__require__، ما أدى إلى تنفيذ ./src/index.jsx وما إلى ذلك.

4. انتقِل إلى أسفل القسم الرئيسي. عندما تستخدم إطار عمل، ينتج الجزء الأكبر من النشاط عن إطار العمل، والذي يكون عادةً خارج سيطرتك. عادةً ما يكون النشاط الذي يتسبب فيه تطبيقك في أسفل الشاشة.

   

   في هذا التطبيق، يبدو أنّ دالة تُسمى App تتسبب في الكثير من الطلبات لدالة mineBitcoin. يبدو أن توني يستخدم أجهزة معجبيه لتنقيب العملات المشفّرة...

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

5. افتح علامة التبويب من أسفل إلى أعلى في أسفل الصفحة. تفصل علامة التبويب هذه الأنشطة التي استغرقت معظم الوقت. إذا لم يظهر لك أي شيء في القسم من أسفل إلى أعلى، انقر على تصنيف القسم الرئيسي.

   

   لا يعرض القسم من أسفل إلى أعلى إلا معلومات أي نشاط أو مجموعة أنشطة اخترتها حاليًا. على سبيل المثال، إذا نقرت على أحد أنشطة mineBitcoin، سيعرِض القسم من أسفل إلى أعلى معلومات عن هذا النشاط فقط.

   يعرض عمود الوقت الذاتي مقدار الوقت الذي تم قضاؤه مباشرةً في كل نشاط. وفي هذه الحالة، تم قضاء% 82 تقريبًا من وقت سلسلة المحادثات الرئيسية على الدالة mineBitcoin.

حان الوقت لمعرفة ما إذا كان استخدام وضع الإنتاج وتقليل نشاط JavaScript يؤدي إلى تسريع تحميل الصفحة. البدء بوضع الإنتاج:

1. في علامة التبويب "أداة التعديل"، افتح "webpack.config.js".
2. تغيير "mode":"development" إلى "mode":"production"
3. يُرجى الانتظار إلى أن يتم نشر الإصدار الجديد.

4. يُرجى تدقيق الصفحة مرة أخرى.

   

يمكنك تقليل نشاط JavaScript عن طريق إزالة الاستدعاء إلى mineBitcoin:

1. في علامة التبويب "أداة التعديل"، افتح "src/App.jsx".
2. علّق على المكالمة إلى this.mineBitcoin(1500) في constructor.
3. يُرجى الانتظار إلى أن يتم نشر الإصدار الجديد.
4. يُرجى تدقيق الصفحة مرة أخرى.

وكالعادة، هناك بعض الإجراءات التي يجب اتّخاذها، مثل تقليل مقياسَي سرعة عرض أكبر محتوى مرئي ومتغيّرات التصميم التراكمية.

تمت العملية بنجاح: يبدو أنّ التغيير الأخير ساهم في قفزة كبيرة في الأداء.

تقليل سلاسل المحادثات الرئيسية في العالم الفعلي

بشكل عام، لوحة الأداء هي الطريقة الأكثر شيوعًا لمعرفة النشاط الذي ينفّذه موقعك الإلكتروني أثناء تحميله، والعثور على طرق لإزالة النشاط غير الضروري.

إذا كنت تفضّل أسلوبًا يشبه console.log()، تتيح لك واجهة برمجة التطبيقات User Timing API ترميز مراحل معيّنة من دورة حياة تطبيقك عشوائيًا، من أجل تتبُّع المدة التي تستغرقها كل مرحلة من هذه المراحل.

ملخّص

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

الخطوات التالية

إجراء عمليات التدقيق على موقعك الإلكتروني إذا كنت بحاجة إلى مساعدة في تفسير تقريرك أو إيجاد طرق لتحسين أداء التحميل، يمكنك الاطّلاع على جميع طرق الحصول على المساعدة من منتدى "أدوات مطوّري البرامج":

• يُرجى الإبلاغ عن الأخطاء في هذا المستند في المستودع developer.chrome.com.
• يمكنك الإبلاغ عن تقارير الأخطاء في "أدوات مطوري البرامج" من خلال الانتقال إلى صفحة أخطاء Chromium.
• مناقشة الميزات والتغييرات في القائمة البريدية يُرجى عدم استخدام القائمة البريدية لأسئلة الدعم. استخدم Stack Overflow بدلاً من ذلك.
• يمكنك الحصول على مساعدة عامة حول كيفية استخدام "أدوات مطوري البرامج" على موقع Stack Overflow. استخدِم دائمًا أخطاء Chromium لإرسال طلبات الأخطاء.
• يمكنك التغريد على @ChromeDevTools.