مقاييس جديدة وتعديل نتيجة الأداء وعمليات تدقيق جديدة والمزيد
نُطلق اليوم الإصدار 6.0 من Lighthouse.
Lighthouse هي أداة مبرمَجة لتدقيق المواقع الإلكترونية تساعد المطوّرين في الاطّلاع على الفرص والبيانات التشخيصية لتحسين تجربة المستخدمين على مواقعهم الإلكترونية. وتتوفّر في أدوات مطوري البرامج في Chrome أو npm (كوحدة Node وواجهة سطر أوامر) أو كإضافة متصفّح (في Chrome و Firefox). وتوفّر هذه الخدمة العديد من خدمات Google، بما في ذلك إحصاءات PageSpeed.
يتوفّر Lighthouse 6.0 على الفور في npm وفي Chrome Canary. سيتم تحديث خدمات Google الأخرى التي تستخدم Lighthouse بحلول نهاية الشهر. ستتوفّر هذه الميزة في الإصدار الثابت من Chrome 84 (أواسط تموز/يوليو).
لتجربة واجهة سطر أوامر Lighthouse Node، استخدِم الأوامر التالية:
bash
npm install -g lighthouse
lighthouse https://www.example.com --view
يتضمّن هذا الإصدار من Lighthouse عددًا كبيرًا من التغييرات المدرجة في سجلّ التغييرات 6.0. سنتناول أهم التفاصيل في هذه المقالة.
- مقاييس جديدة
- تعديل نتيجة الأداء
- عمليات التدقيق الجديدة
- Lighthouse CI
- إعادة تسمية لوحة "أدوات مطوّري البرامج في Chrome"
- محاكاة الأجهزة الجوّالة
- إضافة المتصفّح
- الميزانيات
- روابط مواقع المصدر
- في الأفق
- مع أطيب التحيات،
المقاييس الجديدة
تقدّم أداة Lighthouse 6.0 ثلاثة مقاييس جديدة في التقرير. إنّ اثنين من هذه المقاييس الجديدة، وهما سرعة عرض أكبر محتوى مرئي (LCP) ومتغيّرات التصميم التراكمية (CLS)، هما اختباران تجريبيان لمؤشرات أداء الويب الأساسية.
سرعة عرض أكبر محتوى مرئي (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% |
مع إضافة ثلاثة مقاييس جديدة، تمت إزالة ثلاثة مقاييس قديمة: "أول مرّة يظهر فيها المحتوى المرئي للمستخدم"، و"أول مرّة تكون فيها وحدة المعالجة المركزية في حالة الخمول"، و"أقصى قيمة محتملة لمقياس FID". تم تعديل أوزان المقاييس المتبقية لشدّد على تفاعل سلسلة المحادثات الرئيسية وإمكانية توقّع التنسيق.
للمقارنة، إليك نتائج الإصدار 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. وقد جاء ذلك استجابةً مباشرة لملاحظات المستخدمين حول تباينات TTI، بالإضافة إلى التناقضات في التحسينات على المقاييس، ما ساهم في حدوث تحسينات في تجربة المستخدم. لا يزال مقياس "وقت التفاعل" إشارة مفيدة لمعرفة ما إذا كانت الصفحة تفاعلية بالكامل، ولكن مع استخدام مقياس "إجمالي وقت الحظر" كأحد المكملات، ينخفض التباين. مع هذا التغيير في النتائج، نأمل أن يتم تشجيع المطوّرين بشكل أكثر فعالية لتحسين تفاعل المستخدمين.
- تم خفض وزن "سرعة عرض المحتوى على الصفحة" (FCP) من% 23 إلى %15. لم يمنحنا القياس فقط عند معالجة أول بكسل (FCP) صورة كاملة. ويؤدي الجمع بين هذين المقياسَين إلى قياس وقت ظهور المحتوى الذي يهتم به المستخدمون على الأرجح (LCP)، ما يعكس تجربة التحميل بشكل أفضل.
- تم إيقاف الحد الأقصى المحتمل من تأخير الإدخال الأول (FID). لم يعُد يظهر في التقرير، ولكنه لا يزال متاحًا بتنسيق JSON. ننصحك الآن بالاطّلاع على TBT لتحديد مستوى التفاعل بدلاً من mpFID.
- تم إيقاف مقياس "سرعة عرض أوّل محتوى مفيد على الصفحة" نهائيًا. كان هذا المقياس متغيرًا جدًا ولم يكن لديه مسار قابل للتوحيد لأنّ التنفيذ خاص بعناصر المعالجة الداخلية في 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 و 6 من Lighthouse. عند إجراء تدقيق باستخدام Lighthouse 6.0، يتضمّن التقرير رابطًا يؤدي إلى الآلة الحاسبة التي تمّت تعبئة نتائجك فيها.
عمليات التدقيق الجديدة
JavaScript غير مستخدَم
نعمل على الاستفادة من تغطية الترميز في "أدوات مطوري البرامج" في عملية تدقيق جديدة: محتوى JavaScript غير المستخدَم.
هذه العملية ليست جديدة تمامًا، فقد تمت إضافتها في منتصف عام 2017، ولكن بسبب زيادة الأداء، تم إيقافها تلقائيًا للحفاظ على سرعة Lighthouse القصوى بقدر الإمكان. أصبح جمع بيانات التغطية هذه أكثر فعاليةً الآن، لذا نشعر بالارتياح لتفعيلها تلقائيًا.
عمليات تدقيق تسهيل الاستخدام
يستخدم Lighthouse مكتبة axe-core الرائعة لتعزيز فئة تسهيل الاستخدام. في الإصدار 6.0 من Lighthouse، أضفنا عمليات التدقيق التالية:
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
رمز القناع
الرموز القابلة للتمويه هي تنسيق جديد للرموز يجعل رموز تطبيقك المتوافق مع الأجهزة الجوّالة تبدو رائعة على جميع أنواع الأجهزة. لمساعدة تطبيقك على الويب المتوافق مع الأجهزة الجوّالة في الظهور بأفضل شكل ممكن، طرحنا تدقيقًا جديدًا للتحقّق مما إذا كان ملف manifest.json يتيح هذا التنسيق الجديد.
بيان ترميز الأحرف
يوضّح عنصر meta charset ترميز الأحرف الذي يجب استخدامه لتفسير مستند HTML. إذا كان هذا العنصر غير متوفّر أو تم الإعلان عنه في وقت متأخر من الوثيقة، تستخدِم المتصفّحات عددًا من الأساليب الاستقرائية لتخمين ترميز النص الذي يجب استخدامه. إذا كان تخمين المتصفّح غير صحيح، وتم العثور على عنصر meta charset متأخرًا، يُلغي المُحلِّل بشكل عام كل العمل الذي تمّ حتى الآن ويبدأ من جديد، ما يؤدّي إلى تقديم تجارب سيئة للمستخدم. تتحقّق عملية التفتيش الجديدة هذه مما إذا كانت الصفحة تتضمّن ترميز أحرف صالحًا وتم تحديده مبكرًا.
رمز الاعتماد في Lighthouse
في مؤتمر CDS في تشرين الثاني (نوفمبر) الماضي، أعلنّا عن Lighthouse CI، وهو خادم وواجهة برمجة تطبيقات Node IDE المفتوحة المصدر التي تتتبّع نتائج Lighthouse عند كل عملية إرسال في مسار دمج التطوير المستمر، وقد قطعنا شوطًا طويلاً منذ الإصدار التجريبي. تتوفّر الآن خدمة Lighthouse CI لكثير من مقدّمي خدمات التطوير المتكامل (CI)، بما في ذلك Travis وCircle وGitLab وGitHub Actions. تتيح صور Docker الجاهزة للنشر تنفيذ الإعداد بسهولة، كما أنّ إعادة تصميم لوحة البيانات الشاملة تكشف الآن عن المؤشرات في كل فئة ومقياس في Lighthouse لإجراء تحليل مفصّل.
يمكنك بدء استخدام Lighthouse CI في مشروعك اليوم من خلال اتّباع دليل البدء.
لوحة "أدوات مطوّري البرامج في Chrome" التي تمت إعادة تسميتها
لقد أعادنا تسمية لوحة عمليات التدقيق إلى لوحة Lighthouse. يكفي ما قيل.
بناءً على حجم نافذة "أدوات مطوري البرامج"، من المحتمل أن تكون اللوحة خلف الزر »
. يمكنك سحب
علامة التبويب لتغيير الترتيب.
لإظهار اللوحة التي تتضمّن قائمة الأوامر بسرعة:
- اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوري البرامج".
- اضغط على
Control+Shift+P
(أوCommand+Shift+P
على أجهزة Mac) ل فتح قائمة الأمر. - ابدأ كتابة "مصباح".
- اضغط على المفتاح
Enter
.
محاكاة الأجهزة الجوّالة
تعتمد أداة Lighthouse على طريقة تفكير الأجهزة الجوّالة أولاً. تكون مشاكل الأداء أكثر وضوحًا في ظروف الأجهزة الجوّالة المعتادة، ولكن غالبًا لا يختبر المطوّرون في هذه الظروف. لهذا السبب، تُطبِّق الإعدادات default في Lighthouse محاكاة الأجهزة الجوّالة. تتألف المحاكاة من:
- محاكاة حالات الشبكة ووحدة المعالجة المركزية البطيئة (من خلال محرّك محاكاة يُسمى Lantern)
- محاكاة شاشة الجهاز (كما هو الحال في "أدوات مطوّري البرامج في 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 DevTools.
إضافة المتصفّح
كانت إضافة Chrome لخدمة Lighthouse طريقة ملائمة لتشغيل Lighthouse على الجهاز. لقد كان من الصعب تقديم الدعم. وبما أنّ لوحة Lighthouse في "أدوات مطوّري البرامج في Chrome" توفّر تجربة أفضل (يتم دمج التقرير مع اللوحات الأخرى)، اعتقدنا أنّه يمكننا تقليل النفقات الهندسية من خلال تبسيط إضافة Chrome.
بدلاً من تشغيل Lighthouse على الجهاز، تستخدم الإضافة الآن PageSpeed Insights API. ندرك أنّ هذا الإجراء لن يكونبديلاً كافيًا لبعض المستخدمين. في ما يلي الاختلافات الرئيسية:
- لا يمكن لأداة PageSpeed Insights تدقيق المواقع الإلكترونية غير المتاحة للجميع، لأنّها يتم تشغيلها من خلال ملف شخصي على خادم بعيد وليس من خلال مثيل Chrome على جهازك. إذا كنت بحاجة إلى تدقيق موقع إلكتروني غير متاح للجميع، استخدِم لوحة Lighthouse في أدوات مطوّري البرامج أو Node CLI.
- لا نضمن لك استخدام أحدث إصدار من Lighthouse في "إحصاءات PageSpeed". وإذا كنت تريد استخدام أحدث إصدار، استخدِم واجهة سطر الأوامر ستتلقّى إضافة المتصفّح التحديث بعد أسبوع أو أسبوعَين تقريبًا من الإصدار.
- أداة PageSpeed Insights هي إحدى واجهات برمجة تطبيقات Google، ويشكّل استخدامها قبول بنود خدمة Google API. إذا كنت لا تريد قبول بنود الخدمة أو لا يمكنك قبولها، استخدِم لوحة Lighthouse في DevTools أو Node CLI.
والخبر السار هو أنّ تبسيط قصة المنتج سمح لنا بالتركيز على المشاكل الهندسية الأخرى. نتيجةً لذلك، أطلقنا إضافة Lighthouse Firefox.
الميزانيات
طرحت أداة Lighthouse 5.0 حدود الأداء التي كانت تتيح إضافة حدود لكمّية كل نوع من أنواع الموارد (مثل النصوص البرمجية أو الصور أو ملفات CSS) التي يمكن أن تعرِضها الصفحة.
تضيف أداة Lighthouse 6.0 توافقًا مع مقاييس الميزانية، بحيث يمكنك الآن ضبط الحدود الدنيا لمقاييس معيّنة، مثل معدل الإحالات الناجحة. في الوقت الحالي، لا تتوفّر الميزانيات إلا لواجهة برمجة التطبيقات Node CLI وLighthouse CI.
روابط مواقع المصدر
يمكن أن تعود بعض المشاكل التي يعثر عليها Lighthouse في الصفحة إلى سطر معيّن من رمز المصدر، وسيوضّح التقرير الملف والسطر المحدّدَين المعنيّين. لتسهيل فحص هذه الملفات في أدوات مطوّري البرامج، سيؤدي النقر على المواقع الجغرافية المحدّدة في التقرير إلى فتح الملفات ذات الصلة في لوحة المصادر.
الميزات القادمة
بدأ Lighthouse بتجربة جمع خرائط المصادر لتوفير ميزات جديدة، مثل:
- رصد الوحدات المكرّرة في حِزم JavaScript
- رصد عمليات polyfill أو عمليات التحويل المفرطة في الرمز البرمجي المُرسَل إلى المتصفّحات الحديثة
- زيادة تدقيق JavaScript غير المستخدمة لتوفير دقة على مستوى الوحدة
- تصورات Treemap تبرز الوحدات التي تتطلب اتخاذ إجراء.
- يتم عرض رمز المصدر الأصلي لعناصر التقرير التي تحتوي على "موقع مصدر".
سيتم تفعيل هذه الميزات تلقائيًا في إصدار مستقبلي من 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 هو مشروع مفتوح المصدر، ونشكر بشدة كل المساهمين الذين يساعدون في كل ما يتعلّق بإصلاح الأخطاء الإملائية وإعادة تنظيم المستندات وإجراء عمليات فحص جديدة. هل يهمّك المساهمة؟ يمكنك الانتقال إلى مستودع GitHub الخاص بخدمة Lighthouse.