ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ API: ರನ್‌ಟೈಮ್ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಮೆಟ್ರಿಕ್ಸ್ ಮತ್ತು ಬಾಟಲ್‌ನೆಕ್ ವಿಶ್ಲೇಷಣೆಯನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ

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

ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ API ಎಂದರೇನು?

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

ಇದನ್ನು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನಿರಂತರವಾಗಿ ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವ ಶ್ರವಣ ಸಾಧನವೆಂದು ಭಾವಿಸಿ. ಒಂದು ನಿರ್ದಿಷ್ಟ ಕಾರ್ಯಕ್ಷಮತೆಯ ಘಟನೆ ಸಂಭವಿಸಿದಾಗ (ಉದಾಹರಣೆಗೆ, ದೀರ್ಘವಾದ ಕಾರ್ಯ, ಸಂಪನ್ಮೂಲ ಲೋಡಿಂಗ್, ಲೇಔಟ್ ಶಿಫ್ಟ್), ಅಬ್ಸರ್ವರ್‌ಗೆ ಸೂಚನೆ ನೀಡಲಾಗುತ್ತದೆ, ಮತ್ತು ನಂತರ ನೀವು ಅಪ್ಲಿಕೇಶನ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯ ಬಗ್ಗೆ ಒಳನೋಟಗಳನ್ನು ಪಡೆಯಲು ಈವೆಂಟ್ ಡೇಟಾವನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಬಹುದು.

ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳು ಮತ್ತು ಪರಿಭಾಷೆ

ಪ್ರಾಯೋಗಿಕ ಅನುಷ್ಠಾನಕ್ಕೆ ಧುಮುಕುವ ಮೊದಲು, ಕೆಲವು ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳು ಮತ್ತು ಪರಿಭಾಷೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸೋಣ:

• PerformanceEntry: ಇದು ಒಂದೇ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೆಟ್ರಿಕ್ ಅಥವಾ ಈವೆಂಟ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುವ ಒಂದು ಮೂಲ ಇಂಟರ್ಫೇಸ್. ಇದು name, entryType, startTime, ಮತ್ತು duration ನಂತಹ ಸಾಮಾನ್ಯ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ.
• PerformanceObserver: ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಎಂಟ್ರಿಗಳ ಬಗ್ಗೆ ಚಂದಾದಾರರಾಗಲು ಮತ್ತು ಅಧಿಸೂಚನೆಗಳನ್ನು ಸ್ವೀಕರಿಸಲು ಜವಾಬ್ದಾರಿಯುತವಾದ ಪ್ರಮುಖ ಇಂಟರ್ಫೇಸ್.
• entryTypes: ಇದು ಅಬ್ಸರ್ವರ್ ಯಾವ ರೀತಿಯ ಕಾರ್ಯಕ್ಷಮತೆಯ ಎಂಟ್ರಿಗಳನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಸ್ಟ್ರಿಂಗ್‌ಗಳ ಒಂದು ಸರಣಿ. ಸಾಮಾನ್ಯ ಎಂಟ್ರಿ ಪ್ರಕಾರಗಳಲ್ಲಿ 'longtask', 'resource', 'layout-shift', 'paint', ಮತ್ತು 'navigation' ಸೇರಿವೆ.
• buffered: ಅಬ್ಸರ್ವರ್ ರಚಿಸುವ ಮೊದಲು ಸಂಭವಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಎಂಟ್ರಿಗಳಿಗಾಗಿ ಅಬ್ಸರ್ವರ್ ಅಧಿಸೂಚನೆಗಳನ್ನು ಸ್ವೀಕರಿಸಬೇಕೇ ಎಂದು ಸೂಚಿಸುವ ಬೂಲಿಯನ್ ಫ್ಲ್ಯಾಗ್.
• observe(): ಕಾರ್ಯಕ್ಷಮತೆಯ ಎಂಟ್ರಿಗಳನ್ನು ಗಮನಿಸಲು ಪ್ರಾರಂಭಿಸಲು ಬಳಸುವ ವಿಧಾನ. ಇದು entryTypes ಮತ್ತು buffered ಫ್ಲ್ಯಾಗ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಆಯ್ಕೆಗಳ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.
• disconnect(): ಕಾರ್ಯಕ್ಷಮತೆಯ ಎಂಟ್ರಿಗಳನ್ನು ಗಮನಿಸುವುದನ್ನು ನಿಲ್ಲಿಸಲು ಬಳಸುವ ವಿಧಾನ.

ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ ಅನ್ನು ಸ್ಥಾಪಿಸುವುದು

ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ ರಚಿಸುವುದು ಸರಳವಾಗಿದೆ. ದೀರ್ಘ ಕಾರ್ಯಗಳನ್ನು ಹೇಗೆ ಗಮನಿಸುವುದು ಎಂಬುದನ್ನು ಪ್ರದರ್ಶಿಸುವ ಮೂಲಭೂತ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Long Task:', entry);
    // ದೀರ್ಘ ಕಾರ್ಯದ ಎಂಟ್ರಿಯನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಿ
  });
});

