वेब परफॉर्मन्स अनलॉक करणे: परफॉर्मन्स ऑब्झर्व्हर API चा सखोल अभ्यास

आजच्या वेगवान डिजिटल जगात, वेब परफॉर्मन्स ही एक चैनीची गोष्ट नसून ती एक गरज आहे. एक हळू किंवा प्रतिसाद न देणारी वेबसाइट वापरकर्त्याच्या निराशेला, उच्च बाऊन्स रेटला आणि व्यवसायाच्या उद्दिष्टांवर थेट नकारात्मक परिणामाला कारणीभूत ठरू शकते, मग ते विक्री, जाहिरात महसूल किंवा वापरकर्ता प्रतिबद्धता असो. अनेक वर्षांपासून, डेव्हलपर्स अशा साधनांवर अवलंबून आहेत जे एका विशिष्ट वेळी परफॉर्मन्स मोजतात, विशेषतः सुरुवातीच्या पेज लोड दरम्यान. हे उपयुक्त असले तरी, या दृष्टिकोनातून एक महत्त्वाचा भाग सुटतो: वापरकर्त्याचा पेजशी संवाद साधतानाचा संपूर्ण अनुभव. इथेच रनटाइम परफॉर्मन्स मॉनिटरिंगची गरज भासते, आणि त्याचे सर्वात शक्तिशाली साधन म्हणजे परफॉर्मन्स ऑब्झर्व्हर API.

पारंपारिक पद्धतींमध्ये अनेकदा performance.getEntries() सारख्या फंक्शन्सद्वारे परफॉर्मन्स डेटासाठी पोलिंग (polling) करणे समाविष्ट असते. हे अकार्यक्षम असू शकते, पोल्सच्या दरम्यान घडणाऱ्या महत्त्वाच्या घटना चुकण्याची शक्यता असते आणि ते ज्या परफॉर्मन्स ओव्हरहेडचे मोजमाप करण्याचा प्रयत्न करत आहे त्यात भर घालू शकते. परफॉर्मन्स ऑब्झर्व्हर API ही प्रक्रिया क्रांतीकारक बनवते, कारण ते परफॉर्मन्स इव्हेंट्स घडताच त्यांचे सदस्यत्व घेण्यासाठी एक असिंक्रोनस, कमी-ओव्हरहेड यंत्रणा प्रदान करते. हे मार्गदर्शक तुम्हाला या आवश्यक API चा सखोल अभ्यास करवेल, आणि कोअर वेब व्हायटल्सचे निरीक्षण करण्यासाठी, अडथळे ओळखण्यासाठी आणि शेवटी जागतिक प्रेक्षकांसाठी जलद, अधिक आनंददायक वेब अनुभव तयार करण्यासाठी त्याची शक्ती कशी वापरायची हे दाखवेल.

परफॉर्मन्स ऑब्झर्व्हर API म्हणजे काय?

मूलतः, परफॉर्मन्स ऑब्झर्व्हर API एक इंटरफेस आहे जो परफॉर्मन्स मापन इव्हेंट्स, ज्यांना परफॉर्मन्स एंट्रीज म्हणून ओळखले जाते, त्यांचे निरीक्षण आणि संकलन करण्याचा एक मार्ग प्रदान करतो. याला ब्राउझरमधील परफॉर्मन्स-संबंधित क्रियाकलापांसाठी एक समर्पित श्रोता (listener) समजा. तुम्ही ब्राउझरला सक्रियपणे विचारण्याऐवजी, "अजून काही घडले आहे का?", ब्राउझर तुम्हाला सक्रियपणे सांगतो, "एक नवीन परफॉर्मन्स इव्हेंट नुकताच घडला आहे! येथे तपशील आहेत."

हे एका ऑब्झर्व्हर पॅटर्नद्वारे साध्य केले जाते. तुम्ही एक ऑब्झर्व्हर इन्स्टन्स तयार करता, त्याला सांगता की तुम्हाला कोणत्या प्रकारच्या परफॉर्मन्स इव्हेंट्समध्ये रस आहे (उदा. मोठे पेंट्स, वापरकर्ता इनपुट, लेआउट शिफ्ट्स), आणि एक कॉलबॅक फंक्शन प्रदान करता. जेव्हा जेव्हा ब्राउझरच्या परफॉर्मन्स टाइमलाइनमध्ये निर्दिष्ट प्रकारचा नवीन इव्हेंट रेकॉर्ड केला जातो, तेव्हा तुमचे कॉलबॅक फंक्शन नवीन एंट्रीजच्या सूचीसह बोलावले जाते. हा असिंक्रोनस, पुश-आधारित मॉडेल जुन्या पुल-आधारित मॉडेलपेक्षा, म्हणजेच वारंवार performance.getEntries() कॉल करण्यापेक्षा, खूपच कार्यक्षम आणि विश्वसनीय आहे.

जुनी पद्धत विरुद्ध नवीन पद्धत

परफॉर्मन्स ऑब्झर्व्हरच्या नावीन्यपूर्णतेची प्रशंसा करण्यासाठी, दोन्ही दृष्टिकोनांची तुलना करूया:

• जुनी पद्धत (पोलिंग): तुमचे मेट्रिक रेकॉर्ड झाले आहे की नाही हे पाहण्यासाठी तुम्ही setTimeout किंवा requestAnimationFrame वापरून ठराविक कालावधीने performance.getEntriesByName('my-metric') कॉल करू शकता. हे समस्याप्रधान आहे कारण तुम्ही कदाचित खूप उशिरा तपासू शकता आणि इव्हेंट चुकवू शकता, किंवा खूप वारंवार तपासून CPU सायकल वाया घालवू शकता. तसेच, जर तुम्ही नियमितपणे एंट्रीज साफ केल्या नाहीत तर ब्राउझरचे परफॉर्मन्स बफर भरण्याचा धोका असतो.
• नवीन पद्धत (ऑब्झर्विंग): तुम्ही एकदाच PerformanceObserver सेट करता. ते शांतपणे पार्श्वभूमीवर काम करते, आणि कमी संसाधने वापरते. पेज लोड झाल्यानंतर एक मिलिसेकंदात किंवा वापरकर्त्याच्या सत्रात दहा मिनिटांनी एखादी संबंधित परफॉर्मन्स एंट्री रेकॉर्ड होताच, तुमच्या कोडला त्वरित सूचित केले जाते. यामुळे तुम्ही कधीही एखादा इव्हेंट चुकवत नाही आणि तुमचा मॉनिटरिंग कोड शक्य तितका कार्यक्षम असतो हे सुनिश्चित होते.

तुम्ही परफॉर्मन्स ऑब्झर्व्हर का वापरावे?

परफॉर्मन्स ऑब्झर्व्हर API ला तुमच्या डेव्हलपमेंट वर्कफ्लोमध्ये समाकलित केल्याने अनेक फायदे मिळतात जे जागतिक स्तरावर पोहोचू पाहणाऱ्या आधुनिक वेब ऍप्लिकेशन्ससाठी महत्त्वपूर्ण आहेत.

• विना-अडथळा मॉनिटरिंग: ऑब्झर्व्हरचा कॉलबॅक सामान्यतः आयडल (idle) काळात कार्यान्वित केला जातो, ज्यामुळे तुमचा परफॉर्मन्स मॉनिटरिंग कोड वापरकर्त्याच्या अनुभवात हस्तक्षेप करत नाही किंवा मुख्य थ्रेडला ब्लॉक करत नाही. हे हलके आणि नगण्य परफॉर्मन्स फूटप्रिंट असण्यासाठी डिझाइन केलेले आहे.
• सर्वसमावेशक रनटाइम डेटा: वेब डायनॅमिक आहे. परफॉर्मन्स समस्या केवळ लोड होण्याच्या वेळीच येत नाहीत. एखादा वापरकर्ता एक जटिल ॲनिमेशन सुरू करू शकतो, स्क्रोल करून अधिक सामग्री लोड करू शकतो, किंवा सुरुवातीचे पेज स्थिर झाल्यावर खूप वेळाने एका जड घटकाशी संवाद साधू शकतो. परफॉर्मन्स ऑब्झर्व्हर या रनटाइम इव्हेंट्सना कॅप्चर करतो, ज्यामुळे तुम्हाला संपूर्ण वापरकर्ता सत्राचे संपूर्ण चित्र मिळते.
• भविष्यवेधी आणि प्रमाणित: हे W3C द्वारे शिफारस केलेले परफॉर्मन्स डेटा संकलित करण्यासाठीचे मानक आहे. नवीन परफॉर्मन्स मेट्रिक्स आणि APIs याच्याशी एकरूप होण्यासाठी डिझाइन केलेले आहेत, ज्यामुळे ते तुमच्या प्रकल्पांसाठी एक टिकाऊ आणि भविष्यवेधी पर्याय बनते.
• रिअल युझर मॉनिटरिंग (RUM) चा पाया: तुमची साइट विविध देशांतील, उपकरणांवरील आणि नेटवर्क परिस्थितींमधील वापरकर्त्यांसाठी कशी कामगिरी करते हे खरोखर समजून घेण्यासाठी, तुम्हाला वास्तविक सत्रांमधील डेटाची आवश्यकता आहे. परफॉर्मन्स ऑब्झर्व्हर एक मजबूत RUM सोल्यूशन तयार करण्यासाठी एक आदर्श साधन आहे, जे तुम्हाला महत्त्वाचे मेट्रिक्स गोळा करण्यास आणि त्यांना एकत्रितीकरण आणि विश्लेषणासाठी ॲनालिटिक्स सेवेकडे पाठविण्यास अनुमती देते.
• रेस कंडीशन्स दूर करते: पोलिंगद्वारे, तुम्ही एखादी परफॉर्मन्स एंट्री रेकॉर्ड होण्यापूर्वीच ऍक्सेस करण्याचा प्रयत्न करू शकता. ऑब्झर्व्हर मॉडेल ही रेस कंडीशन पूर्णपणे काढून टाकते, कारण तुमचा कोड एंट्री उपलब्ध झाल्यानंतरच चालतो.

सुरुवात करणे: परफॉर्मन्स ऑब्झर्व्हरची मूलतत्त्वे

API वापरणे सोपे आहे. या प्रक्रियेत तीन मुख्य पायऱ्या आहेत: एक ऑब्झर्व्हर तयार करणे, एक कॉलबॅक परिभाषित करणे, आणि ऑब्झर्व्हरला काय पाहायचे आहे ते सांगणे.

१. कॉलबॅकसह एक ऑब्झर्व्हर तयार करणे

प्रथम, तुम्ही एक PerformanceObserver ऑब्जेक्ट तयार करता, आणि त्याला एक कॉलबॅक फंक्शन पास करता. जेव्हा जेव्हा नवीन एंट्रीज आढळतील तेव्हा हे फंक्शन कार्यान्वित होईल.

const observer = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log('एंट्री प्रकार:', entry.entryType); console.log('एंट्री नाव:', entry.name); console.log('सुरुवात वेळ:', entry.startTime); console.log('कालावधी:', entry.duration); } });

कॉलबॅकला एक PerformanceObserverEntryList ऑब्जेक्ट मिळतो. तुम्ही या सूचीवर getEntries() पद्धत कॉल करून सर्व नवीन निरीक्षण केलेल्या परफॉर्मन्स एंट्रीजचा ॲरे मिळवू शकता.

२. विशिष्ट एंट्री प्रकारांचे निरीक्षण करणे

जोपर्यंत तुम्ही त्याला काय मॉनिटर करायचे आहे ते सांगत नाही तोपर्यंत ऑब्झर्व्हर काहीही करत नाही. हे तुम्ही .observe() पद्धत वापरून करता. ही पद्धत एक ऑब्जेक्ट घेते ज्यात entryTypes प्रॉपर्टी (किंवा काही आधुनिक प्रकरणांमध्ये, एकाच प्रकारासाठी फक्त type) असते, जी तुम्हाला ज्या परफॉर्मन्स एंट्री प्रकारांमध्ये रस आहे त्यांचे प्रतिनिधित्व करणाऱ्या स्ट्रिंगचा ॲरे असते.

// दोन प्रकारच्या एंट्रीजचे निरीक्षण सुरू करा observer.observe({ entryTypes: ['mark', 'measure'] });

सर्वात सामान्य एंट्री प्रकारांपैकी काही खालीलप्रमाणे आहेत:

• 'resource': स्क्रिप्ट, इमेज आणि स्टाइलशीट सारख्या मालमत्तेसाठी नेटवर्क विनंत्यांबद्दल तपशील.
• 'paint': फर्स्ट-पेंट आणि फर्स्ट-कंटेन्टफुल-पेंटसाठी टायमिंग.
• 'largest-contentful-paint': लोड होण्याच्या वेगासाठी कोअर वेब व्हायटल मेट्रिक.
• 'layout-shift': दृष्य स्थिरतेसाठी कोअर वेब व्हायटल मेट्रिक.
• 'first-input': पहिल्या वापरकर्ता परस्परसंवादाबद्दल माहिती, जी फर्स्ट इनपुट डिले कोअर वेब व्हायटलसाठी वापरली जाते.
• 'longtask': मुख्य थ्रेडवरील ५० मिलिसेकंदांपेक्षा जास्त वेळ घेणारी कार्ये ओळखते, ज्यामुळे प्रतिसादहीनता येऊ शकते.
• 'mark' & 'measure': तुम्ही तुमच्या स्वतःच्या कोडमध्ये युझर टायमिंग API वापरून परिभाषित केलेले कस्टम मार्कर्स आणि मोजमाप.

३. ऑब्झर्व्हर थांबवणे

जेव्हा तुम्हाला डेटा गोळा करण्याची आवश्यकता नसते, तेव्हा संसाधने मुक्त करण्यासाठी ऑब्झर्व्हरला डिस्कनेक्ट करणे ही एक चांगली सवय आहे.

observer.disconnect();

व्यावहारिक उपयोग प्रकरणे: कोअर वेब व्हायटल्सचे निरीक्षण

कोअर वेब व्हायटल्स हे विशिष्ट घटकांचा एक संच आहे ज्याला Google वेबपेजच्या एकूण वापरकर्ता अनुभवामध्ये महत्त्वाचे मानते. त्यांचे निरीक्षण करणे हे परफॉर्मन्स ऑब्झर्व्हर API च्या सर्वात शक्तिशाली अनुप्रयोगांपैकी एक आहे. चला पाहूया प्रत्येक कसे मोजायचे.

लार्जेस्ट कंटेन्टफुल पेंट (LCP) चे निरीक्षण

LCP लोडिंग परफॉर्मन्स मोजते. ते पेज लोड टाइमलाइनमधील तो बिंदू चिन्हांकित करते जेव्हा मुख्य सामग्री लोड होण्याची शक्यता असते. चांगला LCP स्कोअर २.५ सेकंद किंवा त्याहून कमी असतो.

पेज लोड होत असताना LCP घटक बदलू शकतो. सुरुवातीला, एखादे हेडिंग LCP घटक असू शकते, परंतु नंतर, एक मोठी इमेज लोड होऊन नवीन LCP घटक बनू शकते. म्हणूनच परफॉर्मन्स ऑब्झर्व्हर परिपूर्ण आहे—ते तुम्हाला प्रत्येक संभाव्य LCP उमेदवाराबद्दल सूचित करते जसे ते रेंडर होते.

// LCP चे निरीक्षण करा आणि अंतिम मूल्य लॉग करा let lcpValue = 0; const lcpObserver = new PerformanceObserver((entryList) => { const entries = entryList.getEntries(); // शेवटची एंट्री सर्वात अद्ययावत LCP उमेदवार आहे const lastEntry = entries[entries.length - 1]; lcpValue = lastEntry.startTime; console.log(`LCP अद्यतनित: ${lcpValue.toFixed(2)}ms`, lastEntry.element); }); lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true }); // वापरकर्त्याने संवाद साधल्यानंतर ऑब्झर्व्हरला डिस्कनेक्ट करणे ही एक चांगली सवय आहे, // कारण संवाद नवीन LCP उमेदवारांना पाठवण्यापासून थांबवू शकतात. // window.addEventListener('beforeunload', () => lcpObserver.disconnect());

