Performans Observer API: रनटाइम Performans मेट्रिक्स आणि बॉटलनेक विश्लेषण

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

Performans Observer API म्हणजे काय?

Performans Observer API हा एक जावास्क्रिप्ट API आहे जो वेब ॲप्लिकेशनमध्ये घडणाऱ्या Performans-संबंधित घटनांवर लक्ष ठेवण्याची आणि त्यावर प्रतिक्रिया देण्याची यंत्रणा प्रदान करतो. पारंपारिक Performans मॉनिटरिंग तंत्रांच्या विपरीत, जे ठराविक नमुने किंवा मॅन्युअल इन्स्ट्रुमेंटेशनवर अवलंबून असतात, Performans Observer API रिअल-टाइममध्ये Performans डेटा कॅप्चर करण्याचा अधिक कार्यक्षम आणि लवचिक मार्ग प्रदान करतो. हे विकसकांना विशिष्ट Performans एंट्री प्रकारांची सदस्यता घेण्यास आणि नवीन एंट्री रेकॉर्ड झाल्यावर सूचना प्राप्त करण्यास अनुमती देते.

हा "observe-and-react" दृष्टिकोन सक्रिय Performans मॉनिटरिंगला सक्षम करतो, ज्यामुळे विकसकांना वापरकर्त्याच्या अनुभवावर परिणाम होण्यापूर्वी Performans समस्या ओळखता येतात आणि त्या सोडवता येतात. हा API आधुनिक ब्राउझरमध्ये प्रमाणित आहे, ज्यामुळे सुसंगत वर्तन आणि क्रॉस-प्लॅटफॉर्म सुसंगतता सुनिश्चित होते.

मुख्य संकल्पना आणि वैशिष्ट्ये

Performans Observer API प्रभावीपणे वापरण्यासाठी, त्याच्या मुख्य संकल्पना आणि वैशिष्ट्ये समजून घेणे आवश्यक आहे:

• PerformanceEntry: हे एकाच Performans मापन किंवा घटनेचे प्रतिनिधित्व करते. Performans एंट्रीमध्ये घटनेचा प्रकार, तिची सुरूवात आणि शेवटची वेळ आणि इतर संबंधित गुणधर्मांबद्दल माहिती असते. उदाहरणांमध्ये resource, mark, measure, navigation, longtask, आणि event यांचा समावेश आहे.
• PerformanceObserver: एक ऑब्जेक्ट जो तुम्हाला विशिष्ट Performans एंट्री प्रकारांची सदस्यता घेण्यास आणि ब्राउझरच्या Performans टाइमलाइनमध्ये नवीन एंट्री जोडल्यावर सूचना प्राप्त करण्यास अनुमती देतो.
• observe() मेथड: विशिष्ट Performans एंट्री प्रकारांसाठी ऐकण्यासाठी PerformanceObserver कॉन्फिगर करण्यासाठी वापरली जाते. तुम्ही ज्या एंट्री प्रकारांचे निरीक्षण करू इच्छिता ते निर्दिष्ट करू शकता, तसेच ऐतिहासिक एंट्री प्राप्त करण्यासाठी buffered पर्याय देखील वापरू शकता.
• disconnect() मेथड: PerformanceObserver ला Performans इव्हेंटसाठी ऐकण्यापासून थांबवण्यासाठी वापरली जाते.
• takeRecords() मेथड: निरीक्षण केलेल्या पण अद्याप ऑब्झर्व्हरच्या कॉलबॅक फंक्शनद्वारे प्रक्रिया न केलेल्या सर्व Performans एंट्रीची ॲरे परत करते.
• कॉलबॅक फंक्शन: एक फंक्शन जे नवीन Performans एंट्री पाहिल्यावर कार्यान्वित होते. या फंक्शनला निरीक्षण केलेल्या एंट्रीसह एक PerformanceObserverEntryList ऑब्जेक्ट मिळतो.

समर्थित Performans एंट्री प्रकार