observer.observe({ entryTypes: ['longtask'] });

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಹೊಸ PerformanceObserver ಇನ್‌ಸ್ಟೆನ್ಸ್ ಅನ್ನು ರಚಿಸುತ್ತೇವೆ. ಕನ್‌ಸ್ಟ್ರಕ್ಟರ್ ಒಂದು ಕಾಲ್‌ಬ್ಯಾಕ್ ಫಂಕ್ಷನ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, ಅದು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಪ್ರಕಾರದ ಹೊಸ ಕಾರ್ಯಕ್ಷಮತೆಯ ಎಂಟ್ರಿ ಕಂಡುಬಂದಾಗಲೆಲ್ಲಾ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ. list.getEntries() ವಿಧಾನವು ಗಮನಿಸಲಾದ ಎಂಟ್ರಿ ಪ್ರಕಾರಗಳಿಗೆ ಹೊಂದುವ PerformanceEntry ಆಬ್ಜೆಕ್ಟ್‌ಗಳ ಸರಣಿಯನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಅಂತಿಮವಾಗಿ, ನಾವು ದೀರ್ಘ ಕಾರ್ಯಗಳನ್ನು ಗಮನಿಸಲು ಪ್ರಾರಂಭಿಸಲು observe() ವಿಧಾನವನ್ನು ಕರೆಯುತ್ತೇವೆ.

ಕೋಡ್ ಅನ್ನು ವಿಭಜಿಸುವುದು:

• new PerformanceObserver((list) => { ... }): ಕಾಲ್‌ಬ್ಯಾಕ್ ಫಂಕ್ಷನ್‌ನೊಂದಿಗೆ ಹೊಸ ಅಬ್ಸರ್ವರ್ ಇನ್‌ಸ್ಟೆನ್ಸ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ. ಕಾಲ್‌ಬ್ಯಾಕ್ `list` ಆರ್ಗ್ಯುಮೆಂಟ್ ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ.
• list.getEntries().forEach((entry) => { ... }): `list` ನಿಂದ ಎಲ್ಲಾ PerformanceEntry ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ಪಡೆಯುತ್ತದೆ ಮತ್ತು ಅವುಗಳ ಮೇಲೆ ಪುನರಾವರ್ತಿಸುತ್ತದೆ.
• console.log('Long Task:', entry);: ದೀರ್ಘ ಕಾರ್ಯದ ಎಂಟ್ರಿಯನ್ನು ಕನ್ಸೋಲ್‌ಗೆ ಲಾಗ್ ಮಾಡುತ್ತದೆ. ನೀವು ಇದನ್ನು ನಿಮ್ಮ ಸ್ವಂತ ಪ್ರಕ್ರಿಯೆ ತರ್ಕದೊಂದಿಗೆ ಬದಲಾಯಿಸುತ್ತೀರಿ.
• observer.observe({ entryTypes: ['longtask'] });: 'longtask' ಪ್ರಕಾರದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಎಂಟ್ರಿಗಳನ್ನು ಗಮನಿಸಲು ಪ್ರಾರಂಭಿಸುತ್ತದೆ.

ಸಾಮಾನ್ಯ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಎಂಟ್ರಿ ಪ್ರಕಾರಗಳು ಮತ್ತು ಅವುಗಳ ಉಪಯೋಗಗಳು

ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ API ವಿವಿಧ ಎಂಟ್ರಿ ಪ್ರಕಾರಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ, ಪ್ರತಿಯೊಂದೂ ಅಪ್ಲಿಕೇಶನ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಬಗ್ಗೆ ವಿಭಿನ್ನ ಒಳನೋಟಗಳನ್ನು ನೀಡುತ್ತದೆ. ಇಲ್ಲಿ ಕೆಲವು ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುವ ಎಂಟ್ರಿ ಪ್ರಕಾರಗಳು ಮತ್ತು ಅವುಗಳ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ವಿಭಜನೆ ಇಲ್ಲಿದೆ:

1. ದೀರ್ಘ ಕಾರ್ಯಗಳು (Long Tasks)

ಎಂಟ್ರಿ ಪ್ರಕಾರ: 'longtask'

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

ಬಳಕೆಯ ಉದಾಹರಣೆಗಳು:

• ಗಣನಾತ್ಮಕವಾಗಿ ದುಬಾರಿಯಾದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಗುರುತಿಸುವುದು.
• ದೀರ್ಘ ವಿಳಂಬಕ್ಕೆ ಕಾರಣವಾಗುವ ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು.
• ದೊಡ್ಡ ಕಾರ್ಯಗಳನ್ನು ಚಿಕ್ಕ, ಅಸಿಂಕ್ರೊನಸ್ ಘಟಕಗಳಾಗಿ ವಿಭಜಿಸುವುದು.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Long Task:', entry.duration);
    // ಸಂಭಾವ್ಯ ಬಾಟಲ್‌ನೆಕ್‌ಗಳನ್ನು ಗುರುತಿಸಲು ದೀರ್ಘ ಕಾರ್ಯದ ಅವಧಿಯನ್ನು ವಿಶ್ಲೇಷಿಸಿ.
  });
});

observer.observe({ entryTypes: ['longtask'] });

2. ಸಂಪನ್ಮೂಲ ಸಮಯ (Resource Timing)

ಎಂಟ್ರಿ ಪ್ರಕಾರ: 'resource'

ಸಂಪನ್ಮೂಲ ಸಮಯ API ಯು ಚಿತ್ರಗಳು, ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು ಮತ್ತು ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳಂತಹ ವೈಯಕ್ತಿಕ ಸಂಪನ್ಮೂಲಗಳ ಲೋಡಿಂಗ್ ಬಗ್ಗೆ ವಿವರವಾದ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಸಂಪನ್ಮೂಲ ಸಮಯವನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವುದರಿಂದ, ನೀವು ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆಗುತ್ತಿರುವ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಗುರುತಿಸಬಹುದು ಮತ್ತು ಪುಟ ಲೋಡ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಲು ಅವುಗಳ ವಿತರಣೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಬಹುದು.

