ప్రోయాక్టివ్ పైప్‌లైన్: గ్లోబల్ ఆడియన్స్ కోసం జావాస్క్రిప్ట్ పనితీరును ఆటోమేట్ చేయడం

డిజిటల్ ఆర్థిక వ్యవస్థలో, వేగం ఒక సార్వత్రిక భాష. టోక్యో, లండన్ లేదా సావో పాలోలోని ఒక వినియోగదారుకు ఒకే అంచనా ఉంటుంది: వేగవంతమైన, అతుకులు లేని డిజిటల్ అనుభవం. ఒక వెబ్ అప్లికేషన్ తడబడినప్పుడు, ఫ్రీజ్ అయినప్పుడు లేదా లోడ్ అవ్వడానికి సెకన్లు పట్టినప్పుడు, అది కేవలం అసౌకర్యం మాత్రమే కాదు; అది ఆ అంచనాను ఉల్లంఘించడమే. ఇది వినియోగదారుల ఎంగేజ్‌మెంట్, కన్వర్షన్ రేట్లు మరియు బ్రాండ్ ప్రతిష్టకు నిశ్శబ్ద హంతకుడు. సంవత్సరాలుగా, పనితీరు విశ్లేషణ ఒక ప్రతిచర్య క్రమశిక్షణగా ఉంది—వినియోగదారులు ఫిర్యాదు చేయడం ప్రారంభించిన తర్వాత క్రోమ్ డెవ్‌టూల్స్‌లోకి తీవ్రంగా పరిశీలించడం. నిరంతర విస్తరణ మరియు ప్రపంచవ్యాప్త వినియోగదారుల ప్రపంచంలో ఈ విధానం ఇకపై నిలకడగా ఉండదు.

ప్రోయాక్టివ్ పైప్‌లైన్‌కు స్వాగతం. ఇది మాన్యువల్, తాత్కాలిక పనితీరు తనిఖీల నుండి పర్యవేక్షణ మరియు అమలు యొక్క క్రమబద్ధమైన, ఆటోమేటెడ్ మరియు నిరంతర ప్రక్రియకు ఒక నమూనా మార్పు. ఇది యూనిట్ టెస్టింగ్ లేదా సెక్యూరిటీ స్కానింగ్ లాగానే, మీ డెవలప్‌మెంట్ జీవితచక్రంలో పనితీరును ఒక ప్రధాన సిద్ధాంతంగా పొందుపరచడం గురించి. జావాస్క్రిప్ట్ పనితీరు ప్రొఫైలింగ్‌ను ఆటోమేట్ చేయడం ద్వారా, మీరు రిగ్రెషన్‌లను ఉత్పత్తికి చేరకముందే పట్టుకోవచ్చు, డేటా ఆధారిత ఆప్టిమైజేషన్ నిర్ణయాలు తీసుకోవచ్చు మరియు ప్రతి వినియోగదారు, వారి స్థానం లేదా పరికరంతో సంబంధం లేకుండా, సాధ్యమైనంత ఉత్తమ అనుభవాన్ని పొందేలా చూసుకోవచ్చు.

ఈ సమగ్ర గైడ్ మీ స్వంత నిరంతర పనితీరు పర్యవేక్షణ పైప్‌లైన్‌ను నిర్మించడం యొక్క ఎందుకు, ఏమిటి మరియు ఎలా అనే దాని గురించి మీకు వివరిస్తుంది. మేము టూల్స్‌ను అన్వేషిస్తాము, ముఖ్యమైన మెట్రిక్‌లను నిర్వచిస్తాము మరియు ఈ తనిఖీలను నేరుగా మీ CI/CD వర్క్‌ఫ్లోలో ఎలా విలీనం చేయాలో ఆచరణాత్మక ఉదాహరణలను అందిస్తాము.

మాన్యువల్ ప్రొఫైలింగ్ నుండి ఆటోమేటెడ్ అంతర్దృష్టుల వరకు: ఒక అవసరమైన పరిణామం

చాలా మంది ఫ్రంట్-ఎండ్ డెవలపర్‌లకు వారి బ్రౌజర్ డెవలపర్ టూల్స్‌లోని పర్ఫార్మెన్స్ మరియు లైట్‌హౌస్ ట్యాబ్‌లు సుపరిచితమే. ఇవి ఒక నిర్దిష్ట పేజీలో సమస్యలను నిర్ధారించడానికి చాలా శక్తివంతమైన సాధనాలు. కానీ వాటిపై మాత్రమే ఆధారపడటం అంటే, సంవత్సరానికి ఒకసారి ఒకే ఒక్క సపోర్ట్ బీమ్‌ను తనిఖీ చేయడం ద్వారా ఆకాశహర్మ్యం యొక్క నిర్మాణ సమగ్రతను నిర్ధారించడానికి ప్రయత్నించడం లాంటిది.

మాన్యువల్ ప్రొఫైలింగ్ యొక్క పరిమితులు

