Frontend Lighthouse CI: வலைப் பயன்பாடுகளுக்கான தொடர்ச்சியான செயல்திறன் கண்காணிப்பு

இன்றைய வேகமான டிஜிட்டல் உலகில், இணையதள செயல்திறன் மிக முக்கியமானது. மெதுவாக ஏற்றப்படும் அல்லது மோசமாக மேம்படுத்தப்பட்ட இணையதளம் பயனர்களுக்கு எரிச்சலை ஏற்படுத்தி, ஈடுபாட்டைக் குறைத்து, இறுதியில் உங்கள் வணிகத்தில் எதிர்மறையான தாக்கத்தை ஏற்படுத்தும். இங்குதான் Lighthouse CI உதவுகிறது. இந்த வழிகாட்டி, தொடர்ச்சியான செயல்திறன் கண்காணிப்புக்காக Lighthouse CI-ஐ செயல்படுத்துவது குறித்து உங்களுக்கு விளக்கும், செயல்திறன் குறைபாடுகளை அவை உங்கள் பயனர்களைப் பாதிக்கும் முன் முன்கூட்டியே கண்டறிந்து சரிசெய்ய உங்களுக்கு அதிகாரம் அளிக்கிறது.

Lighthouse CI என்றால் என்ன?

Lighthouse CI என்பது ஒரு ஓப்பன் சோர்ஸ், தானியங்கு செயல்திறன் சோதனை கருவியாகும், இது உங்கள் தொடர்ச்சியான ஒருங்கிணைப்பு மற்றும் தொடர்ச்சியான டெலிவரி (CI/CD) பைப்லைனில் எளிதாக ஒருங்கிணைக்கப்படுகிறது. இது Google-இன் Lighthouse தணிக்கைக் கருவியைப் பயன்படுத்தி உங்கள் இணையதளத்தின் செயல்திறன், அணுகல்தன்மை, SEO மற்றும் சிறந்த நடைமுறைகள் குறித்த செயல்முறைப்படுத்தக்கூடிய நுண்ணறிவுகளை வழங்குகிறது. உங்கள் பணிப்பாய்வில் Lighthouse CI-ஐ இணைப்பதன் மூலம், உங்கள் இணையதளத்தின் செயல்திறனைத் தொடர்ந்து கண்காணிக்கலாம், பின்னடைவுகளைக் கண்டறியலாம், மேலும் ஒவ்வொரு குறியீடு மாற்றமும் சிறந்த பயனர் அனுபவத்திற்கு பங்களிப்பதை உறுதிசெய்யலாம். Lighthouse CI ஒரு குறிப்பிட்ட கிளவுட் வழங்குநருடன் இணைக்கப்படவில்லை மற்றும் வெவ்வேறு அமைப்புகளுடன் பயன்படுத்தப்படலாம். எடுத்துக்காட்டாக, இது Github Actions, Jenkins, CircleCI மற்றும் பல சேவைகளில் ஒரு Docker கண்டெய்னருக்குள் இயங்க முடியும்.

Lighthouse CI-ஐ ஏன் பயன்படுத்த வேண்டும்?

Lighthouse CI-ஐ செயல்படுத்துவது பல நன்மைகளை வழங்குகிறது:

• செயல்திறன் பின்னடைவுகளை முன்கூட்டியே கண்டறிதல்: புதிய குறியீடு மாற்றங்களால் அறிமுகப்படுத்தப்பட்ட செயல்திறன் சிக்கல்களை, அவை உற்பத்திக்குச் செல்லும் முன் கண்டறியவும்.
• மேம்படுத்தப்பட்ட இணையதள செயல்திறன்: வேகம், அணுகல்தன்மை மற்றும் SEO-க்காக உங்கள் இணையதளத்தை எவ்வாறு மேம்படுத்துவது என்பது குறித்த செயல்முறைப்படுத்தக்கூடிய நுண்ணறிவுகளைப் பெறுங்கள்.
• மேம்பட்ட பயனர் அனுபவம்: பார்வையாளர்களை ஈடுபாட்டுடன் வைத்திருக்கும் வேகமான மற்றும் பயனர் நட்பு இணையதளத்தை வழங்குங்கள்.
• குறைக்கப்பட்ட பவுன்ஸ் விகிதம்: பயனர் விரக்தியைக் குறைக்கவும், அவர்கள் உங்கள் தளத்தை விட்டு வெளியேறுவதைத் தடுக்கவும் ஏற்றுதல் நேரங்களை மேம்படுத்துங்கள்.
• அதிகரித்த மாற்று விகிதங்கள்: வேகமான இணையதளம் பொதுவாக அதிக மாற்று விகிதங்களுக்கும் மேம்பட்ட வணிக விளைவுகளுக்கும் வழிவகுக்கிறது.
• தானியங்கு செயல்திறன் சோதனை: தொடர்ச்சியான கண்காணிப்புக்காக உங்கள் CI/CD பைப்லைனில் செயல்திறன் சோதனையை ஒருங்கிணைக்கவும்.
• தரவு சார்ந்த முடிவெடுத்தல்: உங்கள் மேம்படுத்தல் முயற்சிகளை உறுதியான செயல்திறன் அளவீடுகள் மற்றும் நுண்ணறிவுகளின் அடிப்படையில் மேற்கொள்ளுங்கள்.
• நீண்ட கால செயல்திறன் கண்காணிப்பு: போக்குகளைக் கண்டறியவும், உங்கள் மேம்படுத்தல்களின் தாக்கத்தை அளவிடவும் உங்கள் இணையதளத்தின் செயல்திறனை காலப்போக்கில் கண்காணிக்கவும்.

Lighthouse CI-இன் முக்கிய அம்சங்கள்

• தானியங்கு தணிக்கைகள்: உங்கள் CI/CD செயல்முறையின் ஒரு பகுதியாக Lighthouse தணிக்கைகளை தானாகவே இயக்குகிறது.
• செயல்திறன் வரவு செலவுத் திட்டங்கள்: உங்கள் இணையதளம் ஏற்றுக்கொள்ளக்கூடிய செயல்திறன் வரம்புகளுக்குள் இருப்பதை உறுதிசெய்ய செயல்திறன் வரவு செலவுத் திட்டங்களை அமைக்கவும்.
• பின்னடைவு கண்காணிப்பு: காலப்போக்கில் செயல்திறன் பின்னடைவுகளைக் கண்காணிக்கிறது, அவற்றை ஏற்படுத்திய குறியீடு மாற்றங்களைக் கண்டறிய உங்களை அனுமதிக்கிறது.
• செயல்முறைப்படுத்தக்கூடிய நுண்ணறிவுகள்: உங்கள் இணையதளத்தின் செயல்திறனை எவ்வாறு மேம்படுத்துவது என்பது குறித்த செயல்முறைப்படுத்தக்கூடிய பரிந்துரைகளுடன் விரிவான அறிக்கைகளை வழங்குகிறது.
• தனிப்பயனாக்கக்கூடிய கட்டமைப்பு: உங்கள் குறிப்பிட்ட தேவைகள் மற்றும் தேவைகளைப் பூர்த்தி செய்ய Lighthouse CI-ஐ உள்ளமைக்கவும்.
• CI/CD கருவிகளுடன் ஒருங்கிணைப்பு: Jenkins, CircleCI, GitHub Actions மற்றும் GitLab CI போன்ற பிரபலமான CI/CD கருவிகளுடன் எளிதாக ஒருங்கிணைக்கிறது.
• ஓப்பன் சோர்ஸ்: Lighthouse CI ஒரு ஓப்பன் சோர்ஸ் திட்டமாகும், அதாவது இதைப் பயன்படுத்தவும் மாற்றவும் இலவசம்.

Lighthouse CI-ஐ அமைத்தல்: ஒரு படிப்படியான வழிகாட்டி

உங்கள் திட்டத்திற்காக Lighthouse CI-ஐ அமைப்பதற்கான ஒரு விரிவான வழிகாட்டி இங்கே:

1. Lighthouse CI CLI-ஐ நிறுவவும்

முதலில், நீங்கள் npm அல்லது yarn-ஐப் பயன்படுத்தி Lighthouse CI கட்டளை வரி இடைமுகத்தை (CLI) உலகளவில் நிறுவ வேண்டும்:

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

              
                Copy
              
            
          

2. Lighthouse CI-ஐ உள்ளமைக்கவும்