ಬಳಕೆಯ ಉದಾಹರಣೆಗಳು:

• ಪುಟ ಲೋಡ್ ಅನ್ನು ನಿಧಾನಗೊಳಿಸುತ್ತಿರುವ ದೊಡ್ಡ ಚಿತ್ರಗಳನ್ನು ಗುರುತಿಸುವುದು.
• ಚಿತ್ರ ಸಂಕೋಚನ ಮತ್ತು ಸ್ವರೂಪಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು.
• ಸಂಪನ್ಮೂಲ ಲೋಡಿಂಗ್ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಬ್ರೌಸರ್ ಕ್ಯಾಶಿಂಗ್ ಅನ್ನು ಬಳಸುವುದು.
• ಪುಟ ಲೋಡ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳ ಪ್ರಭಾವವನ್ನು ವಿಶ್ಲೇಷಿಸುವುದು.
• DNS ರೆಸಲ್ಯೂಶನ್, TCP ಸಂಪರ್ಕ, ಮತ್ತು TLS ಮಾತುಕತೆ ಬಾಟಲ್‌ನೆಕ್‌ಗಳನ್ನು ಗುರುತಿಸುವುದು.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Resource:', entry.name, entry.duration);
    // ಸಂಪನ್ಮೂಲ ಲೋಡಿಂಗ್ ಸಮಯವನ್ನು ವಿಶ್ಲೇಷಿಸಿ ಮತ್ತು ಸಂಪನ್ಮೂಲ ವಿತರಣೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ.
  });
});

observer.observe({ entryTypes: ['resource'] });

3. ಲೇಔಟ್ ಶಿಫ್ಟ್‌ಗಳು (Layout Shifts)

ಎಂಟ್ರಿ ಪ್ರಕಾರ: 'layout-shift'

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

ಬಳಕೆಯ ಉದಾಹರಣೆಗಳು:

• ಲೇಔಟ್ ಶಿಫ್ಟ್‌ಗಳಿಗೆ ಕಾರಣವಾಗುವ ನಿರ್ದಿಷ್ಟ ಆಯಾಮಗಳಿಲ್ಲದ ಚಿತ್ರಗಳನ್ನು ಗುರುತಿಸುವುದು.
• ಲೇಔಟ್ ಶಿಫ್ಟ್‌ಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಡೈನಾಮಿಕ್ ಆಗಿ ಸೇರಿಸಲಾದ ವಿಷಯದ ಲೋಡಿಂಗ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು.
• ಫಾಂಟ್ ಲೋಡಿಂಗ್‌ನಿಂದ ಲೇಔಟ್ ಶಿಫ್ಟ್‌ಗಳು ಉಂಟಾಗುವುದನ್ನು ತಡೆಯಲು ಫಾಂಟ್ ಪ್ರದರ್ಶನ ತಂತ್ರಗಳನ್ನು ಬಳಸುವುದು.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Layout Shift:', entry.value);
    // ಲೇಔಟ್ ಶಿಫ್ಟ್ ಸ್ಕೋರ್ ಅನ್ನು ವಿಶ್ಲೇಷಿಸಿ ಮತ್ತು ಶಿಫ್ಟ್‌ಗಳಿಗೆ ಕಾರಣವಾಗುವ ಅಂಶಗಳನ್ನು ಗುರುತಿಸಿ.
  });
});

observer.observe({ entryTypes: ['layout-shift'] });

4. ಪೇಂಟ್ ಟೈಮಿಂಗ್ (Paint Timing)

ಎಂಟ್ರಿ ಪ್ರಕಾರ: 'paint'

ಪೇಂಟ್ ಟೈಮಿಂಗ್ API ಮೊದಲ ಪೇಂಟ್ (FP) ಮತ್ತು ಮೊದಲ ಕಂಟೆಂಟ್‌ಫುಲ್ ಪೇಂಟ್ (FCP) ಗಾಗಿ ಮೆಟ್ರಿಕ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇವು ಬಳಕೆದಾರರು ಗ್ರಹಿಸುವ ಲೋಡಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪ್ರಮುಖ ಸೂಚಕಗಳಾಗಿವೆ. ಪೇಂಟ್ ಟೈಮಿಂಗ್ ಅನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವುದರಿಂದ ವೇಗವಾದ ಮತ್ತು ಹೆಚ್ಚು ದೃಶ್ಯ ಆಕರ್ಷಕ ಅನುಭವವನ್ನು ಒದಗಿಸಲು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಬಳಕೆಯ ಉದಾಹರಣೆಗಳು:

• ಮೊದಲ ಪೇಂಟ್‌ಗೆ ತೆಗೆದುಕೊಳ್ಳುವ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಕ್ರಿಟಿಕಲ್ ರೆಂಡರಿಂಗ್ ಮಾರ್ಗವನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು.
• ಮೊದಲ ಕಂಟೆಂಟ್‌ಫುಲ್ ಪೇಂಟ್‌ಗೆ ತೆಗೆದುಕೊಳ್ಳುವ ಸಮಯವನ್ನು ಸುಧಾರಿಸಲು ಮುಖ್ಯವಲ್ಲದ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಮುಂದೂಡುವುದು.
• ಆರಂಭಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಂಡಲ್ ಗಾತ್ರವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್ ಮತ್ತು ಲೇಜಿ ಲೋಡಿಂಗ್ ಬಳಸುವುದು.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Paint:', entry.name, entry.startTime);
    // ಪೇಂಟ್ ಸಮಯವನ್ನು ವಿಶ್ಲೇಷಿಸಿ ಮತ್ತು ರೆಂಡರಿಂಗ್ ಪೈಪ್‌ಲೈನ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ.
  });
});

