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

Ukurasa Wako Unapakia Haraka lakini Bado Unahisi ni wa Polepole?

Ripoti yako ya Lighthouse ni ya kijani. Alama zako za LCP na CLS zinaonekana vizuri. Ukurasa wako unapakia haraka. Kisha alama zako za ulimwengu halisi zinashuka. Hujui kwa nini.

Tatizo mara nyingi ni INP.

INP inasimama badala ya Interaction to Next Paint. Ilichukua nafasi ya FID kama Core Web Vital mnamo Machi 2024. FID ilipima tu ucheleweshaji wa mbofyo wako wa kwanza. INP inapima kila mwingiliano (interaction) wakati mtu anatumia ukurasa wako. Inaripoti ule uliochelewa zaidi.

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

Google inatumia sheria hizi:

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

Tovuti inaweza kupakia ndani ya sekunde moja na bado ikashindwa. Kupakia haraka na kuitikia haraka ni kazi mbili tofauti.

Lighthouse haibofyi vitufe vyako. Inakupa makadirio. Unaweza kuwa na ripoti ya kijani ya maabara (lab report) na alama nyekundu ya uwanjani (field score) kwa wakati mmoja.

Ili kuona namba halisi, pima mwingiliano (interactions) yanapotokea. Tumia kodi hii:

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

Hii inarekodi mwingiliano uliochelewa na kipengele (element) kilichosababisha. Sasa unarekebisha matatizo halisi badala ya kukisia.

Matatizo ya INP hutokea wakati main thread ikiwa na kazi nyingi. Kivinjari (browser) hakiwezi kuchora (paint) jibu mpaka kazi ya JavaScript imalizike. Kazi ndefu inazuia mwingiliano.

Sababu za kawaida:

• Event handlers nzito zinazofanya kazi nyingi sana kwenye kila mbofyo.
• Skripti za upande wa tatu (third-party scripts) kama chat widgets au analytics zinazotekeleza kazi ndefu.
• Layout thrash kutokana na kusoma na kuandika kwenye DOM katika mzunguko (loop).
• Michakato ya framework hydration.

Unaweza kurekebisha hili kwa kuvunja kazi ndefu katika sehemu ndogo. Iache kivinjari ipumue.

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

Lengo ni kuchora (paint) jibu kabla ya kazi nzito kuanza.

Hatua nyingine za kuchukua:

• Icheleweshe (defer) skripti ambazo ukurasa hauhitaji mara moja.
• Kagua third-party widgets.
• Debounce handlers nzito.
• Unganisha (batch) usomaji na uandishi wako wa DOM.

Acha kuangalia LCP ikiwa ripoti yako ya maabara ni ya kijani lakini alama zako halisi ni nyekundu. Nenda upime mwingiliano wako.

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