buffered: true च्या वापराकडे लक्ष द्या. हा एक महत्त्वाचा पर्याय आहे जो ऑब्झर्व्हरला observe() पद्धत कॉल करण्यापूर्वी रेकॉर्ड झालेल्या एंट्रीज समाविष्ट करण्याची सूचना देतो. हे तुम्हाला सुरुवातीचा LCP इव्हेंट चुकवण्यापासून प्रतिबंधित करते.

फर्स्ट इनपुट डिले (FID) आणि इंटरॅक्शन टू नेक्स्ट पेंट (INP) चे निरीक्षण

हे मेट्रिक्स परस्परसंवादक्षमता (interactivity) मोजतात. ते वापरकर्त्याचा अनुभव मोजतात जेव्हा ते पहिल्यांदा पेजशी संवाद साधण्याचा प्रयत्न करतात.

फर्स्ट इनपुट डिले (FID) वापरकर्त्याने पेजशी प्रथम संवाद साधल्यापासून (उदा. बटणावर क्लिक करणे) ते ब्राउझर त्या संवादाला प्रतिसाद म्हणून इव्हेंट हँडलरवर प्रक्रिया करण्यास सक्षम होईपर्यंतचा वेळ मोजतो. चांगला FID १०० मिलिसेकंद किंवा त्याहून कमी असतो.

इंटरॅक्शन टू नेक्स्ट पेंट (INP) हे एक नवीन, अधिक व्यापक मेट्रिक आहे ज्याने मार्च २०२४ मध्ये FID ची जागा कोअर वेब व्हायटल म्हणून घेतली आहे. FID फक्त *पहिल्या* संवादाचा *विलंब* मोजतो, तर INP पेजच्या संपूर्ण जीवनचक्रात *सर्व* वापरकर्ता संवादांची *एकूण विलंबता* मोजतो आणि सर्वात वाईट नोंदवतो. यामुळे एकूण प्रतिसादात्मकतेचे चांगले चित्र मिळते. चांगला INP २०० मिलिसेकंद किंवा त्याहून कमी असतो.

तुम्ही 'first-input' एंट्री प्रकार वापरून FID चे निरीक्षण करू शकता:

// 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`); // पहिल्या इनपुटची नोंद झाल्यावर डिस्कनेक्ट करा fidObserver.disconnect(); } }); fidObserver.observe({ type: 'first-input', buffered: true });

INP चे निरीक्षण करणे थोडे अधिक गुंतागुंतीचे आहे कारण ते इव्हेंटचा संपूर्ण कालावधी पाहते. तुम्ही 'event' एंट्री प्रकाराचे निरीक्षण करता आणि कालावधी मोजता, सर्वात लांब कालावधीचा मागोवा ठेवता.

// सरलीकृत INP मॉनिटरिंग उदाहरण let worstInp = 0; const inpObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // INP हा इव्हेंटचा कालावधी आहे const inp = entry.duration; // आम्हाला फक्त सध्याच्या सर्वात वाईट पेक्षा जास्त लांबच्या संवादांमध्ये रस आहे if (inp > worstInp) { worstInp = inp; console.log(`नवीन सर्वात वाईट INP: ${worstInp.toFixed(2)}ms`); } } }); inpObserver.observe({ type: 'event', durationThreshold: 16, buffered: true }); // durationThreshold खूप लहान, शक्यतो नगण्य घटनांना फिल्टर करण्यास मदत करते.

क्युम्युलेटिव्ह लेआउट शिफ्ट (CLS) चे निरीक्षण

CLS दृष्य स्थिरता मोजते. हे वापरकर्त्यांना किती वेळा अनपेक्षित लेआउट शिफ्ट्सचा अनुभव येतो हे मोजण्यास मदत करते - एक निराशाजनक अनुभव जिथे सामग्री चेतावणीशिवाय पेजवर फिरते. चांगला CLS स्कोअर ०.१ किंवा त्याहून कमी असतो.

स्कोअर हा सर्व वैयक्तिक लेआउट शिफ्ट स्कोअरचे एकत्रीकरण आहे. येथे परफॉर्मन्स ऑब्झर्व्हर आवश्यक आहे, कारण ते प्रत्येक शिफ्ट घडताच त्याची नोंद करते.