observer.observe({ entryTypes: ['paint'] });

5. ನ್ಯಾವಿಗೇಷನ್ ಟೈಮಿಂಗ್ (Navigation Timing)

ಎಂಟ್ರಿ ಪ್ರಕಾರ: 'navigation'

ನ್ಯಾವಿಗೇಷನ್ ಟೈಮಿಂಗ್ API ಪುಟ ನ್ಯಾವಿಗೇಷನ್ ಪ್ರಕ್ರಿಯೆಯ ವಿವಿಧ ಹಂತಗಳ ಬಗ್ಗೆ ವಿವರವಾದ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ, ಆರಂಭಿಕ ವಿನಂತಿಯಿಂದ ಪುಟ ಲೋಡ್ ಪೂರ್ಣಗೊಳ್ಳುವವರೆಗೆ. ನ್ಯಾವಿಗೇಷನ್ ಸಮಯವನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವುದರಿಂದ ನ್ಯಾವಿಗೇಷನ್ ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿನ ಬಾಟಲ್‌ನೆಕ್‌ಗಳನ್ನು ಗುರುತಿಸಲು ಮತ್ತು ಒಟ್ಟಾರೆ ಪುಟ ಲೋಡ್ ಅನುಭವವನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಬಳಕೆಯ ಉದಾಹರಣೆಗಳು:

• DNS ರೆಸಲ್ಯೂಶನ್ ಸಮಯ, TCP ಸಂಪರ್ಕ ಸಮಯ, ಮತ್ತು TLS ಮಾತುಕತೆ ಸಮಯವನ್ನು ವಿಶ್ಲೇಷಿಸುವುದು.
• ಸರ್ವರ್-ಸೈಡ್ ಪ್ರೊಸೆಸಿಂಗ್ ಬಾಟಲ್‌ನೆಕ್‌ಗಳನ್ನು ಗುರುತಿಸುವುದು.
• ಮೊದಲ ಬೈಟ್‌ಗೆ ಸಮಯವನ್ನು (TTFB) ಕಡಿಮೆ ಮಾಡಲು HTML ವಿಷಯದ ವಿತರಣೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Navigation:', entry.duration);
    // ನ್ಯಾವಿಗೇಷನ್ ಸಮಯವನ್ನು ವಿಶ್ಲೇಷಿಸಿ ಮತ್ತು ಪುಟ ಲೋಡ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ.
  });
});

observer.observe({ entryTypes: ['navigation'] });

ನೈಜ-ಪ್ರಪಂಚದ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಬಳಕೆಯ ಪ್ರಕರಣಗಳು

ಅಪ್ಲಿಕೇಶನ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಲು ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ API ಅನ್ನು ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ ಅನ್ವಯಿಸಬಹುದು. ಇಲ್ಲಿ ಕೆಲವು ನೈಜ-ಪ್ರಪಂಚದ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಬಳಕೆಯ ಪ್ರಕರಣಗಳು:

1. ಇ-ಕಾಮರ್ಸ್ ವೆಬ್‌ಸೈಟ್: ಉತ್ಪನ್ನ ಚಿತ್ರ ಲೋಡಿಂಗ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು

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

2. ಸುದ್ದಿ ವೆಬ್‌ಸೈಟ್: ಜಾಹೀರಾತು ಲೋಡಿಂಗ್‌ನಿಂದ ಲೇಔಟ್ ಶಿಫ್ಟ್‌ಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು

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

3. ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳಿಂದ ಉಂಟಾಗುವ ದೀರ್ಘ ಕಾರ್ಯಗಳನ್ನು ವಿಶ್ಲೇಷಿಸುವುದು

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

4. ವೆಬ್-ಆಧಾರಿತ ಆಟ: ಫ್ರೇಮ್ ರೆಂಡರಿಂಗ್ ಸಮಯವನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವುದು

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

5. ಆನ್‌ಲೈನ್ ಕಲಿಕಾ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್: ನ್ಯಾವಿಗೇಷನ್ ಮತ್ತು ಪುಟ ಪರಿವರ್ತನೆಗಳನ್ನು ಸುಧಾರಿಸುವುದು

ಒಂದು ಆನ್‌ಲೈನ್ ಕಲಿಕಾ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಪುಟ ನ್ಯಾವಿಗೇಷನ್ ಪ್ರಕ್ರಿಯೆಯ ವಿವಿಧ ಹಂತಗಳನ್ನು ವಿಶ್ಲೇಷಿಸಲು ಮತ್ತು ಒಟ್ಟಾರೆ ಪುಟ ಲೋಡ್ ಅನುಭವದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವ ಬಾಟಲ್‌ನೆಕ್‌ಗಳನ್ನು ಗುರುತಿಸಲು ನ್ಯಾವಿಗೇಷನ್ ಟೈಮಿಂಗ್ API ಅನ್ನು ಬಳಸಬಹುದು. ಸರ್ವರ್-ಸೈಡ್ ಪ್ರೊಸೆಸಿಂಗ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವ ಮೂಲಕ, HTML ವಿಷಯದ ವಿತರಣೆಯನ್ನು ಸುಧಾರಿಸುವ ಮೂಲಕ ಮತ್ತು ಬ್ರೌಸರ್ ಕ್ಯಾಶಿಂಗ್ ಅನ್ನು ಬಳಸುವ ಮೂಲಕ, ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ವೇಗವಾದ ಮತ್ತು ಹೆಚ್ಚು ಸುಗಮ ಕಲಿಕೆಯ ಅನುಭವವನ್ನು ಒದಗಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಕೆನಡಾದಲ್ಲಿ ನೆಲೆಗೊಂಡಿರುವ ಶೈಕ್ಷಣಿಕ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್, ವಿಶ್ವಾದ್ಯಂತ ವಿದ್ಯಾರ್ಥಿಗಳಿಗೆ ಸೇವೆ ಸಲ್ಲಿಸುತ್ತಿದ್ದು, ಸೀಮಿತ ಇಂಟರ್ನೆಟ್ ಮೂಲಸೌಕರ್ಯ ಹೊಂದಿರುವ ದೇಶಗಳಲ್ಲಿನ ವಿದ್ಯಾರ್ಥಿಗಳು ಪಾಠಗಳ ನಡುವೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವಾಗ ಸ್ವೀಕಾರಾರ್ಹ ಲೋಡಿಂಗ್ ಸಮಯವನ್ನು ಅನುಭವಿಸುತ್ತಾರೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನ್ಯಾವಿಗೇಷನ್ ಸಮಯವನ್ನು ವಿಶ್ಲೇಷಿಸಬಹುದು. ನಿರ್ದಿಷ್ಟ ಪ್ರದೇಶಗಳಲ್ಲಿ ನಿಧಾನವಾದ ಸರ್ವರ್ ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ಗುರುತಿಸುವುದು ಅವರಿಗೆ ತಮ್ಮ ಕಂಟೆಂಟ್ ಡೆಲಿವರಿ ನೆಟ್‌ವರ್ಕ್ (CDN) ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ API ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ API ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸಿಕೊಳ್ಳಲು, ಈ ಕೆಳಗಿನ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಪರಿಗಣಿಸಿ:

• ನಿಮ್ಮ ವಿಶ್ಲೇಷಣೆಗೆ ಸಂಬಂಧಿಸಿದ ಎಂಟ್ರಿ ಪ್ರಕಾರಗಳನ್ನು ಮಾತ್ರ ಗಮನಿಸಿ. ಹಲವಾರು ಎಂಟ್ರಿ ಪ್ರಕಾರಗಳನ್ನು ಗಮನಿಸುವುದರಿಂದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಹೊರೆ ಹೆಚ್ಚಾಗಬಹುದು ಮತ್ತು ಅತ್ಯಂತ ಪ್ರಮುಖ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸುವುದು ಕಷ್ಟವಾಗಬಹುದು.
• ಕಾರ್ಯಕ್ಷಮತೆ ಎಂಟ್ರಿಗಳನ್ನು ಸಮರ್ಥವಾಗಿ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಿ. ಅಬ್ಸರ್ವರ್ ಕಾಲ್‌ಬ್ಯಾಕ್ ಫಂಕ್ಷನ್‌ನಲ್ಲಿ ಗಣನಾತ್ಮಕವಾಗಿ ದುಬಾರಿ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸಿ, ಏಕೆಂದರೆ ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರಬಹುದು. ಪ್ರೊಸೆಸಿಂಗ್ ಅನ್ನು ಪ್ರತ್ಯೇಕ ಥ್ರೆಡ್‌ಗೆ ವರ್ಗಾಯಿಸಲು ವೆಬ್ ವರ್ಕರ್ ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.
• ಸಂಗ್ರಹಿಸಿದ ಡೇಟಾದ ಪ್ರಮಾಣವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಮಾದರಿ ತಂತ್ರಗಳನ್ನು ಬಳಸಿ. ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ, ಸಂಗ್ರಹಿಸಿದ ಡೇಟಾದ ಪ್ರಮಾಣವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಹೊರೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಕಾರ್ಯಕ್ಷಮತೆ ಎಂಟ್ರಿಗಳ ಮಾದರಿಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುವುದು ಅಗತ್ಯವಾಗಬಹುದು.
• ದೃಢವಾದ ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಅಳವಡಿಸಿ. ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ API ತುಲನಾತ್ಮಕವಾಗಿ ಸ್ಥಿರವಾಗಿದೆ, ಆದರೆ ಅನಿರೀಕ್ಷಿತ ದೋಷಗಳು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಅಡ್ಡಿಯಾಗದಂತೆ ತಡೆಯಲು ದೃಢವಾದ ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಅಳವಡಿಸುವುದು ಮುಖ್ಯವಾಗಿದೆ.
• ಕಾರ್ಯಕ್ಷಮತೆ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸುವ ಗೌಪ್ಯತೆ ಪರಿಣಾಮಗಳನ್ನು ಪರಿಗಣಿಸಿ. ನೀವು ಸಂಗ್ರಹಿಸುತ್ತಿರುವ ಕಾರ್ಯಕ್ಷಮತೆಯ ಡೇಟಾದ ಬಗ್ಗೆ ಬಳಕೆದಾರರೊಂದಿಗೆ ಪಾರದರ್ಶಕವಾಗಿರಿ ಮತ್ತು ಅನ್ವಯವಾಗುವ ಎಲ್ಲಾ ಗೌಪ್ಯತೆ ನಿಯಮಗಳನ್ನು ನೀವು ಪಾಲಿಸುತ್ತಿದ್ದೀರಿ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಯುರೋಪಿಯನ್ ಯೂನಿಯನ್‌ನ ಜಿಡಿಪಿಆರ್‌ನಂತಹ ಕಠಿಣ ಡೇಟಾ ಸಂರಕ್ಷಣಾ ಕಾನೂನುಗಳನ್ನು ಹೊಂದಿರುವ ಪ್ರದೇಶಗಳಲ್ಲಿ ಇದು ವಿಶೇಷವಾಗಿ ಮುಖ್ಯವಾಗಿದೆ.
• `buffered` ಆಯ್ಕೆಯನ್ನು ಜಾಣತನದಿಂದ ಬಳಸಿ. ಆರಂಭಿಕ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೆಟ್ರಿಕ್‌ಗಳನ್ನು ಸೆರೆಹಿಡಿಯಲು ಉಪಯುಕ್ತವಾಗಿದ್ದರೂ, `buffered: true` ಬಳಸುವುದರಿಂದ ಸಂಭಾವ್ಯವಾಗಿ ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಹೆಚ್ಚಿಸಬಹುದು, ವಿಶೇಷವಾಗಿ ಹೆಚ್ಚಿನ ಸಂಖ್ಯೆಯ ಈವೆಂಟ್‌ಗಳನ್ನು ಗಮನಿಸುವಾಗ. ಇದನ್ನು ವಿವೇಚನೆಯಿಂದ ಬಳಸಿ ಮತ್ತು ವಿಶೇಷವಾಗಿ ಕಡಿಮೆ-ಶಕ್ತಿಯ ಸಾಧನಗಳಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಸಂಭಾವ್ಯ ಪರಿಣಾಮವನ್ನು ಪರಿಗಣಿಸಿ.
• ನಿಮ್ಮ ಡೇಟಾ ಪ್ರೊಸೆಸಿಂಗ್ ಅನ್ನು ಡಿಬೌನ್ಸ್ ಅಥವಾ ಥ್ರಾಟಲ್ ಮಾಡಿ. ನೀವು ವಿಶ್ಲೇಷಣೆಗಾಗಿ ರಿಮೋಟ್ ಸರ್ವರ್‌ಗೆ ಕಾರ್ಯಕ್ಷಮತೆ ಡೇಟಾವನ್ನು ಕಳುಹಿಸುತ್ತಿದ್ದರೆ, ವಿಶೇಷವಾಗಿ ಹೆಚ್ಚಿನ ಚಟುವಟಿಕೆಯ ಅವಧಿಗಳಲ್ಲಿ, ನೆಟ್‌ವರ್ಕ್ ಅನ್ನು ಅತಿಯಾಗಿ ಹೊರೆ ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸಲು ಡೇಟಾ ಪ್ರಸರಣವನ್ನು ಡಿಬೌನ್ಸ್ ಅಥವಾ ಥ್ರಾಟಲ್ ಮಾಡುವುದನ್ನು ಪರಿಗಣಿಸಿ.

