الميزات الجديدة في الإصدار 6.0 من Lighthouse

مقاييس جديدة، وتعديل نتيجة الأداء، وعمليات تدقيق جديدة، وغير ذلك.

اليوم نصدر Lighthouse 6.0.

Lighthouse هي أداة مبرمَجة للتدقيق في المواقع الإلكترونية، تساعد المطوّرين في توفير فرص وبيانات التشخيص لتحسين تجربة المستخدم على مواقعهم الإلكترونية. وهو متاح في "أدوات مطوري البرامج في Chrome" أو npm (كوحدة عقدة وواجهة سطر الأوامر) أو كإضافة متصفّح (في Chrome وFirefox). تدعم هذه الخدمة العديد من خدمات Google، بما في ذلك web.dev/measure وإحصاءات PageSpeed.

يتوفر Lighthouse 6.0 على الفور في npm وفي Chrome Canary. وسيتم التحديث بحلول نهاية الشهر إلى خدمات Google الأخرى التي تستفيد من Lighthouse. ستتوفّر في إصدار Chrome الثابت في الإصدار 84 من Chrome (منتصف تموز (يوليو)).

لتجربة واجهة سطر الأوامر في Lighthouse Node، استخدِم الأوامر التالية: bash npm install -g lighthouse lighthouse https://www.example.com --view

يأتي هذا الإصدار من Lighthouse مع عدد كبير من التغييرات المدرجة في سجلّ التغييرات 6.0. سنتناول أبرز ما في هذه المقالة.

• المقاييس الجديدة
• تعديل بشأن نتيجة الأداء
• عمليات التدقيق الجديدة
• Lighthouse CI
• لوحة "أدوات مطوري البرامج في Chrome" أُعيد تسميتها
• محاكاة الأجهزة الجوّالة
• إضافة المتصفِّح
• الميزانيات
• روابط المواقع الجغرافية المصدر
• في الأفق
• رسالة شكر

المقاييس الجديدة

يقدّم الإصدار 6.0 من Lighthouse ثلاثة مقاييس جديدة للتقرير. وهناك مقياسان جديدان هما "سرعة عرض أكبر محتوى مرئي" (LCP) ومتغيّرات التصميم التراكمية (CLS) هما مقياسان لتنفيذ مؤشرات أداء الويب الأساسية.

سرعة عرض أكبر محتوى مرئي (LCP)

سرعة عرض أكبر محتوى مرئي (LCP) هو مقياس لتجربة التحميل التي يتم رصدها. تشير هذه العلامة إلى النقطة أثناء تحميل الصفحة عند تحميل المحتوى الأساسي أو "الأكبر" ويكون مرئيًا للمستخدم. ويشكّل مقياس LCP مكمّلًا مهمًّا لميزة "سرعة عرض المحتوى على الصفحة" (FCP) التي لا تسجّل سوى بداية تجربة التحميل. يوفّر مقياس LCP إشارة للمطوّرين حول مدى سرعة عرض محتوى الصفحة للمستخدم. تُعتبر درجة LCP التي تقل عن 2.5 ثانية "جيدة".

للمزيد من المعلومات، يمكنك مشاهدة هذا الفيديو التفصيلي عن سرعة LCP الذي أعدّه "بول أيرش".

متغيّرات التصميم التراكمية (CLS)

متغيّرات التصميم التراكمية (CLS) هي قياس للثبات البصري. وهو يحدد المقدار الذي يتغير من محتوى الصفحة بصريًا. وتشير نتيجة متغيّرات التصميم التراكمية (CLS) المنخفضة إلى إشارة المطوّرين إلى أنّ المستخدمين لا يواجهون تغيّرات غير مشروعة في المحتوى، وعندما تكون نتيجة متغيّرات التصميم التراكمية (CLS) التي تقلّ عن 0.10 تُعتبَر "جيدة".

ويتم قياس متغيّرات التصميم التراكمية (CLS) في البيئة المعملية من خلال نهاية تحميل الصفحة. في حين أنه في هذا الحقل، يمكنك قياس متغيّرات التصميم التراكمية (CLS) حتى تفاعل المستخدم الأول أو تضمين جميع إدخالات المستخدمين.

