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

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

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

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

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

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

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

مقدمة

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

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

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

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

إعداد

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

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

   

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

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

   

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

   

وضع خط الأساس

يمثّل الخط القاعدي سجلّاً لأداء الموقع الإلكتروني قبل إجراء أي تحسينات على الأداء.

1. افتح لوحة Lighthouse. قد يكون المحتوى مخفيًا خلف double_arrow لوحات إضافية.

   

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

   • check_box محو مساحة التخزين: يؤدي تفعيل مربّع الاختيار هذا إلى محو كل مساحة التخزين المرتبطة بالصفحة قبل كل عملية تدقيق. ويمكنك إبقاء هذا الإعداد مفعَّلاً إذا كنت تريد التدقيق في تجربة الزائرين الذين يزورون موقعك الإلكتروني لأول مرة. ويمكنك إيقاف هذا الإعداد إذا أردت تجربة تكرار الزيارة.
   • ميزة محاكاة التقييد (تلقائية) 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. ارجع إلى علامة التبويب "محرّر إعلانات Google"، افتح 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. انقر على علامة التبويب Network (الشبكة) وافتح قائمة الأوامر مرة أخرى.

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

   

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

   

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

   

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

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

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

1. ارجع إلى علامة التبويب "محرّر إعلانات Google"، افتح 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.

   

يظهر النشاط حسب تسلسل زمني، من اليسار إلى اليمين. الرسوم البيانية لعدد اللقطات في الثانية ووحدة المعالجة المركزية (CPU) ووحدة المعالجة المركزية (NET) في أعلى الصفحة تقدم نظرة عامة على عدد اللقطات في الثانية ونشاط وحدة المعالجة المركزية (CPU) ونشاط الشبكة.

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

تحقَّق من عملية التتبُّع للعثور على طرق لتنفيذ عمل JavaScript أقل:

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

   

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

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

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

   

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

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

   

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

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

   

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

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

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

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

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

   

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

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

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

تقليل العمل في سلسلة التعليمات الرئيسية على أرض الواقع

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

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

ملخّص

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

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

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

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