ಸುಧಾರಿತ ತಂತ್ರಗಳು ಮತ್ತು ಪರಿಗಣನೆಗಳು

1. ಕಾರ್ಯಕ್ಷಮತೆ ಡೇಟಾ ಪ್ರಕ್ರಿಯೆಗಾಗಿ ವೆಬ್ ವರ್ಕರ್‌ಗಳನ್ನು ಬಳಸುವುದು

ಹಿಂದೆ ಹೇಳಿದಂತೆ, ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ ಕಾಲ್‌ಬ್ಯಾಕ್‌ನಲ್ಲಿ ನೇರವಾಗಿ ಸಂಕೀರ್ಣ ಗಣನೆಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು ಮುಖ್ಯ ಥ್ರೆಡ್‌ನ ಸ್ಪಂದನಾಶೀಲತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು. ಈ ಪ್ರೊಸೆಸಿಂಗ್ ಅನ್ನು ವೆಬ್ ವರ್ಕರ್ ಗೆ ವರ್ಗಾಯಿಸುವುದು ಉತ್ತಮ ಅಭ್ಯಾಸವಾಗಿದೆ. ವೆಬ್ ವರ್ಕರ್‌ಗಳು ಪ್ರತ್ಯೇಕ ಥ್ರೆಡ್‌ನಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ, ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುವುದನ್ನು ತಡೆಯುತ್ತವೆ ಮತ್ತು ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳುತ್ತವೆ.

ಇಲ್ಲೊಂದು ಸರಳೀಕೃತ ಉದಾಹರಣೆ ಇದೆ:

1. ವೆಬ್ ವರ್ಕರ್ ಸ್ಕ್ರಿಪ್ಟ್ ರಚಿಸಿ (ಉದಾಹರಣೆಗೆ, `performance-worker.js`):

// performance-worker.js
self.addEventListener('message', (event) => {
  const performanceData = event.data;
  // ನಿಮ್ಮ ಸಂಕೀರ್ಣ ವಿಶ್ಲೇಷಣೆಯನ್ನು ಇಲ್ಲಿ ಮಾಡಿ
  const processedData = processPerformanceData(performanceData);  // ನಿಮ್ಮ ನಿಜವಾದ ಫಂಕ್ಷನ್‌ನೊಂದಿಗೆ ಬದಲಾಯಿಸಿ
  self.postMessage(processedData);
});

function processPerformanceData(data) {
  // ನಿಮ್ಮ ಸಂಕೀರ್ಣ ಪ್ರೊಸೆಸಿಂಗ್ ತರ್ಕ ಇಲ್ಲಿ
  return data; // ಪ್ರೊಸೆಸ್ ಮಾಡಿದ ಡೇಟಾದೊಂದಿಗೆ ಬದಲಾಯಿಸಿ
}

