كيفية تحليل أداء موقع الويب باستخدام Lighthouse

تدقيق أداء موقع الويب يدويًا أو برمجيًا أو تلقائيًا

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

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

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

تشغيل Lighthouse مع Chrome DevTools

يمكنك إجراء عمليات تدقيق الأداء يدويًا باستخدام ملحق متصفح Chrome DevTools. ما عليك سوى تشغيل الامتداد من صفحة الويب التي ترغب في اختبارها وتحديد لوحة "التدقيق".

من بين مجموعة متنوعة من عمليات التدقيق ، يمكنك اختيار "الأداء". يمكنك أيضًا اختيار محاكاة نوع الجهاز وتقييد الشبكة. يمكن العثور على بعض المعلومات الخاصة بالاختناق في مشروع Lighthouse Github repo.

انقر فوق "تشغيل عمليات التدقيق" بعد ذلك. عند الانتهاء ، تقدم Lighthouse تقريرًا داخل واجهة مستخدم التمديد.

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

في أعلى الجانب الأيسر من لوحة Chrome DevTools ، يوجد رمز تنزيل يمكنك استخدامه لتنزيل التقرير الكامل بتنسيق JSON. يمكنك بعد ذلك استخدامه لإنشاء تقرير بتنسيق PDF عبر Lighthouse Report Viewer.

نظرًا للكم الكبير من العوامل التي تلعب دورًا في دورة حياة تحميل الصفحة ، فمن المهم مقارنة النتائج على دفعات. أخذ متوسط ​​5 أشواط ، على سبيل المثال ، سيوفر رؤية أفضل.

تشغيل المنارة برمجيًا

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

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

تشغيل المنارة تلقائيًا بمرور الوقت

والآن بما أننا محترفون - فلننتقل إلى المستوى التالي. هناك العديد من عمليات الدمج المدرجة في وثائق Lighthouse ، لذلك دعونا نلقي نظرة على إحداها.

استخدام "Foo" لتشغيل Lighthouse ومقارنة النتائج بمرور الوقت

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

يمكنك إضافة عناوين URL للتتبع على www.foo.software ومراقبة تغير الأداء. يوفر Foo أيضًا إشعارات عبر البريد الإلكتروني أو Slack أو PagerDuty عندما ينخفض ​​الأداء إلى ما دون الحد الذي حدده المستخدم ، وعندما يعود إلى طبيعته ، وعندما يتم تحديد التحسينات تلقائيًا!

أفضل جزء في ذلك هو أنه يمكنك إنشاء حساب مجانًا! بمجرد التسجيل وتسجيل الدخول ، انقر فوق ارتباط "الصفحات" من شريط التنقل العلوي. هذا هو المكان الذي يمكنك فيه إضافة عناوين URL لمراقبتها. يحفظ Foo النتائج ويعرض مخططًا زمنيًا يوفر تصورًا للمقاييس المهمة. يمكنك التبديل بين الأيام والأسابيع والشهور والتنقل في التقارير التفصيلية.

استنتاج

أصبحت Lighthouse معيارًا صناعيًا في قياس أداء مواقع الويب. هناك كتب تستحق التوثيق حول Lighthouse توفر تفاصيل المقاييس المهمة.