முகப்பு செயல்திறன் சோதனை: தொடர்ச்சியான முன்னேற்றத்திற்காக Lighthouse CI-ஐ ஒருங்கிணைத்தல்

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

முகப்பு செயல்திறன் சோதனை ஏன் முக்கியமானது?

Lighthouse CI-க்குள் மூழ்குவதற்கு முன், முகப்பு செயல்திறன் சோதனை ஏன் முக்கியமானது என்பதைப் புரிந்துகொள்வோம்:

• பயனர் அனுபவம்: வேகமான மற்றும் பதிலளிக்கக்கூடிய இணையதளம் ஒரு சிறந்த பயனர் அனுபவத்தை வழங்குகிறது, இது அதிக ஈடுபாடு மற்றும் குறைந்த பவுன்ஸ் விகிதங்களுக்கு வழிவகுக்கிறது. ஜப்பானின் டோக்கியோவில் உள்ள ஒரு சாத்தியமான வாடிக்கையாளர் மெதுவாக ஏற்றப்படும் ஒரு மின்வணிக தளத்தில் ஒரு பொருளை வாங்க முயற்சிப்பதை கற்பனை செய்து பாருங்கள். அவர்கள் அந்தத் தளத்தை கைவிட்டு மாற்று வழிகளைத் தேட வாய்ப்புள்ளது.
• எஸ்சிஓ தரவரிசை: கூகிள் போன்ற தேடுபொறிகள் இணையதள வேகம் மற்றும் செயல்திறனை தரவரிசை காரணிகளாகக் கருதுகின்றன. வேகமான இணையதளங்கள் தேடல் முடிவுகளில் உயர்ந்த இடத்தைப் பெறுகின்றன, இதனால் அதிக ஆர்கானிக் ட்ராஃபிக்கை ஈர்க்கின்றன. கூகிளின் கோர் வெப் வைட்டல்ஸ் (Core Web Vitals) முயற்சி, எஸ்சிஓ-விற்காக லார்ஜஸ்ட் கன்டென்ட்ஃபுல் பெயின்ட் (LCP), ஃபர்ஸ்ட் இன்புட் டிலே (FID), மற்றும் குமுலேட்டிவ் லேஅவுட் ஷிஃப்ட் (CLS) போன்ற காரணிகளின் முக்கியத்துவத்தை வலியுறுத்துகிறது.
• அணுகல்தன்மை: செயல்திறன் மேம்பாடுகள் பெரும்பாலும் குறைபாடுகள் உள்ள பயனர்களுக்கு சிறந்த அணுகல்தன்மைக்கு வழிவகுக்கும். மேம்படுத்தப்பட்ட குறியீடு மற்றும் படங்கள் ஸ்கிரீன் ரீடர்களை நம்பியிருக்கும் அல்லது குறைந்த அலைவரிசை உள்ள பயனர்களின் அனுபவத்தை மேம்படுத்தும்.
• மாற்று விகிதங்கள்: ஒரு வேகமான இணையதளம் நேரடியாக மாற்று விகிதங்களை பாதிக்கலாம். பக்கத்தை ஏற்றுவதில் ஒரு வினாடி தாமதம் கூட மாற்றங்களில் குறிப்பிடத்தக்க குறைவுக்கு வழிவகுக்கும் என்று ஆய்வுகள் காட்டுகின்றன. இந்தியாவின் மும்பையில் ஒரு பயனர் விமானம் முன்பதிவு செய்ய முயற்சிப்பதை நினைத்துப் பாருங்கள். ஒரு மெதுவான முன்பதிவு செயல்முறை அவர்கள் வாங்குவதை கைவிட்டு ஒரு போட்டியாளரைத் தேர்வுசெய்ய வழிவகுக்கும்.
• வள மேம்படுத்தல்: செயல்திறன் சோதனை வளங்களை மேம்படுத்தக்கூடிய பகுதிகளை அடையாளம் காண உதவுகிறது, இது சர்வர் உள்கட்டமைப்பு மற்றும் அலைவரிசை பயன்பாடு ஆகியவற்றில் செலவு சேமிப்புக்கு வழிவகுக்கிறது.