2. ನಿಮ್ಮ ಮುಖ್ಯ ಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ:

const worker = new Worker('performance-worker.js');

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  // ಪ್ರೊಸೆಸಿಂಗ್‌ಗಾಗಿ ಎಂಟ್ರಿಗಳನ್ನು ವರ್ಕರ್‌ಗೆ ಕಳುಹಿಸಿ
  worker.postMessage(entries);
});

worker.addEventListener('message', (event) => {
  const processedData = event.data;
  // ವರ್ಕರ್‌ನಿಂದ ಪ್ರೊಸೆಸ್ ಮಾಡಿದ ಡೇಟಾವನ್ನು ನಿರ್ವಹಿಸಿ
  console.log('Processed Data from Worker:', processedData);
});

observer.observe({ entryTypes: ['longtask'] });

ಈ ವಿಧಾನವು ಮುಖ್ಯ ಥ್ರೆಡ್‌ನ ಸ್ಪಂದನಾಶೀಲತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರದೆ ಸಂಕೀರ್ಣ ವಿಶ್ಲೇಷಣೆಯನ್ನು ಮಾಡಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಇದರಿಂದ ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವ ಉಂಟಾಗುತ್ತದೆ.

2. ಬಳಕೆದಾರರ ಕ್ರಿಯೆಗಳೊಂದಿಗೆ ಕಾರ್ಯಕ್ಷಮತೆ ಡೇಟಾವನ್ನು ಸಂಬಂಧಿಸುವುದು

ಹೆಚ್ಚು ಆಳವಾದ ಒಳನೋಟಗಳನ್ನು ಪಡೆಯಲು, ನಿರ್ದಿಷ್ಟ ಬಳಕೆದಾರರ ಕ್ರಿಯೆಗಳೊಂದಿಗೆ ಕಾರ್ಯಕ್ಷಮತೆ ಡೇಟಾವನ್ನು ಸಂಬಂಧಿಸಿ. ಉದಾಹರಣೆಗೆ, ಯಾವ ಬಟನ್ ಕ್ಲಿಕ್‌ಗಳು ಅಥವಾ ಸಂವಹನಗಳು ದೀರ್ಘ ಕಾರ್ಯಗಳು ಅಥವಾ ಲೇಔಟ್ ಶಿಫ್ಟ್‌ಗಳನ್ನು ಪ್ರಚೋದಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಿ. ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಬಾಟಲ್‌ನೆಕ್‌ಗಳಿಗೆ ಕಾರಣವಾದ ನಿಖರವಾದ ಕೋಡ್ ಅಥವಾ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಗುರುತಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಬಳಕೆದಾರರ ಸಂವಹನಗಳೊಂದಿಗೆ ಕಾರ್ಯಕ್ಷಮತೆ ಎಂಟ್ರಿಗಳನ್ನು ಲಿಂಕ್ ಮಾಡಲು ನೀವು ಕಸ್ಟಮ್ ಈವೆಂಟ್‌ಗಳು ಮತ್ತು ಟೈಮ್‌ಸ್ಟ್ಯಾಂಪ್‌ಗಳನ್ನು ಬಳಸಬಹುದು.

// ಉದಾಹರಣೆ: ಬಟನ್ ಕ್ಲಿಕ್ ಅನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುವುದು ಮತ್ತು ಅದನ್ನು ದೀರ್ಘ ಕಾರ್ಯಗಳೊಂದಿಗೆ ಸಂಬಂಧಿಸುವುದು

document.getElementById('myButton').addEventListener('click', () => {
  const clickTimestamp = Date.now();

  // ನಿಮ್ಮ ಬಟನ್ ಕ್ಲಿಕ್ ತರ್ಕ ಇಲ್ಲಿ
  performSomeAction();

  // ಕ್ಲಿಕ್ ನಂತರ ದೀರ್ಘ ಕಾರ್ಯಗಳನ್ನು ಗಮನಿಸಿ
  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
      if (entry.startTime >= clickTimestamp) {
        console.log('Long Task after button click:', entry);
        // ದೀರ್ಘ ಕಾರ್ಯದ ಡೇಟಾವನ್ನು, clickTimestamp ಜೊತೆಗೆ, ನಿಮ್ಮ ಅನಾಲಿಟಿಕ್ಸ್ ಸೇವೆಗೆ ಕಳುಹಿಸಿ
      }
    });
  });

  observer.observe({ entryTypes: ['longtask'] });
});

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

3. ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಮಾರ್ಕ್ಸ್ ಮತ್ತು ಮೆಷರ್‌ಗಳನ್ನು ಬಳಸುವುದು

ಪರ್ಫಾರ್ಮೆನ್ಸ್ APIಯು performance.mark() ಮತ್ತು performance.measure() ವಿಧಾನಗಳನ್ನು ಸಹ ನೀಡುತ್ತದೆ, ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಕಸ್ಟಮ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೆಟ್ರಿಕ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಮಾರ್ಕ್‌ಗಳು ನಿಮ್ಮ ಕೋಡ್‌ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ಸ್ಥಳಗಳಲ್ಲಿ ನೀವು ಸೇರಿಸಬಹುದಾದ ಟೈಮ್‌ಸ್ಟ್ಯಾಂಪ್‌ಗಳಾಗಿವೆ, ಆದರೆ ಮೆಷರ್‌ಗಳು ಎರಡು ಮಾರ್ಕ್‌ಗಳ ನಡುವಿನ ಅವಧಿಯನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತವೆ. ಕಸ್ಟಮ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಅಥವಾ ನಿರ್ದಿಷ್ಟ ಕೋಡ್ ಬ್ಲಾಕ್‌ಗಳ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅಳೆಯಲು ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.