• ఇది ప్రతిచర్యాత్మకం, ముందుజాగ్రత్త కాదు: మాన్యువల్ తనిఖీలు సాధారణంగా ఒక సమస్య ఇప్పటికే గుర్తించబడినప్పుడు జరుగుతాయి. మీరు మంటను ఆర్పుతున్నారు, నివారించడం లేదు. ఒక డెవలపర్ నెమ్మదిగా ఉన్న పనితీరును పరిశోధించడానికి డెవ్‌టూల్స్‌ను తెరిచే సమయానికి, మీ వినియోగదారులు ఇప్పటికే ఆ బాధను అనుభవించి ఉంటారు.
• ఇది స్థిరంగా ఉండదు: వేగవంతమైన ఆఫీస్ నెట్‌వర్క్‌కు కనెక్ట్ చేయబడిన హై-ఎండ్ డెవలప్‌మెంట్ మెషీన్‌లో మీరు పొందే ఫలితాలు, స్పాటీ కనెక్టివిటీ ఉన్న ప్రాంతంలో మధ్య-శ్రేణి మొబైల్ పరికరంలో వినియోగదారు అనుభవించే దానికంటే చాలా భిన్నంగా ఉంటాయి. మాన్యువల్ పరీక్షలకు నియంత్రిత, పునరావృత వాతావరణం ఉండదు.
• ఇది సమయం తీసుకుంటుంది మరియు స్కేలబుల్ కాదు: సమగ్ర పనితీరు ప్రొఫైలింగ్‌కు గణనీయమైన సమయం మరియు నైపుణ్యం అవసరం. ఒక అప్లికేషన్ సంక్లిష్టత మరియు బృందం పరిమాణంలో పెరిగేకొద్దీ, డెవలపర్లు ప్రతి ఒక్క కమిట్‌ను పనితీరు రిగ్రెషన్‌ల కోసం మాన్యువల్‌గా పరిశీలించడం అసాధ్యం అవుతుంది.
• ఇది జ్ఞాన సిలోలను సృష్టిస్తుంది: తరచుగా, బృందంలోని కొంతమంది 'పనితీరు ఛాంపియన్లు' మాత్రమే సంక్లిష్టమైన ఫ్లేమ్ చార్ట్‌లు మరియు ట్రేస్ ఫైల్‌లను అర్థం చేసుకునే లోతైన నైపుణ్యాన్ని కలిగి ఉంటారు, ఇది ఆప్టిమైజేషన్ ప్రయత్నాలకు అడ్డంకిని సృష్టిస్తుంది.

ఆటోమేషన్ మరియు నిరంతర పర్యవేక్షణ కోసం వాదన

పనితీరు ప్రొఫైలింగ్‌ను ఆటోమేట్ చేయడం వలన అది అప్పుడప్పుడు చేసే ఆడిట్ నుండి నిరంతర ఫీడ్‌బ్యాక్ లూప్‌గా మారుతుంది. ఈ విధానం, తరచుగా CI/CD సందర్భంలో "సింథటిక్ మానిటరింగ్" అని పిలువబడుతుంది, ఇది లోతైన ప్రయోజనాలను అందిస్తుంది.

• రిగ్రెషన్‌లను ముందుగానే పట్టుకోండి: ప్రతి కమిట్ లేదా పుల్ రిక్వెస్ట్‌పై పనితీరు పరీక్షలను అమలు చేయడం ద్వారా, మీరు నెమ్మదిగా పనితీరుకు కారణమైన ఖచ్చితమైన మార్పును వెంటనే గుర్తించవచ్చు. ఈ "షిఫ్ట్ లెఫ్ట్" విధానం సమస్యలను పరిష్కరించడాన్ని విపరీతంగా చౌకగా మరియు వేగంగా చేస్తుంది.
• పనితీరు బేస్‌లైన్‌ను ఏర్పాటు చేయండి: ఆటోమేషన్ మీ అప్లికేషన్ పనితీరు యొక్క చారిత్రక రికార్డును రూపొందించడానికి మిమ్మల్ని అనుమతిస్తుంది. ఈ ట్రెండ్ డేటా అభివృద్ధి యొక్క దీర్ఘకాలిక ప్రభావాన్ని అర్థం చేసుకోవడానికి మరియు టెక్నికల్ డెట్ గురించి సమాచారంతో కూడిన నిర్ణయాలు తీసుకోవడానికి అమూల్యమైనది.
• పనితీరు బడ్జెట్‌లను అమలు చేయండి: ఆటోమేషన్ ఒక "పనితీరు బడ్జెట్"—ఒక బిల్డ్ పాస్ అవ్వడానికి తప్పనిసరిగా పాటించాల్సిన కీలక మెట్రిక్‌ల కోసం నిర్దేశించిన పరిమితుల సమితిని—నిర్వచించడం మరియు అమలు చేయడం సాధ్యం చేస్తుంది. ఒక మార్పు లార్జెస్ట్ కంటెంట్‌ఫుల్ పెయింట్ (LCP)ని 20% నెమ్మదిగా చేస్తే, బిల్డ్ ఆటోమేటిక్‌గా ఫెయిల్ చేయబడుతుంది, తద్వారా రిగ్రెషన్‌ను విస్తరించకుండా నిరోధించవచ్చు.
• పనితీరును ప్రజాస్వామ్యీకరించండి: పనితీరు ఫీడ్‌బ్యాక్ డెవలపర్ యొక్క ప్రస్తుత వర్క్‌ఫ్లోలో (ఉదాహరణకు, పుల్ రిక్వెస్ట్‌పై ఒక వ్యాఖ్య) ఆటోమేటిక్‌గా డెలివరీ చేయబడినప్పుడు, అది ప్రతి ఇంజనీర్‌కు పనితీరుపై యాజమాన్యాన్ని తీసుకునేలా అధికారం ఇస్తుంది. ఇది ఇకపై ఒక స్పెషలిస్ట్ యొక్క ఏకైక బాధ్యత కాదు.

