लाइटहाउस वेब पेजों की गुणवत्ता में सुधार के लिए Google द्वारा विकसित एक ओपन-सोर्स, स्वचालित टूल है। यह प्रदर्शन, पहुंच, सर्वोत्तम प्रथाओं, एसईओ और प्रगतिशील वेब ऐप (पीडब्ल्यूए) मानदंडों सहित विभिन्न मैट्रिक्स पर आपकी साइट का ऑडिट करता है। जबकि एक संपूर्ण लाइटहाउस स्कोर प्राप्त करना चुनौतीपूर्ण है, यह व्यवस्थित अनुकूलन के माध्यम से संभव है। यह मार्गदर्शिका आपको आपकी साइट को बेहतर बनाने और 100% लाइटहाउस स्कोर का लक्ष्य रखने के लिए आवश्यक कदम बताएगी।

1. प्रदर्शन अनुकूलन

प्रदर्शन लाइटहाउस स्कोर का एक महत्वपूर्ण घटक है। यहां बताया गया है कि आप इसे कैसे सुधार सकते हैं:

लोड करते हुए आलस आना

छवियों और वीडियो के लिए आलसी लोडिंग लागू करें ताकि यह सुनिश्चित हो सके कि वे केवल तभी लोड होते हैं जब वे व्यूपोर्ट में दिखाई देते हैं।

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 




  
  
  दबाव


अपनी संपत्तियों का आकार कम करने और लोडिंग समय को तेज करने के लिए ब्रॉटली या जीज़िप संपीड़न का उपयोग करें।


  
  
  लघुकरण


अनावश्यक वर्णों को हटाने और फ़ाइल आकार को कम करने के लिए अपनी जावास्क्रिप्ट, सीएसएस और HTML फ़ाइलों को छोटा करें।


  
  
  कैशिंग


लौटने वाले आगंतुकों के लिए लोड समय में सुधार करने के लिए उचित कैश हेडर सेट करके ब्राउज़र कैशिंग का लाभ उठाएं।


  
  
  क्रिटिकल सीएसएस


इनलाइन क्रिटिकल सीएसएस यह सुनिश्चित करने के लिए कि आपके पेज की मुख्य सामग्री तेजी से लोड हो और गैर-महत्वपूर्ण सीएसएस को स्थगित करें।


  
  
  जावास्क्रिप्ट निष्पादन समय कम करें


निष्पादन समय को कम करने और यह सुनिश्चित करने के लिए कि आपकी साइट उत्तरदायी बनी रहे, अपने जावास्क्रिप्ट कोड को अनुकूलित करें।


  
  
  2. अभिगम्यता संवर्द्धन


पहुंच-योग्यता यह सुनिश्चित करती है कि आपकी साइट का उपयोग यथासंभव अधिक से अधिक लोग कर सकें, जिनमें विकलांग लोग भी शामिल हैं।


  
  
  रंग कंट्रास्ट


सुनिश्चित करें कि पाठ और पृष्ठभूमि रंगों में आसानी से पढ़ने योग्य होने के लिए पर्याप्त कंट्रास्ट हो।


  
  
  एरिया भूमिकाएँ


अपने वेब एप्लिकेशन की पहुंच में सुधार के लिए ARIA भूमिकाओं और विशेषताओं का उपयोग करें।


  
  
  टैब ऑर्डर


कीबोर्ड का उपयोग करके नेविगेशन की सुविधा के लिए इंटरैक्टिव तत्वों के लिए एक तार्किक टैब क्रम सुनिश्चित करें।


  
  
  लेबल


तत्वों को स्क्रीन पाठकों के लिए सुलभ बनाने के लिए उनमें वर्णनात्मक लेबल जोड़ें।


  
  
  3. सर्वोत्तम प्रथाएँ


सर्वोत्तम प्रथाओं का पालन करने से यह सुनिश्चित करने में मदद मिलती है कि आपकी साइट सुरक्षित है और अच्छा प्रदर्शन करती है।


  
  
  HTTPS के


सुरक्षित डेटा ट्रांसमिशन सुनिश्चित करने के लिए अपनी साइट को HTTPS पर परोसें।


  
  
  मिश्रित सामग्री से बचें


मिश्रित सामग्री समस्याओं से बचने के लिए सुनिश्चित करें कि सभी संसाधन HTTPS पर लोड किए गए हैं।


  
  
  सुरक्षा कमजोरियों के लिए ऑडिट


