ఫ్రంటెండ్ లైట్‌హౌస్ CI: వెబ్ అప్లికేషన్‌ల కోసం నిరంతర పనితీరు పర్యవేక్షణ

నేటి వేగవంతమైన డిజిటల్ ప్రపంచంలో, వెబ్‌సైట్ పనితీరు చాలా ముఖ్యం. నెమ్మదిగా లోడ్ అయ్యే లేదా సరిగ్గా ఆప్టిమైజ్ చేయని వెబ్‌సైట్ వినియోగదారులను నిరాశపరుస్తుంది, ఎంగేజ్‌మెంట్ తగ్గిస్తుంది మరియు చివరికి మీ వ్యాపారంపై ప్రతికూల ప్రభావం చూపుతుంది. ఇక్కడే లైట్‌హౌస్ CI ఉపయోగపడుతుంది. ఈ గైడ్, నిరంతర పనితీరు పర్యవేక్షణ కోసం లైట్‌హౌస్ CI ని అమలు చేయడంలో మీకు సహాయపడుతుంది, మీ వినియోగదారులను ప్రభావితం చేయడానికి ముందే పనితీరు అడ్డంకులను గుర్తించి, పరిష్కరించడానికి మిమ్మల్ని శక్తివంతం చేస్తుంది.

లైట్‌హౌస్ CI అంటే ఏమిటి?

లైట్‌హౌస్ CI అనేది ఒక ఓపెన్-సోర్స్, ఆటోమేటెడ్ పనితీరు పరీక్షా సాధనం, ఇది మీ కంటిన్యూయస్ ఇంటిగ్రేషన్ మరియు కంటిన్యూయస్ డెలివరీ (CI/CD) పైప్‌లైన్‌లో సజావుగా కలిసిపోతుంది. ఇది మీ వెబ్‌సైట్ పనితీరు, యాక్సెసిబిలిటీ, SEO, మరియు ఉత్తమ పద్ధతులపై చర్య తీసుకోదగిన అంతర్దృష్టులను అందించడానికి Google యొక్క లైట్‌హౌస్ ఆడిటింగ్ సాధనాన్ని ఉపయోగిస్తుంది. మీ వర్క్‌ఫ్లోలో లైట్‌హౌస్ CI ని చేర్చడం ద్వారా, మీరు మీ వెబ్‌సైట్ పనితీరును నిరంతరం పర్యవేక్షించవచ్చు, రిగ్రెషన్‌లను ట్రాక్ చేయవచ్చు మరియు ప్రతి కోడ్ మార్పు మెరుగైన వినియోగదారు అనుభవానికి దోహదపడేలా చూసుకోవచ్చు. లైట్‌హౌస్ CI ఏ ఒక్క క్లౌడ్ ప్రొవైడర్‌కు పరిమితం కాదు మరియు వివిధ సెటప్‌లతో ఉపయోగించవచ్చు. ఉదాహరణకు, ఇది Github Actions, Jenkins, CircleCI మరియు మరెన్నో సేవలలో డాకర్ కంటైనర్‌లో రన్ కాగలదు.

లైట్‌హౌస్ CI ఎందుకు ఉపయోగించాలి?

లైట్‌హౌస్ CI ని అమలు చేయడం వల్ల అనేక ప్రయోజనాలు ఉన్నాయి:

• పనితీరు రిగ్రెషన్‌లను ముందుగానే గుర్తించడం: కొత్త కోడ్ మార్పుల వల్ల ఏర్పడే పనితీరు సమస్యలను అవి ప్రొడక్షన్‌కు చేరకముందే గుర్తించండి.
• మెరుగైన వెబ్‌సైట్ పనితీరు: వేగం, యాక్సెసిబిలిటీ మరియు SEO కోసం మీ వెబ్‌సైట్‌ను ఎలా ఆప్టిమైజ్ చేయాలో చర్య తీసుకోదగిన అంతర్దృష్టులను పొందండి.
• మెరుగైన వినియోగదారు అనుభవం: సందర్శకులను ఎంగేజ్‌గా ఉంచే వేగవంతమైన మరియు మరింత యూజర్-ఫ్రెండ్లీ వెబ్‌సైట్‌ను అందించండి.
• బౌన్స్ రేటు తగ్గించడం: వినియోగదారుల నిరాశను తగ్గించడానికి మరియు వారు మీ సైట్‌ను విడిచిపెట్టకుండా నిరోధించడానికి లోడింగ్ సమయాలను ఆప్టిమైజ్ చేయండి.
• పెరిగిన మార్పిడి రేట్లు: వేగవంతమైన వెబ్‌సైట్ సాధారణంగా అధిక మార్పిడి రేట్లు మరియు మెరుగైన వ్యాపార ఫలితాలకు దారితీస్తుంది.
• ఆటోమేటెడ్ పనితీరు పరీక్ష: నిరంతర పర్యవేక్షణ కోసం మీ CI/CD పైప్‌లైన్‌లో పనితీరు పరీక్షను ఏకీకృతం చేయండి.
• డేటా-ఆధారిత నిర్ణయం తీసుకోవడం: మీ ఆప్టిమైజేషన్ ప్రయత్నాలను నిర్దిష్ట పనితీరు కొలమానాలు మరియు అంతర్దృష్టులపై ఆధారపరచండి.
• దీర్ఘకాలిక పనితీరు ట్రాకింగ్: కాలక్రమేణా మీ వెబ్‌సైట్ పనితీరును పర్యవేక్షించి, ట్రెండ్‌లను గుర్తించండి మరియు మీ ఆప్టిమైజేషన్‌ల ప్రభావాన్ని కొలవండి.

లైట్‌హౌస్ CI యొక్క ముఖ్య ఫీచర్లు

• ఆటోమేటెడ్ ఆడిట్‌లు: మీ CI/CD ప్రాసెస్‌లో భాగంగా లైట్‌హౌస్ ఆడిట్‌లను ఆటోమేటిక్‌గా రన్ చేస్తుంది.
• పనితీరు బడ్జెట్‌లు: మీ వెబ్‌సైట్ ఆమోదయోగ్యమైన పనితీరు పరిమితులలో ఉండేలా చూసుకోవడానికి పనితీరు బడ్జెట్‌లను సెట్ చేయండి.
• రిగ్రెషన్ ట్రాకింగ్: కాలక్రమేణా పనితీరు రిగ్రెషన్‌లను ట్రాక్ చేస్తుంది, వాటికి కారణమైన కోడ్ మార్పులను గుర్తించడానికి మిమ్మల్ని అనుమతిస్తుంది.
• చర్య తీసుకోదగిన అంతర్దృష్టులు: మీ వెబ్‌సైట్ పనితీరును ఎలా మెరుగుపరచాలనే దానిపై చర్య తీసుకోదగిన సిఫార్సులతో కూడిన వివరణాత్మక నివేదికలను అందిస్తుంది.
• అనుకూలీకరించదగిన కాన్ఫిగరేషన్: మీ నిర్దిష్ట అవసరాలు మరియు అవసరాలకు అనుగుణంగా లైట్‌హౌస్ CI ని కాన్ఫిగర్ చేయండి.
• CI/CD సాధనాలతో ఇంటిగ్రేషన్: Jenkins, CircleCI, GitHub Actions, మరియు GitLab CI వంటి ప్రముఖ CI/CD సాధనాలతో సజావుగా ఇంటిగ్రేట్ అవుతుంది.
• ఓపెన్ సోర్స్: లైట్‌హౌస్ CI ఒక ఓపెన్-సోర్స్ ప్రాజెక్ట్, అంటే ఇది ఉపయోగించడానికి మరియు సవరించడానికి ఉచితం.

లైట్‌హౌస్ CI ని సెటప్ చేయడం: ఒక దశల వారీ గైడ్

మీ ప్రాజెక్ట్ కోసం లైట్‌హౌస్ CI ని సెటప్ చేయడానికి ఇక్కడ ఒక సమగ్ర గైడ్ ఉంది:

1. లైట్‌హౌస్ CI CLI ని ఇన్‌స్టాల్ చేయండి

మొదట, మీరు npm లేదా yarn ఉపయోగించి లైట్‌హౌస్ CI కమాండ్-లైన్ ఇంటర్‌ఫేస్ (CLI) ని గ్లోబల్‌గా ఇన్‌స్టాల్ చేయాలి:

            npm install -g @lhci/cli
yarn global add @lhci/cli
            

              
                Copy
              
            
          

2. లైట్‌హౌస్ CI ని కాన్ఫిగర్ చేయండి

లైట్‌హౌస్ CI ని కాన్ఫిగర్ చేయడానికి మీ ప్రాజెక్ట్ యొక్క రూట్‌లో lighthouserc.js ఫైల్‌ను సృష్టించండి. ఈ ఫైల్ ఆడిట్ చేయాల్సిన URLలను, అసర్షన్ నియమాలను మరియు ఇతర కాన్ఫిగరేషన్ ఎంపికలను నిర్వచిస్తుంది.

ఇక్కడ lighthouserc.js ఫైల్ యొక్క ప్రాథమిక ఉదాహరణ ఉంది:

            module.exports = {
  ci:
   {
    collect: {
      url: ['http://localhost:3000', 'http://localhost:3000/about']
    },
    assert: {
      preset: 'lighthouse:recommended'
    },
    upload: {
      target: 'temporary-public-storage'
    },
  },
};

            

              
                Copy
              
            
          

వివరణ:

• collect.url: లైట్‌హౌస్ ద్వారా ఆడిట్ చేయబడే URLలను నిర్దేశిస్తుంది. ఈ ఉదాహరణలో, మేము localhost:3000 లో నడుస్తున్న వెబ్‌సైట్ యొక్క హోమ్‌పేజీ మరియు "about" పేజీని ఆడిట్ చేస్తున్నాము. దీన్ని *మీ* ప్రాజెక్ట్‌కు సంబంధించిన URLలతో భర్తీ చేయడం గుర్తుంచుకోండి, ఇందులో స్టేజింగ్ ఎన్విరాన్‌మెంట్‌లు ఉండవచ్చు.
• assert.preset: ఇది lighthouse:recommended ప్రీసెట్‌ను ఉపయోగిస్తుంది, ఇది లైట్‌హౌస్ సిఫార్సుల ఆధారంగా ముందుగా నిర్వచించిన అసర్షన్‌ల సెట్‌ను వర్తింపజేస్తుంది. ఇది మంచి ప్రారంభ స్థానం, కానీ మీరు అవసరమైన విధంగా ఈ అసర్షన్‌లను అనుకూలీకరించవచ్చు.
• upload.target: లైట్‌హౌస్ CI ఫలితాలు ఎక్కడ అప్‌లోడ్ చేయబడతాయో కాన్ఫిగర్ చేస్తుంది. temporary-public-storage అనేది టెస్టింగ్ మరియు డెవలప్‌మెంట్ కోసం ఉపయోగపడుతుంది, కానీ ప్రొడక్షన్ ఎన్విరాన్‌మెంట్‌ల కోసం, మీరు సాధారణంగా మరింత శాశ్వత నిల్వ పరిష్కారాన్ని ఉపయోగించాలనుకుంటారు (తరువాత చర్చిద్దాం).