Lighthouse CI அறிமுகம்

Lighthouse CI என்பது உங்கள் CI/CD பைப்லைனுடன் தடையின்றி ஒருங்கிணைக்க வடிவமைக்கப்பட்ட ஒரு திறந்த மூல, தானியங்கு கருவியாகும். இது கூகிளால் உருவாக்கப்பட்ட ஒரு பிரபலமான தணிக்கைக் கருவியான Lighthouse-ஐ இயக்குகிறது மற்றும் உங்கள் இணையதளத்தின் செயல்திறன், அணுகல்தன்மை, எஸ்சிஓ, சிறந்த நடைமுறைகள் மற்றும் முற்போக்கு வலை பயன்பாடு (PWA) இணக்கம் குறித்த நுண்ணறிவுகளை வழங்குகிறது. Lighthouse CI உங்களுக்கு உதவுகிறது:

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

Lighthouse CI-ஐ அமைத்தல்

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

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

npm அல்லது yarn பயன்படுத்தி Lighthouse CI CLI-ஐ உலகளவில் நிறுவவும்:

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

              
                Copy
              
            
          

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

Lighthouse CI-ஐ உள்ளமைக்க உங்கள் திட்டத்தின் ரூட் டைரக்டரியில் ஒரு lighthouserc.js கோப்பை உருவாக்கவும். இங்கே ஒரு எடுத்துக்காட்டு உள்ளமைவு:

            module.exports = {
  ci:
{
    collect:
{
      url: ['http://localhost:3000', 'http://localhost:3000/about'],
      startServerCommand: 'npm start',
      numberOfRuns: 3,
    },
    assert:
{
      assertions:
{
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 1 }],
        'categories:best-practices': ['warn', { minScore: 0.9 }],
        'categories:seo': ['warn', { minScore: 0.9 }],
        'categories:pwa': ['off'],
        'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 4000 }],
        'total-blocking-time': ['warn', { maxNumericValue: 200 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
      },
    },
    upload:
{
      target: 'temporary-redirect',
    },
  },
};

            

              
                Copy
              
            
          

இந்த உள்ளமைவை உடைப்போம்:

• collect.url: தணிக்கை செய்ய வேண்டிய URL-களின் வரிசை. இந்த எடுத்துக்காட்டு முகப்புப்பக்கம் மற்றும் 'பற்றி' பக்கத்தை தணிக்கை செய்கிறது. உங்கள் இணையதளத்தின் அனைத்து முக்கிய பக்கங்களையும், வெவ்வேறு பயன்பாட்டு நிகழ்வுகளைக் கருத்தில் கொண்டு நீங்கள் சேர்க்க வேண்டும். எடுத்துக்காட்டாக, ஒரு மின்வணிக தளம் முகப்புப்பக்கம், தயாரிப்பு பட்டியல் பக்கங்கள், தயாரிப்பு விவரப் பக்கங்கள் மற்றும் செக்அவுட் செயல்முறையை உள்ளடக்கியிருக்கலாம்.
• collect.startServerCommand: உங்கள் டெவலப்மென்ட் சர்வரைத் தொடங்குவதற்கான கட்டளை. Lighthouse CI ஒரு உள்ளூர் டெவலப்மென்ட் சூழலுக்கு எதிராக இயங்க வேண்டுமானால் இது அவசியம்.
• collect.numberOfRuns: ஒவ்வொரு URL-க்கும் Lighthouse தணிக்கைகளை எத்தனை முறை இயக்க வேண்டும். பல தணிக்கைகளை இயக்குவது நெட்வொர்க் நிலைமைகள் மற்றும் பிற காரணிகளின் மாறுபாடுகளைக் குறைக்க உதவுகிறது.
• assert.assertions: Lighthouse தணிக்கை முடிவுகளை சரிபார்க்க ஒரு தொகுதி கூற்றுகள். ஒவ்வொரு கூற்றும் ஒரு மெட்ரிக் அல்லது வகை மற்றும் ஒரு வரம்பைக் குறிப்பிடுகிறது. வரம்பு பூர்த்தி செய்யப்படாவிட்டால், பில்ட் தோல்வியடையும். இந்த எடுத்துக்காட்டு செயல்திறன், அணுகல்தன்மை, சிறந்த நடைமுறைகள் மற்றும் எஸ்சிஓ வகைகளுக்கான வரம்புகளை அமைக்கிறது. இது ஃபர்ஸ்ட் கன்டென்ட்ஃபுல் பெயின்ட் (FCP), லார்ஜஸ்ட் கன்டென்ட்ஃபுல் பெயின்ட் (LCP), டோட்டல் பிளாக்கிங் டைம் (TBT), மற்றும் குமுலேட்டிவ் லேஅவுட் ஷிஃப்ட் (CLS) போன்ற குறிப்பிட்ட மெட்ரிக்குகளுக்கும் வரம்புகளை அமைக்கிறது.
• upload.target: Lighthouse அறிக்கைகளை எங்கு பதிவேற்றுவது என்பதைக் குறிப்பிடுகிறது. temporary-redirect அறிக்கைகளை ஒரு தற்காலிக சேமிப்பக இடத்திற்கு பதிவேற்றுகிறது மற்றும் அவற்றை அணுக ஒரு URL-ஐ வழங்குகிறது. Lighthouse CI சர்வர் அல்லது கூகிள் கிளவுட் ஸ்டோரேஜ் அல்லது அமேசான் S3 போன்ற கிளவுட் சேமிப்பக தீர்வுகளைப் பயன்படுத்துவது மற்ற விருப்பங்களில் அடங்கும்.

3. உங்கள் CI/CD அமைப்புடன் ஒருங்கிணைக்கவும்

அடுத்த படி Lighthouse CI-ஐ உங்கள் CI/CD பைப்லைனில் ஒருங்கிணைப்பது. GitHub Actions உடன் அதை எப்படி ஒருங்கிணைப்பது என்பதற்கான எடுத்துக்காட்டு இங்கே:

உங்கள் களஞ்சியத்தில் ஒரு .github/workflows/lighthouse.yml கோப்பை உருவாக்கவும்:

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install Dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |          npm run build
          lhci autorun

            

              
                Copy
              
            
          

இந்த பணிப்பாய்வு பின்வரும் படிகளைச் செய்கிறது:

• குறியீட்டை செக் அவுட் செய்கிறது.
• Node.js-ஐ அமைக்கிறது.
• சார்புநிலைகளை நிறுவுகிறது.
• Lighthouse CI-ஐ இயக்குகிறது. இந்த படி முதலில் பயன்பாட்டை பில்ட் செய்கிறது (npm run build), பின்னர் lhci autorun-ஐ இயக்குகிறது, இது Lighthouse தணிக்கைகளைச் செயல்படுத்துகிறது மற்றும் உள்ளமைக்கப்பட்ட வரம்புகளுக்கு எதிராக முடிவுகளை உறுதிப்படுத்துகிறது.

உங்கள் குறிப்பிட்ட CI/CD அமைப்பு மற்றும் திட்டத் தேவைகளுக்கு இந்த பணிப்பாய்வை மாற்றியமைக்கவும். எடுத்துக்காட்டாக, நீங்கள் GitLab CI-ஐப் பயன்படுத்தினால், இதே போன்ற படிகளுடன் ஒரு .gitlab-ci.yml கோப்பை உள்ளமைப்பீர்கள்.

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

உங்கள் மாற்றங்களை கமிட் செய்து அவற்றை உங்கள் களஞ்சியத்திற்கு புஷ் செய்யவும். CI/CD பைப்லைன் தானாகவே Lighthouse CI-ஐ இயக்கும். கூற்றுகளில் ஏதேனும் தோல்வியுற்றால், பில்ட் தோல்வியடையும், இது டெவலப்பர்களுக்கு மதிப்புமிக்க பின்னூட்டத்தை வழங்கும். Lighthouse CI அறிக்கைகள் CI/CD அமைப்பு வழங்கிய URL-இல் கிடைக்கும்.

மேம்பட்ட உள்ளமைவு மற்றும் தனிப்பயனாக்கம்

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

1. Lighthouse CI சர்வரைப் பயன்படுத்துதல்