Lighthouse 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: Lighthouse தணிக்கை செய்ய வேண்டிய URL-களைக் குறிப்பிடுகிறது. இந்த எடுத்துக்காட்டில், localhost:3000 இல் இயங்கும் ஒரு இணையதளத்தின் முகப்புப் பக்கம் மற்றும் "about" பக்கத்தை நாங்கள் தணிக்கை செய்கிறோம். இதை *உங்கள்* திட்டத்திற்குப் பொருத்தமான URL-களுடன் மாற்றுவதை நினைவில் கொள்ளுங்கள், இதில் ஸ்டேஜிங் சூழல்கள் இருக்கலாம்.
• assert.preset: lighthouse:recommended முன்னமைவைப் பயன்படுத்துகிறது, இது Lighthouse-இன் பரிந்துரைகளின் அடிப்படையில் முன்வரையறுக்கப்பட்ட உறுதிப்படுத்தல்களின் தொகுப்பைப் பயன்படுத்துகிறது. இது ஒரு நல்ல தொடக்கப் புள்ளி, ஆனால் நீங்கள் இந்த உறுதிப்படுத்தல்களைத் தேவைக்கேற்ப தனிப்பயனாக்கலாம்.
• upload.target: Lighthouse CI முடிவுகள் எங்கு பதிவேற்றப்படும் என்பதை உள்ளமைக்கிறது. temporary-public-storage சோதனை மற்றும் மேம்பாட்டிற்கு பயனுள்ளதாக இருக்கும், ஆனால் உற்பத்தி சூழல்களுக்கு, நீங்கள் பொதுவாக ஒரு நீடித்த சேமிப்பக தீர்வைப் பயன்படுத்த விரும்புவீர்கள் (பின்னர் விவாதிக்கப்படும்).

3. உங்கள் CI/CD பைப்லைனில் Lighthouse CI-ஐ ஒருங்கிணைக்கவும்

அடுத்த கட்டம் Lighthouse CI-ஐ உங்கள் CI/CD பைப்லைனில் ஒருங்கிணைப்பதாகும். சரியான படிகள் உங்கள் CI/CD வழங்குநரைப் பொறுத்து மாறுபடும், ஆனால் பொதுவான செயல்முறை Lighthouse CI கட்டளைகளை இயக்கும் ஒரு ஸ்கிரிப்டை உங்கள் CI/CD உள்ளமைவில் சேர்ப்பதை உள்ளடக்கியது.

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 கிளைக்குச் செய்யப்படும் push-களில் இந்த பணிப்பாய்வைத் தூண்டுகிறது.
• on.pull_request: pull request-களில் இந்த பணிப்பாய்வைத் தூண்டுகிறது.
• jobs.lighthouse.runs-on: பணிக்காகப் பயன்படுத்த வேண்டிய இயக்க முறைமையைக் குறிப்பிடுகிறது (இந்த வழக்கில் Ubuntu).
• steps: பணியில் செயல்படுத்தப்பட வேண்டிய படிகளை வரையறுக்கிறது:
• actions/checkout@v3: களஞ்சியத்தை சரிபார்க்கிறது.
• actions/setup-node@v3: Node.js-ஐ அமைக்கிறது.
• npm ci: சார்புகளை நிறுவுகிறது.
• Run Lighthouse CI: Lighthouse CI கட்டளைகளை இயக்குகிறது:
• npm install -g @lhci/cli@0.11.x: Lighthouse CI CLI-ஐ உலகளவில் நிறுவுகிறது. *முக்கியம்*: ஒரு குறிப்பிட்ட பதிப்பைப் பூட்டுவது எப்போதும் பரிந்துரைக்கப்படுகிறது.
• lhci autorun: Lighthouse CI-ஐ "autorun" பயன்முறையில் இயக்குகிறது, இது தானாக தணிக்கைகளைச் சேகரிக்கிறது, செயல்திறன் வரவு செலவுத் திட்டங்களை உறுதிப்படுத்துகிறது, மற்றும் முடிவுகளைப் பதிவேற்றுகிறது.

CI/CD ஒருங்கிணைப்பிற்கான முக்கியக் கருத்தாய்வுகள்:

• சர்வர் தொடக்கம்: lhci autorun-ஐ இயக்குவதற்கு முன், உங்கள் வலை சேவையகம் இயங்குகிறது என்பதை உறுதிப்படுத்தவும் (எ.கா., npm start). உங்கள் CI/CD உள்ளமைவில் உங்கள் சேவையகத்தை பின்னணியில் தொடங்க ஒரு படியைச் சேர்க்க வேண்டியிருக்கலாம்.
• டேட்டாபேஸ் மைக்ரேஷன்கள்: உங்கள் பயன்பாடு ஒரு டேட்டாபேஸை நம்பியிருந்தால், Lighthouse CI-ஐ இயக்கும் *முன்* உங்கள் CI/CD செயல்முறையின் ஒரு பகுதியாக டேட்டாபேஸ் மைக்ரேஷன்கள் இயக்கப்படுவதை உறுதிசெய்யவும்.
• சூழல் மாறிகள்: உங்கள் பயன்பாட்டிற்கு சூழல் மாறிகள் தேவைப்பட்டால், இவை உங்கள் CI/CD சூழலில் சரியாக உள்ளமைக்கப்பட்டுள்ளன என்பதை உறுதிப்படுத்தவும்.

4. Lighthouse CI-ஐ இயக்கவும்

இப்போது, நீங்கள் main கிளைக்கு மாற்றங்களை push செய்யும்போதோ அல்லது ஒரு pull request உருவாக்கும்போதோ, Lighthouse CI பணிப்பாய்வு தானாகவே இயங்கும். முடிவுகள் GitHub Actions இடைமுகத்தில் கிடைக்கும்.

5. Lighthouse CI முடிவுகளைக் காணவும்

Lighthouse CI முடிவுகள் உங்கள் lighthouserc.js கோப்பில் குறிப்பிடப்பட்டுள்ள இடத்திற்கு (எ.கா., temporary-public-storage) பதிவேற்றப்படும். CI/CD வெளியீட்டில் வழங்கப்பட்ட இணைப்பைப் பின்பற்றுவதன் மூலம் இந்த முடிவுகளை நீங்கள் அணுகலாம். இந்த முடிவுகள் உங்கள் இணையதளத்தின் செயல்திறன், அணுகல்தன்மை, SEO மற்றும் சிறந்த நடைமுறைகள் பற்றிய விரிவான தகவல்களை வழங்குகின்றன.

உறுதிப்படுத்தல்கள் மற்றும் செயல்திறன் வரவு செலவுத் திட்டங்களை உள்ளமைத்தல்

உங்கள் இணையதளம் உங்கள் செயல்திறன் இலக்குகளை பூர்த்தி செய்கிறது என்பதை உறுதிப்படுத்த, உறுதிப்படுத்தல்கள் மற்றும் செயல்திறன் வரவு செலவுத் திட்டங்களை உள்ளமைக்க Lighthouse 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: உறுதிப்படுத்தல் தோல்வியுற்றால் Lighthouse CI ஓட்டத்தைத் தோல்வியடையச் செய்கிறது.

உறுதிப்படுத்தல்களைத் தனிப்பயனாக்குதல்:

உங்கள் குறிப்பிட்ட தேவைகளைப் பூர்த்தி செய்ய நீங்கள் உறுதிப்படுத்தல்களைத் தனிப்பயனாக்கலாம். எடுத்துக்காட்டாக, முக்கியமான செயல்திறன் அளவீடுகளுக்கு கடுமையான வரம்புகளை அமைக்க அல்லது உங்கள் பயன்பாட்டிற்குப் பொருந்தாத உறுதிப்படுத்தல்களை முடக்க நீங்கள் விரும்பலாம்.

ஒரு Lighthouse CI பதிவேற்ற இலக்கைத் தேர்ந்தெடுத்தல்

உங்கள் lighthouserc.js கோப்பில் உள்ள upload.target விருப்பம், Lighthouse CI முடிவுகள் எங்கு பதிவேற்றப்படும் என்பதைக் குறிப்பிடுகிறது. temporary-public-storage இலக்கு சோதனை மற்றும் மேம்பாட்டிற்கு வசதியானது, ஆனால் தரவு நீடிக்காததால் உற்பத்தி சூழல்களுக்குப் பொருத்தமானது அல்ல.

இங்கே சில மாற்று பதிவேற்ற இலக்குகள் உள்ளன:

• Lighthouse CI Server: உற்பத்தி சூழல்களுக்குப் பரிந்துரைக்கப்படும் அணுகுமுறை Lighthouse CI சேவையகத்தைப் பயன்படுத்துவதாகும். Lighthouse CI சேவையகம் உங்கள் Lighthouse CI முடிவுகளுக்கு ஒரு நீடித்த சேமிப்பக தீர்வையும், உங்கள் தரவைப் பார்ப்பதற்கும் பகுப்பாய்வு செய்வதற்கும் ஒரு பயனர் இடைமுகத்தையும் வழங்குகிறது. இது பல்வேறு கிளவுட் வழங்குநர்களுக்குப் பயன்படுத்தப்படலாம் அல்லது உங்கள் சொந்த உள்கட்டமைப்பில் ஹோஸ்ட் செய்யப்படலாம்.
• Google Cloud Storage: உங்கள் Lighthouse CI முடிவுகளை ஒரு Google Cloud Storage பக்கெட்டிற்கு பதிவேற்றலாம். இது உங்கள் தரவைச் சேமிப்பதற்கான செலவு குறைந்த மற்றும் அளவிடக்கூடிய தீர்வாகும்.
• Amazon S3: Google Cloud Storage-ஐப் போலவே, உங்கள் Lighthouse CI முடிவுகளை ஒரு Amazon S3 பக்கெட்டிற்கு பதிவேற்றலாம்.

