تدقيق HTML باستخدام Lighthouse

Lighthouse هي أداة تدقيق آلية مدمجة في Chrome DevTools (علامة التبويب Audits)، وتمنح الصفحة درجات في فئات الأداء، وإمكانية الوصول، وأفضل الممارسات، وSEO، وPWA. تشغّل الصفحة الخاضعة للتدقيق في المتصفح، وتقيسها، ثم تنتج اقتراحات قابلة للتنفيذ.

في Chrome DevTools، انتقل إلى Lighthouse، واختر الفئات، وحدد Desktop أو Mobile، ثم انقر على "Analyze page load". تعيد الأداة تحميل الصفحة في بيئة نظيفة، وتنتج تقريرًا في أقل من دقيقة.

يقيس Performance مؤشرات Core Web Vitals ومقاييس السرعة الأخرى. ويتحقق Accessibility من القواعد المتوافقة مع WCAG. وتغطي Best Practices الأمان ومعايير الويب الحديثة. ويتحقق SEO من الترميز القابل للزحف. ويتحقق PWA من قابلية التثبيت ودعم العمل دون اتصال.

يكشف تدقيق إمكانية الوصول ما يلي: غياب النص البديل، وغياب تسميات النماذج، وانخفاض تباين الألوان، وغياب سمة اللغة، ومعرّفات id المكررة، وغياب المعالم الدلالية، والعناصر القابلة للتركيز من دون دعم لوحة المفاتيح. وترتبط كل مشكلة بإرشادات تفصيلية لمعالجتها.

Largest Contentful Paint (LCP)، وCumulative Layout Shift (CLS)، وTotal Blocking Time (TBT)، وSpeed Index. تُقيَّم كل مقاييس وتُوزن لتكوين درجة Performance الإجمالية. ويعرض Lighthouse عناصر DOM التي تسهم بأكبر قدر في كل مقياس.

يتحقق هذا التدقيق من استخدام HTTPS، وأخطاء وحدة التحكم، ونسب أبعاد الصور، وواجهات API المهجورة، والمحتوى المختلط. ويكشف تدقيق Best Practices مجموعة واسعة من الأنماط القديمة أو غير الآمنة التي ينبغي تحديثها.

يكشف التدقيق غياب الوصف التعريفي، وغياب <title> أو تكراره، ومشكلات robots.txt، والروابط التي لا تحتوي على نص وصفي، وغياب وسم viewport التعريفي، ومشكلات hreflang. اجمع تدقيق SEO في Lighthouse مع أداة تدقيق SEO حقيقية مثل Ahrefs أو Screaming Frog لتحليل مستوى المحتوى.

يتحقق من كل متطلبات قابلية التثبيت: HTTPS، وmanifest صالح يحتوي على الحقول الأساسية، وتسجيل service worker، ووسم viewport، والأيقونات. أصلح جميع حالات فشل تدقيق PWA قبل إطلاق التطبيق بوصفه تطبيقًا قابلًا للتثبيت.

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

يمكن حفظ تقارير Lighthouse بصيغة JSON ومقارنتها برمجيًا: تتبع درجة LCP بمرور الوقت لاكتشاف التراجعات، وقارن بين طلبي سحب لمعرفة أي تغيير أثّر في أي مقياس، وأرسل تنبيهًا عند تجاوز الحدود. فالبيانات منظمة لتسهيل استخدامها في الأدوات.

Lighthouse اختبار اصطناعي؛ فهو يعمل في بيئة مضبوطة، وليس على مستخدمين فعليين. اجمعه مع أدوات مراقبة المستخدمين الفعليين (RUM) التي تتتبع تجربة المستخدم الحقيقية. تكشف الاختبارات الاصطناعية التراجعات مبكرًا، بينما تؤكد RUM أن المستخدمين يشعرون فعلًا بالتحسينات.

تُبلغ بعض عمليات التدقيق عن أنماط لا يمكن تجنبها في سياقات معينة. وثّق الاستثناءات المقصودة، وأضفها إلى قائمة التجاهل في Lighthouse CI، ثم أعد تقييمها دوريًا مع تطور المنصة. تجنب استخدام خيار "ignore all" بصورة شاملة؛ فهذا يلغي الغرض من التدقيق الآلي.

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

لماذا ينبغي الجمع بين عمليات التدقيق الاصطناعية في Lighthouse ومراقبة المستخدمين الفعليين (RUM)؟

يدقق Lighthouse الصفحة في فئات Performance وAccessibility وBest Practices وSEO وPWA. شغّله من Chrome DevTools لإجراء الفحوص الفردية، واستخدم Lighthouse CI للتكامل المستمر. عالج التراجعات مع كل طلب سحب، وابنِ ثقافة تحسين تعتمد على القياس، واجمع عمليات التدقيق الاصطناعية مع مراقبة المستخدمين الفعليين للتحقق من أن تحسينات المختبر تحقق فوائد فعلية للمستخدمين.