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

نظرة عامة

استخدِم لوحة Lighthouse لإجراء تدقيق شامل لموقعك الإلكتروني. تنشئ لوحة Lighthouse تقريرًا يوفّر لك إحصاءات عن ما يلي في موقعك الإلكتروني:

• الأداء
• تسهيل الاستخدام
• أفضل الممارسات
• تحسين محركات البحث

... والعديد من المقاييس الأخرى

يساعدك البرنامج التعليمي التالي في بدء استخدام Lighthouse في "أدوات مطوّري البرامج في Chrome".

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

هدف البرنامج التعليمي

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

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

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

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

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

مقدمة

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

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

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

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

إعداد

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

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

   

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

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

   

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

   

وضع خط أساس

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

1. افتح لوحة Lighthouse. قد يكون مُخفَّأً خلف double_arrow المزيد من اللوحات.

   

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

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

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

   

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

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

فهم تقريرك

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

المقاييس

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

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

لقطات الشاشة

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

Opportunities

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تعرض كل خلية في فئة الحجم قيمتين. أعلى قيمة هي حجم المورد الذي تم تنزيله. القيمة الدنيا هي حجم المورد غير المضغوَط. إذا كانت القيمتان متطابقتين، فإن لا يتم ضغط المورد عند إرساله عبر الشبكة. في هذا المثال، كلا قيمَي أعلى وأسفل 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')).

   

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) تتيح لك تغيير حجم الصورة ديناميكيًا عند طلبها.
• حسِّن كل صورة على الأقل. وقد يؤدي ذلك غالبًا إلى توفير مبالغ كبيرة. التحسين هو عندما تشغل صورة من خلال برنامج خاص يقلل من حجم ملف الصورة. الاطّلاع على Essential تحسين الصور للحصول على مزيد من النصائح.

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

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

مورد حظر العرض هو ملف 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. من المفترض أن تتحسن النتيجة الإجمالية مرة أخرى.

   

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

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

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

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

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

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

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

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.