Lighthouse CI சேவையகத்தை அமைத்தல்:

Lighthouse CI சேவையகத்தை அமைப்பது பின்வரும் படிகளை உள்ளடக்கியது:

1. Lighthouse CI சேவையகத்தை நிறுவவும்: நீங்கள் npm அல்லது yarn-ஐப் பயன்படுத்தி Lighthouse CI சேவையகத்தை நிறுவலாம்:

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

              
                Copy
              
            
          

2. டேட்டாபேஸை உள்ளமைக்கவும்: Lighthouse CI சேவையகத்திற்கு அதன் தரவைச் சேமிக்க ஒரு டேட்டாபேஸ் தேவை. PostgreSQL, MySQL, மற்றும் SQLite உள்ளிட்ட பல்வேறு டேட்டாபேஸ்களை நீங்கள் பயன்படுத்தலாம். .env கோப்பில் டேட்டாபேஸ் இணைப்பு அமைப்புகளை உள்ளமைக்கவும்.
3. Lighthouse CI சேவையகத்தைத் தொடங்கவும்: lhci server கட்டளையைப் பயன்படுத்தி Lighthouse CI சேவையகத்தைத் தொடங்கவும்.
4. சேவையகத்தைப் பயன்படுத்த Lighthouse CI CLI-ஐ உள்ளமைக்கவும்: உங்கள் lighthouserc.js கோப்பை Lighthouse CI சேவையகத்தை பதிவேற்ற இலக்காகப் பயன்படுத்தும்படி புதுப்பிக்கவும்:

            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-ஐ உங்கள் Lighthouse CI சேவையகத்தின் URL உடனும், YOUR_LHCI_TOKEN-ஐ உங்கள் திட்டத்திற்கான அணுகல் டோக்கனுடனும் மாற்றவும்.

Lighthouse CI-ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

Lighthouse CI-இலிருந்து அதிகப் பலனைப் பெற, இந்த சிறந்த நடைமுறைகளைப் பின்பற்றவும்:

• ஒவ்வொரு குறியீடு மாற்றத்திலும் Lighthouse CI-ஐ இயக்கவும்: ஒவ்வொரு குறியீடு மாற்றத்திலும் தணிக்கைகளை இயக்க உங்கள் CI/CD பைப்லைனில் Lighthouse CI-ஐ ஒருங்கிணைக்கவும். இது செயல்திறன் பின்னடைவுகளை முன்கூட்டியே பிடிக்க உதவும்.
• செயல்திறன் வரவு செலவுத் திட்டங்களை அமைக்கவும்: உங்கள் இணையதளம் ஏற்றுக்கொள்ளக்கூடிய செயல்திறன் வரம்புகளுக்குள் இருப்பதை உறுதிசெய்ய செயல்திறன் வரவு செலவுத் திட்டங்களை வரையறுக்கவும்.
• செயல்திறன் போக்குகளைக் கண்காணிக்கவும்: போக்குகளைக் கண்டறியவும், உங்கள் மேம்படுத்தல்களின் தாக்கத்தை அளவிடவும் உங்கள் இணையதளத்தின் செயல்திறனை காலப்போக்கில் கண்காணிக்கவும்.
• மேம்படுத்தல் முயற்சிகளுக்கு முன்னுரிமை அளிக்கவும்: முதலில் மிக முக்கியமான செயல்திறன் அளவீடுகளை மேம்படுத்துவதில் கவனம் செலுத்துங்கள்.
• நிஜ உலகத் தரவைப் பயன்படுத்தவும்: உங்கள் மேம்படுத்தல் முயற்சிகளைத் தெரிவிக்க நிஜ உலகத் தரவைப் பயன்படுத்தவும். எடுத்துக்காட்டாக, உங்கள் பயனர்களால் அடிக்கடி பார்வையிடப்படும் பக்கங்களைக் கண்டறிய Google Analytics-ஐப் பயன்படுத்தலாம்.
• நிஜ சாதனங்களில் சோதிக்கவும்: நிஜ உலக நிலைகளில் அது நன்றாக செயல்படுவதை உறுதிசெய்ய உங்கள் இணையதளத்தை நிஜ சாதனங்களில் சோதிக்கவும்.
• Lighthouse CI முடிவுகளைத் தவறாமல் மதிப்பாய்வு செய்யவும்: Lighthouse CI முடிவுகளைத் தவறாமல் மதிப்பாய்வு செய்து, கண்டறியப்பட்ட செயல்திறன் சிக்கல்களைத் தீர்க்க நடவடிக்கை எடுப்பதை உறுதிசெய்யவும்.
• படங்களை மேம்படுத்துங்கள்: தரத்தை இழக்காமல் அவற்றின் கோப்பு அளவைக் குறைக்க உங்கள் படங்களை மேம்படுத்துங்கள். ImageOptim (macOS), TinyPNG, மற்றும் ImageKit போன்ற கருவிகள் இதற்குப் பயனுள்ளதாக இருக்கும்.
• CSS மற்றும் JavaScript-ஐ சுருக்கவும்: உங்கள் CSS மற்றும் JavaScript கோப்புகளின் அளவைக் குறைக்க அவற்றைச் சுருக்கவும். UglifyJS மற்றும் CSSNano போன்ற கருவிகள் இதற்கு உதவக்கூடும்.
• உலாவி கேச்சிங்கைப் பயன்படுத்தவும்: உங்கள் இணையதளம் சேவையகத்திற்குச் செய்யும் கோரிக்கைகளின் எண்ணிக்கையைக் குறைக்க உலாவி கேச்சிங்கைப் பயன்படுத்தவும்.
• உள்ளடக்க விநியோக நெட்வொர்க்கை (CDN) பயன்படுத்தவும்: உங்கள் இணையதளத்தின் உள்ளடக்கத்தை உலகெங்கிலும் உள்ள சேவையகங்களுக்கு விநியோகிக்க ஒரு CDN-ஐப் பயன்படுத்தவும். இது வெவ்வேறு புவியியல் இடங்களில் உள்ள பயனர்களுக்கு ஏற்றுதல் நேரங்களை மேம்படுத்தும். Cloudflare மற்றும் Amazon CloudFront போன்ற சேவைகள் பிரபலமான CDN-கள் ஆகும்.
• திரைக்கு வெளியே உள்ள படங்களைத் தாமதப்படுத்துங்கள்: திரையில் உடனடியாகத் தெரியாத படங்களுக்கு சோம்பல் ஏற்றத்தை (lazy loading) செயல்படுத்தவும். இது ஆரம்பப் பக்க ஏற்றுதல் நேரத்தை கணிசமாக மேம்படுத்தும். எளிய சோம்பல் ஏற்றத்திற்கு loading="lazy" பண்பைப் பயன்படுத்தலாம்.
• ரெண்டர்-தடுக்கும் ஆதாரங்களை அகற்றவும்: உங்கள் பக்கத்தின் ரெண்டரிங்கைத் தடுக்கும் ஆதாரங்களைக் கண்டறிந்து அகற்றவும். இது பெரும்பாலும் முக்கியமான CSS-ஐ இன்லைன் செய்வதையும், முக்கியமற்ற CSS மற்றும் JavaScript-ஐ தாமதப்படுத்துவதையும் உள்ளடக்கியது.
• JavaScript செயலாக்க நேரத்தைக் குறைக்கவும்: மெதுவாக இயங்கும் செயல்பாடுகளைக் கண்டறிந்து மேம்படுத்த உங்கள் JavaScript குறியீட்டை சுயவிவரப்படுத்துங்கள். குறியீடு பிரித்தல் மற்றும் tree shaking போன்ற நுட்பங்கள் பதிவிறக்கம் செய்யப்பட்டு செயல்படுத்தப்பட வேண்டிய JavaScript-இன் அளவைக் குறைக்க உதவும்.

மேம்பட்ட Lighthouse CI நுட்பங்கள்

Lighthouse CI-இன் அடிப்படைகளுடன் நீங்கள் பழகியவுடன், உங்கள் செயல்திறன் கண்காணிப்பை மேலும் மேம்படுத்த சில மேம்பட்ட நுட்பங்களை நீங்கள் ஆராயலாம்:

• தனிப்பயன் Lighthouse தணிக்கைகள்: உங்கள் பயன்பாட்டிற்குப் பொருத்தமான குறிப்பிட்ட செயல்திறன் சிக்கல்களைச் சோதிக்க நீங்கள் தனிப்பயன் Lighthouse தணிக்கைகளை உருவாக்கலாம்.
• Headless Chrome கட்டமைப்பு: குறிப்பிட்ட சாதன முன்மாதிரிகள் அல்லது நெட்வொர்க் த்ராட்லிங் அமைப்புகளைப் பயன்படுத்த Headless Chrome-ஐ உள்ளமைக்கவும்.
• கண்காணிப்பு கருவிகளுடன் ஒருங்கிணைப்பு: உங்கள் இணையதளத்தின் செயல்திறன் பற்றிய விரிவான பார்வையைப் பெற, உங்கள் தற்போதைய கண்காணிப்பு கருவிகளுடன் (எ.கா., New Relic, Datadog) Lighthouse CI-ஐ ஒருங்கிணைக்கவும்.
• காட்சி பின்னடைவு சோதனை: செயல்திறனைப் பாதிக்கக்கூடிய காட்சி மாற்றங்களைக் கண்டறிய Lighthouse CI-ஐ காட்சி பின்னடைவு சோதனை கருவிகளுடன் இணைக்கவும்.

