𝗬𝗼𝘂𝗿 𝗣𝗮𝗴𝗲 𝗟𝗼𝗮𝗱𝘀 𝗙𝗮𝘀𝘁 𝗕𝘂𝘁 𝗙𝗲𝗲𝗹𝘀 𝗦𝗹𝗼𝘄? 𝗜𝘁'𝘀 𝗜𝗡𝗣

𝗬𝗼𝘂𝗿 𝗣𝗮𝗴𝗲 𝗟𝗼𝗮𝗱𝘀 𝗙𝗮𝘀𝘁 𝗕𝘂𝘁 𝗙𝗲𝗲𝗹𝘀 𝗦𝗹𝗼𝘄? 𝗜𝘁'𝘀 𝗜𝗡𝗣

ನಿಮ್ಮ Lighthouse ವರದಿ ಹಸಿರಾಗಿ ಕಾಣುತ್ತದೆ. LCP ಸರಿಯಾಗಿದೆ. CLS ಸರಿಯಾಗಿದೆ. ಪುಟವು ವೇಗವಾಗಿ ಲೋಡ್ ಆಗುತ್ತದೆ.

ನಂತರ ನಿಮ್ಮ ನೈಜ-ಪ್ರಪಂಚದ (real-world) ಸ್ಕೋರ್‌ಗಳು ಕುಸಿಯುತ್ತವೆ. ಅದಕ್ಕೆ ಕಾರಣವೇನು ಎಂಬುದು ನಿಮಗೆ ತಿಳಿಯುವುದಿಲ್ಲ.

ಸಮಸ್ಯೆ ಬಹುಶಃ INP ಇರಬಹುದು. Interaction to Next Paint ಮಾರ್ಚ್ 2024 ರಲ್ಲಿ FID ಅನ್ನು ಬದಲಿಸಿತು. FID ಕೇವಲ ಮೊದಲ ವಿಳಂಬವನ್ನು (delay) ಮಾತ್ರ ಅಳೆಯುತ್ತಿತ್ತು. INP ಬಳಕೆದಾರರು ನಿಮ್ಮ ಪುಟದಲ್ಲಿರುವಾಗ ನಡೆಯುವ ಪ್ರತಿಯೊಂದು ಸಂವಹನವನ್ನು (interaction) ಅಳೆಯುತ್ತದೆ. ಇದು ಅತ್ಯಂತ ನಿಧಾನವಾದ ಸಂವಹನವನ್ನು ವರದಿ ಮಾಡುತ್ತದೆ.

INP ಎಂಬುದು ಲೋಡಿಂಗ್ ಮೆಟ್ರಿಕ್ ಅಲ್ಲ. ಇದು ರೆಸ್ಪಾನ್ಸಿವ್‌ನೆಸ್ (responsiveness) ಮೆಟ್ರಿಕ್ ಆಗಿದೆ. ಇದು ಒಂದು ಪ್ರಶ್ನೆಗೆ ಉತ್ತರಿಸುತ್ತದೆ: ನೀವು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಅಥವಾ ಟೈಪ್ ಮಾಡಿದಾಗ, ಪರದೆ ಬದಲಾಗಲು ಎಷ್ಟು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ?

Google ಈ ಕೆಳಗಿನ ವರ್ಗಗಳನ್ನು ಬಳಸುತ್ತದೆ:

• 200ms ಅಥವಾ ಅದಕ್ಕಿಂತ ಕಡಿಮೆ ಇದ್ದರೆ ಉತ್ತಮ.
• 500ms ಗಿಂತ ಹೆಚ್ಚಿದ್ದರೆ ಕಳಪೆ.

ಒಂದು ಸೈಟ್ ಒಂದು ಸೆಕೆಂಡಿನಲ್ಲಿ ಲೋಡ್ ಆಗಬಹುದು ಮತ್ತು ಆದರೂ ವಿಫಲವಾಗಬಹುದು. ವೇಗವಾಗಿ ಲೋಡ್ ಆಗುವುದು ಮತ್ತು ವೇಗವಾಗಿ ಪ್ರತಿಕ್ರಿಯಿಸುವುದು (responding) ಬೇರೆ ಬೇರೆ ಕೆಲಸಗಳು.

