ഫ്രണ്ട്എൻഡ് ലൈറ്റ്ഹൗസ് CI: വെബ് ആപ്ലിക്കേഷനുകൾക്കായുള്ള തുടർച്ചയായ പെർഫോമൻസ് നിരീക്ഷണം

ഇന്നത്തെ അതിവേഗത്തിലുള്ള ഡിജിറ്റൽ ലോകത്ത്, വെബ്സൈറ്റ് പെർഫോമൻസ് വളരെ പ്രധാനമാണ്. വേഗത കുറഞ്ഞതോ ശരിയായി ഒപ്റ്റിമൈസ് ചെയ്യാത്തതോ ആയ ഒരു വെബ്സൈറ്റ് ഉപയോക്താക്കളെ നിരാശരാക്കാനും, ഇടപഴകൽ കുറയ്ക്കാനും, ആത്യന്തികമായി നിങ്ങളുടെ ബിസിനസ്സിനെ പ്രതികൂലമായി ബാധിക്കാനും ഇടയാക്കും. ഇവിടെയാണ് ലൈറ്റ്ഹൗസ് CI-യുടെ പ്രസക്തി. തുടർച്ചയായ പെർഫോമൻസ് നിരീക്ഷണത്തിനായി ലൈറ്റ്ഹൗസ് CI നടപ്പിലാക്കുന്നതിലൂടെ, ഉപയോക്താക്കളെ ബാധിക്കുന്നതിന് മുമ്പുതന്നെ പെർഫോമൻസ് തടസ്സങ്ങൾ കണ്ടെത്താനും പരിഹരിക്കാനും ഈ ഗൈഡ് നിങ്ങളെ സഹായിക്കും.

എന്താണ് ലൈറ്റ്ഹൗസ് CI?

ലൈറ്റ്ഹൗസ് CI ഒരു ഓപ്പൺ സോഴ്സ്, ഓട്ടോമേറ്റഡ് പെർഫോമൻസ് ടെസ്റ്റിംഗ് ടൂളാണ്, ഇത് നിങ്ങളുടെ കണ്ടിന്യൂവസ് ഇന്റഗ്രേഷൻ, കണ്ടിന്യൂവസ് ഡെലിവറി (CI/CD) പൈപ്പ്ലൈനുമായി എളുപ്പത്തിൽ സംയോജിപ്പിക്കാൻ കഴിയും. ഇത് ഗൂഗിളിന്റെ ലൈറ്റ്ഹൗസ് ഓഡിറ്റിംഗ് ടൂൾ ഉപയോഗിച്ച് നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പെർഫോമൻസ്, അക്സസിബിലിറ്റി, എസ്ഇഒ, മികച്ച രീതികൾ എന്നിവയെക്കുറിച്ച് പ്രവർത്തനക്ഷമമായ ഉൾക്കാഴ്ചകൾ നൽകുന്നു. നിങ്ങളുടെ വർക്ക്ഫ്ലോയിൽ ലൈറ്റ്ഹൗസ് CI ഉൾപ്പെടുത്തുന്നതിലൂടെ, നിങ്ങൾക്ക് വെബ്സൈറ്റിന്റെ പെർഫോമൻസ് തുടർച്ചയായി നിരീക്ഷിക്കാനും, പ്രശ്നങ്ങൾ ട്രാക്ക് ചെയ്യാനും, ഓരോ കോഡ് മാറ്റവും മികച്ച ഉപയോക്തൃ അനുഭവത്തിന് സംഭാവന ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കാനും കഴിയും. ലൈറ്റ്ഹൗസ് CI ഏതെങ്കിലും ഒരു പ്രത്യേക ക്ലൗഡ് പ്രൊവൈഡറുമായി ബന്ധിപ്പിച്ചിട്ടില്ല, കൂടാതെ ഇത് വിവിധതരം സെറ്റപ്പുകളിൽ ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, ഇത് Github Actions, Jenkins, CircleCI പോലുള്ള സേവനങ്ങളിൽ ഒരു ഡോക്കർ കണ്ടെയ്നറിനുള്ളിൽ പ്രവർത്തിപ്പിക്കാൻ കഴിയും.

