𝗬𝗼𝘂𝗿 𝗣𝗮𝗴𝗲 𝗟𝗼𝗮𝗱𝘀 𝗙𝗮𝘀𝘁 𝗯𝘂𝘁 𝗦𝘁𝗶𝗹𝗹 𝗙𝗲𝗲𝗹𝘀 𝗦𝗹𝗼𝘄?

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

ਤੁਹਾਡੀ Lighthouse ਰਿਪੋਰਟ ਹਰੀ ਹੈ। ਤੁਹਾਡੇ LCP ਅਤੇ CLS ਸਕੋਰ ਵਧੀਆ ਲੱਗਦੇ ਹਨ। ਤੁਹਾਡਾ ਪੇਜ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਹੁੰਦਾ ਹੈ। ਫਿਰ ਤੁਹਾਡੇ ਅਸਲ ਦੁਨੀਆ (real world) ਦੇ ਸਕੋਰ ਡਿੱਗ ਜਾਂਦੇ ਹਨ। ਤੁਹਾਨੂੰ ਨਹੀਂ ਪਤਾ ਕਿ ਕਿਉਂ।

ਸਮੱਸਿਆ ਅਕਸਰ INP ਦੀ ਹੁੰਦੀ ਹੈ।

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

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

Google ਇਹ ਨਿਯਮ ਵਰਤਦਾ ਹੈ:

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

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

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

ਅਸਲ ਅੰਕੜੇ ਦੇਖਣ ਲਈ, interaction ਨੂੰ ਉਦੋਂ ਮਾਪੋ ਜਦੋਂ ਉਹ ਵਾਪਰਦੀਆਂ ਹਨ। ਇਸ ਕੋਡ ਦੀ ਵਰਤੋਂ ਕਰੋ:

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

ਇਹ ਸੁਸਤ interaction ਅਤੇ ਇਸਦੇ ਪਿੱਛੇ ਵਾਲੇ element ਨੂੰ log ਕਰਦਾ ਹੈ। ਹੁਣ ਤੁਸੀਂ ਅੰਦਾਜ਼ਾ ਲਗਾਉਣ ਦੀ ਬਜਾਏ ਅਸਲ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਠੀਕ ਕਰ ਸਕਦੇ ਹੋ।

INP ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਉਦੋਂ ਹੁੰਦੀਆਂ ਹਨ ਜਦੋਂ main thread ਰੁੱਝਿਆ ਹੋਇਆ ਹੁੰਦਾ ਹੈ। ਜਦੋਂ ਤੱਕ ਇੱਕ JavaScript task ਖਤਮ ਨਹੀਂ ਹੁੰਦਾ, ਬ੍ਰਾਊਜ਼ਰ ਜਵਾਬ ਨੂੰ paint ਨਹੀਂ ਕਰ ਸਕਦਾ। ਇੱਕ ਲੰਬਾ task interaction ਨੂੰ ਰੋਕ ਦਿੰਦਾ ਹੈ।

ਆਮ ਕਾਰਨ:

• ਭਾਰੀ event handlers ਜੋ ਹਰ ਕਲਿੱਕ 'ਤੇ ਬਹੁਤ ਜ਼ਿਆਦਾ ਕੰਮ ਕਰਦੇ ਹਨ।
• Third-party scripts ਜਿਵੇਂ ਕਿ chat widgets ਜਾਂ analytics ਜੋ ਲੰਬੇ tasks ਚਲਾਉਂਦੇ ਹਨ।
• ਲੂਪ ਵਿੱਚ DOM ਨੂੰ ਪੜ੍ਹਨ ਅਤੇ ਲਿਖਣ ਕਾਰਨ ਹੋਣ ਵਾਲਾ layout thrash।
• Framework hydration ਪ੍ਰਕਿਰਿਆਵਾਂ।

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

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

ਟੀਚਾ ਸੁਸਤ ਕੰਮ ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਜਵਾਬ ਨੂੰ paint ਕਰਨਾ ਹੈ।

ਲੈਣ ਵਾਲੇ ਹੋਰ ਕਦਮ:

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

ਜੇਕਰ ਤੁਹਾਡੀ ਲੈਬ ਰਿਪੋਰਟ ਹਰੀ ਹੈ ਪਰ ਤੁਹਾਡੇ ਅਸਲ ਸਕੋਰ ਲਾਲ ਹਨ, ਤਾਂ LCP ਨੂੰ ਦੇਖਣਾ ਬੰਦ ਕਰੋ। ਜਾਓ ਅਤੇ ਆਪਣੀਆਂ interactions ਨੂੰ ਮਾਪੋ।

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