Performans Observer API विविध Performans एंट्री प्रकारांना समर्थन देते, प्रत्येक वेब ॲप्लिकेशन Performansच्या विविध पैलूंबद्दल विशिष्ट अंतर्दृष्टी प्रदान करते. काही सर्वाधिक वापरल्या जाणाऱ्या एंट्री प्रकारांमध्ये हे समाविष्ट आहे:

• resource: हे इमेजेस, स्क्रिप्ट्स, स्टाइलशीट्स आणि फॉन्ट यांसारख्या वैयक्तिक संसाधनांच्या लोडिंगबद्दल माहिती प्रदान करते. या एंट्री प्रकारात रिसोर्स URL, सुरूवात आणि शेवटची वेळ, फेच कालावधी आणि हस्तांतरण आकार यासारखे तपशील समाविष्ट आहेत.
• mark: तुम्हाला तुमच्या कोडमध्ये विशिष्ट कोड विभागांचा कालावधी मोजण्यासाठी कस्टम टाइमस्टॅम्प तयार करण्याची अनुमती देते. तुम्ही डेटा प्रक्रिया किंवा UI रेंडरिंगसारख्या महत्त्वाच्या ऑपरेशन्सची सुरुवात आणि शेवट ट्रॅक करण्यासाठी मार्क्स वापरू शकता.
• measure: दोन मार्क्समधील कालावधी मोजण्यासाठी वापरले जाते. हा एंट्री प्रकार कस्टम कोड विभागांच्या Performansचे मोजमाप करण्याचा सोयीस्कर मार्ग प्रदान करतो.
• navigation: DNS लुकअप वेळ, TCP कनेक्शन वेळ, विनंती आणि प्रतिसाद वेळा आणि DOM प्रक्रिया वेळ यासह पृष्ठाच्या नेव्हिगेशन वेळेबद्दल माहिती प्रदान करते.
• longtask: जे टास्क मुख्य थ्रेडला दीर्घ कालावधीसाठी (सामान्यतः ५० मिलीसेकंदांपेक्षा जास्त) ब्लॉक करतात त्यांना ओळखते. लाँग टास्कमुळे UI प्रतिसादहीनता आणि जंक होऊ शकते.
• event: click, keydown, आणि scroll यासारख्या विशिष्ट ब्राउझर इव्हेंटसाठी वेळेची माहिती रेकॉर्ड करते.
• layout-shift: पृष्ठावरील अनपेक्षित लेआउट बदलांचा मागोवा घेते. हे बदल वापरकर्त्यांसाठी त्रासदायक असू शकतात आणि वापरकर्ता अनुभवावर नकारात्मक परिणाम करू शकतात.
• largest-contentful-paint: पृष्ठावर सर्वात मोठा कंटेंट घटक दिसण्यासाठी लागणारा वेळ मोजते.
• first-input-delay: ब्राउझरला पहिल्या वापरकर्ता परस्परसंवादाला (उदा. क्लिक किंवा टॅप) प्रतिसाद देण्यासाठी लागणारा वेळ मोजते.
• element: पृष्ठावरील विशिष्ट घटकांच्या रेंडरिंगसाठी वेळेची माहिती कळवते.

व्यावहारिक उदाहरणे आणि उपयोग

Performans Observer API वेब ॲप्लिकेशनचा Performans सुधारण्यासाठी विविध परिस्थितीत वापरला जाऊ शकतो. येथे काही व्यावहारिक उदाहरणे आहेत:

१. रिसोर्स लोडिंग वेळेवर देखरेख ठेवणे

resource एंट्री प्रकार तुम्हाला इमेजेस, स्क्रिप्ट्स आणि स्टाइलशीट्स सारख्या वैयक्तिक संसाधनांच्या लोडिंग वेळेचा मागोवा घेण्यास अनुमती देतो. ही माहिती पृष्ठ लोड वेळेवर परिणाम करणाऱ्या हळू-लोडिंग संसाधनांना ओळखण्यासाठी वापरली जाऊ शकते. उदाहरणार्थ, तुम्ही रिसोर्स लोडिंग वेळेचे निरीक्षण करण्यासाठी खालील कोड वापरू शकता:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Resource: ${entry.name}, Duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["resource"] });

            

              
                Copy
              
            
          

हा कोड एक PerformanceObserver तयार करतो जो resource एंट्रीसाठी ऐकतो आणि रिसोर्स URL आणि कालावधी कन्सोलमध्ये लॉग करतो. या डेटाचे विश्लेषण करून, तुम्ही हळू-लोडिंग संसाधने ओळखू शकता आणि प्रतिमा कॉम्प्रेस करून, कंटेंट डिलिव्हरी नेटवर्क (CDN) वापरून किंवा तुमचे सर्व्हर कॉन्फिगरेशन ऑप्टिमाइझ करून त्यांना ऑप्टिमाइझ करू शकता.

जागतिक दृष्टिकोन: रिसोर्स लोडिंग वेळेवर देखरेख ठेवताना, तुमच्या वापरकर्त्यांच्या भौगोलिक स्थानाचा विचार करा. हळू इंटरनेट कनेक्शन असलेल्या प्रदेशांमधील वापरकर्त्यांना लक्षणीयरीत्या जास्त लोडिंग वेळ लागू शकतो. भौगोलिकदृष्ट्या वितरीत सर्व्हरसह CDN वापरल्याने ही समस्या कमी होण्यास मदत होऊ शकते.

२. कस्टम कोड अंमलबजावणी वेळेचे मोजमाप करणे

mark आणि measure एंट्री प्रकार तुम्हाला कस्टम कोड विभागांच्या अंमलबजावणी वेळेचे मोजमाप करण्याची परवानगी देतात. तुमच्या ॲप्लिकेशन लॉजिकमधील Performansमधील अडथळे ओळखण्यासाठी हे उपयुक्त आहे. उदाहरणार्थ, तुम्ही विशिष्ट फंक्शनचा कालावधी मोजण्यासाठी खालील कोड वापरू शकता:

            performance.mark("start");

// Code to be measured
for (let i = 0; i < 1000000; i++) {
 // Some computationally intensive operation
}

performance.mark("end");
performance.measure("My Function", "start", "end");

const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Measurement: ${entry.name}, Duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["measure"] });

            

              
                Copy
              
            
          

हा कोड तुम्ही मोजू इच्छित असलेल्या कोड विभागाच्या आधी आणि नंतर start आणि end असे दोन मार्क्स तयार करतो. त्यानंतर ते दोन मार्क्समधील कालावधी मोजण्यासाठी performance.measure() पद्धत वापरते. PerformanceObserver measure एंट्रीसाठी ऐकतो आणि मोजमापाचे नाव आणि कालावधी कन्सोलमध्ये लॉग करतो. या डेटाचे विश्लेषण करून, तुम्ही हळू चालणारे कोड विभाग ओळखू शकता आणि कॅशिंग, मेमोइझेशन किंवा अल्गोरिदम ऑप्टिमायझेशन यांसारख्या तंत्रांचा वापर करून त्यांना ऑप्टिमाइझ करू शकता.

कृती करण्यायोग्य अंतर्दृष्टी: तुमच्या ॲप्लिकेशनचे महत्त्वाचे मार्ग ओळखा – जे कोडचे क्रम सर्वाधिक वेळा कार्यान्वित होतात आणि Performansवर सर्वात जास्त परिणाम करतात. सर्वात महत्त्वपूर्ण Performans वाढ मिळवण्यासाठी तुमचे ऑप्टिमायझेशन प्रयत्न या महत्त्वाच्या मार्गांवर केंद्रित करा.

३. लाँग टास्क ओळखणे

longtask एंट्री प्रकार अशा टास्कना ओळखतो जे मुख्य थ्रेडला विस्तारित कालावधीसाठी ब्लॉक करतात. लाँग टास्कमुळे UI प्रतिसादहीनता आणि जंक होऊ शकते, ज्यामुळे वापरकर्ता अनुभव खराब होतो. तुम्ही लाँग टास्कचे निरीक्षण करण्यासाठी खालील कोड वापरू शकता:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.warn(`Long Task: ${entry.name}, Duration: ${entry.duration}ms`);
 console.warn(`Long Task Attribution: ${JSON.stringify(entry.attribution)}`);
 });
});