എന്തുകൊണ്ട് ലൈറ്റ്ഹൗസ് CI ഉപയോഗിക്കണം?

ലൈറ്റ്ഹൗസ് CI നടപ്പിലാക്കുന്നത് നിരവധി നേട്ടങ്ങൾ നൽകുന്നു:

• പെർഫോമൻസ് പ്രശ്നങ്ങളുടെ മുൻകൂട്ടിയുള്ള കണ്ടെത്തൽ: പുതിയ കോഡ് മാറ്റങ്ങൾ പ്രൊഡക്ഷനിൽ എത്തുന്നതിന് മുമ്പ് അവ മൂലമുണ്ടാകുന്ന പെർഫോമൻസ് പ്രശ്നങ്ങൾ കണ്ടെത്തുക.
• മെച്ചപ്പെട്ട വെബ്സൈറ്റ് പെർഫോമൻസ്: വേഗത, അക്സസിബിലിറ്റി, എസ്ഇഒ എന്നിവയ്ക്കായി നിങ്ങളുടെ വെബ്സൈറ്റ് എങ്ങനെ ഒപ്റ്റിമൈസ് ചെയ്യാം എന്നതിനെക്കുറിച്ചുള്ള പ്രവർത്തനക്ഷമമായ ഉൾക്കാഴ്ചകൾ നേടുക.
• മെച്ചപ്പെട്ട ഉപയോക്തൃ അനുഭവം: സന്ദർശകരെ ആകർഷിക്കുന്ന വേഗതയേറിയതും ഉപയോക്തൃ-സൗഹൃദവുമായ വെബ്സൈറ്റ് നൽകുക.
• ബൗൺസ് റേറ്റ് കുറയ്ക്കുക: ഉപയോക്താക്കളുടെ നിരാശ കുറയ്ക്കാനും അവർ നിങ്ങളുടെ സൈറ്റ് വിട്ടുപോകുന്നത് തടയാനും ലോഡിംഗ് സമയം ഒപ്റ്റിമൈസ് ചെയ്യുക.
• പരിവർത്തന നിരക്കുകൾ വർദ്ധിപ്പിക്കുക: വേഗതയേറിയ ഒരു വെബ്സൈറ്റ് സാധാരണയായി ഉയർന്ന പരിവർത്തന നിരക്കുകളിലേക്കും മെച്ചപ്പെട്ട ബിസിനസ്സ് ഫലങ്ങളിലേക്കും നയിക്കുന്നു.
• ഓട്ടോമേറ്റഡ് പെർഫോമൻസ് ടെസ്റ്റിംഗ്: തുടർച്ചയായ നിരീക്ഷണത്തിനായി നിങ്ങളുടെ 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-ൽ പ്രവർത്തിക്കുന്ന ഒരു വെബ്സൈറ്റിന്റെ ഹോംപേജും 'എബൗട്ട്' പേജും ഞങ്ങൾ ഓഡിറ്റ് ചെയ്യുന്നു. ഇത് *നിങ്ങളുടെ* പ്രോജക്റ്റുമായി ബന്ധപ്പെട്ട URL-കൾ ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കാൻ ഓർക്കുക, അതിൽ സ്റ്റേജിംഗ് എൻവയോൺമെന്റുകളും ഉൾപ്പെട്ടേക്കാം.
• assert.preset: lighthouse:recommended പ്രീസെറ്റ് ഉപയോഗിക്കുന്നു, ഇത് ലൈറ്റ്ഹൗസിന്റെ ശുപാർശകളെ അടിസ്ഥാനമാക്കി മുൻകൂട്ടി നിശ്ചയിച്ച ഒരു കൂട്ടം അസേർഷനുകൾ പ്രയോഗിക്കുന്നു. ഇതൊരു നല്ല തുടക്കമാണ്, എന്നാൽ ആവശ്യാനുസരണം നിങ്ങൾക്ക് ഈ അസേർഷനുകൾ ഇഷ്ടാനുസൃതമാക്കാവുന്നതാണ്.
• upload.target: ലൈറ്റ്ഹൗസ് CI ഫലങ്ങൾ എവിടെ അപ്‌ലോഡ് ചെയ്യണമെന്ന് കോൺഫിഗർ ചെയ്യുന്നു. temporary-public-storage ടെസ്റ്റിംഗിനും ഡെവലപ്‌മെന്റിനും ഉപയോഗപ്രദമാണ്, എന്നാൽ പ്രൊഡക്ഷൻ എൻവയോൺമെന്റുകൾക്കായി, നിങ്ങൾ സാധാരണയായി കൂടുതൽ സ്ഥിരമായ ഒരു സ്റ്റോറേജ് പരിഹാരം ഉപയോഗിക്കാൻ ആഗ്രഹിക്കും (പിന്നീട് ചർച്ചചെയ്യും).

