تحسين شبكة الإنترنت باستخدام Lighthouse

منذ مؤتمر Google I/O، عملنا جاهدين كي تصبح أداة Lighthouse رفيقًا رائعًا لإنشاء تطبيقات ويب تقدّمية رائعة:

يسرّنا اليوم الإعلان عن الإصدار 1.3 من Lighthouse. يتضمن Lighthouse 1.3 مجموعة من الميزات الجديدة وعمليات التدقيق والإصلاحات المعتادة للأخطاء. يمكنك تثبيته من خلال npm (npm i -g lighthouse) أو تنزيل الإضافة من سوق Chrome الإلكتروني.

ما الجديد؟

شكل وأسلوب جديدَين

إذا كنت قد استخدمت إصدارًا سابقًا من Lighthouse، فربما لاحظت أن الشعار جديد! خضع تقرير HTML وإضافة Chrome أيضًا لعملية تحديث كاملة، مع عرض أوضح للنتائج ومزيد من التناسق بين نتائج التدقيق. لقد أضفنا أيضًا معلومات مفيدة لتصحيح الأخطاء عند الإخفاق في الاختبار مع تضمين مؤشرات للحلول المقترحة.

تقرير Lighthouse

أفضل الممارسات الجديدة

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

يُعد "Do Better Web" جهودًا ضمن مشروع Lighthouse لمساعدة المطورين على اتخاذ إجراء أفضل على الويب. بعبارة أخرى، ساعدهم في تحديث تطبيقات الويب وتحسينها. في كثير من الأحيان، يستخدم مطورو الويب ممارسات قديمة، أو أساليب مضادة للأنماط، أو يواجهون صعوبات معروفة في الأداء دون إدراك ذلك. على سبيل المثال، من المعروف على نطاق واسع أنّ الرسوم المتحركة المستندة إلى JavaScript يجب تنفيذها باستخدام requestAnimationFrame() بدلاً من setInterval(). ومع ذلك، إذا لم يكن المطوّر على علم بواجهة برمجة التطبيقات الأحدث، سيتأثر تطبيق الويب لديه بدون داعٍ.

يتضمّن الإصدار 1.3 من أداة Lighthouse 1.3 ما يزيد عن 20 اقتراحًا من أفضل الممارسات الجديدة تتنوع بين نصائح حول تحديث ميزات CSS وJavaScript واقتراحات الأداء مثل: "تقليل عدد مواد العرض التي تحظر العرض" و"استخدام أدوات معالجة الأحداث السلبية لتحسين أداء التمرير".

تنفيذ أفضل الممارسات على الويب

وسنواصل إضافة المزيد من الاقتراحات بمرور الوقت. إذا كانت لديك اقتراحات لأفضل الممارسات أو تريد مساعدتنا في كتابة مراجعة، يمكنك الإبلاغ عن مشكلة على GitHub.

مُشاهد التقارير

أخيرًا وليس آخرًا، يسرّنا الإعلان عن عارض ويب جديد لنتائج Lighthouse. انتقل إلى googlechrome.github.io/lighthouse/viewer، واسحب نتائج تشغيل Lighthouse (أو انقر لتحميل ملفك) وإفلاتها هنا. "Insta" لـ Lighthouse HTML.

الإبلاغ عن مُشاهد
مُشاهد التقرير

تتيح لك أداة Lighthouse Viewer أيضًا مشاركة التقارير مع الآخرين. سيؤدي النقر فوق أيقونة المشاركة إلى تسجيل دخولك إلى GitHub. نخزن التقارير كعنصر سري في حسابك حتى يتسنى لك حذف تقرير مشترك أو تحديثه لاحقًا. يعني استخدام GitHub لتخزين البيانات أيضًا أنك تحصل على التحكم في الإصدار مجانًا!

بنية العارض
بنية العارض

يمكن إعادة تحميل التقارير الحالية باستخدام Lighthouse Viewer من خلال إضافة ?gist=GIST_ID إلى عنوان URL:

بنية العارض 2.
بنية العارض 2

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