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

ਤੁਹਾਡਾ ਪੇਜ ਤੇਜ਼ ਲੋਡ ਹੁੰਦਾ ਹੈ ਪਰ ਫਿਰ ਵੀ ਹੌਲੀ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ? ਇਹ INP ਹੈ।

ਤੁਹਾਡੀ Lighthouse ਰਿਪੋਰਟ ਹਰੀ (green) ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ। LCP ਠੀਕ ਹੈ। CLS ਠੀਕ ਹੈ। ਪੇਜ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਹੁੰਦਾ ਹੈ।

ਫਿਰ ਤੁਹਾਡੇ ਅਸਲ-ਦੁਨੀਆ (real-world) ਦੇ ਸਕੋਰ ਡਿੱਗ ਜਾਂਦੇ ਹਨ। ਤੁਹਾਨੂੰ ਪਤਾ ਨਹੀਂ ਲੱਗਦਾ ਕਿ ਕਿਉਂ।

ਸਮੱਸਿਆ ਸ਼ਾਇਦ INP ਹੈ। Interaction to Next Paint ਨੇ ਮਾਰਚ 2024 ਵਿੱਚ FID ਦੀ ਜਗ੍ਹਾ ਲਈ। FID ਸਿਰਫ਼ ਪਹਿਲੀ ਦੇਰੀ (delay) ਨੂੰ ਮਾਪਦਾ ਸੀ। INP ਉਦੋਂ ਤੱਕ ਹਰ ਇੰਟਰੈਕਸ਼ਨ (interaction) ਨੂੰ ਮਾਪਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਯੂਜ਼ਰ ਤੁਹਾਡੇ ਪੇਜ 'ਤੇ ਰਹਿੰਦਾ ਹੈ। ਇਹ ਸਭ ਤੋਂ ਹੌਲੀ ਵਾਲੀ ਇੰਟਰੈਕਸ਼ਨ ਦੀ ਰਿਪੋਰਟ ਦਿੰਦਾ ਹੈ।

INP ਕੋਈ ਲੋਡਿੰਗ ਮੈਟ੍ਰਿਕ (loading metric) ਨਹੀਂ ਹੈ। ਇਹ ਇੱਕ ਰਿਸਪੌਂਸਿਵਨੈੱਸ ਮੈਟ੍ਰਿਕ (responsiveness metric) ਹੈ। ਇਹ ਇੱਕ ਸਵਾਲ ਦਾ ਜਵਾਬ ਦਿੰਦਾ ਹੈ: ਜਦੋਂ ਤੁਸੀਂ ਕਲਿੱਕ ਕਰਦੇ ਹੋ ਜਾਂ ਟਾਈਪ ਕਰਦੇ ਹੋ, ਤਾਂ ਸਕ੍ਰੀਨ ਬਦਲਣ ਵਿੱਚ ਕਿੰਨਾ ਸਮਾਂ ਲੱਗਦਾ ਹੈ?

Google ਇਹਨਾਂ ਬਕਟਾਂ (buckets) ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ:

• 200ms ਜਾਂ ਇਸ ਤੋਂ ਘੱਟ ਚੰਗਾ ਹੈ।
• 500ms ਤੋਂ ਵੱਧ ਮਾੜਾ ਹੈ।

ਇੱਕ ਸਾਈਟ ਇੱਕ ਸਕਿੰਟ ਵਿੱਚ ਲੋਡ ਹੋ ਸਕਦੀ ਹੈ ਅਤੇ ਫਿਰ ਵੀ ਫੇਲ ਹੋ ਸਕਦੀ ਹੈ। ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਹੋਣਾ ਅਤੇ ਤੇਜ਼ੀ ਨਾਲ ਜਵਾਬ ਦੇਣਾ (responding) ਦੋ ਵੱਖਰੇ ਕੰਮ ਹਨ।

