يمكنك تحسين مهاراتك في رصد الأداء باستخدام Lighthouse و"أدوات مطوري البرامج في Chrome".
بصفتك مطوّرًا، لا يمكنك غالبًا التحكّم في النصوص البرمجية التابعة لجهات خارجية التي يحمّلها موقعك الإلكتروني. قبل أن تتمكّن من تحسين المحتوى التابع لجهات خارجية، عليك إجراء بعض التحقيقات لمعرفة ما الذي يجعل موقعك الإلكتروني بطيئًا. 🕵️
في هذه المشاركة، ستتعرّف على كيفية استخدام Lighthouse وأدوات مطوّري البرامج في Chrome لتحديد الموارد الخارجية البطيئة. يوضّح المنشور تقنيات متزايدة الفعالية، ويُفضّل استخدامها معًا.
إذا كان لديك 5 دقائق فقط
تساعدك تدقيق الأداء في Lighthouse على اكتشاف فرص تسريع تحميل الصفحات. من المرجّح أن تظهر النصوص البرمجية البطيئة التابعة لجهات خارجية في قسم بيانات التشخيص ضمن عمليات التدقيق تقليل وقت تنفيذ JavaScript وتجنُّب الحمولات الكبيرة على الشبكة.
لإجراء عملية تدقيق:
- اضغط على Ctrl + Shift + J (أو Command + Option + J على نظام التشغيل Mac) لفتح DevTools.
- انقر على علامة التبويب مصباح الهداية.
- انقر على الأجهزة الجوّالة.
- ضَع علامة في مربّع الاختيار الأداء. (يمكنك محو العلامة من مربّعات الاختيار الأخرى في قسم "عمليات التدقيق").
- انقر على شبكة الجيل الثالث السريعة المحاكية، ووحدة المعالجة المركزية (CPU) أبطأ بأربعة أضعاف.
- ضَع علامة في مربّع الاختيار محو مساحة التخزين.
- انقر على تنفيذ عمليات التدقيق.
استخدام الجهات الخارجية
تعرِض عملية تدقيق استخدام الجهات الخارجية في Lighthouse قائمة بالمزوّدين الخارجيين الذين تستعين بهم الصفحة. يمكن أن يساعدك هذا الملخّص في فهم الصورة الكبيرة بشكل أفضل وتحديد الرموز البرمجية المكرّرة التابعة لجهات خارجية. تتوفّر عملية التدقيق في إضافة Lighthouse، وسيتمّ قريبًا إضافتها إلى أدوات مطوّري البرامج في الإصدار 77 من Chrome.

تقليل وقت تنفيذ JavaScript
يُبرز تدقيق تقليل وقت تنفيذ JavaScript في Lighthouse النصوص البرمجية التي تستغرق وقتًا طويلاً في التحليل أو التجميع أو التقييم. ضَع علامة في مربّع الاختيار إظهار الموارد التابعة لجهات خارجية لاكتشاف النصوص البرمجية التابعة لجهات خارجية التي تستهلك موارد وحدة المعالجة المركزية (CPU).
تجنُّب الأحمال الكبيرة على الشبكة
ترصد عملية تدقيق تجنُّب الأحمال الزائدة للشبكة في Lighthouse طلبات الشبكة، بما في ذلك تلك الواردة من جهات خارجية، والتي قد تؤدي إلى إبطاء وقت تحميل الصفحة. يتعذّر إكمال عملية التدقيق عندما تتجاوز الحمولة على الشبكة 4,000 كيلوبايت.
حظر طلبات الشبكة في "أدوات مطوّري البرامج في Chrome"
يتيح لك حظر طلبات الشبكة في "أدوات مطوّري البرامج في Chrome" معرفة كيفية تصرف صفحتك في حال عدم توفّر نص برمجي أو جدول تنسيقات أو مورد آخر. بعد تحديد النصوص البرمجية التابعة لجهات خارجية التي تشتبه في أنّها تؤثّر في الأداء، يمكنك قياس مدى تغيُّر وقت التحميل من خلال حظر الطلبات إلى هذه النصوص البرمجية.
لتفعيل حظر الطلبات: 1. اضغط على Ctrl + Shift + J (أو Command + Option + J على نظام التشغيل Mac) لفتح DevTools. 1. انقر على علامة التبويب الشبكة. 1. انقر بزر الماوس الأيمن على أي طلب في لوحة الشبكة. 1. اختَر حظر عنوان URL للطلب.
ستظهر علامة التبويب حظر الطلبات في أدراج أدوات المطوّرين. ويمكنك إدارة الطلبات التي تم حظرها من هناك.
لقياس تأثير النصوص البرمجية التابعة لجهات خارجية:
- يمكنك قياس المدة التي يستغرقها تحميل صفحتك باستخدام لوحة الشبكة. لمحاكاة الظروف الواقعية، فعِّل ضبط الحد الأقصى المسموح به لعرض نطاق الشبكة وضبط الحد الأقصى المسموح به لسرعة وحدة المعالجة المركزية. (في عمليات الاتصال الأسرع وأجهزة الكمبيوتر المكتبي، قد لا يكون تأثير النصوص البرمجية المُكلّفة تمثيليًا كما هو الحال في الهاتف الجوّال).
- يمكنك حظر عناوين URL أو النطاقات المسؤولة عن النصوص البرمجية التابعة لجهات خارجية التي تعتقد أنّها تشكل مشكلة.
- أعِد تحميل الصفحة وأعِد قياس الوقت الذي يستغرقه التحميل بدون النصوص البرمجية المحظورة التابعة لجهات خارجية.
من المفترض أن تلاحظ تحسُّنًا في السرعة، ولكن في بعض الأحيان قد لا يؤدّي حظر النصوص البرمجية التابعة لجهات خارجية إلى التأثير الذي تتوقّعه. إذا كان الأمر كذلك، عليك تقليل قائمة عناوين URL المحظورة إلى أن ترصد العنوان الذي يتسبب في البطء.
يُرجى العِلم أنّ إجراء ثلاث عمليات قياس أو أكثر والاطّلاع على قيم المتوسط سيؤديان على الأرجح إلى تحقيق نتائج أكثر ثباتًا. بما أنّ المحتوى التابع لجهات خارجية يمكن أن يجذب أحيانًا موارد مختلفة لكل عملية تحميل للصفحة، يمكن أن يمنحك هذا النهج تقديرًا أكثر واقعية. تتيح أدوات مطوّري البرامج الآن تسجيلات متعددة في لوحة الأداء، ما يسهّل الأمر قليلاً.