3. നിങ്ങളുടെ CI/CD പൈപ്പ്ലൈനിൽ ലൈറ്റ്ഹൗസ് CI സംയോജിപ്പിക്കുക

അടുത്ത ഘട്ടം നിങ്ങളുടെ CI/CD പൈപ്പ്ലൈനിൽ ലൈറ്റ്ഹൗസ് CI സംയോജിപ്പിക്കുക എന്നതാണ്. കൃത്യമായ ഘട്ടങ്ങൾ നിങ്ങളുടെ CI/CD പ്രൊവൈഡറിനെ ആശ്രയിച്ച് വ്യത്യാസപ്പെടും, എന്നാൽ പൊതുവായ പ്രക്രിയയിൽ ലൈറ്റ്ഹൗസ് 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 ബ്രാഞ്ചിലേക്കുള്ള പുഷുകളിൽ വർക്ക്ഫ്ലോ ട്രിഗർ ചെയ്യുന്നു.
• 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 ഔട്ട്‌പുട്ടിൽ നൽകിയിട്ടുള്ള ലിങ്ക് പിന്തുടർന്ന് നിങ്ങൾക്ക് ഈ ഫലങ്ങൾ ആക്‌സസ് ചെയ്യാൻ കഴിയും. ഈ ഫലങ്ങൾ നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പെർഫോമൻസ്, അക്സസിബിലിറ്റി, എസ്ഇഒ, മികച്ച രീതികൾ എന്നിവയെക്കുറിച്ചുള്ള വിശദമായ വിവരങ്ങൾ നൽകുന്നു.

അസേർഷനുകളും പെർഫോമൻസ് ബജറ്റുകളും കോൺഫിഗർ ചെയ്യുന്നു

നിങ്ങളുടെ വെബ്സൈറ്റ് നിങ്ങളുടെ പെർഫോമൻസ് ലക്ഷ്യങ്ങൾ നിറവേറ്റുന്നുവെന്ന് ഉറപ്പാക്കാൻ അസേർഷനുകളും പെർഫോമൻസ് ബജറ്റുകളും കോൺഫിഗർ ചെയ്യാൻ ലൈറ്റ്ഹൗസ് CI നിങ്ങളെ അനുവദിക്കുന്നു. അസേർഷനുകൾ എന്നത് നിർദ്ദിഷ്ട പെർഫോമൻസ് മെട്രിക്കുകളെ (ഉദാ. ഫസ്റ്റ് കണ്ടന്റ്ഫുൾ പെയിന്റ്, ലാർജസ്റ്റ് കണ്ടന്റ്ഫുൾ പെയിന്റ്) മുൻകൂട്ടി നിശ്ചയിച്ച പരിധികളുമായി താരതമ്യം ചെയ്യുന്ന നിയമങ്ങളാണ്. പെർഫോമൻസ് ബജറ്റുകൾ വിവിധ പെർഫോമൻസ് മെട്രിക്കുകൾക്കുള്ള സ്വീകാര്യമായ പരിധികൾ നിർവചിക്കുന്നു.

നിങ്ങളുടെ 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: ഫസ്റ്റ് കണ്ടന്റ്ഫുൾ പെയിന്റിന് (FCP) 2000ms-ൽ ഒരു മുന്നറിയിപ്പ് പരിധി സജ്ജമാക്കുന്നു.
• largest-contentful-paint: ലാർജസ്റ്റ് കണ്ടന്റ്ഫുൾ പെയിന്റിന് (LCP) 2500ms-ൽ ഒരു മുന്നറിയിപ്പ് പരിധി സജ്ജമാക്കുന്നു.
• cumulative-layout-shift: ക്യുമുലേറ്റീവ് ലേഔട്ട് ഷിഫ്റ്റിന് (CLS) 0.1-ൽ ഒരു മുന്നറിയിപ്പ് പരിധി സജ്ജമാക്കുന്നു.
• 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 ഫലങ്ങൾക്കായി ഒരു സ്ഥിരമായ സ്റ്റോറേജ് പരിഹാരവും നിങ്ങളുടെ ഡാറ്റ കാണുന്നതിനും വിശകലനം ചെയ്യുന്നതിനുമുള്ള ഒരു ഉപയോക്തൃ ഇന്റർഫേസും നൽകുന്നു. ഇത് വിവിധ ക്ലൗഡ് പ്രൊവൈഡർമാരിലേക്ക് വിന്യസിക്കുകയോ നിങ്ങളുടെ സ്വന്തം ഇൻഫ്രാസ്ട്രക്ചറിൽ ഹോസ്റ്റ് ചെയ്യുകയോ ചെയ്യാം.
• ഗൂഗിൾ ക്ലൗഡ് സ്റ്റോറേജ്: നിങ്ങളുടെ ലൈറ്റ്ഹൗസ് CI ഫലങ്ങൾ ഒരു ഗൂഗിൾ ക്ലൗഡ് സ്റ്റോറേജ് ബക്കറ്റിലേക്ക് അപ്‌ലോഡ് ചെയ്യാം. നിങ്ങളുടെ ഡാറ്റ സംഭരിക്കുന്നതിനുള്ള ചെലവ് കുറഞ്ഞതും വികസിപ്പിക്കാവുന്നതുമായ ഒരു പരിഹാരമാണിത്.
• ആമസോൺ S3: ഗൂഗിൾ ക്ലൗഡ് സ്റ്റോറേജിന് സമാനമായി, നിങ്ങളുടെ ലൈറ്റ്ഹൗസ് CI ഫലങ്ങൾ ഒരു ആമസോൺ 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 സംയോജിപ്പിക്കുക. ഇത് പെർഫോമൻസ് പ്രശ്നങ്ങൾ നേരത്തെ കണ്ടെത്താൻ നിങ്ങളെ സഹായിക്കും.
• പെർഫോമൻസ് ബജറ്റുകൾ സജ്ജമാക്കുക: നിങ്ങളുടെ വെബ്സൈറ്റ് സ്വീകാര്യമായ പെർഫോമൻസ് പരിധിക്കുള്ളിൽ തുടരുന്നുവെന്ന് ഉറപ്പാക്കാൻ പെർഫോമൻസ് ബജറ്റുകൾ നിർവചിക്കുക.
• പെർഫോമൻസ് ട്രെൻഡുകൾ നിരീക്ഷിക്കുക: ട്രെൻഡുകൾ തിരിച്ചറിയാനും നിങ്ങളുടെ ഒപ്റ്റിമൈസേഷനുകളുടെ സ്വാധീനം അളക്കാനും കാലക്രമേണ നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പെർഫോമൻസ് ട്രാക്ക് ചെയ്യുക.
• ഒപ്റ്റിമൈസേഷൻ ശ്രമങ്ങൾക്ക് മുൻഗണന നൽകുക: ഏറ്റവും നിർണായകമായ പെർഫോമൻസ് മെട്രിക്കുകൾ ആദ്യം ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുക.
• യഥാർത്ഥ ലോക ഡാറ്റ ഉപയോഗിക്കുക: നിങ്ങളുടെ ഒപ്റ്റിമൈസേഷൻ ശ്രമങ്ങളെക്കുറിച്ച് അറിയാൻ യഥാർത്ഥ ലോക ഡാറ്റ ഉപയോഗിക്കുക. ഉദാഹരണത്തിന്, നിങ്ങളുടെ ഉപയോക്താക്കൾ ഏറ്റവും കൂടുതൽ സന്ദർശിക്കുന്ന പേജുകൾ തിരിച്ചറിയാൻ നിങ്ങൾക്ക് ഗൂഗിൾ അനലിറ്റിക്സ് ഉപയോഗിക്കാം.
• യഥാർത്ഥ ഉപകരണങ്ങളിൽ പരീക്ഷിക്കുക: യഥാർത്ഥ ലോക സാഹചര്യങ്ങളിൽ നിങ്ങളുടെ വെബ്സൈറ്റ് നന്നായി പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ യഥാർത്ഥ ഉപകരണങ്ങളിൽ പരീക്ഷിക്കുക.
• ലൈറ്റ്ഹൗസ് 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 'ടൈംഔട്ട്' പിശകിൽ പരാജയപ്പെടുന്നു: നിങ്ങളുടെ വെബ്സൈറ്റ് ലോഡ് ചെയ്യാൻ വളരെയധികം സമയമെടുക്കുകയോ അല്ലെങ്കിൽ ലൈറ്റ്ഹൗസ് CI-ക്ക് നിങ്ങളുടെ വെബ്സൈറ്റുമായി ബന്ധിപ്പിക്കാൻ കഴിയാതെ വരികയോ ചെയ്താൽ ഇത് സംഭവിക്കാം. നിങ്ങളുടെ lighthouserc.js ഫയലിലെ ടൈംഔട്ട് മൂല്യം വർദ്ധിപ്പിക്കാൻ ശ്രമിക്കുക അല്ലെങ്കിൽ പിശകുകൾക്കായി നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ സെർവർ ലോഗുകൾ പരിശോധിക്കുക.
• ലൈറ്റ്ഹൗസ് CI സ്ഥിരതയില്ലാത്ത ഫലങ്ങൾ റിപ്പോർട്ട് ചെയ്യുന്നു: നെറ്റ്‌വർക്ക് അവസ്ഥകൾ അല്ലെങ്കിൽ മറ്റ് ഘടകങ്ങൾ കാരണം ലൈറ്റ്ഹൗസ് ഫലങ്ങൾ ഓരോ റണ്ണിനും ഇടയിൽ അല്പം വ്യത്യാസപ്പെടാം. കൂടുതൽ സ്ഥിരതയുള്ള ശരാശരി ലഭിക്കുന്നതിന് ഒന്നിലധികം ഓഡിറ്റുകൾ പ്രവർത്തിപ്പിക്കുക.
• ലൈറ്റ്ഹൗസ് CI ഫലങ്ങൾ അപ്‌ലോഡ് ചെയ്യുന്നതിൽ പരാജയപ്പെടുന്നു: നിങ്ങളുടെ upload.target കോൺഫിഗറേഷൻ പരിശോധിച്ച് നിങ്ങളുടെ ലൈറ്റ്ഹൗസ് CI സെർവർ പ്രവർത്തിക്കുന്നുണ്ടെന്നും ആക്സസ് ചെയ്യാവുന്നതാണെന്നും ഉറപ്പാക്കുക. കൂടാതെ, നിങ്ങൾ ശരിയായ ആക്സസ് ടോക്കൺ കോൺഫിഗർ ചെയ്തിട്ടുണ്ടോയെന്ന് പരിശോധിക്കുക.
• ലൈറ്റ്ഹൗസ് CI അപ്രതീക്ഷിത പെർഫോമൻസ് പ്രശ്നങ്ങൾ റിപ്പോർട്ട് ചെയ്യുന്നു: പ്രശ്നം കണ്ടെത്തുന്നതിന് മുമ്പ് വരുത്തിയ കോഡ് മാറ്റങ്ങൾ അന്വേഷിക്കുക. ഏതൊക്കെ നിർദ്ദിഷ്ട പെർഫോമൻസ് മെട്രിക്കുകളാണ് മോശമായതെന്ന് തിരിച്ചറിയാൻ ലൈറ്റ്ഹൗസ് CI റിപ്പോർട്ടുകൾ ഉപയോഗിക്കുക, ആ മേഖലകളിൽ നിങ്ങളുടെ ഒപ്റ്റിമൈസേഷൻ ശ്രമങ്ങൾ കേന്ദ്രീകരിക്കുക.

ഉപസംഹാരം

വെബ് ആപ്ലിക്കേഷനുകളുടെ തുടർച്ചയായ പെർഫോമൻസ് നിരീക്ഷണത്തിനുള്ള ശക്തമായ ഒരു ഉപകരണമാണ് ഫ്രണ്ട്എൻഡ് ലൈറ്റ്ഹൗസ് CI. നിങ്ങളുടെ CI/CD പൈപ്പ്ലൈനിൽ ലൈറ്റ്ഹൗസ് CI സംയോജിപ്പിക്കുന്നതിലൂടെ, നിങ്ങൾക്ക് പെർഫോമൻസ് പ്രശ്നങ്ങൾ മുൻകൂട്ടി കണ്ടെത്താനും പരിഹരിക്കാനും കഴിയും, ഇത് നിങ്ങളുടെ വെബ്സൈറ്റ് മികച്ച ഉപയോക്തൃ അനുഭവം നൽകുന്നുവെന്ന് ഉറപ്പാക്കുന്നു. ലോകമെമ്പാടുമുള്ള ഉപയോക്താക്കൾക്ക് ഏറ്റവും മികച്ച അനുഭവം സൃഷ്ടിക്കുന്നതിന് നിങ്ങളുടെ സെറ്റപ്പ്, അസേർഷൻ നിയമങ്ങൾ, ടെസ്റ്റിംഗ് ലൊക്കേഷനുകൾ എന്നിവ ആഗോള ഉപയോക്താക്കൾക്കായി ക്രമീകരിക്കാൻ ഓർക്കുക.

ഈ ഗൈഡിൽ പറഞ്ഞിട്ടുള്ള ഘട്ടങ്ങളും മികച്ച രീതികളും പിന്തുടരുന്നതിലൂടെ, നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പെർഫോമൻസ് ഗണ്യമായി മെച്ചപ്പെടുത്താനും, ബൗൺസ് റേറ്റുകൾ കുറയ്ക്കാനും, കൺവേർഷൻ റേറ്റുകൾ വർദ്ധിപ്പിക്കാനും, ആത്യന്തികമായി നിങ്ങളുടെ ബിസിനസ്സ് ലക്ഷ്യങ്ങൾ കൈവരിക്കാനും കഴിയും. ഇന്ന് തന്നെ ലൈറ്റ്ഹൗസ് CI നടപ്പിലാക്കാൻ തുടങ്ങുക, നിങ്ങളുടെ വെബ് ആപ്ലിക്കേഷനുകളുടെ പൂർണ്ണമായ സാധ്യതകൾ തുറക്കുക.