सुरक्षा संबंधी समस्याओं के लिए नियमित रूप से अपने कोड का ऑडिट करें और किसी भी कमज़ोरी को ठीक करें।


  
  
  4. एसईओ


एसईओ खोज इंजन परिणामों में आपकी साइट की दृश्यता को बेहतर बनाने में मदद करता है।


  
  
  मेटा टैग


शीर्षक, विवरण और व्यूपोर्ट के लिए प्रासंगिक मेटा टैग शामिल करें।


  
  
  संरचित डेटा


खोज इंजनों को आपकी सामग्री को बेहतर ढंग से समझने में मदद करने के लिए संरचित डेटा (उदाहरण के लिए, JSON-LD) का उपयोग करें।


  
  
  मोबाइल के अनुकूल


सुनिश्चित करें कि आपकी साइट विभिन्न उपकरणों पर उपयोगकर्ताओं की जरूरतों को पूरा करने के लिए मोबाइल-अनुकूल और उत्तरदायी है।


  
  
  5. प्रोग्रेसिव वेब ऐप (PWA)


PWA वेब पर एक देशी ऐप जैसा अनुभव प्रदान करते हैं।


  
  
  प्रकट फ़ाइल


अपनी साइट को PWA बनाने के लिए सभी आवश्यक जानकारी के साथ एक वेब ऐप मेनिफेस्ट फ़ाइल बनाएं।


  
  
  सेवा कर्मी


संपत्तियों को कैश करने और ऑफ़लाइन कार्यक्षमता को सक्षम करने के लिए एक सेवा कार्यकर्ता को कार्यान्वित करें।


  
  
  HTTPS के


सुनिश्चित करें कि आपकी साइट HTTPS पर सेवा प्रदान करती है, क्योंकि यह PWA के लिए एक आवश्यकता है।


  
  
  परीक्षण और पुनरावृत्ति



  
  
  लाइटहाउस ऑडिट नियमित रूप से चलाएं


ऑडिट चलाने और किसी भी समस्या का समाधान करने के लिए क्रोम डेवटूल्स या लाइटहाउस सीएलआई का उपयोग करें।


  
  
  मॉनिटर प्रदर्शन


अपनी साइट के प्रदर्शन की निगरानी के लिए वेबपेजटेस्ट, गूगल पेजस्पीड इनसाइट्स और जीटीमेट्रिक्स जैसे टूल का उपयोग करें।


  
  
  निरंतर सुधार


उच्च प्रदर्शन और अच्छा उपयोगकर्ता अनुभव बनाए रखने के लिए अपने कोडबेस को नियमित रूप से अपडेट और अनुकूलित करें।


  
  
  उदाहरण: प्रीलोड के साथ संसाधन लोडिंग को अनुकूलित करना




    
    




  
  
  उदाहरण: कैशिंग के लिए एक सेवा कार्यकर्ता को लागू करना




// 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);
        })
    );
});





  
  
  लाइटहाउस को प्रोग्रामेटिक रूप से चलाना


आप लाइटहाउस नोड मॉड्यूल का उपयोग करके लाइटहाउस को प्रोग्रामेटिक रूप से चला सकते हैं:


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();
})();





  
  
  निष्कर्ष


एक आदर्श लाइटहाउस स्कोर प्राप्त करने के लिए निरंतर प्रयास और सर्वोत्तम प्रथाओं के प्रति प्रतिबद्धता की आवश्यकता होती है। प्रदर्शन अनुकूलन, पहुंच बढ़ाने, सर्वोत्तम प्रथाओं का पालन करने, एसईओ में सुधार करने और पीडब्ल्यूए सुविधाओं को लागू करने पर ध्यान केंद्रित करके, आप अपने लाइटहाउस स्कोर में उल्लेखनीय सुधार कर सकते हैं। नियमित परीक्षण और पुनरावृत्ति एक उच्च-गुणवत्ता वाले वेब एप्लिकेशन को बनाए रखने की कुंजी है जो एक बेहतरीन उपयोगकर्ता अनुभव प्रदान करता है।

याद रखें, हालांकि अपने लाइटहाउस स्कोर को बेहतर बनाने के लिए शॉर्टकट ढूंढना आकर्षक हो सकता है, वास्तविक अनुकूलन के परिणामस्वरूप बेहतर उपयोगकर्ता अनुभव और अधिक मजबूत वेब एप्लिकेशन प्राप्त होगा।