నిరంతర పనితీరు పర్యవేక్షణ యొక్క ప్రధాన భావనలు

టూల్స్‌లోకి ప్రవేశించే ముందు, ఏదైనా విజయవంతమైన పనితీరు పర్యవేక్షణ వ్యూహానికి పునాది అయిన ప్రాథమిక భావనలను అర్థం చేసుకోవడం చాలా అవసరం.

ట్రాక్ చేయవలసిన కీలక పనితీరు మెట్రిక్‌లు ("ఏమిటి")

మీరు కొలవని దాన్ని మీరు మెరుగుపరచలేరు. డజన్ల కొద్దీ సంభావ్య మెట్రిక్‌లు ఉన్నప్పటికీ, కొన్ని వినియోగదారు-కేంద్రీకృత వాటిపై దృష్టి పెట్టడం అత్యంత ప్రభావవంతమైన వ్యూహం. గూగుల్ యొక్క కోర్ వెబ్ వైటల్స్ ఒక అద్భుతమైన ప్రారంభ స్థానం, ఎందుకంటే అవి వాస్తవ-ప్రపంచ వినియోగదారు అనుభవాన్ని కొలవడానికి రూపొందించబడ్డాయి.

• లార్జెస్ట్ కంటెంట్‌ఫుల్ పెయింట్ (LCP): లోడింగ్ పనితీరును కొలుస్తుంది. ఇది పేజీ లోడ్ టైమ్‌లైన్‌లో ప్రధాన కంటెంట్ బహుశా లోడ్ అయిన సమయాన్ని సూచిస్తుంది. మంచి LCP 2.5 సెకన్లు లేదా అంతకంటే తక్కువ.
• ఇంటరాక్షన్ టు నెక్స్ట్ పెయింట్ (INP): ఇంటరాక్టివిటీని కొలుస్తుంది. INP ఒక పేజీ యొక్క వినియోగదారు ఇంటరాక్షన్‌లకు మొత్తం ప్రతిస్పందనను అంచనా వేస్తుంది. ఇది అన్ని క్లిక్‌లు, ట్యాప్‌లు మరియు కీబోర్డ్ ఇంటరాక్షన్‌ల జాప్యాన్ని గమనిస్తుంది. మంచి INP 200 మిల్లీసెకన్ల కంటే తక్కువ. (మార్చి 2024లో INP ఫస్ట్ ఇన్‌పుట్ డిలే (FID)ని కోర్ వెబ్ వైటల్‌గా భర్తీ చేసింది).
• క్యుములేటివ్ లేఅవుట్ షిఫ్ట్ (CLS): విజువల్ స్టెబిలిటీని కొలుస్తుంది. వినియోగదారులు ఎంత ఊహించని లేఅవుట్ షిఫ్ట్‌ను అనుభవిస్తారో ఇది లెక్కిస్తుంది. మంచి CLS స్కోర్ 0.1 లేదా అంతకంటే తక్కువ.

కోర్ వెబ్ వైటల్స్‌కు మించి, ఇతర కీలక మెట్రిక్‌లు:

• టైమ్ టు ఫస్ట్ బైట్ (TTFB): సర్వర్ ప్రతిస్పందన సమయాన్ని కొలుస్తుంది. ఇది ఒక పునాది మెట్రిక్ ఎందుకంటే నెమ్మదిగా ఉండే TTFB తదుపరి అన్ని మెట్రిక్‌లను ప్రతికూలంగా ప్రభావితం చేస్తుంది.
• ఫస్ట్ కంటెంట్‌ఫుల్ పెయింట్ (FCP): DOM కంటెంట్ యొక్క మొదటి భాగం రెండర్ అయిన సమయాన్ని సూచిస్తుంది. ఇది పేజీ వాస్తవానికి లోడ్ అవుతోందని వినియోగదారుకు మొదటి ఫీడ్‌బ్యాక్‌ను అందిస్తుంది.
• టోటల్ బ్లాకింగ్ టైమ్ (TBT): FCP మరియు టైమ్ టు ఇంటరాక్టివ్ (TTI) మధ్య మొత్తం సమయాన్ని కొలుస్తుంది, ఇక్కడ ప్రధాన థ్రెడ్ ఇన్‌పుట్ ప్రతిస్పందనను నిరోధించేంత సేపు బ్లాక్ చేయబడింది. ఇది INPతో బాగా సంబంధం ఉన్న గొప్ప ల్యాబ్ మెట్రిక్.

పనితీరు బడ్జెట్‌ను సెట్ చేయడం ("ఎందుకు")

ఒక పనితీరు బడ్జెట్ అనేది మీ బృందం పని చేయడానికి అంగీకరించే స్పష్టమైన పరిమితుల సమితి. ఇది కేవలం ఒక లక్ష్యం కాదు; ఇది ఒక కఠినమైన పరిమితి. ఒక బడ్జెట్ పనితీరును అస్పష్టమైన "దాన్ని వేగంగా చేద్దాం" అనే లక్ష్యం నుండి మీ అప్లికేషన్ కోసం ఒక ఖచ్చితమైన, కొలవగల అవసరంగా మారుస్తుంది.