observer.observe({ entryTypes: ["longtask"] });

            

              
                Copy
              
            
          

हा कोड एक PerformanceObserver तयार करतो जो longtask एंट्रीसाठी ऐकतो आणि टास्कचे नाव आणि कालावधी कन्सोलमध्ये लॉग करतो. या डेटाचे विश्लेषण करून, तुम्ही दीर्घकाळ चालणारे टास्क ओळखू शकता आणि त्यांना लहान भागांमध्ये विभागून, असिंक्रोनस ऑपरेशन्स वापरून किंवा वेब वर्करकडे ऑफलोड करून ऑप्टिमाइझ करू शकता.

जागतिक लेखन मार्गदर्शक तत्त्व: तांत्रिक संकल्पना स्पष्ट करताना, स्पष्ट आणि संक्षिप्त भाषा वापरा जी विविध स्तरावरील तांत्रिक कौशल्य असलेल्या वाचकांसाठी सुलभ असेल. तांत्रिक शब्द टाळा आणि अपरिचित संज्ञांसाठी संदर्भ द्या.

४. नेव्हिगेशन टायमिंगचे विश्लेषण करणे

navigation एंट्री प्रकार पृष्ठाच्या नेव्हिगेशन वेळेबद्दल तपशीलवार माहिती प्रदान करतो, ज्यात DNS लुकअप वेळ, TCP कनेक्शन वेळ, विनंती आणि प्रतिसाद वेळा आणि DOM प्रक्रिया वेळ यांचा समावेश आहे. हा डेटा पृष्ठ लोडिंग प्रक्रियेतील अडथळे ओळखण्यासाठी वापरला जाऊ शकतो. उदाहरणार्थ, तुम्ही नेव्हिगेशन वेळेचे विश्लेषण करण्यासाठी खालील कोड वापरू शकता:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Navigation: ${entry.name}`);
 console.log(`DNS Lookup Time: ${entry.domainLookupEnd - entry.domainLookupStart}ms`);
 console.log(`TCP Connection Time: ${entry.connectEnd - entry.connectStart}ms`);
 console.log(`Request Time: ${entry.responseStart - entry.requestStart}ms`);
 console.log(`Response Time: ${entry.responseEnd - entry.responseStart}ms`);
 console.log(`DOM Processing Time: ${entry.domComplete - entry.domInteractive}ms`);
 });
});

observer.observe({ entryTypes: ["navigation"] });

            

              
                Copy
              
            
          

हा कोड एक PerformanceObserver तयार करतो जो navigation एंट्रीसाठी ऐकतो आणि विविध वेळेचे मेट्रिक्स कन्सोलमध्ये लॉग करतो. या डेटाचे विश्लेषण करून, तुम्ही हळू DNS लुकअप, हळू TCP कनेक्शन, हळू विनंती प्रक्रिया, हळू प्रतिसाद प्रक्रिया किंवा हळू DOM प्रक्रिया यासारखे अडथळे ओळखू शकता. त्यानंतर तुम्ही या अडथळ्यांवर मात करण्यासाठी योग्य कारवाई करू शकता, जसे की तुमचे DNS कॉन्फिगरेशन ऑप्टिमाइझ करणे, तुमच्या सर्व्हरचा Performans सुधारणे किंवा तुमचे HTML आणि जावास्क्रिप्ट कोड ऑप्टिमाइझ करणे.

SEO ऑप्टिमायझेशन: संपूर्ण सामग्रीमध्ये संबंधित कीवर्ड नैसर्गिकरित्या वापरा. या विभागात, "navigation timing," "DNS lookup time," "TCP connection time," आणि "page loading process" सारखे कीवर्ड सहजतेने समाविष्ट केले आहेत.

५. लेआउट बदलांवर देखरेख ठेवणे

layout-shift एंट्री प्रकार पृष्ठावरील अनपेक्षित लेआउट बदलांचा मागोवा घेतो. हे बदल वापरकर्त्यांसाठी त्रासदायक असू शकतात आणि वापरकर्ता अनुभवावर नकारात्मक परिणाम करतात. ते अनेकदा डायमेन्शनशिवाय असलेल्या प्रतिमा, उशिरा लोड होणाऱ्या जाहिराती किंवा डायनॅमिकली इंजेक्ट केलेल्या सामग्रीमुळे होतात. तुम्ही लेआउट बदलांचे निरीक्षण करण्यासाठी खालील कोड वापरू शकता:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.warn(`Layout Shift: ${entry.name}, Value: ${entry.value}`);
 console.warn(`Layout Shift Had Recent Input: ${entry.hadRecentInput}`);
 console.warn(`Layout Shift Sources: ${JSON.stringify(entry.sources)}`);
 });
});

observer.observe({ entryTypes: ["layout-shift"] });

            

              
                Copy
              
            
          

हा कोड एक PerformanceObserver तयार करतो जो layout-shift एंट्रीसाठी ऐकतो आणि बदलाचे मूल्य (बदलाच्या तीव्रतेचे प्रतिनिधित्व करणारा स्कोअर) कन्सोलमध्ये लॉग करतो. उच्च मूल्य अधिक महत्त्वपूर्ण बदल दर्शवते. hadRecentInput प्रॉपर्टी दर्शवते की वापरकर्त्याच्या इनपुटच्या ५००ms च्या आत बदल झाला आहे का. वापरकर्त्याच्या इनपुटमुळे झालेले बदल सामान्यतः कमी समस्याप्रधान मानले जातात. sources प्रॉपर्टी बदलास कारणीभूत असलेल्या घटकांबद्दल तपशील प्रदान करते. या डेटाचे विश्लेषण करून, तुम्ही प्रतिमांसाठी डायमेन्शन निर्दिष्ट करून, जाहिरातींसाठी जागा राखून आणि रिफ्लो होऊ शकणारी डायनॅमिकली इंजेक्टेड सामग्री टाळून लेआउट शिफ्ट समस्या ओळखू आणि दुरुस्त करू शकता.

कृती करण्यायोग्य अंतर्दृष्टी: लेआउट शिफ्ट समस्या ओळखण्यासाठी आणि त्या दुरुस्त करण्यासाठी शिफारसी मिळवण्यासाठी Google च्या Lighthouse सारख्या साधनांचा वापर करा. वापरकर्त्याच्या इनपुटशिवाय होणाऱ्या बदलांना प्राधान्य द्या.

६. लार्जेस्ट कंटेंटफुल पेंट (LCP) मोजणे

largest-contentful-paint एंट्री प्रकार पृष्ठावर सर्वात मोठा कंटेंट घटक दिसण्यासाठी लागणारा वेळ मोजतो. LCP हे एक मुख्य वेब व्हायटल आहे जे पृष्ठाच्या समजलेल्या लोडिंग गतीचे प्रतिबिंब दर्शवते. चांगला LCP स्कोअर २.५ सेकंद किंवा त्याहून कमी असतो. तुम्ही LCP मोजण्यासाठी खालील कोड वापरू शकता:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Largest Contentful Paint: ${entry.startTime}ms`);
 console.log(`LCP Element: ${entry.element}`);
 console.log(`LCP URL: ${entry.url}`);
 });
});

