ಫ್ರಂಟ್‌ಎಂಡ್ ಲೈಟ್‌ಹೌಸ್ CI: ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ ನಿರಂತರ ಕಾರ್ಯಕ್ಷಮತೆ ಮೇಲ್ವಿಚಾರಣೆ

ಇಂದಿನ ವೇಗದ ಡಿಜಿಟಲ್ ಜಗತ್ತಿನಲ್ಲಿ, ವೆಬ್‌ಸೈಟ್ ಕಾರ್ಯಕ್ಷಮತೆ ಅತ್ಯಂತ ಮುಖ್ಯವಾಗಿದೆ. ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆಗುವ ಅಥವಾ ಸರಿಯಾಗಿ ಆಪ್ಟಿಮೈಜ್ ಮಾಡದ ವೆಬ್‌ಸೈಟ್ ಬಳಕೆದಾರರಲ್ಲಿ ನಿರಾಶೆ, ಕಡಿಮೆ ತೊಡಗಿಸಿಕೊಳ್ಳುವಿಕೆ ಮತ್ತು ಅಂತಿಮವಾಗಿ, ನಿಮ್ಮ ವ್ಯವಹಾರದ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮಕ್ಕೆ ಕಾರಣವಾಗಬಹುದು. ಇಲ್ಲಿಯೇ ಲೈಟ್‌ಹೌಸ್ CI ಬರುತ್ತದೆ. ಈ ಮಾರ್ಗದರ್ಶಿ ನಿರಂತರ ಕಾರ್ಯಕ್ಷಮತೆ ಮೇಲ್ವಿಚಾರಣೆಗಾಗಿ ಲೈಟ್‌ಹೌಸ್ CI ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ, ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಬಳಕೆದಾರರ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವ ಮೊದಲು ಪೂರ್ವಭಾವಿಯಾಗಿ ಗುರುತಿಸಲು ಮತ್ತು ಪರಿಹರಿಸಲು ನಿಮಗೆ ಅಧಿಕಾರ ನೀಡುತ್ತದೆ.

ಲೈಟ್‌ಹೌಸ್ CI ಎಂದರೇನು?

ಲೈಟ್‌ಹೌಸ್ CI ಒಂದು ಓಪನ್-ಸೋರ್ಸ್, ಸ್ವಯಂಚಾಲಿತ ಕಾರ್ಯಕ್ಷಮತೆ ಪರೀಕ್ಷಾ ಸಾಧನವಾಗಿದ್ದು, ಇದು ನಿಮ್ಮ ನಿರಂತರ ಏಕೀಕರಣ ಮತ್ತು ನಿರಂತರ ವಿತರಣೆ (CI/CD) ಪೈಪ್‌ಲೈನ್‌ನೊಂದಿಗೆ ಮನಬಂದಂತೆ ಸಂಯೋಜನೆಗೊಳ್ಳುತ್ತದೆ. ಇದು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆ, ಪ್ರವೇಶಸಾಧ್ಯತೆ, ಎಸ್‌ಇಒ ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳ ಬಗ್ಗೆ ಕಾರ್ಯಸಾಧ್ಯವಾದ ಒಳನೋಟಗಳನ್ನು ಒದಗಿಸಲು Google ನ ಲೈಟ್‌ಹೌಸ್ ಆಡಿಟಿಂಗ್ ಸಾಧನವನ್ನು ಬಳಸಿಕೊಳ್ಳುತ್ತದೆ. ನಿಮ್ಮ ಕೆಲಸದ ಹರಿವಿನಲ್ಲಿ ಲೈಟ್‌ಹೌಸ್ 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 ನಲ್ಲಿ ಚಾಲನೆಯಲ್ಲಿರುವ ವೆಬ್‌ಸೈಟ್‌ನ ಮುಖಪುಟ ಮತ್ತು "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 ಔಟ್‌ಪುಟ್‌ನಲ್ಲಿ ಒದಗಿಸಲಾದ ಲಿಂಕ್ ಅನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ ನೀವು ಈ ಫಲಿತಾಂಶಗಳನ್ನು ಪ್ರವೇಶಿಸಬಹುದು. ಈ ಫಲಿತಾಂಶಗಳು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆ, ಪ್ರವೇಶಸಾಧ್ಯತೆ, ಎಸ್‌ಇಒ ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳ ಬಗ್ಗೆ ವಿವರವಾದ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸುತ್ತವೆ.