ఒక సాధారణ పనితీరు బడ్జెట్ ఇలా ఉండవచ్చు:

• LCP 2.5 సెకన్ల లోపు ఉండాలి.
• TBT 200 మిల్లీసెకన్ల లోపు ఉండాలి.
• మొత్తం జావాస్క్రిప్ట్ బండిల్ పరిమాణం 250KB (జిజిప్ చేయబడినది) మించకూడదు.
• లైట్‌హౌస్ పనితీరు స్కోర్ 90 లేదా అంతకంటే ఎక్కువ ఉండాలి.

ఈ పరిమితులను నిర్వచించడం ద్వారా, మీ ఆటోమేటెడ్ పైప్‌లైన్‌కు స్పష్టమైన పాస్/ఫెయిల్ ప్రమాణం ఉంటుంది. ఒక పుల్ రిక్వెస్ట్ లైట్‌హౌస్ స్కోర్‌ను 85కి తగ్గించినట్లయితే, CI చెక్ ఫెయిల్ అవుతుంది మరియు కోడ్ విలీనం చేయబడక ముందే డెవలపర్‌కు వెంటనే తెలియజేయబడుతుంది.

పనితీరు పర్యవేక్షణ పైప్‌లైన్ ("ఎలా")

ఒక సాధారణ ఆటోమేటెడ్ పనితీరు పైప్‌లైన్ ఈ దశలను అనుసరిస్తుంది:

1. ట్రిగ్గర్: ఒక డెవలపర్ వెర్షన్ కంట్రోల్ సిస్టమ్‌కు (ఉదా., గిట్) కొత్త కోడ్‌ను కమిట్ చేస్తాడు.
2. బిల్డ్: CI/CD సర్వర్ (ఉదా., గిట్‌హబ్ యాక్షన్స్, జెంకిన్స్, గిట్‌ల్యాబ్ CI) కోడ్‌ను చెక్ అవుట్ చేసి అప్లికేషన్ బిల్డ్ ప్రక్రియను నడుపుతుంది.
3. విస్తరణ & పరీక్ష: అప్లికేషన్ ఒక తాత్కాలిక స్టేజింగ్ లేదా ప్రివ్యూ వాతావరణానికి విస్తరించబడుతుంది. అప్పుడు ఒక ఆటోమేటెడ్ టూల్ ఈ వాతావరణానికి వ్యతిరేకంగా పనితీరు పరీక్షల సూట్‌ను నడుపుతుంది.
4. విశ్లేషణ & ధృవీకరణ: టూల్ పనితీరు మెట్రిక్‌లను సేకరించి వాటిని ముందుగా నిర్వచించిన పనితీరు బడ్జెట్‌తో పోలుస్తుంది.
5. నివేదిక & చర్య: బడ్జెట్ పాటించినట్లయితే, చెక్ పాస్ అవుతుంది. లేకపోతే, బిల్డ్ ఫెయిల్ చేయబడుతుంది మరియు రిగ్రెషన్‌ను వివరించే వివరణాత్మక నివేదికతో బృందానికి ఒక హెచ్చరిక పంపబడుతుంది.

ఆటోమేటెడ్ జావాస్క్రిప్ట్ ప్రొఫైలింగ్ కోసం ఆధునిక టూల్కిట్

అనేక అద్భుతమైన ఓపెన్-సోర్స్ టూల్స్ ఆధునిక పనితీరు ఆటోమేషన్ యొక్క వెన్నెముకగా ఉన్నాయి. అత్యంత ప్రముఖమైన వాటిని అన్వేషిద్దాం.

ప్లేరైట్ మరియు పప్పెటీర్‌తో బ్రౌజర్ ఆటోమేషన్

ప్లేరైట్ (మైక్రోసాఫ్ట్ నుండి) మరియు పప్పెటీర్ (గూగుల్ నుండి) అనేవి హెడ్‌లెస్ క్రోమ్, ఫైర్‌ఫాక్స్ మరియు వెబ్‌కిట్ బ్రౌజర్‌లను నియంత్రించడానికి ఉన్నత-స్థాయి APIని అందించే Node.js లైబ్రరీలు. అవి తరచుగా ఎండ్-టు-ఎండ్ టెస్టింగ్ కోసం ఉపయోగించబడుతున్నప్పటికీ, పనితీరు ప్రొఫైలింగ్ కోసం కూడా అద్భుతమైనవి.

సంక్లిష్టమైన వినియోగదారు ఇంటరాక్షన్‌లను స్క్రిప్ట్ చేయడానికి మరియు డెవ్‌టూల్స్‌లో విశ్లేషించగల వివరణాత్మక పనితీరు ట్రేస్‌లను సేకరించడానికి మీరు వాటిని ఉపయోగించవచ్చు. ఇది కేవలం ప్రారంభ పేజీ లోడ్‌ను మాత్రమే కాకుండా, ఒక నిర్దిష్ట వినియోగదారు ప్రయాణం యొక్క పనితీరును కొలవడానికి పరిపూర్ణమైనది.

పనితీరు ట్రేస్ ఫైల్‌ను రూపొందించడానికి ప్లేరైట్‌ను ఉపయోగించి ఇక్కడ ఒక సాధారణ ఉదాహరణ ఉంది:

ఉదాహరణ: ప్లేరైట్‌తో ట్రేస్‌ను రూపొందించడం

• const { chromium } = require('playwright');
• (async () => {
• const browser = await chromium.launch({ headless: true });
• const page = await browser.newPage();
• // Start tracing, saving to a file.
• await page.tracing.start({ path: 'performance-trace.json', screenshots: true });
• await page.goto('https://your-app.com/dashboard');
• // Interact with the page to profile a specific action
• await page.click('button#load-data-button');
• await page.waitForSelector('.data-grid-loaded'); // Wait for the result
• // Stop tracing
• await page.tracing.stop();
• await browser.close();
• console.log('Performance trace saved to performance-trace.json');
• })();

మీరు అప్పుడు `performance-trace.json` ఫైల్‌ను క్రోమ్ డెవ్‌టూల్స్ పర్ఫార్మెన్స్ ప్యానెల్‌లోకి లోడ్ చేయవచ్చు, ఆ వినియోగదారు ఇంటరాక్షన్ సమయంలో ఏమి జరిగిందో ఫ్రేమ్-బై-ఫ్రేమ్ విశ్లేషణ కోసం. ఇది ఒక శక్తివంతమైన డయాగ్నస్టిక్ టూల్ అయినప్పటికీ, ఆటోమేటెడ్ ధృవీకరణ కోసం మాకు మరో లేయర్ అవసరం: లైట్‌హౌస్.

సమగ్ర ఆడిట్‌ల కోసం గూగుల్ లైట్‌హౌస్‌ను ఉపయోగించడం

లైట్‌హౌస్ అనేది వెబ్ పేజీ నాణ్యతను ఆడిట్ చేయడానికి పరిశ్రమ-ప్రమాణ ఓపెన్-సోర్స్ టూల్. ఇది ఒక పేజీకి వ్యతిరేకంగా అనేక పరీక్షలను నడుపుతుంది మరియు పనితీరు, యాక్సెసిబిలిటీ, ఉత్తమ పద్ధతులు మరియు SEOపై ఒక నివేదికను రూపొందిస్తుంది. మా పైప్‌లైన్ కోసం అత్యంత ముఖ్యమైన విషయం ఏమిటంటే, ఇది ప్రోగ్రామాటిక్‌గా నడపబడుతుంది మరియు పనితీరు బడ్జెట్‌లను అమలు చేయడానికి కాన్ఫిగర్ చేయబడుతుంది.

లైట్‌హౌస్‌ను CI/CD పైప్‌లైన్‌లో విలీనం చేయడానికి ఉత్తమ మార్గం లైట్‌హౌస్ CI. ఇది లైట్‌హౌస్‌ను నడపడం, బడ్జెట్‌లకు వ్యతిరేకంగా ఫలితాలను ధృవీకరించడం మరియు కాలక్రమేణా స్కోర్‌లను ట్రాక్ చేయడాన్ని సులభతరం చేసే టూల్స్ యొక్క సూట్.

ప్రారంభించడానికి, మీరు మీ ప్రాజెక్ట్ యొక్క రూట్‌లో `lighthouserc.js` అనే కాన్ఫిగరేషన్ ఫైల్‌ను సృష్టిస్తారు:

ఉదాహరణ: lighthouserc.js కాన్ఫిగరేషన్

• module.exports = {
• ci: {
• collect: {
• // ఎంపిక 1: ప్రత్యక్ష URLకి వ్యతిరేకంగా అమలు చేయండి
• // url: ['https://staging.your-app.com'],
• // ఎంపిక 2: స్థానికంగా సర్వ్ చేయబడిన బిల్డ్ అవుట్‌పుట్‌కి వ్యతిరేకంగా అమలు చేయండి
• staticDistDir: './build',
• startServerCommand: 'npm run start:static',
• },
• assert: {
• preset: 'lighthouse:recommended', // సున్నితమైన డీఫాల్ట్‌లతో ప్రారంభించండి
• assertions: {
• // కస్టమ్ ధృవీకరణలు (మీ పనితీరు బడ్జెట్)
• 'categories:performance': ['error', { minScore: 0.9 }], // స్కోర్ >= 90 ఉండాలి
• 'categories:accessibility': ['warn', { minScore: 0.95 }], // స్కోర్ >= 95 ఉండాలి
• 'core-web-vitals/largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
• 'core-web-vitals/total-blocking-time': ['error', { maxNumericValue: 200 }],
• },
• },
• upload: {
• target: 'temporary-public-storage', // ప్రారంభించడానికి సులభమైన మార్గం
• },
• },
• };

ఈ కాన్ఫిగరేషన్‌తో, మీరు మీ కమాండ్ లైన్ లేదా CI స్క్రిప్ట్ నుండి `lhci autorun` ను నడపవచ్చు. ఇది మీ సర్వర్‌ను ఆటోమేటిక్‌గా ప్రారంభిస్తుంది, స్థిరత్వం కోసం లైట్‌హౌస్‌ను చాలాసార్లు నడుపుతుంది, మీ ధృవీకరణలకు వ్యతిరేకంగా ఫలితాలను తనిఖీ చేస్తుంది మరియు బడ్జెట్ పాటించకపోతే ఫెయిల్ అవుతుంది.

