Frontend Academy · पाठ

स्वचालित Lighthouse जाँच

Lighthouse CI GitHub Action जोड़ें, प्रदर्शन और अभिगम्यता स्कोर की सीमाएँ तय करें, और Core Web Vitals में गिरावट लाने वाले मर्ज रोकें।

पाठ 4, कुल 4 में से14 चरण

स्वचालित Lighthouse जाँच, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Lighthouse को स्वचालित क्यों करें?

मैन्युअल Lighthouse रन प्रदर्शन में आई गिरावट को देर से पकड़ते हैं — आमतौर पर तब, जब कोई वास्तविक उपयोगकर्ता शिकायत कर चुका होता है। स्वचालित Lighthouse CI प्रत्येक PR पर चलता है, प्रमुख मेट्रिक्स में गिरावट लाने वाले निर्माण को विफल करता है और समय के साथ स्कोर का रुझान दिखाता है। प्रदर्शन को परीक्षणों के समूह की तरह गंभीरता से लें।

Lighthouse CI

Google का ओपन-सोर्स Lighthouse CI (lhci) टूलसेट: Lighthouse को कई बार चलाता है, माध्यिका निकालता है, सीमाओं के विरुद्ध जाँच करता है और परिणाम अपलोड करता है।

npm install -D @lhci/cli

# Run locally:
npx lhci autorun

lighthouserc.json — कॉन्फ़िगरेशन

परीक्षण किए जाने वाले URL, रन की संख्या और दावे कॉन्फ़िगर करें।

