உங்கள் பக்கம் வேகமாக லோட் ஆகிறது, ஆனால் இன்னும் மெதுவாகத் தோன்றுகிறதா?

உங்கள் Lighthouse ரிப்போர்ட் பச்சை நிறத்தில் உள்ளது. உங்கள் LCP மற்றும் CLS மதிப்பெண்கள் நன்றாக உள்ளன. உங்கள் பக்கம் வேகமாக லோட் ஆகிறது. ஆனால், உங்கள் நிஜ உலக (real world) மதிப்பெண்கள் குறைகின்றன. ஏன் என்று உங்களுக்குத் தெரியவில்லை.

பிரச்சனை பெரும்பாலும் INP-இல் தான் உள்ளது.

INP என்பது Interaction to Next Paint என்பதைக் குறிக்கிறது. மார்ச் 2024-இல் இது FID-க்கு பதிலாக Core Web Vital ஆக மாற்றப்பட்டது. FID உங்கள் முதல் கிளிக் செய்வதில் ஏற்படும் தாமதத்தை மட்டுமே அளவிட்டது. ஆனால், INP ஒரு பயனர் உங்கள் பக்கத்தைப் பயன்படுத்தும் போது நடக்கும் ஒவ்வொரு தொடர்பையும் (interaction) அளவிடுகிறது. இது அதில் மிக மெதுவான ஒன்றைப் பற்றித் தெரிவிக்கிறது.

INP என்பது ஒரு லோடிங் அளவீடு (loading metric) அல்ல. இது ஒரு ரெஸ்பான்சிவ்னஸ் (responsiveness) அளவீடு. இது ஒரு கேள்வியைக் கேட்கிறது: நீங்கள் கிளிக் செய்யும்போதோ அல்லது டைப் செய்யும்போதோ, திரை மாற எவ்வளவு நேரம் ஆகிறது?

Google இந்த விதிகளைப் பயன்படுத்துகிறது:

ஒரு தளம் ஒரு வினாடியில் லோட் ஆகலாம், ஆனால் அப்போதும் தோல்வியடையலாம். வேகமாக லோட் ஆவதும், வேகமாகப் பதிலளிப்பதும் (responding) இரண்டு வெவ்வேறு வேலைகள்.

Lighthouse உங்கள் பட்டன்களை அழுத்திப் பார்ப்பதில்லை. அது ஒரு மதிப்பீட்டை மட்டுமே வழங்குகிறது. ஒரே நேரத்தில் உங்களுக்கு ஒரு பச்சை நிற லேப் ரிப்போர்ட்டும் (lab report), சிவப்பு நிற ஃபீல்ட் ஸ்கோரும் (field score) இருக்கலாம்.

உண்மையான எண்ணைப் பார்க்க, தொடர்புகள் நடக்கும்போதே அவற்றை அளவிடுங்கள். இந்த குறியீட்டைப் (code) பயன்படுத்துங்கள்:

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

இது மெதுவான தொடர்பையும், அதற்குப் பின்னால் உள்ள எலிமெண்ட்டையும் (element) பதிவு செய்கிறது. இப்போது நீங்கள் யூகிக்காமல் உண்மையான பிரச்சனைகளைச் சரிசெய்யலாம்.

மெயின் த்ரெட் (main thread) பிஸியாக இருக்கும்போது INP பிரச்சனைகள் ஏற்படுகின்றன. ஒரு JavaScript டாஸ்க் முடியும் வரை பிரவுசரால் பதிலைக் காட்ட (paint) முடியாது. ஒரு நீண்ட டாஸ்க் (long task) அந்தத் தொடர்பைத் தடுக்கிறது.

பொதுவான காரணங்கள்:

நீண்ட டாஸ்குகளைப் பிரிப்பதன் மூலம் இதைச் சரிசெய்யலாம். பிரவுசருக்குச் சற்று இடைவெளி கொடுங்கள்.

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

மெதுவான வேலை தொடங்குவதற்கு முன்பே பதிலைக் காட்டுவதே (paint the response) இதன் இலக்காகும்.

எடுக்க வேண்டிய பிற நடவடிக்கைகள்:

உங்கள் லேப் ரிப்போர்ட் பச்சை நிறத்திலும், ஆனால் உண்மையான மதிப்பெண்கள் சிவப்பு நிறத்திலும் இருந்தால், LCP-யைப் பார்த்துக் கொண்டிருப்பதை நிறுத்துங்கள். சென்று உங்கள் தொடர்புகளை (interactions) அளவிடுங்கள்.

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