Lighthouse CI சர்வர் காலப்போக்கில் செயல்திறன் அளவீடுகளைக் கண்காணிக்கவும், திட்டங்களை நிர்வகிக்கவும் மற்றும் செயல்திறன் சிக்கல்களில் ஒத்துழைக்கவும் ஒரு மையப்படுத்தப்பட்ட டாஷ்போர்டை வழங்குகிறது. Lighthouse CI சர்வரைப் பயன்படுத்த, நீங்கள் ஒரு நிகழ்வை அமைத்து, உங்கள் lighthouserc.js கோப்பை சர்வரில் அறிக்கைகளைப் பதிவேற்றுமாறு உள்ளமைக்க வேண்டும்.

முதலில், சர்வரை வரிசைப்படுத்தவும். Docker, Heroku மற்றும் AWS மற்றும் Google Cloud போன்ற கிளவுட் வழங்குநர்கள் உட்பட பல்வேறு வரிசைப்படுத்தல் விருப்பங்கள் உள்ளன. சர்வரை வரிசைப்படுத்துவது குறித்த விரிவான வழிமுறைகளுக்கு Lighthouse CI ஆவணத்தைப் பார்க்கவும்.

சர்வர் இயங்கியவுடன், உங்கள் lighthouserc.js கோப்பை சர்வரைக் குறிக்குமாறு புதுப்பிக்கவும்:

            module.exports = {
  ci:
{
    collect: {
      url: ['http://localhost:3000'],
      startServerCommand: 'npm start',
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }],
      },
    },
    upload:
{
      target: 'lhci',
      serverBaseUrl: 'YOUR_LHCI_SERVER_URL',
      token: 'YOUR_LHCI_SERVER_TOKEN',
    },
  },
};

            

              
                Copy
              
            
          

YOUR_LHCI_SERVER_URL-ஐ உங்கள் Lighthouse CI சர்வரின் URL உடன் மாற்றவும் மற்றும் YOUR_LHCI_SERVER_TOKEN-ஐ சர்வரால் உருவாக்கப்பட்ட ஒரு டோக்கனுடன் மாற்றவும். டோக்கன் உங்கள் CI பைப்லைனை சர்வர் உடன் அங்கீகரிக்கிறது.

2. செயல்திறன் பட்ஜெட்களை அமைத்தல்

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

உங்கள் lighthouserc.js கோப்பில் assert.assertions பண்பைப் பயன்படுத்தி செயல்திறன் பட்ஜெட்களை வரையறுக்கலாம். எடுத்துக்காட்டாக, ஃபர்ஸ்ட் கன்டென்ட்ஃபுல் பெயின்ட் (FCP)-க்கு செயல்திறன் பட்ஜெட்டை அமைக்க, நீங்கள் பின்வரும் கூற்றைச் சேர்க்கலாம்:

            'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
            

              
                Copy
              
            
          

FCP 2500 மில்லி விநாடிகளுக்கு மேல் இருந்தால் இந்த கூற்று பில்டை தோல்வியடையச் செய்யும்.

3. Lighthouse உள்ளமைவைத் தனிப்பயனாக்குதல்

Lighthouse CI உங்கள் குறிப்பிட்ட தேவைகளுக்கு ஏற்ப Lighthouse உள்ளமைவைத் தனிப்பயனாக்க உங்களை அனுமதிக்கிறது. நீங்கள் பல்வேறு Lighthouse அமைப்புகளை உள்ளமைக்கலாம், அவை:

• onlyAudits: இயக்க வேண்டிய தணிக்கைகளின் பட்டியலைக் குறிப்பிடவும்.
• skipAudits: தவிர்க்க வேண்டிய தணிக்கைகளின் பட்டியலைக் குறிப்பிடவும்.
• throttling: வெவ்வேறு நெட்வொர்க் நிலைமைகளை உருவகப்படுத்த நெட்வொர்க் த்ராட்லிங் அமைப்புகளை உள்ளமைக்கவும்.
• formFactor: உருவகப்படுத்த வேண்டிய படிவ காரணியை (டெஸ்க்டாப் அல்லது மொபைல்) குறிப்பிடவும்.
• screenEmulation: திரை உருவகப்படுத்தல் அமைப்புகளை உள்ளமைக்கவும்.