3. మీ CI/CD పైప్‌లైన్‌లో లైట్‌హౌస్ CI ని ఇంటిగ్రేట్ చేయండి

తదుపరి దశ మీ CI/CD పైప్‌లైన్‌లో లైట్‌హౌస్ CI ని ఇంటిగ్రేట్ చేయడం. ఖచ్చితమైన దశలు మీ CI/CD ప్రొవైడర్‌పై ఆధారపడి ఉంటాయి, కానీ సాధారణ ప్రక్రియలో మీ CI/CD కాన్ఫిగరేషన్‌కు లైట్‌హౌస్ CI కమాండ్‌లను నడిపే స్క్రిప్ట్‌ను జోడించడం ఉంటుంది.

GitHub Actions ఉపయోగించి ఉదాహరణ:

మీ రిపోజిటరీలో .github/workflows/lighthouse-ci.yml అనే ఫైల్‌ను కింది కంటెంట్‌తో సృష్టించండి:

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16.x'
      - name: Install dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.11.x
          lhci autorun

            

              
                Copy
              
            
          

వివరణ:

• on.push.branches: main బ్రాంచ్‌కు చేసిన పుష్‌లపై వర్క్‌ఫ్లోను ట్రిగ్గర్ చేస్తుంది.
• on.pull_request: పుల్ రిక్వెస్ట్‌లపై వర్క్‌ఫ్లోను ట్రిగ్గర్ చేస్తుంది.
• jobs.lighthouse.runs-on: జాబ్ కోసం ఉపయోగించాల్సిన ఆపరేటింగ్ సిస్టమ్‌ను నిర్దేశిస్తుంది (ఈ సందర్భంలో ఉబుంటు).
• steps: జాబ్‌లో అమలు చేయాల్సిన దశలను నిర్వచిస్తుంది:
• actions/checkout@v3: రిపోజిటరీని చెక్ అవుట్ చేస్తుంది.
• actions/setup-node@v3: Node.js ను సెటప్ చేస్తుంది.
• npm ci: డిపెండెన్సీలను ఇన్‌స్టాల్ చేస్తుంది.
• Run Lighthouse CI: లైట్‌హౌస్ CI కమాండ్‌లను రన్ చేస్తుంది:
• npm install -g @lhci/cli@0.11.x: లైట్‌హౌస్ CI CLI ని గ్లోబల్‌గా ఇన్‌స్టాల్ చేస్తుంది. *ముఖ్యమైనది*: ఎల్లప్పుడూ ఒక నిర్దిష్ట వెర్షన్‌ను లాక్ చేయడం మంచిది.
• lhci autorun: లైట్‌హౌస్ CI ని "ఆటోరన్" మోడ్‌లో రన్ చేస్తుంది, ఇది ఆటోమేటిక్‌గా ఆడిట్‌లను సేకరిస్తుంది, పనితీరు బడ్జెట్‌లను నిర్ధారిస్తుంది మరియు ఫలితాలను అప్‌లోడ్ చేస్తుంది.

CI/CD ఇంటిగ్రేషన్ కోసం ముఖ్యమైన పరిగణనలు:

• సర్వర్ ప్రారంభం: lhci autorun ని రన్ చేయడానికి ముందు, మీ వెబ్ సర్వర్ నడుస్తోందని నిర్ధారించుకోండి (ఉదా., npm start). మీ సర్వర్‌ను బ్యాక్‌గ్రౌండ్‌లో ప్రారంభించడానికి మీ CI/CD కాన్ఫిగరేషన్‌కు ఒక దశను జోడించాల్సి రావచ్చు.
• డేటాబేస్ మైగ్రేషన్‌లు: మీ అప్లికేషన్ డేటాబేస్‌పై ఆధారపడి ఉంటే, లైట్‌హౌస్ CI ని రన్ చేయడానికి *ముందు* మీ CI/CD ప్రాసెస్‌లో భాగంగా డేటాబేస్ మైగ్రేషన్‌లు రన్ అయ్యేలా చూసుకోండి.
• ఎన్విరాన్‌మెంట్ వేరియబుల్స్: మీ అప్లికేషన్‌కు ఎన్విరాన్‌మెంట్ వేరియబుల్స్ అవసరమైతే, ఇవి మీ CI/CD ఎన్విరాన్‌మెంట్‌లో సరిగ్గా కాన్ఫిగర్ చేయబడ్డాయని నిర్ధారించుకోండి.

4. లైట్‌హౌస్ CI ని రన్ చేయండి

ఇప్పుడు, మీరు main బ్రాంచ్‌కు మార్పులను పుష్ చేసినప్పుడు లేదా పుల్ రిక్వెస్ట్ సృష్టించినప్పుడు, లైట్‌హౌస్ CI వర్క్‌ఫ్లో ఆటోమేటిక్‌గా రన్ అవుతుంది. ఫలితాలు GitHub Actions ఇంటర్‌ఫేస్‌లో అందుబాటులో ఉంటాయి.

5. లైట్‌హౌస్ CI ఫలితాలను వీక్షించండి

లైట్‌హౌస్ CI ఫలితాలు మీ lighthouserc.js ఫైల్‌లో పేర్కొన్న లొకేషన్‌కు (ఉదా., temporary-public-storage) అప్‌లోడ్ చేయబడతాయి. మీరు CI/CD అవుట్‌పుట్‌లో అందించిన లింక్‌ను అనుసరించడం ద్వారా ఈ ఫలితాలను యాక్సెస్ చేయవచ్చు. ఈ ఫలితాలు మీ వెబ్‌సైట్ పనితీరు, యాక్సెసిబిలిటీ, SEO మరియు ఉత్తమ పద్ధతుల గురించి వివరణాత్మక సమాచారాన్ని అందిస్తాయి.

అసర్షన్‌లు మరియు పనితీరు బడ్జెట్‌లను కాన్ఫిగర్ చేయడం

మీ వెబ్‌సైట్ మీ పనితీరు లక్ష్యాలను చేరుకునేలా చూసుకోవడానికి లైట్‌హౌస్ CI మీకు అసర్షన్‌లు మరియు పనితీరు బడ్జెట్‌లను కాన్ఫిగర్ చేయడానికి అనుమతిస్తుంది. అసర్షన్‌లు అనేవి నిర్దిష్ట పనితీరు కొలమానాలను (ఉదా., First Contentful Paint, Largest Contentful Paint) ముందుగా నిర్వచించిన పరిమితులతో పోల్చి చూసే నియమాలు. పనితీరు బడ్జెట్లు వివిధ పనితీరు కొలమానాలకు ఆమోదయోగ్యమైన పరిమితులను నిర్వచిస్తాయి.

మీ lighthouserc.js ఫైల్‌లో అసర్షన్‌లను ఎలా కాన్ఫిగర్ చేయాలో ఇక్కడ ఒక ఉదాహరణ ఉంది:

            module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000']
    },
    assert: {
      assertions: {
        'first-contentful-paint': ['warn', { maxNumericValue: 2000 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
        'total-blocking-time': ['warn', { maxNumericValue: 500 }],
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 0.8 }],
      }
    },
   upload: {
      target: 'temporary-public-storage'
    },
  }
};

            

              
                Copy
              
            
          

వివరణ:

• first-contentful-paint: First Contentful Paint (FCP) కోసం 2000ms వద్ద హెచ్చరిక పరిమితిని సెట్ చేస్తుంది.
• largest-contentful-paint: Largest Contentful Paint (LCP) కోసం 2500ms వద్ద హెచ్చరిక పరిమితిని సెట్ చేస్తుంది.
• cumulative-layout-shift: Cumulative Layout Shift (CLS) కోసం 0.1 వద్ద హెచ్చరిక పరిమితిని సెట్ చేస్తుంది.
• total-blocking-time: Total Blocking Time (TBT) కోసం 500ms వద్ద హెచ్చరిక పరిమితిని సెట్ చేస్తుంది.
• categories:performance: మొత్తం పర్ఫార్మెన్స్ కేటగిరీ స్కోర్ కోసం 0.9 వద్ద హెచ్చరిక పరిమితిని సెట్ చేస్తుంది.
• categories:accessibility: మొత్తం యాక్సెసిబిలిటీ కేటగిరీ స్కోర్ కోసం 0.8 వద్ద ఎర్రర్ పరిమితిని సెట్ చేస్తుంది.

అసర్షన్ స్థాయిలు:

• off: అసర్షన్‌ను డిసేబుల్ చేస్తుంది.
• warn: అసర్షన్ విఫలమైతే హెచ్చరికను ప్రదర్శిస్తుంది.
• error: అసర్షన్ విఫలమైతే లైట్‌హౌస్ CI రన్‌ను విఫలం చేస్తుంది.

అసర్షన్‌లను అనుకూలీకరించడం:

మీ నిర్దిష్ట అవసరాలకు అనుగుణంగా మీరు అసర్షన్‌లను అనుకూలీకరించవచ్చు. ఉదాహరణకు, మీరు కీలకమైన పనితీరు కొలమానాలకు కఠినమైన పరిమితులను సెట్ చేయాలనుకోవచ్చు లేదా మీ అప్లికేషన్‌కు సంబంధం లేని అసర్షన్‌లను డిసేబుల్ చేయాలనుకోవచ్చు.

ఒక లైట్‌హౌస్ CI అప్‌లోడ్ టార్గెట్‌ను ఎంచుకోవడం

మీ lighthouserc.js ఫైల్‌లోని upload.target ఆప్షన్ లైట్‌హౌస్ CI ఫలితాలు ఎక్కడ అప్‌లోడ్ చేయబడతాయో నిర్దేశిస్తుంది. temporary-public-storage టార్గెట్ టెస్టింగ్ మరియు డెవలప్‌మెంట్ కోసం సౌకర్యవంతంగా ఉంటుంది, కానీ డేటా శాశ్వతంగా ఉండదు కాబట్టి ఇది ప్రొడక్షన్ ఎన్విరాన్‌మెంట్‌లకు తగినది కాదు.