// lighthouserc.json
{
  "ci": {
    "collect": {
      "url": [
        "http://localhost:3000",
        "http://localhost:3000/blog",
        "http://localhost:3000/pricing"
      ],
      "numberOfRuns": 5,
      "startServerCommand": "npm run start"
    },
    "assert": {
      "assertions": {
        "categories:performance":   ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "categories:seo":            ["warn", { "minScore": 0.9 }],
        "largest-contentful-paint":  ["error", { "maxNumericValue": 2500 }],
        "total-blocking-time":       ["error", { "maxNumericValue": 200 }],
        "cumulative-layout-shift":   ["error", { "maxNumericValue": 0.1 }]
      }
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}

GitHub Action एकीकरण

आधिकारिक treosh/lighthouse-ci-action प्रत्येक PR पर lhci चलाता है और स्थिति जाँच पोस्ट करता है।

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [pull_request]
jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20', cache: 'npm' }
      - run: npm ci && npm run build
      - uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: ./lighthouserc.json
          uploadArtifacts: true
          temporaryPublicStorage: true

कई रनों की माध्यिका

समय-संबंधी अनियमितता के कारण Lighthouse के स्कोर अलग-अलग रनों में बदलते रहते हैं। numberOfRuns: 5 माध्यिका निकालता है — जो उसके विरुद्ध जाँच करने के लिए पर्याप्त रूप से स्थिर होती है। 3 से कम रन अस्थिर परिणाम देते हैं।

प्रदर्शन बजट

स्कोर के अलावा, संसाधन के आकार और संख्या पर कठोर बजट निर्धारित करें। बजट से अधिक होने पर निर्माण विफल हो जाता है।

// budget.json
[
  {
    "resourceSizes": [
      { "resourceType": "script", "budget": 300 },
      { "resourceType": "image", "budget": 100 }
    ],
    "resourceCounts": [
      { "resourceType": "third-party", "budget": 10 }
    ]
  }
]

// lighthouserc.json:
"collect": {
  "settings": { "budgetsPath": "./budget.json" }
}

Lighthouse CI सर्वर

ऐतिहासिक डेटा सुरक्षित रखने, रुझान चार्ट देखने और समय के साथ शाखाओं की तुलना करने के लिए LHCI सर्वर को स्वयं होस्ट करें। या एक बार के PR परिणामों के लिए अस्थायी सार्वजनिक संग्रहण का उपयोग करें।

प्रमाणीकृत पृष्ठों का परीक्षण

Lighthouse चलने से पहले लॉग इन करने के लिए Puppeteer स्क्रिप्ट का उपयोग करें।

// lighthouserc.json
"collect": {
  "puppeteerScript": "./lighthouse-login.js",
  "url": ["http://localhost:3000/dashboard"]
}

// lighthouse-login.js
module.exports = async (browser, context) => {
  const page = await browser.newPage();
  await page.goto('http://localhost:3000/login');
  await page.fill('#email', 'test@example.com');
  await page.fill('#password', 'test123');
  await page.click('button[type=submit]');
  await page.waitForNavigation();
};

Slack/Discord सूचनाएँ

LHCI परिणामों को अपनी टीम की चैट में भेजें — प्रदर्शन में गिरावट को परीक्षण विफलताओं जितना ही ध्यान मिलना चाहिए।

मोबाइल बनाम डेस्कटॉप

Lighthouse का डिफ़ॉल्ट मोबाइल है (धीमा 4G + मध्यम श्रेणी का CPU)। डेस्कटॉप के लिए preset: 'desktop' सेट करें। अधिकांश प्रोडक्शन ऐप्लिकेशन को दोनों का ऑडिट करना चाहिए — सीआई में अलग-अलग कार्यों के रूप में।

सीमाओं का समायोजन

वर्तमान स्कोर को आधाररेखा के रूप में लेकर शुरुआत करें। पहले दिन PR को विफल न करें — पहले लॉग करें और चेतावनी दें। जब आपकी टीम इस कार्यप्रवाह की अभ्यस्त हो जाए, तो सीमाओं को धीरे-धीरे सख़्त करें।

Lighthouse से आगे

Lighthouse प्रयोगशाला से प्राप्त डेटा है। इसे वास्तविक उपयोगकर्ता निगरानी (RUM) के साथ मिलाएँ: web-vitals npm पैकेज और अपने एनालिटिक्स, या SpeedCurve और Calibre जैसी सेवाएँ, वास्तविक दुनिया के प्रदर्शन के रुझान दिखाती हैं।

त्वरित जाँच

Lighthouse CI आमतौर पर एक रन के बजाय कई रनों (जैसे 5) की माध्यिका क्यों लेता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: स्वचालित Lighthouse

lhci autorun सीआई के साथ एकीकृत होता है। lighthouserc.json में कॉन्फ़िगर करें: URL, रन (5+), श्रेणियों और मेट्रिक्स पर दावे तथा प्रदर्शन बजट। GitHub के लिए treosh/lighthouse-ci-action का उपयोग करें। रुझानों के लिए LHCI सर्वर को स्वयं होस्ट करें। प्रमाणीकृत पृष्ठों के लिए Puppeteer स्क्रिप्ट का उपयोग करें। मोबाइल और डेस्कटॉप दोनों का ऑडिट करें। चेतावनियों से शुरुआत करें; समय के साथ सीमाएँ सख़्त करें। पूरी तस्वीर के लिए RUM के साथ मिलाएँ।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 41
पाठ: 163

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “स्वचालित Lighthouse जाँच” पाठ निःशुल्क है?

हाँ—“स्वचालित Lighthouse जाँच” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“स्वचालित Lighthouse जाँच” में मैं क्या सीखूँगा?

Lighthouse CI GitHub Action जोड़ें, प्रदर्शन और अभिगम्यता स्कोर की सीमाएँ तय करें, और Core Web Vitals में गिरावट लाने वाले मर्ज रोकें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“स्वचालित Lighthouse जाँच” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

फ्रंटएंड के लिए GitHub Actions: lint, test, build
Vercel, Netlify और Cloudflare Pages पर डिप्लॉयमेंट
CI में पर्यावरण वेरिएबल
स्वचालित Lighthouse जाँच

← Frontend Academy पर वापस जाएँ