// ಉದಾಹರಣೆ: ಕಸ್ಟಮ್ ಕಾಂಪೊನೆಂಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅಳೆಯುವುದು

performance.mark('componentStart');

// ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ ರೆಂಡರಿಂಗ್ ತರ್ಕ ಇಲ್ಲಿ
renderMyComponent();

performance.mark('componentEnd');

performance.measure('componentRenderTime', 'componentStart', 'componentEnd');

const measure = performance.getEntriesByName('componentRenderTime')[0];
console.log('Component Render Time:', measure.duration);

ನಂತರ ನೀವು ಈ ಕಸ್ಟಮ್ ಮೆಷರ್‌ಗಳನ್ನು 'measure' ಎಂಟ್ರಿ ಪ್ರಕಾರವನ್ನು ಗಮನಿಸುವ ಮೂಲಕ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ API ಬಳಸಿ ಗಮನಿಸಬಹುದು.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.entryType === 'measure') {
      console.log('Custom Measure:', entry.name, entry.duration);
    }
  });
});

observer.observe({ entryTypes: ['measure'] });

ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ API ಗೆ ಪರ್ಯಾಯಗಳು

ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ API ಒಂದು ಶಕ್ತಿಯುತ ಸಾಧನವಾಗಿದ್ದರೂ, ಕಾರ್ಯಕ್ಷಮತೆ ಮೇಲ್ವಿಚಾರಣೆಗೆ ಇದು ಏಕೈಕ ಆಯ್ಕೆಯಲ್ಲ. ಇಲ್ಲಿ ಕೆಲವು ಪರ್ಯಾಯಗಳಿವೆ:

• ಗೂಗಲ್ ಲೈಟ್‌ಹೌಸ್: ವಿವರವಾದ ಕಾರ್ಯಕ್ಷಮತೆ ವರದಿಗಳು ಮತ್ತು ಸುಧಾರಣೆಗಾಗಿ ಶಿಫಾರಸುಗಳನ್ನು ಒದಗಿಸುವ ಸಮಗ್ರ ಆಡಿಟಿಂಗ್ ಸಾಧನ.
• ವೆಬ್‌ಪೇಜ್‌ಟೆಸ್ಟ್: ವಿವಿಧ ಸ್ಥಳಗಳು ಮತ್ತು ಬ್ರೌಸರ್‌ಗಳಿಂದ ವೆಬ್‌ಸೈಟ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರೀಕ್ಷಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ಆನ್‌ಲೈನ್ ಸಾಧನ.
• ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳು: ಕ್ರೋಮ್ ಡೆವ್‌ಟೂಲ್ಸ್, ಫೈರ್‌ಫಾಕ್ಸ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳು ಮತ್ತು ಇತರ ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳು ಪ್ರೊಫೈಲಿಂಗ್, ಟೈಮ್‌ಲೈನ್ ರೆಕಾರ್ಡಿಂಗ್ ಮತ್ತು ನೆಟ್‌ವರ್ಕ್ ವಿಶ್ಲೇಷಣೆ ಸೇರಿದಂತೆ ಹಲವಾರು ಕಾರ್ಯಕ್ಷಮತೆ ವಿಶ್ಲೇಷಣೆ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ.
• ರಿಯಲ್ ಯೂಸರ್ ಮಾನಿಟರಿಂಗ್ (RUM) ಪರಿಕರಗಳು: RUM ಪರಿಕರಗಳು ನೈಜ ಬಳಕೆದಾರರಿಂದ ಕಾರ್ಯಕ್ಷಮತೆ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸುತ್ತವೆ, ಇದು ನಿಜವಾದ ಬಳಕೆದಾರರ ಅನುಭವದ ಬಗ್ಗೆ ಅಮೂಲ್ಯವಾದ ಒಳನೋಟಗಳನ್ನು ನೀಡುತ್ತದೆ. ಉದಾಹರಣೆಗಳಲ್ಲಿ ನ್ಯೂ ರೆಲಿಕ್, ಡೇಟಾಡಾಗ್ ಮತ್ತು ಸೆಂಟ್ರಿ ಸೇರಿವೆ.
• ಸಿಂಥೆಟಿಕ್ ಮಾನಿಟರಿಂಗ್ ಪರಿಕರಗಳು: ಸಿಂಥೆಟಿಕ್ ಮಾನಿಟರಿಂಗ್ ಪರಿಕರಗಳು ನೈಜ ಬಳಕೆದಾರರ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವ ಮೊದಲು ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳನ್ನು ಪೂರ್ವಭಾವಿಯಾಗಿ ಗುರುತಿಸಲು ಬಳಕೆದಾರರ ಸಂವಹನಗಳನ್ನು ಅನುಕರಿಸುತ್ತವೆ.

ತೀರ್ಮಾನ

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

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

ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯು ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಬ್ಸರ್ವರ್ API ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಬಳಸಲು ನಿಮಗೆ ಒಂದು ದೃಢವಾದ ಅಡಿಪಾಯವನ್ನು ಒದಗಿಸಿದೆ. ಈಗ ನಿಮ್ಮ ಜ್ಞಾನವನ್ನು ಆಚರಣೆಗೆ ತರಲು ಮತ್ತು ಈ ಶಕ್ತಿಯುತ ಸಾಧನದ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸುವ ಸಮಯ!