సింథటిక్ మానిటరింగ్ వర్సెస్ రియల్ యూజర్ మానిటరింగ్ (RUM)

పనితీరు పర్యవేక్షణ యొక్క రెండు ప్రధాన రకాల మధ్య వ్యత్యాసాన్ని అర్థం చేసుకోవడం చాలా ముఖ్యం.

• సింథటిక్ మానిటరింగ్ (ల్యాబ్ డేటా): ఇది మనం చర్చిస్తున్నది—నియంత్రిత, స్థిరమైన వాతావరణంలో ("ల్యాబ్") ఆటోమేటెడ్ పరీక్షలను నడపడం. ఇది CI/CD కోసం పరిపూర్ణమైనది ఎందుకంటే ఇది మీ కోడ్ మార్పుల ప్రభావాన్ని వేరు చేస్తుంది. మీరు నెట్‌వర్క్ వేగం, పరికర రకం మరియు స్థానాన్ని నియంత్రిస్తారు. దీని బలం స్థిరత్వం మరియు రిగ్రెషన్ గుర్తింపు.
• రియల్ యూజర్ మానిటరింగ్ (RUM) (ఫీల్డ్ డేటా): ఇది ప్రపంచవ్యాప్తంగా మీ వినియోగదారుల వాస్తవ బ్రౌజర్‌ల నుండి ("ఫీల్డ్") పనితీరు డేటాను సేకరించడం. RUM టూల్స్ (సెంటిరీ, డేటాడాగ్ లేదా న్యూ రెలిక్ వంటివి) మీ సైట్‌లో ఒక చిన్న జావాస్క్రిప్ట్ స్నిప్పెట్‌ను ఉపయోగించి కోర్ వెబ్ వైటల్స్ మరియు ఇతర మెట్రిక్‌లను వాస్తవ వ్యక్తులు అనుభవించే విధంగా నివేదిస్తాయి. దీని బలం అసంఖ్యాక పరికర మరియు నెట్‌వర్క్ కలయికలలో ప్రపంచ వినియోగదారు అనుభవం యొక్క నిజమైన చిత్రాన్ని అందించడం.

ఈ రెండూ పరస్పరం ప్రత్యేకమైనవి కావు; అవి పూరకాలు. రిగ్రెషన్‌లను ఎప్పుడూ విస్తరించకుండా నిరోధించడానికి మీ CI/CD పైప్‌లైన్‌లో సింథటిక్ మానిటరింగ్‌ను ఉపయోగించండి. మీ వాస్తవ వినియోగదారుల అనుభవాన్ని అర్థం చేసుకోవడానికి మరియు మీ ల్యాబ్ పరీక్షలు తప్పిపోయే మెరుగుదల ప్రాంతాలను గుర్తించడానికి ఉత్పత్తిలో RUMను ఉపయోగించండి.

మీ CI/CD పైప్‌లైన్‌లో పనితీరు ప్రొఫైలింగ్‌ను విలీనం చేయడం

సిద్ధాంతం గొప్పది, కానీ ఆచరణాత్మక అమలు ముఖ్యం. గిట్‌హబ్ యాక్షన్స్ వర్క్‌ఫ్లోలో లైట్‌హౌస్ CIని ఉపయోగించి ఒక సాధారణ పనితీరు తనిఖీని నిర్మిద్దాం.

గిట్‌హబ్ యాక్షన్‌లతో ఒక ఆచరణాత్మక ఉదాహరణ

ఈ వర్క్‌ఫ్లో ప్రతి పుల్ రిక్వెస్ట్‌పై నడుస్తుంది. ఇది అప్లికేషన్‌ను బిల్డ్ చేస్తుంది, దానికి వ్యతిరేకంగా లైట్‌హౌస్ CIని నడుపుతుంది మరియు ఫలితాలను పుల్ రిక్వెస్ట్‌పై ఒక వ్యాఖ్యగా పోస్ట్ చేస్తుంది.

`.github/workflows/performance-ci.yml` వద్ద ఒక ఫైల్‌ను సృష్టించండి:

ఉదాహరణ: .github/workflows/performance-ci.yml

• name: Performance CI
• on: [pull_request]
• jobs:
• lighthouse:
• runs-on: ubuntu-latest
• steps:
• - uses: actions/checkout@v3
• - name: Use Node.js 20.x
• uses: actions/setup-node@v3
• with:
• node-version: '20.x'
• cache: 'npm'
• - name: Install dependencies
• run: npm ci
• - name: Build production assets
• run: npm run build
• - name: Run Lighthouse CI
• run: |
• npm install -g @lhci/cli@0.12.x
• lhci autorun
• env:
• LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

ఇది పని చేయడానికి, మీకు రెండు విషయాలు అవసరం:

1. మునుపటి విభాగంలో చూపిన విధంగా, మీ రిపోజిటరీలో ఒక `lighthouserc.js` ఫైల్.
2. మీ రిపోజిటరీలో లైట్‌హౌస్ CI గిట్‌హబ్ యాప్ ఇన్‌స్టాల్ చేయబడి ఉండాలి. ఇది లైట్‌హౌస్ CIకి వ్యాఖ్యలు మరియు స్థితి తనిఖీలను పోస్ట్ చేయడానికి అనుమతిస్తుంది. మీరు ఇన్‌స్టాలేషన్ సమయంలో ఒక టోకెన్ (`LHCI_GITHUB_APP_TOKEN`) పొందుతారు, దానిని మీరు మీ గిట్‌హబ్ రిపోజిటరీ సెట్టింగ్స్‌లో ఒక సీక్రెట్‌గా సేవ్ చేయాలి.