observer.observe({ entryTypes: ["largest-contentful-paint"] });

            

              
                Copy
              
            
          

हा कोड एक PerformanceObserver तयार करतो जो largest-contentful-paint एंट्रीसाठी ऐकतो आणि सुरुवातीची वेळ, घटक आणि URL कन्सोलमध्ये लॉग करतो. या डेटाचे विश्लेषण करून, तुम्ही सर्वात मोठा कंटेंट घटक ओळखू शकता आणि प्रतिमेचा आकार ऑप्टिमाइझ करून, CDN वापरून किंवा रिसोर्स प्रीलोड करून त्याचा लोडिंग वेळ ऑप्टिमाइझ करू शकता.

जागतिक दृष्टिकोन: लक्षात घ्या की वेगवेगळ्या वापरकर्त्यांकडे त्यांच्या स्क्रीन आकार आणि रिझोल्यूशनवर आधारित वेगवेगळे LCP घटक असतील. विविध डिव्हाइसेस आणि स्क्रीन आकारांवर चांगला LCP स्कोअर सुनिश्चित करण्यासाठी तुमचे ॲप्लिकेशन डिझाइन करा.

७. फर्स्ट इनपुट डिले (FID) मोजणे

first-input-delay एंट्री प्रकार ब्राउझरला पहिल्या वापरकर्ता परस्परसंवादाला (उदा. क्लिक किंवा टॅप) प्रतिसाद देण्यासाठी लागणारा वेळ मोजतो. FID हे आणखी एक मुख्य वेब व्हायटल आहे जे पृष्ठाच्या परस्परसंवादाचे प्रतिबिंब दर्शवते. चांगला FID स्कोअर १०० मिलीसेकंद किंवा त्याहून कमी असतो. तुम्ही FID मोजण्यासाठी खालील कोड वापरू शकता:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`First Input Delay: ${entry.processingStart - entry.startTime}ms`);
 console.log(`Event Type: ${entry.name}`);
 console.log(`Target Element: ${entry.target}`);
 });
});