ಅಸರ್ಷನ್‌ಗಳು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ ಬಜೆಟ್‌ಗಳನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡುವುದು

ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ನಿಮ್ಮ ಕಾರ್ಯಕ್ಷಮತೆಯ ಗುರಿಗಳನ್ನು ಪೂರೈಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಲೈಟ್‌ಹೌಸ್ 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 ಫಲಿತಾಂಶಗಳಿಗಾಗಿ ನಿರಂತರ ಶೇಖರಣಾ ಪರಿಹಾರವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಜೊತೆಗೆ ನಿಮ್ಮ ಡೇಟಾವನ್ನು ವೀಕ್ಷಿಸಲು ಮತ್ತು ವಿಶ್ಲೇಷಿಸಲು ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದನ್ನು ವಿವಿಧ ಕ್ಲೌಡ್ ಪೂರೈಕೆದಾರರಿಗೆ ನಿಯೋಜಿಸಬಹುದು ಅಥವಾ ನಿಮ್ಮ ಸ್ವಂತ ಮೂಲಸೌಕರ್ಯದಲ್ಲಿ ಹೋಸ್ಟ್ ಮಾಡಬಹುದು.
• Google Cloud Storage: ನಿಮ್ಮ ಲೈಟ್‌ಹೌಸ್ CI ಫಲಿತಾಂಶಗಳನ್ನು ನೀವು Google Cloud Storage ಬಕೆಟ್‌ಗೆ ಅಪ್‌ಲೋಡ್ ಮಾಡಬಹುದು. ಇದು ನಿಮ್ಮ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು ವೆಚ್ಚ-ಪರಿಣಾಮಕಾರಿ ಮತ್ತು ಸ್ಕೇಲೆಬಲ್ ಪರಿಹಾರವಾಗಿದೆ.
• Amazon S3: Google Cloud Storage ನಂತೆಯೇ, ನಿಮ್ಮ ಲೈಟ್‌ಹೌಸ್ 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 ನ ಮೂಲಭೂತ ಅಂಶಗಳೊಂದಿಗೆ ಆರಾಮದಾಯಕವಾದ ನಂತರ, ನಿಮ್ಮ ಕಾರ್ಯಕ್ಷಮತೆ ಮೇಲ್ವಿಚಾರಣೆಯನ್ನು ಮತ್ತಷ್ಟು ಹೆಚ್ಚಿಸಲು ನೀವು ಕೆಲವು ಸುಧಾರಿತ ತಂತ್ರಗಳನ್ನು ಅನ್ವೇಷಿಸಬಹುದು:

• ಕಸ್ಟಮ್ ಲೈಟ್‌ಹೌಸ್ ಆಡಿಟ್‌ಗಳು: ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಸಂಬಂಧಿಸಿದ ನಿರ್ದಿಷ್ಟ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು ನೀವು ಕಸ್ಟಮ್ ಲೈಟ್‌ಹೌಸ್ ಆಡಿಟ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು.
• ಹೆಡ್‌ಲೆಸ್ ಕ್ರೋಮ್ ಸಂರಚನೆ: ನಿರ್ದಿಷ್ಟ ಸಾಧನ ಎಮ್ಯುಲೇಶನ್‌ಗಳು ಅಥವಾ ನೆಟ್‌ವರ್ಕ್ ಥ್ರೊಟ್ಲಿಂಗ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಬಳಸಲು ಹೆಡ್‌ಲೆಸ್ ಕ್ರೋಮ್ ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ.
• ಮೇಲ್ವಿಚಾರಣಾ ಪರಿಕರಗಳೊಂದಿಗೆ ಏಕೀಕರಣ: ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯ ಹೆಚ್ಚು ಸಮಗ್ರ ನೋಟವನ್ನು ಪಡೆಯಲು ನಿಮ್ಮ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಮೇಲ್ವಿಚಾರಣಾ ಪರಿಕರಗಳೊಂದಿಗೆ (ಉದಾ., New Relic, Datadog) ಲೈಟ್‌ಹೌಸ್ CI ಅನ್ನು ಸಂಯೋಜಿಸಿ.
• ದೃಶ್ಯ ಹಿನ್ನಡೆ ಪರೀಕ್ಷೆ: ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದಾದ ದೃಶ್ಯ ಬದಲಾವಣೆಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು ದೃಶ್ಯ ಹಿನ್ನಡೆ ಪರೀಕ್ಷಾ ಪರಿಕರಗಳೊಂದಿಗೆ ಲೈಟ್‌ಹೌಸ್ 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 ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಪ್ರಾರಂಭಿಸಿ ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ.