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

Kayce Basques

Sofia Emelianova

نظرة عامة

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

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

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

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

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

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

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

   

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

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

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

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

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

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

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

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

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

   

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

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

   

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

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

تحقَّق من آثار الأنشطة لإيجاد طرق لإنجاز عمل أقل باستخدام 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.