الميزات الجديدة في Lighthouse 10

Brendan Kenny
Brendan Kenny

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

يتوفر Lighthouse 10 على الفور على سطر الأوامر من خلال npm وفي Chrome Canary. وستتوفر هذه الميزة في الإصدار الثابت من Chrome في الإصدار 112 من Chrome وفي إحصاءات PageSpeed خلال الأسابيع المقبلة.

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

ستتم إزالة مقياس وقت التفاعل (TTI) المهم في Lighthouse 10، للانتهاء من عملية الإيقاف التي بدأت في Lighthouse 8. يتحول تأثير نتيجة TTI إلى 10% إلى متغيّرات التصميم التراكمية (CLS)، التي ستمثل الآن% 25 من نتيجة الأداء الإجمالية.

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

إنّ زيادة قيمة متغيّرات التصميم التراكمية (CLS) عرضية لإزالة أداة TTI، لكنّها تعكس أهميتها بشكل أفضل باعتبارها مؤشر Core Web Vitals، ومن المفترض أن يؤدي ذلك إلى زيادة التركيز على المواقع الإلكترونية التي لا تزال تُجري تغييرات غير ضرورية في التصميم.

ونتوقع أن يؤدي ذلك إلى تحسين معظم الصفحات نتائج الأداء، لأنّ معظم الصفحات تميل إلى تحقيق أداء أفضل في متغيّرات التصميم التراكمية (CLS) مقارنةً بـ TTI. وعند تحليل 13 مليون عملية تحميل للصفحات في آخر مرة تم فيها تشغيل "أرشيف HTTP"، ستشهد% 90 من هذه الصفحات تحسّنًا في نتيجة أداء Lighthouse، بينما تشهد% 50 منها تحسنًا في الأداء يزيد عن 5 نقاط.

مقياس نتيجة Lighthouse، مقسَّم حسب المقاييس (FCP وSI وLCP وTBT وCLS) التي تشكِّل النتيجة الإجمالية

إذا كنت لا تزال بحاجة إلى قيمة Lighthouse TTI (في تأكيد CI لسبب ما)، ستظل متاحة بدون تغيير في إخراج Lighthouse JSON، فقط مع أهمية القيمة 0 ومخفية في تقرير HTML. ومن المفترض أن يستمر أي وصول نصي لقيمة JSON في العمل بدون تغييرات.

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

يوفّر Lighthouse 10 عملية تدقيق جديدة في الأداء وتغييرًا كبيرًا إلى أداء آخر.

ميزة "التخزين المؤقت للصفحات"

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

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

مثال على نتيجة من تدقيق bfcache، وتعذُّر إدراج البيانات بسبب اتصال IndexDB مفتوح ومعالجات إلغاء تحميل في الصفحة

ألقِ نظرة على مستندات تدقيق bfcache للحصول على مزيد من المعلومات.

إدخالات منع اللصق

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

عملية التدقيق الجديدة أصبحت الآن "السماح للمستخدمين باللصق في حقول الإدخال" (paste-preventing-inputs).

مستخدمو العُقدة

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

يتم أيضًا شحن Lighthouse 10 مع بيانات من نوع TypeScript بشكل كامل. يجب الآن كتابة أي بيانات تم استيرادها من lighthouse، الأمر الذي من المفترض أن يكون مفيدًا بشكل خاص عند كتابة تدفقات المستخدمين في Lighthouse.

نص برمجي لعقدة يستورد Lighthouse كدالة، لتوضيح أن كائن الخيارات الذي تم تمريره إلى الدالة تم التحقق منه من خلال TypeScript

جرِّب الأنواع وأخبِرنا إذا واجهت أي مشاكل في استخدامها.

منارة الركض

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

لتجربة واجهة سطر الأوامر لعقدة Lighthouse، استخدِم الأوامر التالية:

npm install -g lighthouse
lighthouse https://www.example.com --view

التواصل مع فريق Lighthouse

لمناقشة الميزات الجديدة، يمكنك إجراء تغييرات على إصدار Lighthouse 10 أو أي تغييرات أخرى متعلقة بأداة Lighthouse: