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

مقاييس جديدة وتعديل نتيجة الأداء وعمليات تدقيق جديدة والمزيد

Connor Clark

نُطلِق اليوم Lighthouse 6.0.

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

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

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

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

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

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

يقدّم Lighthouse 6.0 ثلاثة مقاييس جديدة للتقرير. اثنان من هذه المقاييس الجديدة - الأكبر "سرعة عرض المحتوى على الصفحة" (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 يتابعها.

على الرغم من إضافة ثلاثة مقاييس جديدة، تمت إزالة ثلاثة مقاييس قديمة: First Meaningful Paint أول وحدة معالجة مركزية غير نشطة والحدّ الأقصى لمهلة الاستجابة لأوّل إدخال (FID) تم تعديل القيم التقديرية للمقاييس المتبقية إلى ويجب التركيز على التفاعل الرئيسي لسلسلة المحادثات وإمكانية توقُّع التنسيق.

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript غير مستخدَم

نحن نستفيد من رمز "أدوات مطوري البرامج" التغطية في تدقيق جديد: غير مستخدم 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
• Duplicate-id-aria

رمز القناع

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

بيان ترميز الأحرف

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

Lighthouse CI

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• يتعذر على PageSpeed Insights تدقيق المواقع الإلكترونية غير العامة، نظرًا لأنه يتم تشغيلها عبر وحدة تحكم عن بُعد وليس مثيل Chrome المحلي. إذا كنت بحاجة إلى تدقيق موقع ويب غير عام، فاستخدم لوحة Lighthouse في أدوات مطوّري البرامج أو واجهة سطر الأوامر في Node.
• لا نضمن لك استخدام أحدث إصدار من Lighthouse في "إحصاءات PageSpeed". إذا كنت تريد استخدام في أحدث إصدار، استخدم واجهة سطر الأوامر Node. سيتم تحديث إضافة المتصفّح بعد أسبوع أو أسبوعَين تقريبًا من إصدارها.
• أداة PageSpeed Insights هي واجهة برمجة تطبيقات من Google، ويمثل استخدامها قبولاً لبنود الخدمة. إذا كنت لا تريد قبول بنود الخدمة أو لا يمكنك قبولها، يمكنك استخدام لوحة 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 ونأمل أن يعمل Lighthouse 6.0 على تسهيل تحسين أداء مواقع الويب.

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

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

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