పెర్ఫార్మెన్స్ అబ్జర్వర్ API, రన్‌టైమ్ వెబ్ పనితీరును పర్యవేక్షించడానికి, కోర్ వెబ్ వైటల్స్‌ను ట్రాక్ చేయడానికి మరియు ప్రపంచవ్యాప్తంగా వినియోగదారు అనుభవాన్ని ఆప్టిమైజ్ చేయడానికి ఎలా సహాయపడుతుందో తెలుసుకోండి.
వెబ్ పనితీరును మెరుగుపరచడం: పెర్ఫార్మెన్స్ అబ్జర్వర్ API పై ఒక సమగ్ర పరిశీలన
నేటి వేగవంతమైన డిజిటల్ ప్రపంచంలో, వెబ్ పనితీరు అనేది ఒక విలాసం కాదు; అది ఒక అవసరం. నెమ్మదిగా లేదా స్పందించని వెబ్‌సైట్ వినియోగదారుల అసహనానికి, అధిక బౌన్స్ రేట్లకు, మరియు అమ్మకాలు, ప్రకటనల ఆదాయం, లేదా వినియోగదారుల ఎంగేజ్‌మెంట్ వంటి వ్యాపార లక్ష్యాలపై ప్రత్యక్ష ప్రతికూల ప్రభావానికి దారి తీస్తుంది. చాలా సంవత్సరాలుగా, డెవలపర్లు పేజీ లోడ్ అయ్యే సమయంలో ఒకేసారి పనితీరును కొలిచే సాధనాలపై ఆధారపడ్డారు. ఇది ఉపయోగకరంగా ఉన్నప్పటికీ, ఈ విధానం ఒక ముఖ్యమైన విషయాన్ని కోల్పోతుంది: వినియోగదారు పేజీతో ఇంటరాక్ట్ అయ్యే వారి పూర్తి అనుభవం. ఇక్కడే రన్‌టైమ్ పనితీరు పర్యవేక్షణ devreలోకి వస్తుంది, మరియు దీనికి అత్యంత శక్తివంతమైన సాధనం పెర్ఫార్మెన్స్ అబ్జర్వర్ API.
సాంప్రదాయ పద్ధతులలో తరచుగా performance.getEntries() వంటి ఫంక్షన్‌లతో పనితీరు డేటా కోసం పోలింగ్ ఉంటుంది. ఇది అసమర్థంగా ఉండవచ్చు, పోల్స్ మధ్య జరిగే కీలక ఈవెంట్‌లను కోల్పోయే అవకాశం ఉంది, మరియు అది కొలవడానికి ప్రయత్నిస్తున్న పనితీరుపై అదనపు భారాన్ని కూడా పెంచవచ్చు. పెర్ఫార్మెన్స్ అబ్జర్వర్ API పనితీరు ఈవెంట్‌లు జరిగినప్పుడు వాటికి సబ్‌స్క్రయిబ్ చేయడానికి అసమకాలిక, తక్కువ-ఓవర్‌హెడ్ మెకానిజంను అందించడం ద్వారా ఈ ప్రక్రియను విప్లవాత్మకంగా మారుస్తుంది. ఈ గైడ్ మిమ్మల్ని ఈ ముఖ్యమైన API లోకి లోతుగా తీసుకెళ్తుంది, కోర్ వెబ్ వైటల్స్‌ను పర్యవేక్షించడానికి, అడ్డంకులను గుర్తించడానికి, మరియు చివరికి ప్రపంచవ్యాప్తంగా ఉన్న వినియోగదారుల కోసం వేగవంతమైన, మరింత ఆనందదాయకమైన వెబ్ అనుభవాలను నిర్మించడానికి దాని శక్తిని ఎలా ఉపయోగించాలో చూపిస్తుంది.
పెర్ఫార్మెన్స్ అబ్జర్వర్ API అంటే ఏమిటి?
దాని మూలంలో, పెర్ఫార్మెన్స్ అబ్జర్వర్ API అనేది పెర్ఫార్మెన్స్ ఎంట్రీలుగా పిలవబడే పనితీరు కొలత ఈవెంట్‌లను పరిశీలించడానికి మరియు సేకరించడానికి ఒక మార్గాన్ని అందించే ఒక ఇంటర్‌ఫేస్. దీనిని బ్రౌజర్‌లో పనితీరు-సంబంధిత కార్యకలాపాల కోసం ఒక ప్రత్యేకమైన లిజనర్‌గా భావించండి. మీరు బ్రౌజర్‌ను చురుకుగా, "ఏమైనా జరిగిందా?" అని అడగడానికి బదులుగా, బ్రౌజర్ మీకు ముందుగానే, "ఒక కొత్త పనితీరు ఈవెంట్ ఇప్పుడే జరిగింది! ఇక్కడ వివరాలు ఉన్నాయి." అని చెబుతుంది.
ఇది ఒక అబ్జర్వర్ ప్యాటర్న్ ద్వారా సాధించబడుతుంది. మీరు ఒక అబ్జర్వర్ ఇన్‌స్టాన్స్‌ను సృష్టిస్తారు, మీకు ఏ రకమైన పనితీరు ఈవెంట్‌లపై ఆసక్తి ఉందో (ఉదా. లార్జ్ పెయింట్స్, యూజర్ ఇన్‌పుట్స్, లేఅవుట్ షిఫ్ట్స్) దానికి చెబుతారు, మరియు ఒక కాల్‌బ్యాక్ ఫంక్షన్‌ను అందిస్తారు. బ్రౌజర్ యొక్క పనితీరు టైమ్‌లైన్‌లో నిర్దిష్ట రకం యొక్క కొత్త ఈవెంట్ రికార్డ్ చేయబడినప్పుడల్లా, మీ కాల్‌బ్యాక్ ఫంక్షన్ కొత్త ఎంట్రీల జాబితాతో ప్రారంభించబడుతుంది. ఈ అసమకాలిక, పుష్-బేస్డ్ మోడల్ పదేపదే performance.getEntries() అని పిలిచే పాత పుల్-బేస్డ్ మోడల్ కంటే చాలా సమర్థవంతమైనది మరియు నమ్మదగినది.
పాత పద్ధతి వర్సెస్ కొత్త పద్ధతి
పెర్ఫార్మెన్స్ అబ్జర్వర్ యొక్క ఆవిష్కరణను అభినందించడానికి, రెండు విధానాలను పోల్చి చూద్దాం:
- పాత పద్ధతి (పోలింగ్): మీరు setTimeout లేదా requestAnimationFrame ఉపయోగించి మీ మెట్రిక్ రికార్డ్ చేయబడిందో లేదో చూడటానికి క్రమానుగతంగా performance.getEntriesByName('my-metric') ను కాల్ చేయవచ్చు. ఇది సమస్యాత్మకమైనది ఎందుకంటే మీరు చాలా ఆలస్యంగా తనిఖీ చేసి ఈవెంట్‌ను కోల్పోవచ్చు, లేదా చాలా తరచుగా తనిఖీ చేసి CPU సైకిళ్లను వృధా చేయవచ్చు. మీరు క్రమం తప్పకుండా ఎంట్రీలను క్లియర్ చేయకపోతే బ్రౌజర్ యొక్క పనితీరు బఫర్‌ను నింపే ప్రమాదం కూడా ఉంది.
- కొత్త పద్ధతి (అబ్జర్వింగ్): మీరు ఒకసారి ఒక PerformanceObserver ను సెటప్ చేస్తారు. ఇది నేపథ్యంలో నిశ్శబ్దంగా ఉండి, కనీస వనరులను వినియోగిస్తుంది. సంబంధిత పనితీరు ఎంట్రీ రికార్డ్ చేయబడిన వెంటనే—అది పేజీ లోడ్ అయిన ఒక మిల్లీసెకను తర్వాత అయినా లేదా యూజర్ సెషన్‌లో పది నిమిషాల తర్వాత అయినా—మీ కోడ్‌కు తక్షణమే తెలియజేయబడుతుంది. ఇది మీరు ఎప్పుడూ ఒక ఈవెంట్‌ను కోల్పోకుండా మరియు మీ పర్యవేక్షణ కోడ్ సాధ్యమైనంత సమర్థవంతంగా ఉండేలా నిర్ధారిస్తుంది.
మీరు పెర్ఫార్మెన్స్ అబ్జర్వర్‌ను ఎందుకు ఉపయోగించాలి
పెర్ఫార్మెన్స్ అబ్జర్వర్ APIని మీ డెవలప్‌మెంట్ వర్క్‌ఫ్లోలో ఏకీకృతం చేయడం వల్ల ఆధునిక వెబ్ అప్లికేషన్‌లకు అవసరమైన అనేక ప్రయోజనాలు లభిస్తాయి.
- అంతరాయం కలిగించని పర్యవేక్షణ: అబ్జర్వర్ యొక్క కాల్‌బ్యాక్ సాధారణంగా ఐడిల్ పీరియడ్స్‌లో అమలు చేయబడుతుంది, మీ పనితీరు పర్యవేక్షణ కోడ్ వినియోగదారు అనుభవానికి అంతరాయం కలిగించకుండా లేదా మెయిన్ థ్రెడ్‌ను బ్లాక్ చేయకుండా నిర్ధారిస్తుంది. ఇది తేలికగా మరియు చాలా తక్కువ పనితీరు ప్రభావం కలిగి ఉండేలా రూపొందించబడింది.
- సమగ్ర రన్‌టైమ్ డేటా: వెబ్ డైనమిక్‌గా ఉంటుంది. పనితీరు సమస్యలు లోడ్ సమయంలో మాత్రమే జరగవు. ఒక వినియోగదారు సంక్లిష్టమైన యానిమేషన్‌ను ట్రిగ్గర్ చేయవచ్చు, స్క్రోల్ చేయడం ద్వారా మరింత కంటెంట్‌ను లోడ్ చేయవచ్చు, లేదా ప్రారంభ పేజీ స్థిరపడిన చాలా కాలం తర్వాత భారీ కాంపోనెంట్‌తో ఇంటరాక్ట్ అవ్వవచ్చు. పెర్ఫార్మెన్స్ అబ్జర్వర్ ఈ రన్‌టైమ్ ఈవెంట్‌లను క్యాప్చర్ చేస్తుంది, మీకు పూర్తి యూజర్ సెషన్ యొక్క సంపూర్ణ చిత్రాన్ని అందిస్తుంది.
- ఫ్యూచర్-ప్రూఫ్ మరియు స్టాండర్డైజ్డ్: ఇది పనితీరు డేటాను సేకరించడానికి W3C సిఫార్సు చేసిన ప్రమాణం. కొత్త పనితీరు మెట్రిక్‌లు మరియు APIలు దీనితో కలిసిపోయేలా రూపొందించబడ్డాయి, ఇది మీ ప్రాజెక్ట్‌లకు స్థిరమైన మరియు భవిష్యత్తును దృష్టిలో ఉంచుకున్న ఎంపికగా చేస్తుంది.
- రియల్ యూజర్ మానిటరింగ్ (RUM) యొక్క పునాది: వివిధ దేశాలు, పరికరాలు, మరియు నెట్‌వర్క్ పరిస్థితులలో మీ సైట్ వినియోగదారులకు ఎలా పనిచేస్తుందో నిజంగా అర్థం చేసుకోవడానికి, మీకు నిజమైన సెషన్‌ల నుండి డేటా అవసరం. పెర్ఫార్మెన్స్ అబ్జర్వర్ ఒక బలమైన RUM పరిష్కారాన్ని నిర్మించడానికి అనువైన సాధనం, ఇది కీలక మెట్రిక్‌లను సేకరించి, వాటిని విశ్లేషణ మరియు సమగ్రత కోసం ఒక అనలిటిక్స్ సేవకు పంపడానికి మిమ్మల్ని అనుమతిస్తుంది.
- రేస్ కండిషన్లను తొలగిస్తుంది: పోలింగ్‌తో, మీరు ఒక పనితీరు ఎంట్రీ రికార్డ్ కాకముందే దాన్ని యాక్సెస్ చేయడానికి ప్రయత్నించవచ్చు. అబ్జర్వర్ మోడల్ ఈ రేస్ కండిషన్‌ను పూర్తిగా తొలగిస్తుంది, ఎందుకంటే మీ కోడ్ ఎంట్రీ అందుబాటులోకి వచ్చిన తర్వాత మాత్రమే రన్ అవుతుంది.
ప్రారంభించడం: పెర్ఫార్మెన్స్ అబ్జర్వర్ యొక్క ప్రాథమికాలు
APIని ఉపయోగించడం చాలా సులభం. ఈ ప్రక్రియలో మూడు ప్రధాన దశలు ఉంటాయి: ఒక అబ్జర్వర్‌ను సృష్టించడం, ఒక కాల్‌బ్యాక్‌ను నిర్వచించడం, మరియు అబ్జర్వర్‌కు ఏమి గమనించాలో చెప్పడం.
1. కాల్‌బ్యాక్‌తో ఒక అబ్జర్వర్‌ను సృష్టించడం
మొదట, మీరు ఒక PerformanceObserver ఆబ్జెక్ట్‌ను ఇన్‌స్టాన్షియేట్ చేస్తారు, దానికి ఒక కాల్‌బ్యాక్ ఫంక్షన్‌ను పాస్ చేస్తారు. కొత్త ఎంట్రీలు కనుగొనబడినప్పుడల్లా ఈ ఫంక్షన్ అమలు చేయబడుతుంది.
const observer = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log('Entry Type:', entry.entryType); console.log('Entry Name:', entry.name); console.log('Start Time:', entry.startTime); console.log('Duration:', entry.duration); } });
కాల్‌బ్యాక్ ఒక PerformanceObserverEntryList ఆబ్జెక్ట్‌ను అందుకుంటుంది. కొత్తగా గమనించిన అన్ని పెర్ఫార్మెన్స్ ఎంట్రీల శ్రేణిని పొందడానికి మీరు ఈ జాబితాలో getEntries() పద్ధతిని కాల్ చేయవచ్చు.
2. నిర్దిష్ట ఎంట్రీ రకాలను గమనించడం
మీరు ఏమి పర్యవేక్షించాలో చెప్పే వరకు ఒక అబ్జర్వర్ ఏమీ చేయదు. మీరు దీన్ని .observe() పద్ధతిని ఉపయోగించి చేస్తారు. ఈ పద్ధతి ఒక entryTypes ప్రాపర్టీతో (లేదా కొన్ని ఆధునిక సందర్భాలలో ఒకే రకం కోసం కేవలం type) ఒక ఆబ్జెక్ట్‌ను తీసుకుంటుంది, ఇది మీకు ఆసక్తి ఉన్న పెర్ఫార్మెన్స్ ఎంట్రీ రకాలను సూచించే స్ట్రింగ్‌ల శ్రేణి.
// Start observing two types of entries observer.observe({ entryTypes: ['mark', 'measure'] });
కొన్ని అత్యంత సాధారణ ఎంట్రీ రకాలు:
- 'resource': స్క్రిప్ట్‌లు, చిత్రాలు, మరియు స్టైల్‌షీట్‌ల వంటి ఆస్తుల కోసం నెట్‌వర్క్ అభ్యర్థనల గురించిన వివరాలు.
- 'paint': first-paint మరియు first-contentful-paint కోసం టైమింగ్.
- 'largest-contentful-paint': గ్రహించిన లోడింగ్ వేగం కోసం కోర్ వెబ్ వైటల్ మెట్రిక్.
- 'layout-shift': విజువల్ స్థిరత్వం కోసం కోర్ వెబ్ వైటల్ మెట్రిక్.
- 'first-input': ఫస్ట్ ఇన్‌పుట్ డిలే కోర్ వెబ్ వైటల్ కోసం ఉపయోగించే మొదటి యూజర్ ఇంటరాక్షన్ గురించిన సమాచారం.
- 'longtask': మెయిన్ థ్రెడ్‌లో 50 మిల్లీసెకన్ల కంటే ఎక్కువ సమయం తీసుకునే టాస్క్‌లను గుర్తిస్తుంది, ఇవి స్పందన లేకపోవడానికి కారణం కావచ్చు.
- 'mark' & 'measure': మీరు యూజర్ టైమింగ్ APIని ఉపయోగించి మీ స్వంత కోడ్‌లో నిర్వచించే కస్టమ్ మార్కర్‌లు మరియు కొలతలు.
3. అబ్జర్వర్‌ను ఆపడం
మీకు డేటా సేకరించడం ఇకపై అవసరం లేనప్పుడు, వనరులను ఖాళీ చేయడానికి అబ్జర్వర్‌ను డిస్‌కనెక్ట్ చేయడం మంచి పద్ధతి.
observer.disconnect();
ఆచరణాత్మక వినియోగ సందర్భాలు: కోర్ వెబ్ వైటల్స్‌ను పర్యవేక్షించడం
కోర్ వెబ్ వైటల్స్ అనేవి గూగుల్ ఒక వెబ్‌పేజీ యొక్క మొత్తం వినియోగదారు అనుభవంలో ముఖ్యమైనవిగా భావించే నిర్దిష్ట అంశాల సమితి. వాటిని పర్యవేక్షించడం పెర్ఫార్మెన్స్ అబ్జర్వర్ API యొక్క అత్యంత శక్తివంతమైన అనువర్తనాలలో ఒకటి. ప్రతిదాన్ని ఎలా కొలవాలో చూద్దాం.
లార్జెస్ట్ కంటెంట్‌ఫుల్ పెయింట్ (LCP) పర్యవేక్షణ
LCP లోడింగ్ పనితీరును కొలుస్తుంది. ఇది పేజీ లోడ్ టైమ్‌లైన్‌లో ప్రధాన కంటెంట్ లోడ్ అయిన సమయాన్ని సూచిస్తుంది. మంచి LCP స్కోరు 2.5 సెకన్లు లేదా అంతకంటే తక్కువ.
పేజీ లోడ్ అవుతున్నప్పుడు LCP ఎలిమెంట్ మారవచ్చు. మొదట, ఒక హెడ్డింగ్ LCP ఎలిమెంట్ కావచ్చు, కానీ తరువాత, ఒక పెద్ద చిత్రం లోడ్ అయి కొత్త LCP ఎలిమెంట్ కావచ్చు. అందుకే పెర్ఫార్మెన్స్ అబ్జర్వర్ సరైనది—ఇది ప్రతి సంభావ్య LCP అభ్యర్థిని రెండర్ అయినప్పుడు మీకు తెలియజేస్తుంది.
// Observe LCP and log the final value let lcpValue = 0; const lcpObserver = new PerformanceObserver((entryList) => { const entries = entryList.getEntries(); // The last entry is the most up-to-date LCP candidate const lastEntry = entries[entries.length - 1]; lcpValue = lastEntry.startTime; console.log(`LCP updated: ${lcpValue.toFixed(2)}ms`, lastEntry.element); }); lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true }); // It's good practice to disconnect the observer after the user interacts, // as interactions can stop new LCP candidates from being dispatched. // window.addEventListener('beforeunload', () => lcpObserver.disconnect());
buffered: true వాడకాన్ని గమనించండి. ఇది ఒక కీలకమైన ఆప్షన్, ఇది observe() పద్ధతిని పిలవక *ముందే* రికార్డ్ చేయబడిన ఎంట్రీలను చేర్చమని అబ్జర్వర్‌కు సూచిస్తుంది. ఇది మీరు ప్రారంభ LCP ఈవెంట్‌ను కోల్పోకుండా నివారిస్తుంది.
ఫస్ట్ ఇన్‌పుట్ డిలే (FID) మరియు ఇంటరాక్షన్ టు నెక్స్ట్ పెయింట్ (INP) పర్యవేక్షణ
ఈ మెట్రిక్‌లు ఇంటరాక్టివిటీని కొలుస్తాయి. వినియోగదారు పేజీతో మొదటిసారి ఇంటరాక్ట్ అవ్వడానికి ప్రయత్నించినప్పుడు వారి అనుభవాన్ని ఇవి పరిమాణీకరిస్తాయి.
ఫస్ట్ ఇన్‌పుట్ డిలే (FID) ఒక వినియోగదారు పేజీతో మొదటిసారి ఇంటరాక్ట్ అయినప్పటి నుండి (ఉదా. ఒక బటన్‌ను క్లిక్ చేయడం) బ్రౌజర్ ఆ ఇంటరాక్షన్‌కు ప్రతిస్పందనగా ఈవెంట్ హ్యాండ్లర్‌లను ప్రాసెస్ చేయడం ప్రారంభించగలిగే సమయం వరకు కొలుస్తుంది. మంచి FID 100 మిల్లీసెకన్లు లేదా అంతకంటే తక్కువ.
ఇంటరాక్షన్ టు నెక్స్ట్ పెయింట్ (INP) అనేది మార్చి 2024లో FID స్థానంలో కోర్ వెబ్ వైటల్‌గా మారిన ఒక కొత్త, మరింత సమగ్రమైన మెట్రిక్. FID కేవలం *మొదటి* ఇంటరాక్షన్ యొక్క *డిలే*ను మాత్రమే కొలుస్తుండగా, INP పేజీ యొక్క జీవిత చక్రం అంతటా *అన్ని* యూజర్ ఇంటరాక్షన్‌ల యొక్క *మొత్తం లేటెన్సీ*ని అంచనా వేస్తుంది, చెత్తదాన్ని నివేదిస్తుంది. ఇది మొత్తం స్పందన యొక్క మెరుగైన చిత్రాన్ని ఇస్తుంది. మంచి INP 200 మిల్లీసెకన్లు లేదా అంతకంటే తక్కువ.
మీరు 'first-input' ఎంట్రీ రకాన్ని ఉపయోగించి FIDని పర్యవేక్షించవచ్చు:
// Observe FID const fidObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { const fid = entry.processingStart - entry.startTime; console.log(`FID: ${fid.toFixed(2)}ms`); // Disconnect after the first input is reported fidObserver.disconnect(); } }); fidObserver.observe({ type: 'first-input', buffered: true });
INPని పర్యవేక్షించడం కొంచెం క్లిష్టంగా ఉంటుంది, ఎందుకంటే ఇది ఒక ఈవెంట్ యొక్క పూర్తి వ్యవధిని చూస్తుంది. మీరు 'event' ఎంట్రీ రకాన్ని గమనించి, వ్యవధిని లెక్కించి, అత్యంత పొడవైనదాన్ని ట్రాక్ చేస్తారు.
// Simplified INP monitoring example let worstInp = 0; const inpObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // The INP is the duration of the event const inp = entry.duration; // We only care about interactions longer than the current worst if (inp > worstInp) { worstInp = inp; console.log(`New worst INP: ${worstInp.toFixed(2)}ms`); } } }); inpObserver.observe({ type: 'event', durationThreshold: 16, buffered: true }); // durationThreshold helps filter out very short, likely insignificant events.
క్యుములేటివ్ లేఅవుట్ షిఫ్ట్ (CLS) పర్యవేక్షణ
CLS విజువల్ స్థిరత్వాన్ని కొలుస్తుంది. వినియోగదారులు ఎంత తరచుగా అనుకోని లేఅవుట్ మార్పులను అనుభవిస్తారో పరిమాణీకరించడానికి ఇది సహాయపడుతుంది—ఇది కంటెంట్ హెచ్చరిక లేకుండా పేజీలో కదలడం వలన కలిగే ఒక నిరాశాజనక అనుభవం. మంచి CLS స్కోరు 0.1 లేదా అంతకంటే తక్కువ.
స్కోరు అనేది అన్ని వ్యక్తిగత లేఅవుట్ షిఫ్ట్ స్కోర్‌ల సమూహం. ఇక్కడ పెర్ఫార్మెన్స్ అబ్జర్వర్ చాలా అవసరం, ఎందుకంటే ఇది ప్రతి షిఫ్ట్ జరిగినప్పుడు దాన్ని నివేదిస్తుంది.
// Observe and calculate the total CLS score let clsScore = 0; const clsObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // We don't want to count shifts that were caused by user input if (!entry.hadRecentInput) { clsScore += entry.value; console.log(`Current CLS score: ${clsScore.toFixed(4)}`); } } }); clsObserver.observe({ type: 'layout-shift', buffered: true });
hadRecentInput ప్రాపర్టీ చాలా ముఖ్యమైనది. ఇది యూజర్ చర్యకు ప్రతిస్పందనగా జరిగే సరైన లేఅవుట్ మార్పులను (ఒక బటన్‌ను క్లిక్ చేయడం వల్ల మెనూ విస్తరించడం వంటివి) ఫిల్టర్ చేయడానికి మీకు సహాయపడుతుంది, ఇవి CLS స్కోరుకు లెక్కించబడకూడదు.
కోర్ వెబ్ వైటల్స్‌కు మించి: ఇతర శక్తివంతమైన ఎంట్రీ రకాలు
కోర్ వెబ్ వైటల్స్ ఒక మంచి ప్రారంభ స్థానం అయినప్పటికీ, పెర్ఫార్మెన్స్ అబ్జర్వర్ ఇంకా చాలా వాటిని పర్యవేక్షించగలదు. ఇక్కడ కొన్ని ఇతర అత్యంత ఉపయోగకరమైన ఎంట్రీ రకాలు ఉన్నాయి.
లాంగ్ టాస్క్‌లను ట్రాక్ చేయడం (`longtask`)
లాంగ్ టాస్క్స్ API మెయిన్ థ్రెడ్‌ను 50 మిల్లీసెకన్లు లేదా అంతకంటే ఎక్కువ సేపు ఆక్రమించే టాస్క్‌లను బహిర్గతం చేస్తుంది. ఇవి సమస్యాత్మకమైనవి ఎందుకంటే మెయిన్ థ్రెడ్ బిజీగా ఉన్నప్పుడు, పేజీ యూజర్ ఇన్‌పుట్‌కు ప్రతిస్పందించలేదు, ఇది నెమ్మదిగా లేదా స్తంభించిన అనుభవానికి దారితీస్తుంది. ఈ టాస్క్‌లను గుర్తించడం INPని మెరుగుపరచడంలో కీలకం.
// Observe long tasks const longTaskObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log(`Long Task Detected: ${entry.duration.toFixed(2)}ms`); // The 'attribution' property can sometimes tell you what caused the long task console.log('Attribution:', entry.attribution); } }); longTaskObserver.observe({ type: 'longtask', buffered: true });
రిసోర్స్ టైమింగ్‌లను విశ్లేషించడం (`resource`)
మీ ఆస్తులు ఎలా లోడ్ అవుతున్నాయో అర్థం చేసుకోవడం పనితీరు ట్యూనింగ్‌కు ప్రాథమికం. 'resource' ఎంట్రీ రకం మీ పేజీలోని ప్రతి రిసోర్స్ కోసం DNS లుకప్, TCP కనెక్షన్, మరియు కంటెంట్ డౌన్‌లోడ్ సమయాలతో సహా వివరణాత్మక నెట్‌వర్క్ టైమింగ్ డేటాను మీకు అందిస్తుంది.
// Observe resource timings const resourceObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // Let's find slow-loading images if (entry.initiatorType === 'img' && entry.duration > 500) { console.warn(`Slow image detected: ${entry.name}`, `Duration: ${entry.duration.toFixed(2)}ms`); } } }); // Using 'buffered: true' is almost always necessary for resource timings // to catch assets that loaded before this script ran. resourceObserver.observe({ type: 'resource', buffered: true });
కస్టమ్ పెర్ఫార్మెన్స్ మార్కులను కొలవడం (`mark` మరియు `measure`)
కొన్నిసార్లు, మీరు అప్లికేషన్-నిర్దిష్ట లాజిక్ యొక్క పనితీరును కొలవవలసి ఉంటుంది. యూజర్ టైమింగ్ API కస్టమ్ టైమ్‌స్టాంప్‌లను సృష్టించడానికి మరియు వాటి మధ్య వ్యవధిని కొలవడానికి మిమ్మల్ని అనుమతిస్తుంది.
- performance.mark('start-operation'): 'start-operation' పేరుతో ఒక టైమ్‌స్టాంప్‌ను సృష్టిస్తుంది.
- performance.mark('end-operation'): మరొక టైమ్‌స్టాంప్‌ను సృష్టిస్తుంది.
- performance.measure('my-operation', 'start-operation', 'end-operation'): రెండు మార్కుల మధ్య ఒక కొలతను సృష్టిస్తుంది.
పెర్ఫార్మెన్స్ అబ్జర్వర్ ఈ కస్టమ్ 'mark' మరియు 'measure' ఎంట్రీలను వినగలదు, ఇది జావాస్క్రిప్ట్ ఫ్రేమ్‌వర్క్‌లో కాంపోనెంట్ రెండర్ సమయాలు లేదా ఒక కీలక API కాల్ మరియు తదుపరి డేటా ప్రాసెసింగ్ యొక్క వ్యవధి వంటి వాటిపై టైమింగ్ డేటాను సేకరించడానికి సరైనది.
// In your application code: performance.mark('start-data-processing'); // ... some complex data processing ... performance.mark('end-data-processing'); performance.measure('data-processing-duration', 'start-data-processing', 'end-data-processing'); // In your monitoring script: const customObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntriesByName('data-processing-duration')) { console.log(`Custom Measurement '${entry.name}': ${entry.duration.toFixed(2)}ms`); } }); customObserver.observe({ entryTypes: ['measure'] });
అధునాతన భావనలు మరియు ఉత్తమ పద్ధతులు
పెర్ఫార్మెన్స్ అబ్జర్వర్ APIని ఒక ప్రొఫెషనల్ ప్రొడక్షన్ వాతావరణంలో సమర్థవంతంగా ఉపయోగించడానికి, ఈ ఉత్తమ పద్ధతులను పరిగణించండి.
- ఎల్లప్పుడూ `buffered: true` ను పరిగణించండి: పేజీ లోడ్ ప్రారంభంలో సంభవించే ఎంట్రీ రకాలకు ('resource', 'paint', లేదా 'largest-contentful-paint' వంటివి) బఫర్డ్ ఫ్లాగ్‌ను ఉపయోగించడం వాటిని కోల్పోకుండా ఉండటానికి చాలా అవసరం.
- బ్రౌజర్ మద్దతు కోసం తనిఖీ చేయండి: ఆధునిక బ్రౌజర్‌లలో విస్తృతంగా మద్దతు ఉన్నప్పటికీ, దాన్ని ఉపయోగించే ముందు దాని ఉనికిని తనిఖీ చేయడం ఎల్లప్పుడూ తెలివైన పని. మీరు ఒక నిర్దిష్ట బ్రౌజర్ ద్వారా ఏ ఎంట్రీ రకాలు మద్దతు ఇస్తున్నాయో కూడా తనిఖీ చేయవచ్చు.
- if ('PerformanceObserver' in window && PerformanceObserver.supportedEntryTypes.includes('longtask')) { // Safe to use PerformanceObserver for long tasks }
- డేటాను ఒక అనలిటిక్స్ సేవకు పంపండి: కన్సోల్‌కు డేటాను లాగింగ్ చేయడం డెవలప్‌మెంట్ కోసం చాలా బాగుంటుంది, కానీ నిజ-ప్రపంచ పర్యవేక్షణ కోసం, మీరు ఈ డేటాను సమగ్రపరచాలి. క్లయింట్ నుండి ఈ టెలిమెట్రీని పంపడానికి ఉత్తమ మార్గం navigator.sendBeacon() APIని ఉపయోగించడం. ఇది ఒక సర్వర్‌కు చిన్న మొత్తంలో డేటాను పంపడానికి రూపొందించబడిన ఒక నాన్-బ్లాకింగ్ మెకానిజం, మరియు ఇది ఒక పేజీ అన్‌లోడ్ అవుతున్నప్పుడు కూడా విశ్వసనీయంగా పనిచేస్తుంది.
- అబ్జర్వర్‌లను ఆందోళనల వారీగా సమూహపరచండి: మీరు బహుళ ఎంట్రీ రకాల కోసం ఒకే అబ్జర్వర్‌ను ఉపయోగించగలిగినప్పటికీ, వివిధ ఆందోళనల కోసం (ఉదా. కోర్ వెబ్ వైటల్స్ కోసం ఒకటి, రిసోర్స్ టైమింగ్‌ల కోసం ఒకటి, కస్టమ్ మెట్రిక్‌ల కోసం ఒకటి) వేర్వేరు అబ్జర్వర్‌లను సృష్టించడం తరచుగా శుభ్రంగా ఉంటుంది. ఇది కోడ్ చదవడానికి మరియు నిర్వహించడానికి సులభతరం చేస్తుంది.
- పనితీరు ఓవర్‌హెడ్‌ను అర్థం చేసుకోండి: ఈ API చాలా తక్కువ-ఓవర్‌హెడ్‌తో ఉండేలా రూపొందించబడింది. అయితే, భారీ గణనలను చేసే చాలా సంక్లిష్టమైన కాల్‌బ్యాక్ ఫంక్షన్ పనితీరును ప్రభావితం చేసే అవకాశం ఉంది. మీ అబ్జర్వర్ కాల్‌బ్యాక్‌లను తేలికగా మరియు సమర్థవంతంగా ఉంచండి. ఏదైనా భారీ ప్రాసెసింగ్‌ను ఒక వెబ్ వర్కర్‌కు వాయిదా వేయండి లేదా ముడి డేటాను మీ బ్యాకెండ్‌కు ప్రాసెసింగ్ కోసం పంపండి.
ముగింపు: పనితీరు-ప్రధాన సంస్కృతిని నిర్మించడం
పెర్ఫార్మెన్స్ అబ్జర్వర్ API కేవలం మరొక సాధనం కాదు; ఇది మనం వెబ్ పనితీరును ఎలా సంప్రదిస్తామో అనే దానిలో ఒక ప్రాథమిక మార్పు. ఇది మనల్ని ప్రతిచర్య, ఒకేసారి కొలతల నుండి ప్రపంచవ్యాప్తంగా మన వినియోగదారుల యొక్క నిజమైన, డైనమిక్ అనుభవాన్ని ప్రతిబింబించే చురుకైన, నిరంతర పర్యవేక్షణకు తరలిస్తుంది. కోర్ వెబ్ వైటల్స్, లాంగ్ టాస్క్‌లు, రిసోర్స్ టైమింగ్‌లు, మరియు కస్టమ్ మెట్రిక్‌లను సంగ్రహించడానికి ఒక విశ్వసనీయమైన మరియు సమర్థవంతమైన మార్గాన్ని అందించడం ద్వారా, ఇది డెవలపర్‌లకు పనితీరు అడ్డంకులను గుర్తించి, అవి గణనీయమైన సంఖ్యలో వినియోగదారులను ప్రభావితం చేయడానికి ముందే వాటిని పరిష్కరించడానికి అధికారం ఇస్తుంది.
పెర్ఫార్మెన్స్ అబ్జర్వర్ APIని స్వీకరించడం అనేది ఏ డెవలప్‌మెంట్ బృందంలోనైనా పనితీరు-ప్రధాన సంస్కృతిని నిర్మించే దిశగా ఒక కీలకమైన అడుగు. మీరు ముఖ్యమైనదాన్ని కొలవగలిగినప్పుడు, మీరు ముఖ్యమైనదాన్ని మెరుగుపరచగలరు. ఈరోజు మీ ప్రాజెక్ట్‌లలో ఈ అబ్జర్వర్‌లను ఏకీకృతం చేయడం ప్రారంభించండి. మీ వినియోగదారులు—వారు ప్రపంచంలో ఎక్కడ ఉన్నా—మీరు అందించే వేగవంతమైన, సున్నితమైన, మరియు మరింత ఆనందదాయకమైన అనుభవం కోసం మీకు ధన్యవాదాలు తెలుపుతారు.