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

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

Ripoti yako ya Lighthouse inaonekana ya kijani. LCP iko sawa. CLS iko sawa. Ukurasa unapakia haraka.

Kisha alama zako za ulimwengu halisi zinashuka. Hujui kwa nini.

Tatizo huenda ni INP. Interaction to Next Paint ilichukua nafasi ya FID mnamo Machi 2024. FID ilipima ucheleweshaji wa kwanza tu. INP inapima kila mwingiliano (interaction) wakati mtumiaji anapokuwa kwenye ukurasa wako. Inaripoti ule uliochelewa zaidi.

INP si kipimo cha upakiaji (loading metric). Ni kipimo cha usikivu (responsiveness metric). Inajibu swali moja: unapobofya au kuandika, inachukua muda gani hadi skrini ibadilike?

Google hutumia makundi haya:

• 200ms au chini yake ni nzuri.
• Zaidi ya 500ms ni mbaya.

Tovuti inaweza kupakia kwa sekunde moja na bado ikafeli. Kupakia haraka na kuitikia haraka ni kazi tofauti.

Zana za Lighthouse mara nyingi hukosa INP. Lighthouse haibofyi vitufe vyako. Inatoa makadirio tu. Unaweza kuwa na ripoti ya kijani ya maabara (lab report) na alama nyekundu ya uwanjani (field score).

Ili kuona namba halisi, tumia kodi hii:

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

Hii hurekodi mwingiliano wa polepole na kipengele (element) mahususi.

Matatizo ya INP hutokea kwa sababu main thread imezidi kazi. Kivinjari (browser) hakiwezi kuchora (paint) jibu hadi kazi ya JavaScript imalizike.

Sababu za kawaida:

• Event handlers nzito zinazojiendesha kila unapobofya.
• Skripti za upande wa tatu kama chat widgets au analytics.
• Layout thrashing kutokana na kusoma na kuandika DOM mara kwa mara.
• Kazi za framework hydration.

Irekebishe kwa kuvunja kazi ndefu katika sehemu ndogo. Ruhusu kivinjari "vupumue" kati ya hatua:

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

Tumia yieldToMain ili kuruhusu kivinjari kuchora UI kabla ya kazi nzito kuanza.

Marekebisho mengine:

• Weka akiba (defer) skripti ambazo hazihitajiki mara moja.
• Kagua third-party widgets.
• Debounce handlers nzito.
• Unganisha (batch) kusoma na kuandika kwako kwa DOM.

Acha kuangalia LCP ikiwa alama zako halisi ni ndogo. Badala yake, pima mwingiliano (interactions) wako.

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