observer.observe({ type: "first-input", buffered: true });

            

              
                Copy
              
            
          

हा कोड एक PerformanceObserver तयार करतो जो first-input एंट्रीसाठी ऐकतो आणि विलंब, इव्हेंट प्रकार आणि लक्ष्य घटक कन्सोलमध्ये लॉग करतो. या डेटाचे विश्लेषण करून, तुम्ही दीर्घ इनपुट विलंबाची कारणे ओळखू शकता आणि मुख्य थ्रेडवर घालवलेला वेळ कमी करण्यासाठी तुमचा जावास्क्रिप्ट कोड ऑप्टिमाइझ करू शकता.

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

प्रगत तंत्रे आणि विचार

वर वर्णन केलेल्या मूलभूत उपयोगांव्यतिरिक्त, Performans Observer API वेब ॲप्लिकेशन Performansमध्ये अधिक खोलवर अंतर्दृष्टी मिळवण्यासाठी अधिक प्रगत परिस्थितीत वापरला जाऊ शकतो. येथे काही प्रगत तंत्रे आणि विचार आहेत:

१. बफरिंगचा वापर करणे

observe() पद्धतीमधील buffered पर्याय तुम्हाला PerformanceObserver तयार होण्यापूर्वी रेकॉर्ड केलेल्या ऐतिहासिक Performans एंट्री पुनर्प्राप्त करण्याची परवानगी देतो. सुरुवातीच्या पृष्ठ लोड दरम्यान किंवा तुमचा मॉनिटरिंग कोड लोड होण्यापूर्वी होणारा Performans डेटा कॅप्चर करण्यासाठी हे उपयुक्त आहे. उदाहरणार्थ:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Entry: ${entry.name}, Type: ${entry.entryType}, Duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["navigation", "resource"], buffered: true });

            

              
                Copy
              
            
          

हा कोड एक PerformanceObserver तयार करतो जो navigation आणि resource एंट्रीसाठी ऐकतो आणि ऑब्झर्व्हर तयार होण्यापूर्वी रेकॉर्ड केलेल्या सर्व ऐतिहासिक एंट्री पुनर्प्राप्त करतो.

२. Performans एंट्री फिल्टर करणे

तुम्ही तुमच्या विश्लेषणासाठी सर्वात संबंधित असलेल्या डेटावर लक्ष केंद्रित करण्यासाठी विशिष्ट निकषांवर आधारित Performans एंट्री फिल्टर करू शकता. उदाहरणार्थ, तुम्ही त्यांच्या URL किंवा सामग्री प्रकारावर आधारित रिसोर्स एंट्री फिल्टर करू शकता:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 if (entry.entryType === "resource" && entry.name.endsWith(".jpg")) {
 console.log(`Image Resource: ${entry.name}, Duration: ${entry.duration}ms`);
 }
 });
});

