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

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

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

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

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

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

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

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

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

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

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

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

تم فتح أدوات مطوّري البرامج وتثبيتها على الجانب الأيمن من الشاشة.

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

تم فتح أدوات مطوّري البرامج في لوحة تدقيق Lighthouse.

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

أدوات مطوّري البرامج تعرض تقرير نتائج تدقيق Lighthouse

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

فهم تقريرك

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

نتائج مقاييس Lighthouse

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

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

عرض شريط الصور في أدوات مطوّري البرامج لصفحة يتم تحميلها

أسفل لقطات الشاشة، ترى فرصًا لتحسين أداء الصفحة.

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

عملية تدقيق موسّعة بعنوان "تأجيل الصور خارج الشاشة" تعرض عددًا من مسارات الصور التي يمكن تحسينها.

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

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

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