Lighthouse ಪರಿಕರಗಳು ಹೆಚ್ಚಾಗಿ INP ಅನ್ನು ಗಮನಿಸುವುದಿಲ್ಲ. Lighthouse ನಿಮ್ಮ ಬಟನ್‌ಗಳನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವುದಿಲ್ಲ. ಅದು ಕೇವಲ ಅಂದಾಜನ್ನು ನೀಡುತ್ತದೆ. ನಿಮ್ಮ ಲ್ಯಾಬ್ ವರದಿ ಹಸಿರಾಗಿರಬಹುದು ಮತ್ತು ಫೀಲ್ಡ್ ಸ್ಕೋರ್ ಕೆಂಪಾಗಿರಬಹುದು.

ನೈಜ ಸಂಖ್ಯೆಯನ್ನು ನೋಡಲು, ಈ ಕೋಡ್ ಬಳಸಿ:

import { onINP } from 'web-vitals';
onINP(function (metric) {
  console.log('INP', metric.value, metric.entries);
});

ಇದು ನಿಧಾನವಾದ ಸಂವಹನ ಮತ್ತು ನಿರ್ದಿಷ್ಟ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಲಾಗ್ ಮಾಡುತ್ತದೆ.

ಮೇನ್ ಥ್ರೆಡ್ (main thread) ಕಾರ್ಯನಿರತವಾಗಿರುವುದರಿಂದ INP ಸಮಸ್ಯೆಗಳು ಸಂಭವಿಸುತ್ತವೆ. ಒಂದು JavaScript ಕಾರ್ಯವು ಮುಗಿಯುವವರೆಗೆ ಬ್ರೌಸರ್ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಪೇಂಟ್ (paint) ಮಾಡಲು ಸಾಧ್ಯವಿಲ್ಲ.

ಸಾಮಾನ್ಯ ಕಾರಣಗಳು:

• ಪ್ರತಿ ಕ್ಲಿಕ್‌ನಲ್ಲಿ ಚಲಿಸುವ ಭಾರೀ ಇವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು (event handlers).
• ಚಾಟ್ ವಿಜೆಟ್‌ಗಳು ಅಥವಾ ಅನಾಲಿಟಿಕ್ಸ್‌ನಂತಹ ಥರ್ಡ್-ಪಾರ್ಟಿ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು.
• ನಿರಂತರ DOM ರೀಡ್ ಮತ್ತು ರೈಟ್ ಮಾಡುವುದರಿಂದ ಉಂಟಾಗುವ ಲೇಔಟ್ ಥ್ರ್ಯಾಶಿಂಗ್ (Layout thrashing).
• ಫ್ರೇಮ್‌ವರ್ಕ್ ಹೈಡ್ರೇಶನ್ (hydration) ಕಾರ್ಯಗಳು.

ದೀರ್ಘ ಕಾರ್ಯಗಳನ್ನು ವಿಭಜಿಸುವ ಮೂಲಕ ಇದನ್ನು ಸರಿಪಡಿಸಿ. ಹಂತಗಳ ನಡುವೆ ಬ್ರೌಸರ್ ಉಸಿರಾಡಲು ಬಿಡಿ:

async function onClick() {
  doUrgentPart(); 
  await yieldToMain(); 
  doExpensivePart(); 
}

ನಿಧಾನವಾದ ಕೆಲಸ ಪ್ರಾರಂಭವಾಗುವ ಮೊದಲು ಬ್ರೌಸರ್ UI ಅನ್ನು ಪೇಂಟ್ ಮಾಡಲು yieldToMain ಬಳಸಿ.

ಇತರ ಪರಿಹಾರಗಳು:

• ತಕ್ಷಣ ಅಗತ್ಯವಿಲ್ಲದ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಡಿಫರ್ (Defer) ಮಾಡಿ.
• ಥರ್ಡ್-ಪಾರ್ಟಿ ವಿಜೆಟ್‌ಗಳನ್ನು ಆಡಿಟ್ ಮಾಡಿ.
• ಭಾರೀ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ಡಿಬೌನ್ಸ್ (Debounce) ಮಾಡಿ.
• ನಿಮ್ಮ DOM ರೀಡ್ ಮತ್ತು ರೈಟ್ ಕಾರ್ಯಗಳನ್ನು ಬ್ಯಾಚ್ (Batch) ಮಾಡಿ.

ನಿಮ್ಮ ನೈಜ ಸ್ಕೋರ್‌ಗಳು ಕಡಿಮೆಯಿದ್ದರೆ LCP ಅನ್ನು ನೋಡುವುದನ್ನು ನಿಲ್ಲಿಸಿ. ಬದಲಾಗಿ ನಿಮ್ಮ ಸಂವಹನಗಳನ್ನು (interactions) ಅಳೆಯಿರಿ.

Source: https://dev.to/lamas51/your-page-loads-fast-but-still-feels-slow-its-inp-not-load-time-2gkn