ఇప్పుడు, ఒక డెవలపర్ పుల్ రిక్వెస్ట్‌ను తెరిచినప్పుడు, ఒక స్థితి తనిఖీ కనిపిస్తుంది. పనితీరు బడ్జెట్ ఫెయిల్ అయితే, చెక్ ఎర్రగా ఉంటుంది. లైట్‌హౌస్ స్కోర్‌లతో ఒక వివరణాత్మక వ్యాఖ్య పోస్ట్ చేయబడుతుంది, ఏ మెట్రిక్‌లు రిగ్రెస్ అయ్యాయో ఖచ్చితంగా చూపిస్తుంది.

పనితీరు డేటాను నిల్వ చేయడం మరియు విజువలైజ్ చేయడం

`temporary-public-storage` ప్రారంభించడానికి గొప్పది అయినప్పటికీ, దీర్ఘకాలిక విశ్లేషణ కోసం, మీరు మీ లైట్‌హౌస్ నివేదికలను నిల్వ చేయాలనుకుంటారు. లైట్‌హౌస్ CI సర్వర్ అనేది మీరు స్వయంగా హోస్ట్ చేసుకోగల ఒక ఉచిత, ఓపెన్-సోర్స్ పరిష్కారం. ఇది కాలక్రమేణా పనితీరు ట్రెండ్‌లను విజువలైజ్ చేయడానికి, బ్రాంచ్‌ల మధ్య నివేదికలను పోల్చడానికి మరియు ఒకే రన్‌లో తప్పిపోయే క్రమంగా పనితీరు క్షీణతను గుర్తించడానికి ఒక డాష్‌బోర్డ్‌ను అందిస్తుంది.

మీ స్వంత సర్వర్‌కు అప్‌లోడ్ చేయడానికి మీ `lighthouserc.js`ను కాన్ఫిగర్ చేయడం సూటిగా ఉంటుంది. ఈ చారిత్రక డేటా మీ పైప్‌లైన్‌ను ఒక సాధారణ గేట్‌కీపర్ నుండి శక్తివంతమైన విశ్లేషణ టూల్‌గా మారుస్తుంది.

హెచ్చరిక మరియు నివేదిక

పజిల్ యొక్క చివరి భాగం సమర్థవంతమైన కమ్యూనికేషన్. ఒక విఫలమైన బిల్డ్ సరైన వ్యక్తులకు వెంటనే తెలియజేయబడినప్పుడు మాత్రమే ఉపయోగపడుతుంది. గిట్‌హబ్ స్థితి తనిఖీలకు మించి, మీ బృందం యొక్క ప్రాథమిక కమ్యూనికేషన్ ఛానెల్‌లో, స్లాక్ లేదా మైక్రోసాఫ్ట్ టీమ్స్ వంటి వాటిలో హెచ్చరికలను సెటప్ చేయడాన్ని పరిగణించండి. ఒక మంచి హెచ్చరికలో ఇవి ఉండాలి:

• విఫలమైన నిర్దిష్ట పుల్ రిక్వెస్ట్ లేదా కమిట్.
• ఏ పనితీరు మెట్రిక్(లు) బడ్జెట్‌ను ఎంత ఉల్లంఘించాయి.
• లోతైన విశ్లేషణ కోసం పూర్తి లైట్‌హౌస్ నివేదికకు ప్రత్యక్ష లింక్.

అధునాతన వ్యూహాలు మరియు ప్రపంచవ్యాప్త పరిశీలనలు

మీరు ఒక ప్రాథమిక పైప్‌లైన్‌ను ఏర్పాటు చేసుకున్న తర్వాత, మీ గ్లోబల్ యూజర్ బేస్‌ను మరింత మెరుగ్గా ప్రతిబింబించేలా దాన్ని మెరుగుపరచవచ్చు.

విభిన్న నెట్‌వర్క్ మరియు CPU పరిస్థితులను అనుకరించడం

మీ వినియోగదారులందరూ ఫైబర్ ఆప్టిక్ కనెక్షన్‌లు మరియు హై-ఎండ్ ప్రాసెసర్‌లతో లేరు. మరింత వాస్తవిక పరిస్థితులలో పరీక్షించడం చాలా ముఖ్యం. లైట్‌హౌస్‌లో అంతర్నిర్మిత థ్రోట్లింగ్ ఉంది, ఇది డిఫాల్ట్‌గా నెమ్మదిగా ఉండే నెట్‌వర్క్ మరియు CPUను అనుకరిస్తుంది (4G కనెక్షన్‌లో మధ్య-శ్రేణి మొబైల్ పరికరాన్ని అనుకరిస్తుంది).

తక్కువ అభివృద్ధి చెందిన ఇంటర్నెట్ మౌలిక సదుపాయాలు ఉన్న మార్కెట్లలోని కస్టమర్లకు మీ అప్లికేషన్ ఉపయోగపడేలా ఉండేందుకు, మీరు ఈ సెట్టింగ్‌లను మీ లైట్‌హౌస్ కాన్ఫిగరేషన్‌లో అనుకూలీకరించవచ్చు.

