استكشاف فرص تحسين الأداء باستخدام Lighthouse

Kayce Basques

Lighthouse هي أداة تساعدك في قياس أداء الصفحة والعثور على طرق لتحسينه. في ما يلي خطوات سير العمل العامة لاستخدام Lighthouse:

1. يمكنك إخبار Lighthouse بالصفحة التي تريد تدقيقها.
2. تحمِّل أداة Lighthouse هذه الصفحة وتُسجِّل الوقت الذي تستغرقه الصفحة في تحقيق معالم الأداء المختلفة. وتُسمّى هذه المعالم مقاييس.
3. يوفّر لك Lighthouse تقريرًا عن مستوى أداء الصفحة. يقدّم التقرير نتيجة لكل مقياس وقائمة بالفرص التي من المفترض أن تؤدي إلى تحميل الصفحة بشكل أسرع في حال تنفيذها.

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

تشغيل Lighthouse من صفحة ملفك الشخصي

يمكنك تشغيل Lighthouse من صفحة ملفك الشخصي على web.dev باتّباع الخطوات التالية:

1. أدخِل أي عنوان URL، وستُجري Lighthouse سلسلة من عمليات التدقيق لإنشاء تقرير عن مستوى أداء الصفحة.

2. راجِع تقرير عمليات التدقيق لتحديد الجوانب التي يمكن تحسين صفحتك فيها.

3. في كل عملية تدقيق، ستعثر على إرشادات وخطوات فورية يمكنك اتّخاذها لتحسين نتائجك.

تشغيل Lighthouse من "أدوات مطوّري البرامج في Chrome"

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

1. في Chrome، انتقِل إلى الصفحة التي تريد تدقيقها.
2. اضغط على Ctrl ‏+ Shift ‏+ J (أو Command ‏+ Option ‏+ J على نظام التشغيل Mac) لفتح DevTools.

انقر على علامة التبويب عمليات التدقيق. إذا لم تظهر لك علامة التبويب هذه، انقر على رمز » ثم اختَر عمليات التدقيق من القائمة. أداة Lighthouse هي المحرك الذي يشغّل لوحة عمليات التدقيق. لهذا السبب تظهر لك صورة phare.

1. تأكَّد من اختيار زر الاختيار هاتف جوّال. عندما يُراجع Lighthouse صفحتك، سيُحاكي إطار عرض جهاز الجوّال وسلسلة وكيل المستخدِم.
2. تأكَّد من تفعيل مربّع الاختيار الأداء. يمكنك تفعيل باقي مربّعات الاختيار أو إيقافها في قسم عمليات التدقيق. في حال تفعيله، ستظهر لك مجموعة من الفرص حول طرق تحسين هذه العناصر الأخرى في صفحتك.
3. تأكَّد من تحديد زر الاختيار محاكاة شبكة جيل ثالث سريعة، ووحدة المعالجة المركزية (CPU) أبطأ بأربعة أضعاف. لا تُبطئ أداة Lighthouse الشبكة أو وحدة المعالجة المركزية أثناء loadingتحميل الصفحة. بدلاً من ذلك، يرصد الوقت الذي استغرقته الصفحة في التحميل في ظل ظروف عادية، ثم يقدّر الوقت الذي كان سيستغرقه التحميل على شبكة 3G سريعة باستخدام وحدة معالجة مركزية أقل كفاءة من وحدة المعالجة المركزية في جهازك بمقدار 4 مرات.
4. تأكَّد من تفعيل مربّع الاختيار محو مساحة التخزين. يفرض هذا الخيار على Lighthouse الانتقال إلى الشبكة لكل مورد صفحة، وهو الطريقة التي يتفاعل بها الزوّار لأول مرة مع الصفحة.
5. انقر على تنفيذ عمليات التدقيق. بعد مرور 5 إلى 10 ثوانٍ، يعرض لك Lighthouse تقريرًا.

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

فهم تقريرك

في أعلى يسار التقرير، يتم إدراج نتيجة الأداء العام. يشير الرقم 100 إلى نتيجة مثالية. تظهر درجات المقاييس أسفل النتيجة الإجمالية. يوضّح دليل احتساب الدرجات في Lighthouse‏ 3 كيفية مساهمة كل درجة مقياس في النتيجة الإجمالية.

مرِّر مؤشّر الماوس فوق أحد المقاييس للاطّلاع على مزيد من المعلومات عنه. انقر على مزيد من المعلومات للاطّلاع على مستندات حول هذا الموضوع.

أسفل نتائج المقاييس، تظهر لك لقطات شاشة لشكل الصفحة أثناء loading.

أسفل لقطات الشاشة، تظهر لك فرص لتحسين أداء الصفحة.

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

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

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

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