لمزيد من المعلومات، يمكنك مشاهدة هذا التحليل التفصيلي عن متغيّرات التصميم التراكمية (CLS) من إعداد "آني سوليفان".

إجمالي وقت الحظر (TBT)

يقيس إجمالي وقت الحظر (TBT) سرعة استجابة التحميل، ما يقيس إجمالي الوقت الذي تم فيه حظر سلسلة التعليمات الرئيسية لمدة كافية لمنع استجابة الإدخالات. تقيس ميزة TBT إجمالي المدة الزمنية بين "سرعة عرض المحتوى على الصفحة" (FCP) و"وقت التفاعل" (TTI). وهو مقياس مصاحب لـ TTI وهو يقدّم المزيد من التفاصيل لتحديد نشاط سلسلة المحادثات الرئيسية التي تمنع المستخدم من التفاعل مع صفحتك.

بالإضافة إلى ذلك، ترتبط TBT بشكل جيد بمقياس الحقل مهلة الاستجابة لأوّل إدخال (FID)، وهو أحد مؤشرات أداء الويب الأساسية.

تعديل نتيجة الأداء

يتم احتساب نتيجة الأداء في Lighthouse من مزيج مرجّح من مقاييس متعدّدة لتلخيص سرعة الصفحة. فيما يلي معادلة نتيجة الأداء 6.0.

المرحلة	اسم المقياس	الوزن المتري
مبكرًا (15%)	First Contentful Paint (FCP)	15%
متوسطة (40%)	مؤشر السرعة (SI)	15%
	سرعة عرض أكبر محتوى مرئي (LCP)	25%
متأخر (15%)	مدّة التفاعل (TTI)	15%
سلسلة التعليمات الرئيسية (25%)	إجمالي وقت الحظر (TBT)	25%
القدرة على التنبؤ (5%)	متغيّرات التصميم التراكمية (CLS)	5%

تمت إضافة ثلاثة مقاييس جديدة، وتمت إزالة ثلاثة مقاييس قديمة: "سرعة عرض أول محتوى مفيد" و"وحدة المعالجة المركزية الأولى الخاملة" و"الحد الأقصى المحتمل لمهلة الاستجابة الأولى". تم تعديل المقاييس المتبقية للتأكيد على تفاعل سلسلة التعليمات الرئيسية وقابلية توقع التنسيق.

للمقارنة، إليك نتيجة الإصدار 5:

المرحلة	اسم المقياس	الوزن
مبكرًا (23%)	First Contentful Paint (FCP)	23%
متوسطة (34%)	مؤشر السرعة (SI)	27%
	سرعة عرض أول محتوى مفيد على الصفحة (FMP)	7%
مكتملة (%46)	مدّة التفاعل (TTI)	‫33%
	وحدة المعالجة المركزية الأولى غير نشطة (FCI)	13%
سلسلة التعليمات الرئيسية	الحد الأقصى المحتمل من FID	‫0%

في ما يلي بعض أبرز التغيّرات في النتائج بين الإصدارين 5 و6 من Lighthouse:

• انخفضت نسبة وزن فريق TTI من% 33 إلى%15. كان ذلك استجابةً لملاحظات المستخدمين بشأن تغيُّر المؤشرات، بالإضافة إلى التناقضات في تحسينات المقاييس التي أدّت إلى حدوث تحسينات في تجربة المستخدم. ولا يزال "الصحيح" إشارة مفيدة عندما تكون الصفحة تفاعلية بالكامل، إلا أنّ استخدام "TBT" تكميلي يعني أنّه يتم تقليل معدّل التغيّر. من خلال تغيير النتائج هذا، نأمل أن يتم تشجيع المطوّرين بشكل أكثر فعالية على تحسين تفاعل المستخدمين.
• انخفضت قيمة مقياس FCP من% 23 إلى %15. إن القياس فقط عند رسم البكسل الأول (FCP) لا يعطينا صورة كاملة. ومن خلال دمجها مع قياس الوقت الذي يكون فيه المستخدمون قادرين على عرض ما يهمّهم (LCP)، يتم توفير تجربة التحميل بشكل أفضل.
• تم نهائيًا إيقاف الحد الأقصى المحتمل لمهلة الاستجابة الأولى. لم يعد يظهر في التقرير، ولكنه لا يزال متاحًا في JSON. ننصحك الآن بالاطّلاع على البيانات التي يتم تحديدها من خلال تقنية TBT لقياس مدى تفاعلك بدلاً من mpFID.
• تم إيقاف "سرعة عرض أوّل محتوى مفيد على الصفحة". كان هذا المقياس متفاوتًا للغاية ولم يكن له مسار قابل للتوحيد لأن تطبيقه خاص بالعناصر الداخلية لعرض Chrome. ترى بعض الفِرق أنّ توقيت FMP مناسب على مواقعهم الإلكترونية، إلّا أنّ المقياس لن يتلقّى أي تحسينات إضافية.
• تم إيقاف وحدة المعالجة المركزية الأولى غير النشِطة نهائيًا لأنها لا تختلف بدرجة كافية عن تقنية TTI. TBT وTTI هما المقياسان الأهم للتفاعل الآن.
• إنّ حجم متغيّرات التصميم التراكمية منخفض نسبيًا، على الرغم من أنّنا نتوقّع زيادتها في إصدار رئيسي مستقبلي.

التغييرات في النتائج

كيف تؤثر هذه التغييرات في درجات المواقع الحقيقية؟ لقد نشرنا تحليلاً للتغييرات في الدرجة باستخدام مجموعتَي بيانات: مجموعة عامة من المواقع الإلكترونية ومجموعة من المواقع الإلكترونية الثابتة التي تم إنشاؤها باستخدام Eleventy. باختصار، تشهد حوالي 20% من المواقع الإلكترونية نتائج أعلى بشكل ملحوظ، وحوالي% 30 منهم لا يحدث أي تغيير، ويلاحظ حوالى% 50 من المواقع الإلكترونية انخفاضًا بمقدار خمس نقاط على الأقل.

يمكن تقسيم تغييرات النتيجة إلى ثلاثة مكوّنات أساسية:

• تسجيل التغييرات في الوزن
• إصلاح الأخطاء في عمليات تنفيذ المقاييس الأساسية
• تغييرات منحنى النتيجة الفردية

أدت التغييرات في ترجيح النتيجة إلى جانب طرح ثلاثة مقاييس جديدة إلى إحداث معظم التغييرات في النتيجة الإجمالية. المقاييس الجديدة التي لم يحسّنها المطوّرون بعد لتحسينها لها تأثير كبير في نتيجة الأداء للإصدار 6. وعلى الرغم من أنّ متوسط نتيجة الأداء للاختبار في الإصدار 5 كان حوالي 50، كان متوسط الدرجات في المقياسَين الجديدَين "إجمالي وقت الحظر" و"سرعة عرض أكبر محتوى مرئي" حوالى 30. يشكِّل هذان المقياسان معًا نسبة% 50 من الأهمية في نتيجة الأداء الخاصة بالإصدار 6 من Lighthouse، ولذلك فإنّ نسبة كبيرة من المواقع الإلكترونية شهدت انخفاضًا في نسبة الزيارات.

يمكن أن تؤدي إصلاحات الأخطاء في احتساب المقياس الأساسي إلى الحصول على نتائج مختلفة. يؤثر هذا الأمر في عدد قليل نسبيًا من المواقع الإلكترونية ولكن قد يكون له تأثير كبير في حالات معيّنة. شهدت حوالي% 8 من المواقع الإلكترونية تحسُّنًا في النتيجة بسبب تغييرات في تنفيذ المقاييس، وشهدت% 4 تقريبًا من المواقع الإلكترونية انخفاضًا في النتيجة بسبب تغييرات في تنفيذ المقاييس. لم تتأثر ما يقرب من 88% من المواقع بهذه الإصلاحات.

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

