Lighthouse هي أداة آلية مفتوحة المصدر تم تطويرها بواسطة Google لتحسين جودة صفحات الويب. يقوم بتدقيق موقعك عبر مقاييس مختلفة بما في ذلك الأداء وإمكانية الوصول وأفضل الممارسات وتحسين محركات البحث ومعايير تطبيق الويب التقدمي (PWA). على الرغم من أن تحقيق درجة Lighthouse المثالية يمثل تحديًا، إلا أنه ممكن من خلال التحسين المنهجي. سيرشدك هذا الدليل عبر الخطوات اللازمة لتحسين موقعك ويهدف إلى الحصول على نتيجة Lighthouse بنسبة 100%.

1. تحسين الأداء

يعد الأداء عنصرًا حاسمًا في نتيجة Lighthouse. إليك كيفية تحسينه:

تحميل كسول

تنفيذ التحميل البطيء للصور ومقاطع الفيديو لضمان تحميلها فقط عند ظهورها في إطار العرض.

document.addEventListener("DOMContentLoaded", function() {
    let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

    if ("IntersectionObserver" in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.remove("lazy");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });

        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    } else {
        // Fallback for browsers without IntersectionObserver
        let lazyLoad = function() {
            let scrollTop = window.pageYOffset;
            lazyImages.forEach(function(img) {
                if (img.offsetTop 




  
  
  ضغط


استخدم ضغط Brotli أو gzip لأصولك لتقليل حجمها وتسريع أوقات التحميل.


  
  
  التصغير


قم بتصغير ملفات JavaScript وCSS وHTML لإزالة الأحرف غير الضرورية وتقليل أحجام الملفات.


  
  
  التخزين المؤقت


الاستفادة من التخزين المؤقت للمتصفح عن طريق تعيين رؤوس ذاكرة التخزين المؤقت المناسبة لتحسين أوقات التحميل للزوار العائدين.


  
  
  CSS الحرجة


مضمنة CSS الهامة لضمان تحميل المحتوى الرئيسي لصفحتك بسرعة وتأجيل CSS غير الهامة.


  
  
  تقليل وقت تنفيذ جافا سكريبت


قم بتحسين كود JavaScript الخاص بك لتقليل وقت التنفيذ والتأكد من أن موقعك يظل مستجيبًا.


  
  
  2. تحسينات إمكانية الوصول


تضمن إمكانية الوصول إمكانية استخدام موقعك من قبل أكبر عدد ممكن من الأشخاص، بما في ذلك الأشخاص ذوي الإعاقة.


  
  
  تباين الألوان


تأكد من أن ألوان النص والخلفية بها تباين كافٍ لتكون قابلة للقراءة بسهولة.


  
  
  أدوار ARIA


استخدم أدوار ARIA وسماتها لتحسين إمكانية الوصول إلى تطبيق الويب الخاص بك.


  
  
  ترتيب الجدولة


التأكد من ترتيب علامات التبويب المنطقية للعناصر التفاعلية لتسهيل التنقل باستخدام لوحة المفاتيح.


  
  
  تسميات


إضافة تسميات وصفية لعناصر النموذج لجعلها في متناول قارئات الشاشة.


  
  
  3. أفضل الممارسات


يساعد اتباع أفضل الممارسات على ضمان أن موقعك آمن ويعمل بشكل جيد.


  
  
  HTTPS


قم بخدمة موقعك عبر HTTPS لضمان النقل الآمن للبيانات.


  
  
  تجنب المحتوى المختلط


تأكد من تحميل جميع الموارد عبر HTTPS لتجنب مشكلات المحتوى المختلط.


  
  
  التدقيق على الثغرات الأمنية


 قم بمراجعة التعليمات البرمجية الخاصة بك بانتظام بحثًا عن مشكلات الأمان وإصلاح أي ثغرات أمنية.


  
  
  4. تحسين محركات البحث


يساعد تحسين محركات البحث (SEO) على تحسين ظهور موقعك في نتائج محركات البحث.


  
  
  العلامات الفوقية


قم بتضمين العلامات الوصفية ذات الصلة للعنوان والوصف وإطار العرض.


  
  
  البيانات المنظمة


استخدم البيانات المنظمة (على سبيل المثال، JSON-LD) لمساعدة محركات البحث على فهم المحتوى الخاص بك بشكل أفضل.


  
  
  صديقة للجوال


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


  
  
  5. تطبيق الويب التقدمي (PWA)


توفر تطبيقات PWA تجربة أصلية تشبه التطبيق على الويب.


  
  
  ملف البيان


قم بإنشاء ملف بيان لتطبيق الويب يحتوي على كافة المعلومات الضرورية لجعل موقعك PWA.


  
  
  عامل الخدمة


تنفيذ عامل خدمة لتخزين الأصول مؤقتًا وتمكين الوظائف دون اتصال بالإنترنت.


  
  
  HTTPS


تأكد من تقديم موقعك عبر HTTPS، حيث يعد ذلك أحد متطلبات PWA.


  
  
  الاختبار والتكرار



  
  
  قم بإجراء عمليات تدقيق Lighthouse بانتظام


استخدم Chrome DevTools أو Lighthouse CLI لإجراء عمليات التدقيق ومعالجة أي مشكلات.


  
  
  عالمه فى أمرأة


استخدم أدوات مثل WebPageTest، وGoogle PageSpeed ​​Insights، وGTmetrix لمراقبة أداء موقعك.


  
  
  تحسن مستمر


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


  
  
  مثال: تحسين تحميل الموارد من خلال التحميل المسبق




    
    




  
  
  مثال: تنفيذ عامل الخدمة للتخزين المؤقت




// service-worker.js
self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('my-cache').then(function(cache) {
            return cache.addAll([
                '/',
                '/index.html',
                '/styles/main.css',
                '/scripts/main.js',
                '/images/logo.png'
            ]);
        })
    );
});

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request);
        })
    );
});





  
  
  تشغيل Lighthouse برمجياً


يمكنك تشغيل Lighthouse برمجيًا باستخدام وحدة Lighthouse Node:


const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

(async () => {
    const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
    const options = {logLevel: 'info', output: 'html', onlyCategories: ['performance'], port: chrome.port};
    const runnerResult = await lighthouse('https://example.com', options);

    // `.report` is the HTML report as a string
    const reportHtml = runnerResult.report;
    console.log(reportHtml);

    // `.lhr` is the Lighthouse Result as a JS object
    console.log('Report is done for', runnerResult.lhr.finalUrl);
    console.log('Performance score was', runnerResult.lhr.categories.performance.score * 100);

    await chrome.kill();
})();





  
  
  خاتمة


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

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