// एकूण CLS स्कोअरचे निरीक्षण करा आणि गणना करा let clsScore = 0; const clsObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // आम्हाला वापरकर्ता इनपुटमुळे झालेल्या शिफ्ट्सची गणना करायची नाही if (!entry.hadRecentInput) { clsScore += entry.value; console.log(`सध्याचा CLS स्कोअर: ${clsScore.toFixed(4)}`); } } }); clsObserver.observe({ type: 'layout-shift', buffered: true });

hadRecentInput प्रॉपर्टी महत्त्वाची आहे. हे तुम्हाला वापरकर्त्याच्या कृतीच्या प्रतिसादात होणारे कायदेशीर लेआउट शिफ्ट्स फिल्टर करण्यास मदत करते (जसे की मेनू विस्तृत करणाऱ्या बटणावर क्लिक करणे), जे CLS स्कोअरमध्ये मोजले जाऊ नये.

कोअर वेब व्हायटल्सच्या पलीकडे: इतर शक्तिशाली एंट्री प्रकार

कोअर वेब व्हायटल्स ही एक उत्तम सुरुवात असली तरी, परफॉर्मन्स ऑब्झर्व्हर बरेच काही मॉनिटर करू शकतो. येथे काही इतर अत्यंत उपयुक्त एंट्री प्रकार आहेत.

लाँग टास्क्सचा मागोवा घेणे (`longtask`)

लाँग टास्क्स API मुख्य थ्रेडला ५० मिलिसेकंद किंवा त्याहून अधिक काळ व्यापून टाकणाऱ्या कार्यांना उघड करते. हे समस्याप्रधान आहेत कारण मुख्य थ्रेड व्यस्त असताना, पेज वापरकर्त्याच्या इनपुटला प्रतिसाद देऊ शकत नाही, ज्यामुळे एक सुस्त किंवा गोठलेला अनुभव येतो. INP सुधारण्यासाठी ही कार्ये ओळखणे महत्त्वाचे आहे.

// लाँग टास्क्सचे निरीक्षण करा const longTaskObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log(`लाँग टास्क आढळले: ${entry.duration.toFixed(2)}ms`); // 'attribution' प्रॉपर्टी कधीकधी सांगू शकते की लाँग टास्क कशामुळे झाले console.log('विशेषता:', entry.attribution); } }); longTaskObserver.observe({ type: 'longtask', buffered: true });

रिसोर्स टायमिंग्सचे विश्लेषण (`resource`)

तुमची मालमत्ता (assets) कशी लोड होत आहे हे समजून घेणे परफॉर्मन्स ट्यूनिंगसाठी मूलभूत आहे. 'resource' एंट्री प्रकार तुम्हाला तुमच्या पेजवरील प्रत्येक संसाधनासाठी तपशीलवार नेटवर्क टायमिंग डेटा देतो, ज्यात DNS लुकअप, TCP कनेक्शन आणि सामग्री डाउनलोड वेळा समाविष्ट आहेत.

// रिसोर्स टायमिंग्सचे निरीक्षण करा const resourceObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // चला हळू-लोड होणाऱ्या प्रतिमा शोधूया if (entry.initiatorType === 'img' && entry.duration > 500) { console.warn(`हळू इमेज आढळली: ${entry.name}`, `कालावधी: ${entry.duration.toFixed(2)}ms`); } } }); // रिसोर्स टायमिंग्ससाठी 'buffered: true' वापरणे जवळजवळ नेहमीच आवश्यक असते // जेणेकरून या स्क्रिप्ट चालण्यापूर्वी लोड झालेली मालमत्ता पकडली जाईल. 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 कॉल आणि त्यानंतरच्या डेटा प्रोसेसिंगच्या कालावधीवर टायमिंग डेटा गोळा करण्यासाठी योग्य आहे.