Lighthouse ਟੂਲ ਅਕਸਰ INP ਨੂੰ ਮਿਸ ਕਰ ਦਿੰਦੇ ਹਨ। Lighthouse ਤੁਹਾਡੇ ਬਟਨਾਂ 'ਤੇ ਕਲਿੱਕ ਨਹੀਂ ਕਰਦਾ। ਇਹ ਸਿਰਫ਼ ਇੱਕ ਅੰਦਾਜ਼ਾ (estimate) ਦਿੰਦਾ ਹੈ। ਤੁਹਾਡੀ ਲੈਬ ਰਿਪੋਰਟ ਹਰੀ ਹੋ ਸਕਦੀ ਹੈ ਪਰ ਫੀਲਡ ਸਕੋਰ ਲਾਲ ਹੋ ਸਕਦਾ ਹੈ।

ਅਸਲ ਅੰਕੜੇ ਦੇਖਣ ਲਈ, ਇਸ ਕੋਡ ਦੀ ਵਰਤੋਂ ਕਰੋ:

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

ਇਹ ਹੌਲੀ ਇੰਟਰੈਕਸ਼ਨ ਅਤੇ ਖਾਸ ਐਲੀਮੈਂਟ (element) ਨੂੰ ਲੌਗ (log) ਕਰਦਾ ਹੈ।

INP ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਇਸ ਲਈ ਹੁੰਦੀਆਂ ਹਨ ਕਿਉਂਕਿ ਮੇਨ ਥ੍ਰੈਡ (main thread) ਵਿਅਸਤ ਹੁੰਦਾ ਹੈ। ਜਦੋਂ ਤੱਕ JavaScript ਟਾਸਕ ਖਤਮ ਨਹੀਂ ਹੁੰਦਾ, ਬ੍ਰਾਊਜ਼ਰ ਜਵਾਬ ਨੂੰ ਪੇਂਟ (paint) ਨਹੀਂ ਕਰ ਸਕਦਾ।

ਆਮ ਕਾਰਨ:

• ਹਰ ਕਲਿੱਕ 'ਤੇ ਚੱਲਣ ਵਾਲੇ ਭਾਰੀ (heavy) event handlers।
• Third-party ਸਕ੍ਰਿਪਟਾਂ ਜਿਵੇਂ ਕਿ ਚੈਟ ਵਿਜੇਟਸ ਜਾਂ ਐਨਾਲਿਟਿਕਸ।
• ਲਗਾਤਾਰ DOM ਪੜ੍ਹਨ (reads) ਅਤੇ ਲਿਖਣ (writes) ਕਾਰਨ ਹੋਣ ਵਾਲਾ layout thrashing।
• Framework hydration ਟਾਸਕ।

ਲੰਬੇ ਟਾਸਕਾਂ ਨੂੰ ਤੋੜ ਕੇ ਇਸ ਨੂੰ ਠੀਕ ਕਰੋ। ਸਟੈਪਸ ਦੇ ਵਿਚਕਾਰ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਸਾਹ ਲੈਣ ਦਿਓ:

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

ਹੌਲੀ ਕੰਮ ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ UI ਪੇਂਟ ਕਰਨ ਦੇਣ ਲਈ yieldToMain ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਹੋਰ ਸੁਧਾਰ:

• ਉਹਨਾਂ ਸਕ੍ਰਿਪਟਾਂ ਨੂੰ ਡਿਫਰ (defer) ਕਰੋ ਜਿਨ੍ਹਾਂ ਦੀ ਤੁਰੰਤ ਲੋੜ ਨਹੀਂ ਹੈ।
• Third-party ਵਿਜੇਟਸ ਦੀ ਜਾਂਚ (audit) ਕਰੋ।
• ਮਹਿੰਗੇ (expensive) handlers ਨੂੰ debounce ਕਰੋ।
• ਆਪਣੇ DOM reads ਅਤੇ writes ਨੂੰ ਬੈਚ (batch) ਵਿੱਚ ਰੱਖੋ।

ਜੇਕਰ ਤੁਹਾਡੇ ਅਸਲ ਸਕੋਰ ਘੱਟ ਹਨ, ਤਾਂ LCP ਨੂੰ ਦੇਖਣਾ ਬੰਦ ਕਰੋ। ਇਸ ਦੀ ਬਜਾਏ ਆਪਣੀਆਂ ਇੰਟਰੈਕਸ਼ਨਾਂ ਨੂੰ ਮਾਪੋ।

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