Lighthouse உள்ளமைவைத் தனிப்பயனாக்க, நீங்கள் lhci autorun கட்டளைக்கு ஒரு --config-path கொடியை அனுப்பலாம், இது ஒரு தனிப்பயன் Lighthouse உள்ளமைவுக் கோப்பைக் குறிக்கிறது. உள்ளமைவு விருப்பங்களின் முழுமையான பட்டியலுக்கு Lighthouse ஆவணத்தைப் பார்க்கவும்.

4. அங்கீகரிக்கப்பட்ட பக்கங்களைத் தணிக்கை செய்தல்

அங்கீகரிக்கப்பட்ட பக்கங்களைத் தணிக்கை செய்வதற்கு சற்று ভিন্নமான அணுகுமுறை தேவை. தணிக்கைகளை இயக்குவதற்கு முன்பு அங்கீகரிக்க Lighthouse CI-க்கு ஒரு வழியை நீங்கள் வழங்க வேண்டும். இது குக்கீகளைப் பயன்படுத்தி அல்லது உள்நுழைவு செயல்முறையை ஸ்கிரிப்ட் செய்வதன் மூலம் அடையலாம்.

ஒரு பொதுவான அணுகுமுறை, அங்கீகார குக்கீகளை Lighthouse CI-க்கு அனுப்ப --extra-headers கொடியைப் பயன்படுத்துவதாகும். இணையதளத்தில் உள்நுழைந்த பிறகு உங்கள் உலாவியின் டெவலப்பர் கருவிகளிலிருந்து குக்கீகளைப் பெறலாம்.

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

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

• Lighthouse CI-ஐ தவறாமல் இயக்கவும்: ஒவ்வொரு கமிட் அல்லது புல் கோரிக்கையிலும் தானாகவே தணிக்கைகளை இயக்க Lighthouse CI-ஐ உங்கள் CI/CD பைப்லைனில் ஒருங்கிணைக்கவும். இது செயல்திறன் பின்னடைவுகள் முன்கூட்டியே கண்டறியப்பட்டு உடனடியாக சரிசெய்யப்படுவதை உறுதி செய்கிறது.
• யதார்த்தமான செயல்திறன் பட்ஜெட்களை அமைக்கவும்: சவாலான ஆனால் அடையக்கூடிய செயல்திறன் பட்ஜெட்களை வரையறுக்கவும். பழமைவாத பட்ஜெட்களுடன் தொடங்கி, உங்கள் இணையதளத்தின் செயல்திறன் மேம்படும்போது படிப்படியாக அவற்றை இறுக்கமாக்குங்கள். வெவ்வேறு வகையான பக்கங்களுக்கு அவற்றின் சிக்கலான மற்றும் முக்கியத்துவத்தைப் பொறுத்து வெவ்வேறு பட்ஜெட்களை அமைப்பதைக் கருத்தில் கொள்ளுங்கள்.
• முக்கிய அளவீடுகளில் கவனம் செலுத்துங்கள்: பயனர் அனுபவம் மற்றும் வணிக விளைவுகளில் அதிக தாக்கத்தை ஏற்படுத்தும் முக்கிய செயல்திறன் அளவீடுகளுக்கு முன்னுரிமை அளியுங்கள். கூகிளின் கோர் வெப் வைட்டல்ஸ் (LCP, FID, மற்றும் CLS) ஒரு நல்ல தொடக்கப் புள்ளி.
• செயல்திறன் சிக்கல்களை ஆராய்ந்து சரிசெய்யவும்: Lighthouse CI செயல்திறன் சிக்கல்களைக் கண்டறியும்போது, அவற்றை முழுமையாக ஆராய்ந்து பொருத்தமான தீர்வுகளைச் செயல்படுத்தவும். சிக்கல்களின் மூல காரணங்களைக் கண்டறியவும் மற்றும் மிகவும் தாக்கத்தை ஏற்படுத்தும் திருத்தங்களுக்கு முன்னுரிமை அளிக்கவும் Lighthouse அறிக்கைகளைப் பயன்படுத்தவும்.
• காலப்போக்கில் செயல்திறனைக் கண்காணிக்கவும்: போக்குகள் மற்றும் வடிவங்களைக் கண்டறிய காலப்போக்கில் செயல்திறன் அளவீடுகளைக் கண்காணிக்கவும். செயல்திறன் தரவைக் காட்சிப்படுத்தவும் மற்றும் மேம்பாட்டிற்கான பகுதிகளைக் கண்டறியவும் Lighthouse CI சர்வர் அல்லது பிற கண்காணிப்புக் கருவிகளைப் பயன்படுத்தவும்.
• உங்கள் குழுவுக்குக் கல்வி கற்பிக்கவும்: உங்கள் குழு முகப்பு செயல்திறனின் முக்கியத்துவத்தையும் Lighthouse CI-ஐ திறம்பட பயன்படுத்துவது எப்படி என்பதையும் புரிந்துகொள்வதை உறுதிசெய்க. அவர்களின் திறன்களையும் அறிவையும் மேம்படுத்த அவர்களுக்கு பயிற்சி மற்றும் வளங்களை வழங்கவும்.
• உலகளாவிய நெட்வொர்க் நிலைமைகளைக் கருத்தில் கொள்ளுங்கள்: செயல்திறன் பட்ஜெட்களை அமைக்கும்போது, உலகின் வெவ்வேறு பகுதிகளில் உள்ள நெட்வொர்க் நிலைமைகளைக் கருத்தில் கொள்ளுங்கள். மெதுவான இணைய வேகம் உள்ள பகுதிகளில் உள்ள பயனர்கள் வேகமான வேகம் உள்ள பகுதிகளில் உள்ள பயனர்களை விட வேறுபட்ட அனுபவத்தைக் கொண்டிருக்கலாம். சோதனையின் போது வெவ்வேறு நெட்வொர்க் நிலைமைகளை உருவகப்படுத்த கருவிகளைப் பயன்படுத்தவும்.
• படங்களை மேம்படுத்தவும்: பட மேம்படுத்தல் முகப்பு செயல்திறனின் ஒரு முக்கிய அம்சமாகும். தரத்தை இழக்காமல் படங்களை சுருக்கவும் மற்றும் மேம்படுத்தவும் ImageOptim, TinyPNG அல்லது ஆன்லைன் மாற்றிகள் போன்ற கருவிகளைப் பயன்படுத்தவும். WebP போன்ற நவீன பட வடிவங்களைப் பயன்படுத்தவும், இது JPEG மற்றும் PNG போன்ற பாரம்பரிய வடிவங்களை விட சிறந்த சுருக்கத்தையும் தரத்தையும் வழங்குகிறது. வியூபோர்ட்டில் உடனடியாகத் தெரியாத படங்களுக்கு சோம்பேறி ஏற்றத்தை (lazy loading) செயல்படுத்தவும்.
• குறியீட்டை சுருக்கி சுருக்கவும்: கோப்பு அளவுகளைக் குறைக்க உங்கள் HTML, CSS, மற்றும் JavaScript குறியீட்டை சுருக்கவும் (Minify). UglifyJS, Terser அல்லது ஆன்லைன் மினிஃபையர்கள் போன்ற கருவிகளைப் பயன்படுத்தவும். மாற்றப்படும் கோப்புகளின் அளவை மேலும் குறைக்க உங்கள் சர்வரில் Gzip அல்லது Brotli சுருக்கத்தை இயக்கவும்.
• உலாவி கேச்சிங்கைப் பயன்படுத்திக் கொள்ளுங்கள்: படங்கள், CSS மற்றும் JavaScript கோப்புகள் போன்ற நிலையான சொத்துக்களுக்கு பொருத்தமான கேச் ஹெட்டர்களை அமைக்க உங்கள் சர்வரை உள்ளமைக்கவும். இது உலாவிகள் இந்த சொத்துக்களை கேச் செய்யவும் மற்றும் அவற்றை மீண்டும் மீண்டும் பதிவிறக்குவதைத் தவிர்க்கவும் அனுமதிக்கிறது.

முடிவுரை

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