observer.observe({ entryTypes: ["resource"] });

            

              
                Copy
              
            
          

हा कोड एक PerformanceObserver तयार करतो जो resource एंट्रीसाठी ऐकतो आणि त्यांना फक्त .jpg एक्सटेन्शन असलेल्या इमेज रिसोर्ससाठीच्या एंट्री समाविष्ट करण्यासाठी फिल्टर करतो.

३. वेब वर्कर्सचा वापर करणे

मुख्य थ्रेडच्या Performansवर परिणाम टाळण्यासाठी, तुम्ही Performans मॉनिटरिंग आणि विश्लेषण वेब वर्करकडे ऑफलोड करू शकता. हे तुम्हाला UI ब्लॉक न करता पार्श्वभूमीत Performans डेटा गोळा आणि प्रक्रिया करण्याची परवानगी देते. उदाहरणार्थ, तुम्ही एक वेब वर्कर तयार करू शकता जो Performans इव्हेंटसाठी ऐकतो आणि विश्लेषणासाठी डेटा मुख्य थ्रेडवर पाठवतो.

जागतिक लेखन मार्गदर्शक तत्त्व: जागतिक प्रेक्षकांसाठी संबंधित असलेली उदाहरणे वापरा. विशिष्ट देश किंवा संस्कृतीसाठी विशिष्ट असलेली उदाहरणे टाळा.

४. ॲनालिटिक्स प्लॅटफॉर्मसह एकत्रीकरण

Performans Observer API ला ॲनालिटिक्स प्लॅटफॉर्मसह एकत्रित केले जाऊ शकते जेणेकरून एका केंद्रीकृत ठिकाणी Performans डेटा गोळा आणि विश्लेषण करता येईल. हे तुम्हाला कालांतराने Performans ट्रेंडचा मागोवा घेण्यास, Performans रिग्रेशन ओळखण्यास आणि Performans मेट्रिक्सला इतर वापरकर्ता वर्तन डेटाशी सहसंबंधित करण्यास अनुमती देते. तुम्ही तुमच्या ॲनालिटिक्स प्लॅटफॉर्मवर त्यांच्या API चा वापर करून किंवा सर्व्हर-साइड एंडपॉइंटवर लॉग करून Performans एंट्री पाठवू शकता.

५. जुन्या ब्राउझरसाठी पॉलीफिल वापरणे

जरी Performans Observer API बहुतेक आधुनिक ब्राउझरद्वारे समर्थित असला तरी, तो जुन्या ब्राउझरमध्ये उपलब्ध नसू शकतो. जुन्या ब्राउझरला समर्थन देण्यासाठी, तुम्ही एक पॉलीफिल वापरू शकता जो API ची फॉलबॅक अंमलबजावणी प्रदान करतो. ऑनलाइन अनेक पॉलीफिल उपलब्ध आहेत जे तुम्ही तुमच्या ॲप्लिकेशनमध्ये वापरू शकता.

Performans Observer API वापरण्यासाठी सर्वोत्तम पद्धती

Performans Observer API प्रभावीपणे वापरण्यासाठी आणि सामान्य चुका टाळण्यासाठी, या सर्वोत्तम पद्धतींचे अनुसरण करा:

• केवळ तुमच्या उद्दिष्टांशी संबंधित असलेल्या मेट्रिक्सवरच देखरेख ठेवा. Performansवर परिणाम करू शकणारा जास्त डेटा गोळा करणे टाळा.
• सर्वात महत्त्वाच्या डेटावर लक्ष केंद्रित करण्यासाठी फिल्टरिंगचा वापर करा. तुम्हाला प्रक्रिया करायच्या असलेल्या डेटाचे प्रमाण कमी करण्यासाठी विशिष्ट निकषांवर आधारित Performans एंट्री फिल्टर करा.
• Performans मॉनिटरिंग वेब वर्करकडे ऑफलोड करा. हे Performans मॉनिटरिंगला मुख्य थ्रेडच्या Performansवर परिणाम करण्यापासून प्रतिबंधित करेल.
• कालांतराने Performans ट्रेंडचा मागोवा घेण्यासाठी ॲनालिटिक्स प्लॅटफॉर्मसह एकत्रीकरण करा. हे तुम्हाला Performans रिग्रेशन ओळखण्यास आणि Performans मेट्रिक्सला इतर वापरकर्ता वर्तन डेटाशी सहसंबंधित करण्यास अनुमती देईल.
• जुन्या ब्राउझरला समर्थन देण्यासाठी पॉलीफिल वापरा. हे सुनिश्चित करेल की तुमचा Performans मॉनिटरिंग कोड विस्तृत ब्राउझरवर कार्य करतो.
• तुमच्या Performans मॉनिटरिंग कोडची कसून चाचणी करा. खात्री करा की तुमचा कोड स्वतः कोणतीही Performans समस्या निर्माण करत नाही.
• डेटा गोपनीयता नियमांबद्दल जागरूक रहा. खात्री करा की तुम्ही वापरकर्त्याच्या संमतीशिवाय कोणतीही वैयक्तिकरित्या ओळखण्यायोग्य माहिती (PII) गोळा करत नाही.

SEO ऑप्टिमायझेशन: आकर्षक मेटा वर्णन तयार करा. ब्लॉग पोस्टच्या सामग्रीचा सारांश देणारे एक संक्षिप्त वर्णन JSON मेटाडेटामध्ये प्रदान केले आहे.

निष्कर्ष

Performans Observer API हे एक शक्तिशाली साधन आहे जे विकसकांना रनटाइम Performans मेट्रिक्सचे निरीक्षण आणि विश्लेषण करण्यास, अडथळे ओळखण्यास आणि त्यांच्या वेब ॲप्लिकेशन्सना एका सहज, जलद आणि अधिक आनंददायक वापरकर्ता अनुभवासाठी ऑप्टिमाइझ करण्यास सक्षम करते. API च्या मुख्य संकल्पना आणि वैशिष्ट्ये समजून घेऊन, आणि त्याच्या वापरासाठी सर्वोत्तम पद्धतींचे अनुसरण करून, तुम्ही तुमच्या ॲप्लिकेशन्सच्या Performansबद्दल मौल्यवान अंतर्दृष्टी मिळवू शकता आणि तुमच्या वापरकर्त्यांना त्यांच्या स्थान किंवा डिव्हाइसची पर्वा न करता एक चांगला वापरकर्ता अनुभव देऊ शकता. जसे वेब ॲप्लिकेशन्स अधिकाधिक गुंतागुंतीचे होत आहेत, तसतसे Performans Observer API इष्टतम Performans आणि वापरकर्ता समाधान सुनिश्चित करण्यासाठी एक आवश्यक साधन राहील.

वापरकर्ता अनुभवाला सर्वांपेक्षा जास्त प्राधान्य देण्याचे लक्षात ठेवा. Performans ऑप्टिमायझेशन नेहमीच तुमच्या वापरकर्त्यांसाठी एक अखंड आणि आनंददायक अनुभव प्रदान करण्याच्या ध्येयाने प्रेरित असले पाहिजे. Performans Observer API प्रभावीपणे वापरून, तुम्ही तुमच्या ॲप्लिकेशनच्या Performansबद्दल अधिक सखोल समज मिळवू शकता आणि वापरकर्ता अनुभव सुधारण्यासाठी माहितीपूर्ण निर्णय घेऊ शकता.

Performansच्या जागतिक परिणामांचा काळजीपूर्वक विचार करून, विकसक असे वेब ॲप्लिकेशन्स तयार करू शकतात जे जगभरातील वापरकर्त्यांसाठी जलद, प्रतिसाद देणारे आणि प्रवेशयोग्य असतील. यासाठी एक समग्र दृष्टिकोन आवश्यक आहे जो नेटवर्क लेटन्सी, डिव्हाइस क्षमता आणि सांस्कृतिक प्राधान्ये यासारख्या घटकांचा विचार करतो.