ఇక్కడ కొన్ని ప్రత్యామ్నాయ అప్‌లోడ్ టార్గెట్‌లు ఉన్నాయి:

• లైట్‌హౌస్ CI సర్వర్: ప్రొడక్షన్ ఎన్విరాన్‌మెంట్‌ల కోసం సిఫార్సు చేయబడిన పద్ధతి లైట్‌హౌస్ CI సర్వర్‌ను ఉపయోగించడం. లైట్‌హౌస్ CI సర్వర్ మీ లైట్‌హౌస్ CI ఫలితాల కోసం శాశ్వత నిల్వ పరిష్కారాన్ని, అలాగే మీ డేటాను వీక్షించడానికి మరియు విశ్లేషించడానికి ఒక యూజర్ ఇంటర్‌ఫేస్‌ను అందిస్తుంది. దీనిని వివిధ క్లౌడ్ ప్రొవైడర్లకు డిప్లాయ్ చేయవచ్చు లేదా మీ స్వంత ఇన్‌ఫ్రాస్ట్రక్చర్‌లో హోస్ట్ చేయవచ్చు.
• Google క్లౌడ్ స్టోరేజ్: మీరు మీ లైట్‌హౌస్ CI ఫలితాలను Google క్లౌడ్ స్టోరేజ్ బకెట్‌కు అప్‌లోడ్ చేయవచ్చు. ఇది మీ డేటాను నిల్వ చేయడానికి ఖర్చు-తక్కువ మరియు స్కేలబుల్ పరిష్కారం.
• Amazon S3: Google క్లౌడ్ స్టోరేజ్ లాగానే, మీరు మీ లైట్‌హౌస్ CI ఫలితాలను Amazon S3 బకెట్‌కు అప్‌లోడ్ చేయవచ్చు.

లైట్‌హౌస్ CI సర్వర్‌ను సెటప్ చేయడం:

లైట్‌హౌస్ CI సర్వర్‌ను సెటప్ చేయడంలో కింది దశలు ఉంటాయి:

1. లైట్‌హౌస్ CI సర్వర్‌ను ఇన్‌స్టాల్ చేయండి: మీరు npm లేదా yarn ఉపయోగించి లైట్‌హౌస్ CI సర్వర్‌ను ఇన్‌స్టాల్ చేయవచ్చు:

            npm install -g @lhci/server
yarn global add @lhci/server
            

              
                Copy
              
            
          

2. డేటాబేస్‌ను కాన్ఫిగర్ చేయండి: లైట్‌హౌస్ CI సర్వర్‌కు దాని డేటాను నిల్వ చేయడానికి ఒక డేటాబేస్ అవసరం. మీరు PostgreSQL, MySQL, మరియు SQLite వంటి వివిధ డేటాబేస్‌లను ఉపయోగించవచ్చు. .env ఫైల్‌లో డేటాబేస్ కనెక్షన్ సెట్టింగ్‌లను కాన్ఫిగర్ చేయండి.
3. లైట్‌హౌస్ CI సర్వర్‌ను ప్రారంభించండి: lhci server కమాండ్ ఉపయోగించి లైట్‌హౌస్ CI సర్వర్‌ను ప్రారంభించండి.
4. సర్వర్‌ను ఉపయోగించడానికి లైట్‌హౌస్ CI CLI ని కాన్ఫిగర్ చేయండి: అప్‌లోడ్ టార్గెట్‌గా లైట్‌హౌస్ CI సర్వర్‌ను ఉపయోగించడానికి మీ lighthouserc.js ఫైల్‌ను అప్‌డేట్ చేయండి:

            module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000']
    },
    assert: {
      preset: 'lighthouse:recommended'
    },
    upload: {
      target: 'lhci',
      serverBaseUrl: 'http://your-lhci-server.com',
      token: 'YOUR_LHCI_TOKEN'
    },
  }
};

            

              
                Copy
              
            
          

http://your-lhci-server.com ని మీ లైట్‌హౌస్ CI సర్వర్ యొక్క URL తో మరియు YOUR_LHCI_TOKEN ని మీ ప్రాజెక్ట్ కోసం యాక్సెస్ టోకెన్‌తో భర్తీ చేయండి.

లైట్‌హౌస్ CI ని ఉపయోగించడం కోసం ఉత్తమ పద్ధతులు

లైట్‌హౌస్ CI నుండి గరిష్ట ప్రయోజనం పొందడానికి, ఈ ఉత్తమ పద్ధతులను అనుసరించండి:

• ప్రతి కోడ్ మార్పుపై లైట్‌హౌస్ CI ని రన్ చేయండి: ప్రతి కోడ్ మార్పుపై ఆడిట్‌లను రన్ చేయడానికి మీ CI/CD పైప్‌లైన్‌లో లైట్‌హౌస్ CI ని ఇంటిగ్రేట్ చేయండి. ఇది పనితీరు రిగ్రెషన్‌లను ముందుగానే పట్టుకోవడంలో మీకు సహాయపడుతుంది.
• పనితీరు బడ్జెట్‌లను సెట్ చేయండి: మీ వెబ్‌సైట్ ఆమోదయోగ్యమైన పనితీరు పరిమితులలో ఉండేలా చూసుకోవడానికి పనితీరు బడ్జెట్‌లను నిర్వచించండి.
• పనితీరు ట్రెండ్‌లను పర్యవేక్షించండి: ట్రెండ్‌లను గుర్తించడానికి మరియు మీ ఆప్టిమైజేషన్‌ల ప్రభావాన్ని కొలవడానికి కాలక్రమేణా మీ వెబ్‌సైట్ పనితీరును ట్రాక్ చేయండి.
• ఆప్టిమైజేషన్ ప్రయత్నాలకు ప్రాధాన్యత ఇవ్వండి: మొదట అత్యంత కీలకమైన పనితీరు కొలమానాలను ఆప్టిమైజ్ చేయడంపై దృష్టి పెట్టండి.
• నిజ-ప్రపంచ డేటాను ఉపయోగించండి: మీ ఆప్టిమైజేషన్ ప్రయత్నాలకు సమాచారం అందించడానికి నిజ-ప్రపంచ డేటాను ఉపయోగించండి. ఉదాహరణకు, మీ వినియోగదారులు ఎక్కువగా సందర్శించే పేజీలను గుర్తించడానికి మీరు Google Analytics ను ఉపయోగించవచ్చు.
• నిజమైన పరికరాలపై పరీక్షించండి: మీ వెబ్‌సైట్ నిజ-ప్రపంచ పరిస్థితులలో బాగా పనిచేస్తుందని నిర్ధారించుకోవడానికి నిజమైన పరికరాలపై పరీక్షించండి.
• లైట్‌హౌస్ CI ఫలితాలను క్రమం తప్పకుండా సమీక్షించండి: లైట్‌హౌస్ CI ఫలితాలను క్రమం తప్పకుండా సమీక్షించి, గుర్తించబడిన ఏవైనా పనితీరు సమస్యలను పరిష్కరించడానికి చర్య తీసుకోండి.
• చిత్రాలను ఆప్టిమైజ్ చేయండి: నాణ్యతను కోల్పోకుండా ఫైల్ సైజును తగ్గించడానికి మీ చిత్రాలను ఆప్టిమైజ్ చేయండి. దీని కోసం ImageOptim (macOS), TinyPNG, మరియు ImageKit వంటి సాధనాలు ఉపయోగపడతాయి.
• CSS మరియు JavaScript ని మినిఫై చేయండి: వాటి సైజును తగ్గించడానికి మీ CSS మరియు JavaScript ఫైళ్లను మినిఫై చేయండి. UglifyJS మరియు CSSNano వంటి సాధనాలు దీనికి సహాయపడతాయి.
• బ్రౌజర్ కాషింగ్‌ను ఉపయోగించుకోండి: మీ వెబ్‌సైట్ సర్వర్‌కు చేసే అభ్యర్థనల సంఖ్యను తగ్గించడానికి బ్రౌజర్ కాషింగ్‌ను ఉపయోగించుకోండి.
• కంటెంట్ డెలివరీ నెట్‌వర్క్ (CDN) ను ఉపయోగించండి: మీ వెబ్‌సైట్ కంటెంట్‌ను ప్రపంచవ్యాప్తంగా సర్వర్‌లకు పంపిణీ చేయడానికి ఒక CDN ను ఉపయోగించండి. ఇది వివిధ భౌగోళిక ప్రాంతాలలోని వినియోగదారుల కోసం లోడింగ్ సమయాలను మెరుగుపరుస్తుంది. Cloudflare మరియు Amazon CloudFront వంటి సేవలు ప్రముఖ CDNలు.
• ఆఫ్‌స్క్రీన్ చిత్రాలను వాయిదా వేయండి: స్క్రీన్‌పై వెంటనే కనిపించని చిత్రాల కోసం లేజీ లోడింగ్‌ను అమలు చేయండి. ఇది ప్రారంభ పేజీ లోడ్ సమయాన్ని గణనీయంగా మెరుగుపరుస్తుంది. సాధారణ లేజీ లోడింగ్ కోసం loading="lazy" లక్షణాన్ని ఉపయోగించవచ్చు.
• రెండర్-బ్లాకింగ్ వనరులను తొలగించండి: మీ పేజీ రెండరింగ్‌ను బ్లాక్ చేస్తున్న వనరులను గుర్తించి, తొలగించండి. ఇందులో తరచుగా క్లిష్టమైన CSS ను ఇన్‌లైన్ చేయడం మరియు క్లిష్టమైనవి కాని CSS మరియు JavaScript ను వాయిదా వేయడం ఉంటాయి.
• JavaScript ఎగ్జిక్యూషన్ సమయాన్ని తగ్గించండి: నెమ్మదిగా నడుస్తున్న ఫంక్షన్‌లను గుర్తించి, ఆప్టిమైజ్ చేయడానికి మీ JavaScript కోడ్‌ను ప్రొఫైల్ చేయండి. కోడ్ స్ప్లిటింగ్ మరియు ట్రీ షేకింగ్ వంటి టెక్నిక్‌లు డౌన్‌లోడ్ మరియు ఎగ్జిక్యూట్ చేయవలసిన JavaScript మొత్తాన్ని తగ్గించడంలో సహాయపడతాయి.

అధునాతన లైట్‌హౌస్ CI టెక్నిక్‌లు

మీరు లైట్‌హౌస్ CI యొక్క ప్రాథమిక విషయాలతో సౌకర్యవంతంగా ఉన్న తర్వాత, మీ పనితీరు పర్యవేక్షణను మరింత మెరుగుపరచడానికి కొన్ని అధునాతన టెక్నిక్‌లను అన్వేషించవచ్చు:

• కస్టమ్ లైట్‌హౌస్ ఆడిట్‌లు: మీ అప్లికేషన్‌కు సంబంధించిన నిర్దిష్ట పనితీరు సమస్యల కోసం పరీక్షించడానికి మీరు కస్టమ్ లైట్‌హౌస్ ఆడిట్‌లను సృష్టించవచ్చు.
• హెడ్‌లెస్ క్రోమ్ కాన్ఫిగరేషన్: నిర్దిష్ట పరికర ఎమ్యులేషన్‌లు లేదా నెట్‌వర్క్ థ్రాట్లింగ్ సెట్టింగ్‌లను ఉపయోగించడానికి హెడ్‌లెస్ క్రోమ్‌ను కాన్ఫిగర్ చేయండి.
• మానిటరింగ్ సాధనాలతో ఇంటిగ్రేషన్: మీ వెబ్‌సైట్ పనితీరు యొక్క మరింత సమగ్ర వీక్షణను పొందడానికి లైట్‌హౌస్ CI ని మీ ప్రస్తుత మానిటరింగ్ సాధనాలతో (ఉదా., New Relic, Datadog) ఇంటిగ్రేట్ చేయండి.
• విజువల్ రిగ్రెషన్ టెస్టింగ్: పనితీరును ప్రభావితం చేసే విజువల్ మార్పులను గుర్తించడానికి లైట్‌హౌస్ CI ని విజువల్ రిగ్రెషన్ టెస్టింగ్ సాధనాలతో కలపండి.

గ్లోబల్ ఆడియన్స్ కోసం లైట్‌హౌస్ CI: అంతర్జాతీయ వెబ్‌సైట్‌ల కోసం పరిగణనలు

గ్లోబల్ ఆడియన్స్‌ను లక్ష్యంగా చేసుకున్న వెబ్‌సైట్‌ల కోసం లైట్‌హౌస్ CI ని ఉపయోగిస్తున్నప్పుడు, కింది వాటిని పరిగణించండి:

• బహుళ ప్రదేశాల నుండి పరీక్షించండి: వినియోగదారు యొక్క ప్రదేశాన్ని బట్టి సర్వర్ ప్రతిస్పందన సమయాలు గణనీయంగా మారవచ్చు. ఒక CDN (కంటెంట్ డెలివరీ నెట్‌వర్క్) ను ఉపయోగించండి మరియు మీ అంతర్జాతీయ వినియోగదారుల కోసం పనితీరు యొక్క మరింత ఖచ్చితమైన చిత్రాన్ని పొందడానికి వివిధ భౌగోళిక ప్రాంతాల నుండి లైట్‌హౌస్ CI ఆడిట్‌లను రన్ చేయడాన్ని పరిగణించండి. కొన్ని CI/CD ప్రొవైడర్లు రన్నర్ యొక్క భౌగోళిక ప్రదేశాన్ని పేర్కొనడానికి ఎంపికలను అందిస్తాయి.
• నెట్‌వర్క్ పరిస్థితులను పరిగణనలోకి తీసుకోండి: నెట్‌వర్క్ వేగాలు మరియు లేటెన్సీ ప్రపంచవ్యాప్తంగా విస్తృతంగా మారుతాయి. వివిధ పరిమితుల కింద మీ వెబ్‌సైట్ ఎలా పనిచేస్తుందో అర్థం చేసుకోవడానికి మీ లైట్‌హౌస్ CI ఆడిట్‌ల సమయంలో వివిధ నెట్‌వర్క్ పరిస్థితులను అనుకరించండి. లైట్‌హౌస్ నెమ్మదిగా ఉండే 3G వంటి కనెక్షన్‌లను అనుకరిస్తూ నెట్‌వర్క్ కనెక్షన్‌ను థ్రాటిల్ చేయడానికి మిమ్మల్ని అనుమతిస్తుంది.
• కంటెంట్ స్థానికీకరణ: మీ స్థానికీకరించిన కంటెంట్ సరిగ్గా ఆప్టిమైజ్ చేయబడిందని నిర్ధారించుకోండి. ఇందులో వివిధ భాషలు మరియు అక్షర సెట్‌ల కోసం చిత్ర ఆప్టిమైజేషన్, మరియు ప్రదర్శన సమస్యలను నివారించడానికి సరైన ఎన్‌కోడింగ్ ఉంటాయి.
• ఫాంట్ లోడింగ్: వివిధ భాషల కోసం ఫాంట్ లోడింగ్‌ను ఆప్టిమైజ్ చేయండి. ఫాంట్ లోడింగ్ సమయంలో టెక్స్ట్ అదృశ్యం కాకుండా నిరోధించడానికి font-display: swap ను ఉపయోగించడాన్ని పరిగణించండి.
• థర్డ్-పార్టీ స్క్రిప్ట్‌లు: థర్డ్-పార్టీ స్క్రిప్ట్‌ల పట్ల జాగ్రత్త వహించండి, ఎందుకంటే అవి ముఖ్యంగా నెమ్మదిగా నెట్‌వర్క్ కనెక్షన్‌లు ఉన్న ప్రాంతాలలోని వినియోగదారుల కోసం పనితీరును గణనీయంగా ప్రభావితం చేస్తాయి. థర్డ్-పార్టీ స్క్రిప్ట్ పనితీరును క్రమం తప్పకుండా ఆడిట్ చేయండి మరియు అసమకాలిక లోడింగ్ లేదా క్లిష్టమైన స్క్రిప్ట్‌లను స్వీయ-హోస్టింగ్ చేయడాన్ని పరిగణించండి.
• మొబైల్ ఆప్టిమైజేషన్: ప్రపంచంలోని అనేక ప్రాంతాలలో మొబైల్ వాడకం ప్రబలంగా ఉంది. మీ వెబ్‌సైట్ మొబైల్ పరికరాల కోసం ఆప్టిమైజ్ చేయబడిందని మరియు మీ లైట్‌హౌస్ CI ఆడిట్‌లలో మొబైల్-నిర్దిష్ట పరీక్షలు ఉన్నాయని నిర్ధారించుకోండి.

