مقدمة عن Lighthouse

كما رأينا في القسم السابق، تركز مؤشرات ويب الأساسية (Core Web Vitals) على جوانب تجربة المستخدم من خلال أداء التحميل (أكبر عنصر مرئي - Largest Contentful Paint)، التفاعلية (تأخر أول إدخال - First Input Delay)، والاستقرار البصري (إزاحة التخطيط التراكمية - Cumulative Layout Shift).

في هذا الدرس، سنركز على كيفية قياس مؤشرات ويب الأساسية باستخدام بيئة محاكاة تسمى Lighthouse.

ملاحظة: في هذا الدرس سنستخدم أدوات مطوري Chrome. ومع ذلك، هناك طرق عديدة لتشغيل Lighthouse.

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

لنلقِ نظرة على مثالين لتقرير Lighthouse لرؤية الفرق بين موقع يتمتع بمؤشرات ويب أساسية صحية وآخر لا يتمتع بها.

مثال مُحسّن

لرؤية مثال عن كيفية عمل Lighthouse، سنستخدم الصفحة الرئيسية الخاصة بنا.

• افتح Chrome.
• في نافذة التصفح المتخفي، انتقل إلى https://nextjs.org.
• افتح أدوات المطورين وانقر على علامة تبويب Lighthouse.
• انقر على إنشاء تقرير.

سيتم الآن تشغيل تقرير يجب أن يستغرق أقل من 60 ثانية.

ملاحظة: من المهم تشغيل التقارير في نافذة التصفح المتخفي، لأن الإضافات الخارجية ستؤثر على تقريرك.

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

إليك مثال على التقرير:

مثال غير مُحسّن

لغرض هذا البرنامج التعليمي، قمنا بإنشاء تطبيق بدون أي تحسينات.

إعداد المشروع

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

تنزيل كود البداية

npx create-next-app@latest nextjs-lighthouse --use-npm --example "https://github.com/vercel/next-learn/tree/main/seo"

تشغيل بناء الإنتاج

للحصول على تقارير دقيقة من Lighthouse، يجب دائمًا اختبار تطبيقك ببناء إنتاجي. لتشغيل بناء إنتاجي، انتقل إلى دليل المشروع:

cd nextjs-lighthouse

قم ببناء تطبيقك عن طريق تشغيل next build وابدأ الخادم في وضع الإنتاج بتشغيل next start.

npm run build && npm run start

لنقم بتشغيل تقرير Lighthouse باستخدام أدوات مطوري Chrome. بمجرد اكتمال التقرير، لنبدأ في تحسين الموقع وتحسين المؤشرات.

قراءة إضافية

• Google Chrome: آلة حساب نقاط Lighthouse