// तुमच्या ऍप्लिकेशन कोडमध्ये: performance.mark('start-data-processing'); // ... काही गुंतागुंतीची डेटा प्रोसेसिंग ... performance.mark('end-data-processing'); performance.measure('data-processing-duration', 'start-data-processing', 'end-data-processing'); // तुमच्या मॉनिटरिंग स्क्रिप्टमध्ये: const customObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntriesByName('data-processing-duration')) { console.log(`कस्टम मोजमाप '${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')) { // लाँग टास्क्ससाठी परफॉर्मन्स ऑब्झर्व्हर वापरणे सुरक्षित आहे }
• डेटा ॲनालिटिक्स सेवेला पाठवा: कन्सोलवर डेटा लॉग करणे डेव्हलपमेंटसाठी उत्तम आहे, परंतु वास्तविक-जगातील मॉनिटरिंगसाठी, तुम्हाला हा डेटा एकत्रित करण्याची आवश्यकता आहे. क्लायंटकडून ही टेलिमेट्री पाठवण्याचा सर्वोत्तम मार्ग navigator.sendBeacon() API वापरणे आहे. ही एक नॉन-ब्लॉकिंग यंत्रणा आहे जी सर्व्हरला थोड्या प्रमाणात डेटा पाठवण्यासाठी डिझाइन केलेली आहे आणि पेज अनलोड होत असतानाही ती विश्वसनीयरित्या कार्य करते.
• चिंतेनुसार ऑब्झर्व्हर्सचे गट करा: तुम्ही एकाच ऑब्झर्व्हरचा वापर अनेक एंट्री प्रकारांसाठी करू शकता, परंतु विविध चिंतांसाठी (उदा., एक कोअर वेब व्हायटल्ससाठी, एक रिसोर्स टायमिंग्ससाठी, एक कस्टम मेट्रिक्ससाठी) वेगळे ऑब्झर्व्हर्स तयार करणे अधिक स्वच्छ असते. यामुळे कोड वाचनीयता आणि देखभालक्षमता सुधारते.
• परफॉर्मन्स ओव्हरहेड समजून घ्या: हे API खूप कमी-ओव्हरहेड असण्यासाठी डिझाइन केलेले आहे. तथापि, एक अतिशय जटिल कॉलबॅक फंक्शन जे जड गणना करते, ते संभाव्यतः कामगिरीवर परिणाम करू शकते. तुमचे ऑब्झर्व्हर कॉलबॅक संक्षिप्त आणि कार्यक्षम ठेवा. कोणतीही जड प्रक्रिया वेब वर्करकडे सोपवा किंवा कच्चा डेटा तुमच्या बॅकएंडला प्रक्रिया करण्यासाठी पाठवा.

निष्कर्ष: परफॉर्मन्स-फर्स्ट संस्कृती तयार करणे

परफॉर्मन्स ऑब्झर्व्हर API हे केवळ दुसरे साधन नाही; तर आपण वेब परफॉर्मन्सकडे कसे पाहतो यात एक मूलभूत बदल आहे. ते आपल्याला प्रतिक्रियात्मक, एक-वेळच्या मोजमापांकडून सक्रिय, सततच्या निरीक्षणाकडे नेते जे जगभरातील आपल्या वापरकर्त्यांच्या खऱ्या, गतिशील अनुभवाचे प्रतिबिंब दर्शवते. कोअर वेब व्हायटल्स, लाँग टास्क्स, रिसोर्स टायमिंग्स आणि कस्टम मेट्रिक्स कॅप्चर करण्याचा एक विश्वसनीय आणि कार्यक्षम मार्ग प्रदान करून, ते डेव्हलपर्सना मोठ्या संख्येने वापरकर्त्यांवर परिणाम होण्यापूर्वी परफॉर्मन्स अडथळे ओळखण्यास आणि त्यांचे निराकरण करण्यास सक्षम करते.

परफॉर्मन्स ऑब्झर्व्हर API चा अवलंब करणे कोणत्याही डेव्हलपमेंट टीममध्ये परफॉर्मन्स-फर्स्ट संस्कृती तयार करण्याच्या दिशेने एक महत्त्वपूर्ण पाऊल आहे. जेव्हा तुम्ही जे महत्त्वाचे आहे ते मोजू शकता, तेव्हा तुम्ही जे महत्त्वाचे आहे ते सुधारू शकता. आजच तुमच्या प्रकल्पांमध्ये हे ऑब्झर्व्हर्स समाकलित करण्यास सुरुवात करा. तुमचे वापरकर्ते—ते जगात कुठेही असोत—जलद, नितळ आणि अधिक आनंददायक अनुभवासाठी तुमचे आभार मानतील.