നിങ്ങളുടെ പേജ് വേഗത്തിൽ ലോഡ് ആകുന്നുണ്ടെങ്കിലും പതുക്കെയാണെന്ന് തോന്നുന്നുണ്ടോ? അത് INP ആണ്

നിങ്ങളുടെ Lighthouse റിപ്പോർട്ട് പച്ച നിറത്തിലാണ്. LCP ശരിയാണ്. CLS ശരിയാണ്. പേജ് വേഗത്തിൽ ലോഡ് ആകുന്നുമുണ്ട്.

എന്നാൽ നിങ്ങളുടെ റിയൽ-വേൾഡ് സ്കോറുകൾ കുറയുന്നു. എന്തുകൊണ്ടാണെന്ന് നിങ്ങൾക്ക് അറിയില്ല.

പ്രശ്നം മിക്കവാറും INP ആയിരിക്കാം. 2024 മാർച്ചിൽ Interaction to Next Paint, FID-യെ മാറ്റിസ്ഥാപിച്ചു. FID ആദ്യത്തെ കാലതാമസം (delay) മാത്രമേ അളന്നിരുന്നുള്ളൂ. എന്നാൽ ഒരു ഉപയോക്താവ് നിങ്ങളുടെ പേജിൽ ഇരിക്കുമ്പോൾ നടക്കുന്ന ഓരോ ഇന്ററാക്ഷനും INP അളക്കുന്നു. അതിൽ ഏറ്റവും സാവധാനത്തിലുള്ളത് ആണ് ഇത് റിപ്പോർട്ട് ചെയ്യുന്നത്.

INP എന്നത് ഒരു ലോഡിംഗ് മെട്രിക് അല്ല. ഇതൊരു റെസ്‌പോൺസീവ്നെസ് മെട്രിക് (responsiveness metric) ആണ്. ഇത് ഒരു ചോദ്യത്തിന് ഉത്തരം നൽകുന്നു: നിങ്ങൾ ക്ലിക്ക് ചെയ്യുമ്പോഴോ ടൈപ്പ് ചെയ്യുമ്പോഴോ സ്ക്രീൻ മാറാൻ എത്ര സമയം എടുക്കുന്നു?

Google ഈ വിഭാഗങ്ങളാണ് (buckets) ഉപയോഗിക്കുന്നത്:

ഒരു സൈറ്റ് ഒരു സെക്കൻഡിനുള്ളിൽ ലോഡ് ആകുമെങ്കിലും പരാജയപ്പെട്ടേക്കാം. വേഗത്തിൽ ലോഡ് ആകുക എന്നതും വേഗത്തിൽ പ്രതികരിക്കുക (responding) എന്നതും രണ്ട് വ്യത്യസ്ത കാര്യങ്ങളാണ്.

Lighthouse ടൂളുകൾ പലപ്പോഴും INP ശ്രദ്ധിക്കാതെ പോകുന്നു. Lighthouse നിങ്ങളുടെ ബട്ടണുകളിൽ ക്ലിക്ക് ചെയ്യാറില്ല. അത് ഒരു ഏകദേശ കണക്ക് (estimate) മാത്രമാണ് നൽകുന്നത്. നിങ്ങൾക്ക് പച്ച നിറത്തിലുള്ള ലാബ് റിപ്പോർട്ടും ചുവപ്പ് നിറത്തിലുള്ള ഫീൽഡ് സ്കോറും ഉണ്ടാകാം.

യഥാർത്ഥ നമ്പർ കാണാൻ ഈ കോഡ് ഉപയോഗിക്കുക:

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

ഇത് സാവധാനത്തിലുള്ള ഇന്ററാക്ഷനും ആ പ്രത്യേക എലമെന്റും (element) രേഖപ്പെടുത്തുന്നു.

മെയിൻ ത്രെഡ് (main thread) തിരക്കിലായതുകൊണ്ടാണ് INP പ്രശ്നങ്ങൾ ഉണ്ടാകുന്നത്. ഒരു JavaScript ടാസ്ക് പൂർത്തിയാകുന്നതുവരെ ബ്രൗസറിന് റെസ്‌പോൺസ് പെയിന്റ് (paint) ചെയ്യാൻ കഴിയില്ല.

സാധാരണ കാരണങ്ങൾ:

ദൈർഘ്യമേറിയ ടാസ്ക്കുകളെ ചെറിയ ഭാഗങ്ങളായി തിരിച്ച് ഇത് പരിഹരിക്കാം. ഓരോ ഘട്ടങ്ങൾക്കിടയിലും ബ്രൗസറിന് ശ്വസിക്കാൻ സമയം നൽകുക:

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

സാവധാനത്തിലുള്ള ജോലി തുടങ്ങുന്നതിന് മുമ്പ് ബ്രൗസറിന് UI പെയിന്റ് ചെയ്യാൻ yieldToMain ഉപയോഗിക്കുക.

മറ്റ് പരിഹാരങ്ങൾ:

നിങ്ങളുടെ യഥാർത്ഥ സ്കോറുകൾ കുറവാണെങ്കിൽ LCP നോക്കി സമയം കളയുന്നത് നിർത്തുക. പകരം നിങ്ങളുടെ ഇന്ററാക്ഷനുകൾ അളക്കുക.

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