నిర్దిష్ట వినియోగదారు ప్రయాణాలను ప్రొఫైలింగ్ చేయడం

ప్రారంభ పేజీ లోడ్ వినియోగదారు అనుభవంలో కేవలం ఒక భాగం మాత్రమే. కార్ట్‌కు ఒక వస్తువును జోడించడం, సెర్చ్ ఫిల్టర్‌ను ఉపయోగించడం లేదా ఫారమ్‌ను సమర్పించడం వంటి వాటి పనితీరు గురించి ఏమిటి? ఈ కీలకమైన ఇంటరాక్షన్‌లను ప్రొఫైల్ చేయడానికి మీరు ప్లేరైట్ మరియు లైట్‌హౌస్ యొక్క శక్తిని కలపవచ్చు.

ఒక సాధారణ నమూనా ఏమిటంటే, అప్లికేషన్‌ను ఒక నిర్దిష్ట స్థితికి (ఉదా., లాగిన్ అవ్వడం, కార్ట్‌కు వస్తువులను జోడించడం) నావిగేట్ చేయడానికి ఒక ప్లేరైట్ స్క్రిప్ట్‌ను ఉపయోగించడం మరియు ఆ పేజీ స్థితిలో దాని ఆడిట్‌ను నడపడానికి లైట్‌హౌస్‌కు నియంత్రణను అప్పగించడం. ఇది మీ అప్లికేషన్ యొక్క పనితీరుపై మరింత సమగ్రమైన వీక్షణను అందిస్తుంది.

ముగింపు: పనితీరు సంస్కృతిని నిర్మించడం

జావాస్క్రిప్ట్ పనితీరు పర్యవేక్షణను ఆటోమేట్ చేయడం కేవలం టూల్స్ మరియు స్క్రిప్ట్‌ల గురించి మాత్రమే కాదు; ఇది పనితీరును ఒక భాగస్వామ్య బాధ్యతగా ప్రోత్సహించే సంస్కృతిని పెంపొందించడం గురించి. పనితీరును ఒక ఫస్ట్-క్లాస్ ఫీచర్‌గా, కొలవగలిగేదిగా మరియు చర్చించలేనిదిగా పరిగణించినప్పుడు, అది అభివృద్ధి ప్రక్రియలో ఒక అంతర్భాగంగా మారుతుంది, కానీ ఒక పునరాలోచన కాదు.

ఒక ప్రతిచర్యాత్మక, మాన్యువల్ విధానం నుండి ఒక చురుకైన, ఆటోమేటెడ్ పైప్‌లైన్‌కు మారడం ద్వారా, మీరు అనేక కీలకమైన వ్యాపార లక్ష్యాలను సాధిస్తారు:

• వినియోగదారు అనుభవాన్ని రక్షించండి: మీరు పనితీరు రిగ్రెషన్‌లు మీ వినియోగదారులను ప్రభావితం చేయకుండా నిరోధించే ఒక భద్రతా వలయాన్ని సృష్టిస్తారు.
• డెవలప్‌మెంట్ వేగాన్ని పెంచండి: తక్షణ ఫీడ్‌బ్యాక్ అందించడం ద్వారా, మీరు డెవలపర్‌లకు సమస్యలను త్వరగా మరియు విశ్వాసంతో పరిష్కరించడానికి అధికారం ఇస్తారు, సుదీర్ఘమైన, బాధాకరమైన ఆప్టిమైజేషన్ సైకిళ్లను తగ్గిస్తారు.
• డేటా-ఆధారిత నిర్ణయాలు తీసుకోండి: మీరు నిర్మాణ నిర్ణయాలకు మార్గనిర్దేశం చేయగల మరియు ఆప్టిమైజేషన్‌లో పెట్టుబడులను సమర్థించగల పనితీరు ట్రెండ్‌ల యొక్క గొప్ప డేటాసెట్‌ను నిర్మిస్తారు.

ప్రయాణం చిన్నగా మొదలవుతుంది. మీ ప్రధాన బ్రాంచ్‌కు ఒక సాధారణ లైట్‌హౌస్ CI చెక్‌ను జోడించడం ద్వారా ప్రారంభించండి. ఒక సంప్రదాయవాద పనితీరు బడ్జెట్‌ను సెట్ చేయండి. మీ బృందం ఫీడ్‌బ్యాక్‌తో సౌకర్యవంతంగా మారినప్పుడు, మీ కవరేజీని పుల్ రిక్వెస్ట్‌లకు విస్తరించండి, మరింత సూక్ష్మమైన మెట్రిక్‌లను పరిచయం చేయండి మరియు కీలకమైన వినియోగదారు ప్రయాణాలను ప్రొఫైలింగ్ చేయడం ప్రారంభించండి. పనితీరు ఒక నిరంతర ప్రయాణం, గమ్యం కాదు. ఒక చురుకైన పైప్‌లైన్‌ను నిర్మించడం ద్వారా, మీరు షిప్ చేసే ప్రతి కోడ్ లైన్ మీ వినియోగదారుల అత్యంత విలువైన ఆస్తిని గౌరవిస్తుందని మీరు నిర్ధారించుకుంటారు: వారి సమయం.