உலகளாவிய பார்வையாளர்களுக்கான Lighthouse CI: சர்வதேச இணையதளங்களுக்கான கருத்தாய்வுகள்

உலகளாவிய பார்வையாளர்களை இலக்காகக் கொண்ட இணையதளங்களுக்கு Lighthouse CI-ஐப் பயன்படுத்தும்போது, பின்வருவனவற்றைக் கருத்தில் கொள்ளுங்கள்:

• பல இடங்களிலிருந்து சோதிக்கவும்: பயனரின் இருப்பிடத்தைப் பொறுத்து சேவையகத்தின் மறுமொழி நேரங்கள் கணிசமாக மாறுபடலாம். ஒரு CDN (Content Delivery Network)-ஐப் பயன்படுத்தவும், உங்கள் சர்வதேச பயனர்களுக்கு செயல்திறன் பற்றிய துல்லியமான படத்தைப் பெற வெவ்வேறு புவியியல் பிராந்தியங்களிலிருந்து Lighthouse CI தணிக்கைகளை இயக்குவதைக் கருத்தில் கொள்ளவும். சில CI/CD வழங்குநர்கள் ரன்னரின் புவியியல் இருப்பிடத்தைக் குறிப்பிடுவதற்கான விருப்பங்களை வழங்குகின்றன.
• நெட்வொர்க் நிலைமைகளைக் கணக்கிடுங்கள்: நெட்வொர்க் வேகம் மற்றும் தாமதம் உலகம் முழுவதும் பரவலாக வேறுபடுகின்றன. உங்கள் இணையதளம் பல்வேறு கட்டுப்பாடுகளின் கீழ் எவ்வாறு செயல்படுகிறது என்பதைப் புரிந்துகொள்ள, உங்கள் Lighthouse CI தணிக்கைகளின் போது வெவ்வேறு நெட்வொர்க் நிலைமைகளை உருவகப்படுத்தவும். Lighthouse நெட்வொர்க் இணைப்பை த்ராட்டில் செய்ய உங்களை அனுமதிக்கிறது, 3G போன்ற மெதுவான இணைப்புகளை உருவகப்படுத்துகிறது.
• உள்ளடக்க உள்ளூராக்கல்: உங்கள் உள்ளூர்மயமாக்கப்பட்ட உள்ளடக்கம் சரியாக மேம்படுத்தப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும். இதில் வெவ்வேறு மொழிகள் மற்றும் எழுத்துத் தொகுப்புகளுக்கான பட மேம்படுத்தல் மற்றும் காட்சி சிக்கல்களைத் தவிர்க்க சரியான குறியாக்கம் ஆகியவை அடங்கும்.
• எழுத்துரு ஏற்றுதல்: வெவ்வேறு மொழிகளுக்கான எழுத்துரு ஏற்றத்தை மேம்படுத்துங்கள். எழுத்துரு ஏற்றத்தின் போது உரை கண்ணுக்குத் தெரியாமல் இருப்பதைத் தடுக்க font-display: swap-ஐப் பயன்படுத்துவதைக் கருத்தில் கொள்ளவும்.
• மூன்றாம் தரப்பு ஸ்கிரிப்ட்கள்: மூன்றாம் தரப்பு ஸ்கிரிப்ட்களைப் பற்றி எச்சரிக்கையாக இருங்கள், ஏனெனில் அவை செயல்திறனை கணிசமாக பாதிக்கக்கூடும், குறிப்பாக மெதுவான நெட்வொர்க் இணைப்புகளைக் கொண்ட பிராந்தியங்களில் உள்ள பயனர்களுக்கு. மூன்றாம் தரப்பு ஸ்கிரிப்ட் செயல்திறனைத் தவறாமல் தணிக்கை செய்யவும், மற்றும் ஒத்திசைவற்ற ஏற்றம் அல்லது முக்கியமான ஸ்கிரிப்ட்களை சுயமாக ஹோஸ்ட் செய்வதைக் கருத்தில் கொள்ளவும்.
• மொபைல் மேம்படுத்தல்: உலகின் பல பகுதிகளில் மொபைல் பயன்பாடு பரவலாக உள்ளது. உங்கள் இணையதளம் மொபைல் சாதனங்களுக்கு மேம்படுத்தப்பட்டுள்ளதா என்பதையும், உங்கள் Lighthouse CI தணிக்கைகளில் மொபைல்-குறிப்பிட்ட சோதனைகள் உள்ளதா என்பதையும் உறுதிப்படுத்தவும்.

பொதுவான Lighthouse CI சிக்கல்களைச் சரிசெய்தல்

Lighthouse CI-ஐப் பயன்படுத்தும்போது நீங்கள் சந்திக்கக்கூடிய சில பொதுவான சிக்கல்கள் மற்றும் அவற்றை எவ்வாறு சரிசெய்வது என்பது இங்கே:

• Lighthouse CI "Timeout" பிழையுடன் தோல்வியடைகிறது: உங்கள் இணையதளம் ஏற்றுவதற்கு அதிக நேரம் எடுத்தால் அல்லது Lighthouse CI உங்கள் இணையதளத்துடன் இணைக்க முடியாவிட்டால் இது நிகழலாம். உங்கள் lighthouserc.js கோப்பில் காலக்கெடு மதிப்பை அதிகரிக்க முயற்சிக்கவும் அல்லது பிழைகளுக்கு உங்கள் இணையதளத்தின் சேவையக பதிவுகளைச் சரிபார்க்கவும்.
• Lighthouse CI சீரற்ற முடிவுகளைப் புகாரளிக்கிறது: நெட்வொர்க் நிலைமைகள் அல்லது பிற காரணிகளால் ஓட்டங்களுக்கு இடையில் Lighthouse முடிவுகள் சற்று மாறுபடலாம். மேலும் நிலையான சராசரியைப் பெற பல தணிக்கைகளை இயக்கவும்.
• Lighthouse CI முடிவுகளைப் பதிவேற்றத் தவறுகிறது: உங்கள் upload.target உள்ளமைவைச் சரிபார்த்து, உங்கள் Lighthouse CI சேவையகம் இயங்குகிறது மற்றும் அணுகக்கூடியது என்பதை உறுதிப்படுத்தவும். மேலும், நீங்கள் சரியான அணுகல் டோக்கனை உள்ளமைத்துள்ளீர்கள் என்பதை சரிபார்க்கவும்.
• Lighthouse CI எதிர்பாராத செயல்திறன் பின்னடைவுகளைப் புகாரளிக்கிறது: பின்னடைவு கண்டறியப்படுவதற்கு முன்பு செய்யப்பட்ட குறியீடு மாற்றங்களை விசாரிக்கவும். பின்னடைவைக் கண்ட குறிப்பிட்ட செயல்திறன் அளவீடுகளை அடையாளம் காண Lighthouse CI அறிக்கைகளைப் பயன்படுத்தவும் மற்றும் உங்கள் மேம்படுத்தல் முயற்சிகளை அந்தப் பகுதிகளில் கவனம் செலுத்தவும்.

முடிவுரை

Frontend Lighthouse CI என்பது வலைப் பயன்பாடுகளின் தொடர்ச்சியான செயல்திறன் கண்காணிப்புக்கான ஒரு சக்திவாய்ந்த கருவியாகும். உங்கள் CI/CD பைப்லைனில் Lighthouse CI-ஐ ஒருங்கிணைப்பதன் மூலம், நீங்கள் செயல்திறன் சிக்கல்களை முன்கூட்டியே கண்டறிந்து சரிசெய்யலாம், உங்கள் இணையதளம் ஒரு உகந்த பயனர் அனுபவத்தை வழங்குவதை உறுதிசெய்யலாம். உலகெங்கிலும் உள்ள பயனர்களுக்கு சிறந்த அனுபவத்தை உருவாக்க, உங்கள் அமைப்பு, உறுதிப்படுத்தல் விதிகள் மற்றும் சோதனை இடங்களை உலகளாவிய பார்வையாளர்களுக்காக மாற்றியமைக்க நினைவில் கொள்ளுங்கள்.

இந்த வழிகாட்டியில் கோடிட்டுக் காட்டப்பட்டுள்ள படிகள் மற்றும் சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், உங்கள் இணையதளத்தின் செயல்திறனை கணிசமாக மேம்படுத்தலாம், பவுன்ஸ் விகிதங்களைக் குறைக்கலாம், மாற்று விகிதங்களை அதிகரிக்கலாம், இறுதியில், உங்கள் வணிக இலக்குகளை அடையலாம். இன்றே Lighthouse CI-ஐ செயல்படுத்தத் தொடங்கி, உங்கள் வலைப் பயன்பாடுகளின் முழுத் திறனையும் திறக்கவும்.