حاسبة النتائج

نشرنا حاسبة النتائج لمساعدتك في الاطّلاع على نتائج الأداء. تعرض لك الآلة الحاسبة أيضًا مقارنة بين درجات Lighthouse في الإصدار 5 و6. عند إجراء تدقيق باستخدام Lighthouse 6.0، يأتي التقرير مع رابط للآلة الحاسبة مع تعبئة نتائجك.

عمليات تدقيق جديدة

JavaScript غير مستخدم

نعمل على الاستفادة من تغطية الترميز في أدوات مطوّري البرامج في عملية تدقيق جديدة: Unused JavaScript.

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

عمليات تدقيق تسهيل الاستخدام

تستخدم أداة Lighthouse مكتبة axe-core الرائعة لتعزيز فئة إمكانية الوصول. في Lighthouse 6.0، أضفنا عمليات التدقيق التالية:

• aria-hidden-body
• aria-hidden-focus
• aria-input-field-name
• aria-toggle-field-name
• form-field-multiple-labels
• heading-order
• Duplicate-id-active
• تكرار-id-aria

رمز القناع

الرموز القابلة للإخفاء هي تنسيق جديد للأيقونات يجعل رموز PWA تبدو رائعة على جميع أنواع الأجهزة. للمساعدة في تحسين مظهر تطبيق الويب التقدّمي (PWA) قدر الإمكان، قدمنا عملية تدقيق جديدة للتحقّق مما إذا كان ملفManifest.json متوافق مع هذا التنسيق الجديد.

تعريف ترميز الأحرف

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

Lighthouse CI

في CDS في تشرين الثاني (نوفمبر) الماضي أعلنّا عن Lighthouse CI، وهي واجهة سطر الأوامر المفتوحة المصدر والخادم الذي يتتبّع نتائج Lighthouse في كل عملية تنفيذ في عملية الدمج المستمر، وقد قطعنا شوطًا طويلاً منذ إطلاق الإصدار الأولي. لدى Lighthouse CI الآن دعم للعديد من مزودي CI، بما في ذلك Travis وCircle وGitLab وGitHub Actions. تجعل صور docker الجاهزة للنشر عملية إعداد سهلة للغاية، وتتيح عملية إعادة التصميم الشاملة للوحة البيانات الآن إظهار المؤشرات على مستوى كل فئة ومقياس في Lighthouse لإجراء تحليل تفصيلي.

يمكنك اليوم استخدام Lighthouse CI في مشروعك من خلال اتّباع دليل البدء.

إعادة تسمية لوحة "أدوات مطوري البرامج في Chrome"

أعدنا تسمية لوحة التدقيق لتصبح لوحة Lighthouse. قال هذا ما يكفي!

بناءً على حجم نافذة "أدوات مطوري البرامج"، يُحتمَل أنّ اللوحة تظهر خلف الزر ». يمكنك سحب علامة التبويب لتغيير الترتيب.

للكشف سريعًا عن اللوحة باستخدام قائمة الأوامر:

1. اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوّري البرامج".
2. اضغط على Control+Shift+P (أو Command+Shift+P على نظام التشغيل Mac) لفتح قائمة Command.
3. ابدأ كتابة "Lighthouse".
4. اضغط على المفتاح Enter.

محاكاة الأجهزة الجوّالة

تتبع Lighthouse عقلية الهاتف المحمول أولاً. تكون مشكلات الأداء أكثر وضوحًا في ظل ظروف الجوّال العادية، لكن المطورين غالبًا لا يختبرون في هذه الظروف. وهذا هو السبب في أن التهيئة التلقائية في Lighthouse تطبق محاكاة الأجهزة الجوّالة. تتكون عملية المحاكاة مما يلي:

• محاكاة ظروف الشبكة البطيئة ووحدة المعالجة المركزية (CPU) (من خلال محرّك محاكاة يُسمى الفانوس)
• محاكاة شاشة الجهاز (وهي نفسها المتوفّرة في "أدوات مطوري البرامج في Chrome").

