استكشاف فرص تحسين الأداء باستخدام 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. اضغط على Control+Shift+J (أو Command+Option+J على أجهزة Mac) لفتح "أدوات مطوّلي البرامج".

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

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

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

فهم تقريرك

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

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

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

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

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

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

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

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