సాధారణ లైట్‌హౌస్ CI సమస్యలను పరిష్కరించడం

లైట్‌హౌస్ CI ని ఉపయోగిస్తున్నప్పుడు మీరు ఎదుర్కొనే కొన్ని సాధారణ సమస్యలు మరియు వాటిని ఎలా పరిష్కరించాలో ఇక్కడ ఉన్నాయి:

• లైట్‌హౌస్ CI "Timeout" ఎర్రర్‌తో విఫలమవుతుంది: మీ వెబ్‌సైట్ లోడ్ అవ్వడానికి చాలా సమయం తీసుకుంటే లేదా లైట్‌హౌస్ CI మీ వెబ్‌సైట్‌కు కనెక్ట్ కాలేకపోతే ఇది జరగవచ్చు. మీ lighthouserc.js ఫైల్‌లో టైమ్‌అవుట్ విలువను పెంచడానికి ప్రయత్నించండి లేదా మీ వెబ్‌సైట్ సర్వర్ లాగ్‌లను ఎర్రర్‌ల కోసం తనిఖీ చేయండి.
• లైట్‌హౌస్ CI అస్థిరమైన ఫలితాలను నివేదిస్తుంది: నెట్‌వర్క్ పరిస్థితులు లేదా ఇతర కారకాల కారణంగా లైట్‌హౌస్ ఫలితాలు రన్‌ల మధ్య కొద్దిగా మారవచ్చు. మరింత స్థిరమైన సగటును పొందడానికి బహుళ ఆడిట్‌లను రన్ చేయండి.
• లైట్‌హౌస్ CI ఫలితాలను అప్‌లోడ్ చేయడంలో విఫలమవుతుంది: మీ upload.target కాన్ఫిగరేషన్‌ను తనిఖీ చేయండి మరియు మీ లైట్‌హౌస్ CI సర్వర్ నడుస్తోందని మరియు అందుబాటులో ఉందని నిర్ధారించుకోండి. అలాగే, మీరు సరైన యాక్సెస్ టోకెన్‌ను కాన్ఫిగర్ చేశారని ధృవీకరించండి.
• లైట్‌హౌస్ CI ఊహించని పనితీరు రిగ్రెషన్‌లను నివేదిస్తుంది: రిగ్రెషన్ కనుగొనబడటానికి ముందు చేసిన కోడ్ మార్పులను పరిశోధించండి. ఏ నిర్దిష్ట పనితీరు కొలమానాలు తిరోగమించాయో గుర్తించడానికి లైట్‌హౌస్ CI నివేదికలను ఉపయోగించండి మరియు మీ ఆప్టిమైజేషన్ ప్రయత్నాలను ఆ ప్రాంతాలపై కేంద్రీకరించండి.

ముగింపు

ఫ్రంటెండ్ లైట్‌హౌస్ CI అనేది వెబ్ అప్లికేషన్‌ల నిరంతర పనితీరు పర్యవేక్షణ కోసం ఒక శక్తివంతమైన సాధనం. మీ CI/CD పైప్‌లైన్‌లో లైట్‌హౌస్ CI ని ఇంటిగ్రేట్ చేయడం ద్వారా, మీరు పనితీరు సమస్యలను చురుకుగా గుర్తించి, పరిష్కరించవచ్చు, మీ వెబ్‌సైట్ సరైన వినియోగదారు అనుభవాన్ని అందిస్తుందని నిర్ధారించుకోవచ్చు. ప్రపంచవ్యాప్తంగా వినియోగదారులకు సాధ్యమైనంత ఉత్తమ అనుభవాన్ని సృష్టించడానికి మీ సెటప్, అసర్షన్ నియమాలు మరియు పరీక్షా ప్రదేశాలను గ్లోబల్ ఆడియన్స్‌ కోసం స్వీకరించడం గుర్తుంచుకోండి.

ఈ గైడ్‌లో వివరించిన దశలు మరియు ఉత్తమ పద్ధతులను అనుసరించడం ద్వారా, మీరు మీ వెబ్‌సైట్ పనితీరును గణనీయంగా మెరుగుపరచవచ్చు, బౌన్స్ రేట్లను తగ్గించవచ్చు, మార్పిడి రేట్లను పెంచవచ్చు మరియు చివరికి, మీ వ్యాపార లక్ష్యాలను సాధించవచ్చు. ఈరోజే లైట్‌హౌస్ CI ని అమలు చేయడం ప్రారంభించండి మరియు మీ వెబ్ అప్లికేషన్‌ల పూర్తి సామర్థ్యాన్ని అన్‌లాక్ చేయండి.