ومنذ البداية، استخدمت Lighthouse جهاز Nexus 5X كجهاز مرجعي. في السنوات الأخيرة، كان معظم مهندسي الأداء يستخدمون Moto G4 لأغراض الاختبار. الآن، اتبعت Lighthouse هذا الإجراء وغيّرت جهازها المرجعي إلى Moto G4. من الناحية العملية، لا يُلاحظ هذا التغيير كثيرًا، ولكن في ما يلي جميع التغييرات التي يمكن رصدها من خلال صفحة الويب:

• يتم تغيير حجم الشاشة من 412 × 660 بكسل إلى 360 × 640 بكسل.
• تم تغيير سلسلة وكيل المستخدم قليلاً، وسيصبح الآن الجزء الذي كان سابقًا Nexus 5 Build/MRA58N Moto G (4).

اعتبارًا من الإصدار 81 من Chrome، سيتوفّر جهاز Moto G4 أيضًا في قائمة محاكاة الأجهزة ضمن "أدوات مطوري البرامج في Chrome".

إضافة المتصفح

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

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

• يتعذر على PageSpeed Insights تدقيق مواقع الويب غير العامة، نظرًا لأنها يتم تشغيلها عبر خادم بعيد وليس عبر مثيل Chrome المحلي. إذا كنت بحاجة إلى تدقيق موقع إلكتروني غير متاح للجميع، استخدِم لوحة Lighthouse الخاصة بأدوات مطوّري البرامج أو واجهة سطر الأوامر للعقدة.
• لا نضمن لك أن تستخدم "إحصاءات PageSpeed" أحدث إصدار من Lighthouse. وإذا كنت تريد استخدام أحدث إصدار، استخدِم Node CLI. سيتم تحديث إضافة المتصفّح بعد أسبوع أو أسبوعين تقريبًا من إصداره.
• "إحصاءات PageSpeed " هي واجهة برمجة تطبيقات Google API، ويعني استخدامها قبول بنود خدمة Google API. إذا كنت لا تريد قبول بنود الخدمة أو يتعذّر عليك قبولها، استخدِم لوحة Lighthouse في أدوات مطوّري البرامج أو واجهة سطر الأوامر للعقدة.

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

الميزانيات

قدَّم Lighthouse 5.0 ميزانيات أداء التي سمحت بإضافة حدود مقدار المحتوى الذي يمكن للصفحة عرضه من كل نوع (مثل النصوص البرمجية أو الصور أو css).

يضيف Lighthouse 6.0 دعمًا لمقاييس إعداد الميزانية، لذا أصبح بإمكانك الآن ضبط حدود لمقاييس محدّدة، مثل "سرعة عرض المحتوى على الصفحة". في الوقت الحالي، تتوفّر الميزانيات فقط لكل من Node CLI وLighthouse CI.

روابط الموقع الجغرافي المصدر

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

في الأفق

بدأت أداة Lighthouse في تجربة جمع خرائط المصادر لتعزيز الميزات الجديدة، مثل:

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

سيتم تفعيل هذه الميزات تلقائيًا في إصدار مستقبلي من Lighthouse. في الوقت الحالي، يمكنك عرض عمليات التدقيق التجريبية في Lighthouse باستخدام علامة CLI التالية:

lighthouse https://web.dev --view --preset experimental

شكرًا

نشكرك على استخدام Lighthouse وتقديم ملاحظاتك. تساعدنا ملاحظاتك في تحسين Lighthouse ونأمل أن يساعد الإصدار 6.0 من Lighthouse في تسهيل عملية تحسين أداء المواقع الإلكترونية.

ما هي الخطوات التالية؟

• افتح Chrome Canary وانتقِل إلى لوحة Lighthouse.
• استخدِم واجهة سطر الأوامر للعُقدة: npm install -g lighthouse && lighthouse https://yoursite.com --view.
• ابدأ تشغيل Lighthouse CI باستخدام مشروعك.
• راجِع مستندات تدقيق Lighthouse.
• استمتع بجعل الويب أفضل!

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