𝗬𝗼𝘂𝗿 𝗣𝗮𝗴𝗲 𝗟𝗼𝗮𝗱𝘀 𝗙𝗮𝘀𝘁 𝗯𝘂𝘁 𝗦𝘁𝗶𝗹𝗹 𝗙𝗲𝗲𝗹𝘀 𝗦𝗹𝗼𝘄?
మీ Lighthouse రిపోర్ట్ గ్రీన్ (green) లో ఉంది. మీ LCP మరియు CLS స్కోర్లు బాగున్నాయి. మీ పేజీ వేగంగా లోడ్ అవుతుంది. కానీ మీ రియల్ వరల్డ్ (real world) స్కోర్లు పడిపోతాయి. ఎందుకు అనేది మీకు తెలియదు.
సమస్య తరచుగా INP వల్లనే ఉంటుంది.
INP అంటే Interaction to Next Paint. మార్చి 2024లో ఇది Core Web Vitalగా FID స్థానాన్ని భర్తీ చేసింది. FID కేవలం మీ మొదటి క్లిక్ యొక్క ఆలస్యాన్ని మాత్రమే కొలిచేది. కానీ INP ఒక వ్యక్తి మీ పేజీని ఉపయోగిస్తున్నప్పుడు జరిగే ప్రతి ఇంటరాక్షన్ను కొలుస్తుంది. ఇది అన్నిటికంటే నెమ్మదైన ఇంటరాక్షన్ను రిపోర్ట్ చేస్తుంది.
INP అనేది లోడింగ్ మెట్రిక్ కాదు. ఇది రెస్పాన్సివ్నెస్ (responsiveness) మెట్రిక్. ఇది ఒకే ప్రశ్న అడుగుతుంది: మీరు క్లిక్ చేసినప్పుడు లేదా టైప్ చేసినప్పుడు, స్క్రీన్ మారడానికి ఎంత సమయం పడుతుంది?
Google ఈ నియమాలను ఉపయోగిస్తుంది:
- 200ms లేదా అంతకంటే తక్కువ ఉంటే మంచిది.
- 500ms కంటే ఎక్కువ ఉంటే పేలవమైనది.
ఒక సైట్ ఒక సెకనులో లోడ్ అవ్వచ్చు, కానీ అయినా ఫెయిల్ (fail) అవ్వచ్చు. వేగంగా లోడ్ అవ్వడం మరియు వేగంగా స్పందించడం (responding) అనేవి రెండు వేర్వేరు పనులు.
Lighthouse మీ బటన్లను క్లిక్ చేయదు. అది మీకు ఒక అంచనాను మాత్రమే ఇస్తుంది. మీకు ఒకే సమయంలో గ్రీన్ ల్యాబ్ రిపోర్ట్ మరియు రెడ్ ఫీల్డ్ స్కోర్ ఉండవచ్చు.
అసలైన సంఖ్యను చూడటానికి, ఇంటరాక్షన్లు జరుగుతున్నప్పుడు వాటిని కొలవండి. ఈ కోడ్ని ఉపయోగించండి:
import { onINP } from 'web-vitals';
onINP(function (metric) {
console.log('INP', metric.value, metric.entries);
});
ఇది నెమ్మదైన ఇంటరాక్షన్ను మరియు దానికి కారణమైన ఎలిమెంట్ను లాగ్ (log) చేస్తుంది. ఇప్పుడు మీరు ఊహించడమే కాకుండా, అసలైన సమస్యలను పరిష్కరించవచ్చు.
మెయిన్ థ్రెడ్ (main thread) బిజీగా ఉన్నప్పుడు INP సమస్యలు వస్తాయి. ఒక JavaScript టాస్క్ పూర్తయ్యే వరకు బ్రౌజర్ రెస్పాన్స్ను పెయింట్ (paint) చేయలేదు. ఒక లాంగ్ టాస్క్ ఇంటరాక్షన్ను బ్లాక్ చేస్తుంది.
సాధారణ కారణాలు:
- ప్రతి క్లిక్పై ఎక్కువ పని చేసే హెవీ ఈవెంట్ హ్యాండ్లర్లు (Heavy event handlers).
- చాట్ విడ్జెట్లు లేదా అనలిటిక్స్ వంటి థర్డ్-పార్టీ స్క్రిప్ట్లు లాంగ్ టాస్క్లను రన్ చేయడం.
- లూప్లో DOMని రీడ్ మరియు రైట్ చేయడం వల్ల కలిగే లేఅవుట్ త్రాష్ (Layout thrash).
- ఫ్రేమ్వర్క్ హైడ్రేషన్ (Framework hydration) ప్రక్రియలు.
లాంగ్ టాస్క్లను విభజించడం ద్వారా మీరు దీనిని పరిష్కరించవచ్చు. బ్రౌజర్కు కొంచెం సమయం ఇవ్వండి.
async function onClick() {
doUrgentPart();
await yieldToMain();
doExpensivePart();
}
నెమ్మదైన పని ప్రారంభం కాకముందే రెస్పాన్స్ను పెయింట్ చేయడమే దీని లక్ష్యం.
తీసుకోవలసిన ఇతర చర్యలు:
- పేజీకి వెంటనే అవసరం లేని స్క్రిప్ట్లను డిఫర్ (Defer) చేయండి.
- థర్డ్-పార్టీ విడ్జెట్లను ఆడిట్ చేయండి.
- ఖరీదైన హ్యాండ్లర్లను డీబౌన్స్ (Debounce) చేయండి.
- మీ DOM రీడ్స్ మరియు రైట్స్ను బ్యాచ్ (Batch) చేయండి.
మీ ల్యాబ్ రిపోర్ట్ గ్రీన్ లో ఉన్నా, మీ రియల్ స్కోర్లు రెడ్ లో ఉంటే LCP వైపు చూడటం ఆపండి. వెళ్లి మీ ఇంటరాక్షన్లను కొలవండి.
Source: https://dev.to/lamas51/your-page-loads-fast-but-still-feels-slow-its-inp-not-load-time-2gkn