Performance Observer API: இயக்கநேர செயல்திறன் அளவீடுகள் மற்றும் இடையூறு பகுப்பாய்வு

இன்றைய போட்டி நிறைந்த டிஜிட்டல் உலகில், வலைத்தளம் மற்றும் வலைப் பயன்பாட்டு செயல்திறன் பயனர் ஈடுபாட்டிற்கும் வணிக வெற்றிக்கும் மிக முக்கியமானது. மெதுவான ஏற்றுதல் நேரங்கள் மற்றும் பதிலளிக்காத இடைமுகங்கள் பயனர்களை விரக்தியடையச் செய்து, பரிவர்த்தனைகளைக் கைவிட வைத்து, இறுதியில் வருவாய் இழப்புக்கு வழிவகுக்கும். Performance Observer API என்பது ஒரு சக்திவாய்ந்த கருவியாகும், இது டெவலப்பர்களுக்கு இயக்கநேர செயல்திறன் அளவீடுகளைக் கண்காணிக்கவும் பகுப்பாய்வு செய்யவும், இடையூறுகளைக் கண்டறியவும், பயனரின் இருப்பிடம் அல்லது சாதனத்தைப் பொருட்படுத்தாமல், ஒரு மென்மையான, வேகமான மற்றும் மிகவும் சுவாரஸ்யமான பயனர் அனுபவத்திற்காக தங்கள் பயன்பாடுகளை மேம்படுத்தவும் அனுமதிக்கிறது.

Performance Observer API என்றால் என்ன?

Performance Observer API என்பது ஒரு ஜாவாஸ்கிரிப்ட் API ஆகும், இது ஒரு வலைப் பயன்பாட்டில் செயல்திறன் தொடர்பான நிகழ்வுகள் நிகழும் போது அவற்றைக் கவனித்து ಪ್ರತಿಕ್ರಿಯಿಸಲು ஒரு பொறிமுறையை வழங்குகிறது. குறிப்பிட்ட கால இடைவெளியில் மாதிரிகள் எடுப்பது அல்லது கைமுறையாக கருவிகளைச் சேர்ப்பது போன்ற பாரம்பரிய செயல்திறன் கண்காணிப்பு நுட்பங்களைப் போலல்லாமல், Performance Observer API நிகழ்நேரத்தில் செயல்திறன் தரவைப் பிடிக்க ஒரு திறமையான மற்றும் நெகிழ்வான வழியை வழங்குகிறது. இது டெவலப்பர்களை குறிப்பிட்ட செயல்திறன் நுழைவு வகைகளுக்கு குழுசேரவும், புதிய உள்ளீடுகள் பதிவு செய்யப்படும்போதெல்லாம் அறிவிப்புகளைப் பெறவும் அனுமதிக்கிறது.

இந்த "கவனித்து-செயல்படு" அணுகுமுறை செயல்திறனை முன்கூட்டியே கண்காணிக்க உதவுகிறது, டெவலப்பர்கள் பயனர் அனுபவத்தைப் பாதிக்கும் முன் செயல்திறன் சிக்கல்களைக் கண்டறிந்து தீர்க்க அனுமதிக்கிறது. இந்த API நவீன உலாவிகளில் தரப்படுத்தப்பட்டுள்ளது, இது சீரான நடத்தை மற்றும் குறுக்கு-தள இணக்கத்தன்மையை உறுதி செய்கிறது.

முக்கிய கருத்துக்கள் மற்றும் அம்சங்கள்

Performance Observer API-ஐ திறம்படப் பயன்படுத்த, அதன் முக்கிய கருத்துக்கள் மற்றும் அம்சங்களைப் புரிந்துகொள்வது அவசியம்:

• PerformanceEntry: ஒரு ஒற்றை செயல்திறன் அளவீடு அல்லது நிகழ்வைக் குறிக்கிறது. செயல்திறன் உள்ளீடுகளில் நிகழ்வின் வகை, அதன் தொடக்க மற்றும் முடிவு நேரங்கள் மற்றும் பிற தொடர்புடைய பண்புக்கூறுகள் பற்றிய தகவல்கள் உள்ளன. எடுத்துக்காட்டுகளில் resource, mark, measure, navigation, longtask, மற்றும் event ஆகியவை அடங்கும்.
• PerformanceObserver: குறிப்பிட்ட செயல்திறன் நுழைவு வகைகளுக்கு குழுசேரவும், உலாவியின் செயல்திறன் காலவரிசையில் புதிய உள்ளீடுகள் சேர்க்கப்படும்போதெல்லாம் அறிவிப்புகளைப் பெறவும் உங்களை அனுமதிக்கும் ஒரு பொருள்.
• observe() முறை: குறிப்பிட்ட செயல்திறன் நுழைவு வகைகளைக் கேட்க PerformanceObserver-ஐ உள்ளமைக்கப் பயன்படுகிறது. நீங்கள் கவனிக்க விரும்பும் நுழைவு வகைகளையும், வரலாற்று உள்ளீடுகளைப் பெற ஒரு buffered விருப்பத்தையும் குறிப்பிடலாம்.
• disconnect() முறை: PerformanceObserver செயல்திறன் நிகழ்வுகளைக் கேட்பதை நிறுத்தப் பயன்படுகிறது.
• takeRecords() முறை: கவனிக்கப்பட்ட ஆனால் இன்னும் பார்வையாளரின் கால்பேக் செயல்பாட்டால் செயலாக்கப்படாத அனைத்து செயல்திறன் உள்ளீடுகளின் வரிசையைத் தருகிறது.
• கால்பேக் செயல்பாடு: புதிய செயல்திறன் உள்ளீடுகள் கவனிக்கப்படும்போதெல்லாம் செயல்படுத்தப்படும் ஒரு செயல்பாடு. இந்தச் செயல்பாடு கவனிக்கப்பட்ட உள்ளீடுகளைக் கொண்ட ஒரு PerformanceObserverEntryList பொருளைப் பெறுகிறது.

ஆதரிக்கப்படும் செயல்திறன் நுழைவு வகைகள்

Performance Observer API பல்வேறு செயல்திறன் நுழைவு வகைகளை ஆதரிக்கிறது, ஒவ்வொன்றும் வலைப் பயன்பாட்டு செயல்திறனின் வெவ்வேறு அம்சங்களைப் பற்றிய குறிப்பிட்ட நுண்ணறிவுகளை வழங்குகிறது. மிகவும் பொதுவாகப் பயன்படுத்தப்படும் சில நுழைவு வகைகள் பின்வருமாறு:

• resource: படங்கள், ஸ்கிரிப்ட்கள், ஸ்டைல்ஷீட்கள் மற்றும் எழுத்துருக்கள் போன்ற தனிப்பட்ட ஆதாரங்களை ஏற்றுவது பற்றிய தகவல்களை வழங்குகிறது. இந்த நுழைவு வகையில் ஆதார URL, தொடக்க மற்றும் முடிவு நேரங்கள், பெறுதல் காலம் மற்றும் பரிமாற்ற அளவு போன்ற விவரங்கள் அடங்கும்.
• mark: குறிப்பிட்ட குறியீடு பிரிவுகளின் கால அளவை அளவிட உங்கள் குறியீட்டிற்குள் தனிப்பயன் நேர முத்திரைகளை உருவாக்க உங்களை அனுமதிக்கிறது. தரவு செயலாக்கம் அல்லது UI ரெண்டரிங் போன்ற முக்கியமான செயல்பாடுகளின் தொடக்கத்தையும் முடிவையும் கண்காணிக்க நீங்கள் மார்க்குகளைப் பயன்படுத்தலாம்.
• measure: இரண்டு மார்க்குகளுக்கு இடையிலான கால அளவைக் கணக்கிடப் பயன்படுகிறது. இந்த நுழைவு வகை தனிப்பயன் குறியீடு பிரிவுகளின் செயல்திறனை அளவிட ஒரு வசதியான வழியை வழங்குகிறது.
• navigation: DNS தேடல் நேரம், TCP இணைப்பு நேரம், கோரிக்கை மற்றும் பதில் நேரங்கள் மற்றும் DOM செயலாக்க நேரம் உள்ளிட்ட ஒரு பக்கத்தின் வழிசெலுத்தல் நேரம் பற்றிய தகவல்களை வழங்குகிறது.
• longtask: பிரதான திரியை நீண்ட காலத்திற்கு (பொதுவாக 50 மில்லி விநாடிகளுக்கு மேல்) தடுக்கும் பணிகளைக் கண்டறிகிறது. நீண்ட பணிகள் UI பதிலளிக்காத தன்மை மற்றும் தடுமாற்றத்தை ஏற்படுத்தும்.
• event: click, keydown, மற்றும் scroll போன்ற குறிப்பிட்ட உலாவி நிகழ்வுகளுக்கான நேரத் தகவலைப் பதிவு செய்கிறது.
• layout-shift: பக்கத்தில் எதிர்பாராத தளவமைப்பு மாற்றங்களைக் கண்காணிக்கிறது. இந்த மாற்றங்கள் பயனர்களுக்கு எரிச்சலூட்டுவதாகவும், பயனர் அனுபவத்தை எதிர்மறையாக பாதிக்கக்கூடியதாகவும் இருக்கும்.
• largest-contentful-paint: பக்கத்தில் மிகப்பெரிய உள்ளடக்க உறுப்பு தெரிவதற்கு எடுக்கும் நேரத்தை அளவிடுகிறது.
• first-input-delay: முதல் பயனர் தொடர்புக்கு (எ.கா., ஒரு கிளிக் அல்லது தட்டுதல்) உலாவி பதிலளிக்க எடுக்கும் நேரத்தை அளவிடுகிறது.
• element: பக்கத்தில் குறிப்பிட்ட கூறுகளின் ரெண்டரிங்கிற்கான நேரத் தகவலைப் புகாரளிக்கிறது.

நடைமுறை எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்

வலைப் பயன்பாட்டு செயல்திறனை மேம்படுத்த Performance Observer API பரந்த அளவிலான சூழ்நிலைகளில் பயன்படுத்தப்படலாம். இங்கே சில நடைமுறை எடுத்துக்காட்டுகள்:

1. ஆதார ஏற்றுதல் நேரங்களைக் கண்காணித்தல்

resource நுழைவு வகை படங்கள், ஸ்கிரிப்ட்கள் மற்றும் ஸ்டைல்ஷீட்கள் போன்ற தனிப்பட்ட ஆதாரங்களின் ஏற்றுதல் நேரங்களைக் கண்காணிக்க உங்களை அனுமதிக்கிறது. இந்தத் தகவல் பக்க ஏற்றுதல் நேரத்தைப் பாதிக்கும் மெதுவாக ஏற்றப்படும் ஆதாரங்களைக் கண்டறியப் பயன்படுத்தப்படலாம். எடுத்துக்காட்டாக, ஆதார ஏற்றுதல் நேரங்களைக் கண்காணிக்க பின்வரும் குறியீட்டைப் பயன்படுத்தலாம்:

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

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

            

              
                Copy
              
            
          

இந்தக் குறியீடு resource உள்ளீடுகளைக் கேட்கும் ஒரு PerformanceObserver-ஐ உருவாக்குகிறது மற்றும் ஆதார URL மற்றும் கால அளவை கன்சோலில் பதிவு செய்கிறது. இந்தத் தரவை பகுப்பாய்வு செய்வதன் மூலம், நீங்கள் மெதுவாக ஏற்றப்படும் ஆதாரங்களைக் கண்டறிந்து, படங்களை சுருக்குவதன் மூலம், ஒரு உள்ளடக்க விநியோக வலையமைப்பை (CDN) பயன்படுத்துவதன் மூலம் அல்லது உங்கள் சேவையக உள்ளமைவை மேம்படுத்துவதன் மூலம் அவற்றை மேம்படுத்தலாம்.

உலகளாவிய கண்ணோட்டம்: ஆதார ஏற்றுதல் நேரங்களைக் கண்காணிக்கும் போது, உங்கள் பயனர்களின் புவியியல் இருப்பிடத்தைக் கருத்தில் கொள்ளுங்கள். மெதுவான இணைய இணைப்புகள் உள்ள பகுதிகளில் உள்ள பயனர்கள் கணிசமாக நீண்ட ஏற்றுதல் நேரங்களை அனுபவிக்கலாம். புவியியல் ரீதியாக விநியோகிக்கப்பட்ட சேவையகங்களுடன் ஒரு CDN-ஐப் பயன்படுத்துவது இந்தச் சிக்கலைக் குறைக்க உதவும்.

2. தனிப்பயன் குறியீடு செயல்படுத்தும் நேரத்தை அளவிடுதல்

mark மற்றும் measure நுழைவு வகைகள் தனிப்பயன் குறியீடு பிரிவுகளின் செயல்படுத்தும் நேரத்தை அளவிட உங்களை அனுமதிக்கின்றன. உங்கள் பயன்பாட்டு தர்க்கத்தில் செயல்திறன் இடையூறுகளைக் கண்டறிய இது பயனுள்ளதாக இருக்கும். எடுத்துக்காட்டாக, ஒரு குறிப்பிட்ட செயல்பாட்டின் கால அளவை அளவிட பின்வரும் குறியீட்டைப் பயன்படுத்தலாம்:

            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 உள்ளீடுகளைக் கேட்டு, அளவீட்டு பெயர் மற்றும் கால அளவை கன்சோலில் பதிவு செய்கிறது. இந்தத் தரவை பகுப்பாய்வு செய்வதன் மூலம், நீங்கள் மெதுவாகச் செயல்படும் குறியீட்டுப் பிரிவுகளைக் கண்டறிந்து, கேச்சிங், மெமோடைசேஷன் அல்லது அல்காரிதம் மேம்படுத்தல் போன்ற நுட்பங்களைப் பயன்படுத்தி அவற்றை மேம்படுத்தலாம்.

செயல்படுத்தக்கூடிய நுண்ணறிவு: உங்கள் பயன்பாட்டின் முக்கியமான பாதைகளைக் கண்டறியுங்கள் - அதாவது அடிக்கடி செயல்படுத்தப்படும் மற்றும் செயல்திறனில் மிகப்பெரிய தாக்கத்தை ஏற்படுத்தும் குறியீட்டின் வரிசைகள். மிக முக்கியமான செயல்திறன் ஆதாயங்களை அடைய இந்த முக்கியமான பாதைகளில் உங்கள் மேம்படுத்தல் முயற்சிகளை மையப்படுத்துங்கள்.

3. நீண்ட பணிகளைக் கண்டறிதல்

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
              
            
          

இந்தக் குறியீடு longtask உள்ளீடுகளைக் கேட்கும் ஒரு PerformanceObserver-ஐ உருவாக்குகிறது மற்றும் பணிப் பெயர் மற்றும் கால அளவை கன்சோலில் பதிவு செய்கிறது. இந்தத் தரவை பகுப்பாய்வு செய்வதன் மூலம், நீங்கள் நீண்ட நேரம் இயங்கும் பணிகளைக் கண்டறிந்து, அவற்றை சிறிய துண்டுகளாக உடைப்பதன் மூலம், ஒத்திசைவற்ற செயல்பாடுகளைப் பயன்படுத்துவதன் மூலம் அல்லது அவற்றை ஒரு வலைப் பணியாளருக்கு ஆஃப்லோட் செய்வதன் மூலம் அவற்றை மேம்படுத்தலாம்.

உலகளாவிய எழுத்து வழிகாட்டுதல்: தொழில்நுட்பக் கருத்துக்களை விளக்கும்போது, பல்வேறு நிலை தொழில்நுட்ப நிபுணத்துவம் உள்ள வாசகர்களுக்கு அணுகக்கூடிய தெளிவான மற்றும் சுருக்கமான மொழியைப் பயன்படுத்தவும். கடினமான சொற்களைத் தவிர்த்து, அறிமுகமில்லாத சொற்களுக்கு சூழலை வழங்கவும்.

4. வழிசெலுத்தல் நேரத்தை பகுப்பாய்வு செய்தல்

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
              
            
          

இந்தக் குறியீடு navigation உள்ளீடுகளைக் கேட்கும் ஒரு PerformanceObserver-ஐ உருவாக்குகிறது மற்றும் பல்வேறு நேர அளவீடுகளை கன்சோலில் பதிவு செய்கிறது. இந்தத் தரவை பகுப்பாய்வு செய்வதன் மூலம், மெதுவான DNS தேடல், மெதுவான TCP இணைப்பு, மெதுவான கோரிக்கை செயலாக்கம், மெதுவான பதில் செயலாக்கம் அல்லது மெதுவான DOM செயலாக்கம் போன்ற இடையூறுகளை நீங்கள் கண்டறியலாம். பின்னர் நீங்கள் இந்த இடையூறுகளை சரிசெய்ய உங்கள் DNS உள்ளமைவை மேம்படுத்துதல், உங்கள் சேவையக செயல்திறனை மேம்படுத்துதல் அல்லது உங்கள் HTML மற்றும் ஜாவாஸ்கிரிப்ட் குறியீட்டை மேம்படுத்துதல் போன்ற பொருத்தமான நடவடிக்கைகளை எடுக்கலாம்.

SEO மேம்படுத்தல்: உள்ளடக்கம் முழுவதும் தொடர்புடைய முக்கிய வார்த்தைகளை இயல்பாகப் பயன்படுத்தவும். இந்தப் பிரிவில், "வழிசெலுத்தல் நேரம்," "DNS தேடல் நேரம்," "TCP இணைப்பு நேரம்," மற்றும் "பக்க ஏற்றுதல் செயல்முறை" போன்ற முக்கிய வார்த்தைகள் தடையின்றி இணைக்கப்பட்டுள்ளன.

5. தளவமைப்பு மாற்றங்களைக் கண்காணித்தல்

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
              
            
          

இந்தக் குறியீடு layout-shift உள்ளீடுகளைக் கேட்கும் ஒரு PerformanceObserver-ஐ உருவாக்குகிறது மற்றும் மாற்றத்தின் மதிப்பை (மாற்றத்தின் அளவைக் குறிக்கும் ஒரு மதிப்பெண்) கன்சோலில் பதிவு செய்கிறது. அதிக மதிப்பு ஒரு குறிப்பிடத்தக்க மாற்றத்தைக் குறிக்கிறது. hadRecentInput பண்பு மாற்றம் ஒரு பயனர் உள்ளீட்டிற்கு 500ms க்குள் நிகழ்ந்ததா என்பதைக் குறிக்கிறது. பயனர் உள்ளீட்டால் தூண்டப்பட்ட மாற்றங்கள் பொதுவாக குறைவான சிக்கலானவையாகக் கருதப்படுகின்றன. sources பண்பு மாற்றத்தை ஏற்படுத்திய கூறுகள் பற்றிய விவரங்களை வழங்குகிறது. இந்தத் தரவை பகுப்பாய்வு செய்வதன் மூலம், படங்களுக்கு பரிமாணங்களைக் குறிப்பிடுவதன் மூலமும், விளம்பரங்களுக்கு இடத்தை ஒதுக்குவதன் மூலமும், மறுபாய்ச்சல்களை ஏற்படுத்தக்கூடிய டைனமிக்காக செலுத்தப்படும் உள்ளடக்கத்தைத் தவிர்ப்பதன் மூலமும் தளவமைப்பு மாற்றச் சிக்கல்களைக் கண்டறிந்து சரிசெய்யலாம்.

செயல்படுத்தக்கூடிய நுண்ணறிவு: கூகிளின் லைட்ஹவுஸ் போன்ற கருவிகளைப் பயன்படுத்தி தளவமைப்பு மாற்றச் சிக்கல்களைக் கண்டறிந்து, அவற்றைச் சரிசெய்வதற்கான பரிந்துரைகளைப் பெறுங்கள். பயனர் உள்ளீடு இல்லாமல் ஏற்படும் மாற்றங்களைச் சரிசெய்வதற்கு முன்னுரிமை அளியுங்கள்.

6. மிகப்பெரிய உள்ளடக்க ஓவியத்தை (LCP) அளவிடுதல்

largest-contentful-paint நுழைவு வகை பக்கத்தில் மிகப்பெரிய உள்ளடக்க உறுப்பு தெரிவதற்கு எடுக்கும் நேரத்தை அளவிடுகிறது. LCP என்பது பக்கத்தின் உணரப்பட்ட ஏற்றுதல் வேகத்தைப் பிரதிபலிக்கும் ஒரு முக்கிய வலை உயிர்ச்சக்தியாகும். ஒரு நல்ல LCP மதிப்பெண் 2.5 வினாடிகள் அல்லது அதற்கும் குறைவாகும். 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
              
            
          

இந்தக் குறியீடு largest-contentful-paint உள்ளீடுகளைக் கேட்கும் ஒரு PerformanceObserver-ஐ உருவாக்குகிறது மற்றும் தொடக்க நேரம், உறுப்பு மற்றும் URL-ஐ கன்சோலில் பதிவு செய்கிறது. இந்தத் தரவை பகுப்பாய்வு செய்வதன் மூலம், நீங்கள் மிகப்பெரிய உள்ளடக்க உறுப்பைக் கண்டறிந்து, படத்தின் அளவை மேம்படுத்துவதன் மூலம், ஒரு CDN-ஐப் பயன்படுத்துவதன் மூலம் அல்லது ஆதாரத்தை முன்கூட்டியே ஏற்றுவதன் மூலம் அதன் ஏற்றுதல் நேரத்தை மேம்படுத்தலாம்.

உலகளாவிய கண்ணோட்டம்: வெவ்வேறு பயனர்களுக்கு அவர்களின் திரை அளவு மற்றும் தெளிவுத்திறனைப் பொறுத்து வெவ்வேறு LCP கூறுகள் இருக்கும் என்பதைக் கருத்தில் கொள்ளுங்கள். பல்வேறு சாதனங்கள் மற்றும் திரை அளவுகளில் ஒரு நல்ல LCP மதிப்பெண்ணை உறுதிசெய்ய உங்கள் பயன்பாட்டை வடிவமைக்கவும்.

7. முதல் உள்ளீட்டு தாமதத்தை (FID) அளவிடுதல்

first-input-delay நுழைவு வகை முதல் பயனர் தொடர்புக்கு (எ.கா., ஒரு கிளிக் அல்லது தட்டுதல்) உலாவி பதிலளிக்க எடுக்கும் நேரத்தை அளவிடுகிறது. FID என்பது பக்கத்தின் ஊடாடும் தன்மையைப் பிரதிபலிக்கும் மற்றொரு முக்கிய வலை உயிர்ச்சக்தியாகும். ஒரு நல்ல FID மதிப்பெண் 100 மில்லி விநாடிகள் அல்லது அதற்கும் குறைவாகும். 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
              
            
          

இந்தக் குறியீடு first-input உள்ளீடுகளைக் கேட்கும் ஒரு PerformanceObserver-ஐ உருவாக்குகிறது மற்றும் தாமதம், நிகழ்வு வகை மற்றும் இலக்கு உறுப்பை கன்சோலில் பதிவு செய்கிறது. இந்தத் தரவை பகுப்பாய்வு செய்வதன் மூலம், நீங்கள் நீண்ட உள்ளீட்டு தாமதங்களுக்கான காரணங்களைக் கண்டறிந்து, பிரதான திரியில் செலவிடும் நேரத்தைக் குறைக்க உங்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டை மேம்படுத்தலாம்.

செயல்படுத்தக்கூடிய நுண்ணறிவு: நீண்ட நேரம் இயங்கும் பணிகளை சிறிய துண்டுகளாக உடைக்கவும், பின்னணி திரிக்கு பணிகளை ஆஃப்லோட் செய்ய வலைப் பணியாளர்களைப் பயன்படுத்தவும், மற்றும் பயனர் தொடர்புகளுக்கான செயலாக்க நேரத்தைக் குறைக்க உங்கள் நிகழ்வு கேட்பவர்களை மேம்படுத்தவும்.

மேம்பட்ட நுட்பங்கள் மற்றும் பரிசீலனைகள்

மேலே விவரிக்கப்பட்ட அடிப்படைப் பயன்பாட்டு நிகழ்வுகளுக்கு கூடுதலாக, வலைப் பயன்பாட்டு செயல்திறன் பற்றிய ஆழமான நுண்ணறிவுகளைப் பெற Performance Observer API மேலும் மேம்பட்ட சூழ்நிலைகளில் பயன்படுத்தப்படலாம். இங்கே சில மேம்பட்ட நுட்பங்கள் மற்றும் பரிசீலனைகள்:

1. பஃபரிங்கைப் பயன்படுத்துதல்

observe() முறையில் உள்ள buffered விருப்பம் PerformanceObserver உருவாக்கப்படுவதற்கு முன்பு பதிவு செய்யப்பட்ட வரலாற்று செயல்திறன் உள்ளீடுகளைப் பெற உங்களை அனுமதிக்கிறது. ஆரம்ப பக்க ஏற்றத்தின் போது அல்லது உங்கள் கண்காணிப்புக் குறியீடு ஏற்றப்படுவதற்கு முன்பு ஏற்படும் செயல்திறன் தரவைப் பிடிக்க இது பயனுள்ளதாக இருக்கும். எடுத்துக்காட்டாக:

            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
              
            
          

இந்தக் குறியீடு navigation மற்றும் resource உள்ளீடுகளைக் கேட்கும் ஒரு PerformanceObserver-ஐ உருவாக்குகிறது மற்றும் பார்வையாளர் உருவாக்கப்படுவதற்கு முன்பு பதிவு செய்யப்பட்ட அனைத்து வரலாற்று உள்ளீடுகளையும் பெறுகிறது.

2. செயல்திறன் உள்ளீடுகளை வடிகட்டுதல்

உங்கள் பகுப்பாய்விற்கு மிகவும் பொருத்தமான தரவில் கவனம் செலுத்த, குறிப்பிட்ட அளவுகோல்களின் அடிப்படையில் செயல்திறன் உள்ளீடுகளை நீங்கள் வடிகட்டலாம். எடுத்துக்காட்டாக, அவற்றின் 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
              
            
          

இந்தக் குறியீடு resource உள்ளீடுகளைக் கேட்கும் ஒரு PerformanceObserver-ஐ உருவாக்குகிறது மற்றும் .jpg நீட்டிப்புடன் பட ஆதாரங்களுக்கான உள்ளீடுகளை மட்டும் சேர்க்க அவற்றை வடிகட்டுகிறது.

3. வலைப் பணியாளர்களைப் பயன்படுத்துதல்

பிரதான திரியின் செயல்திறனைப் பாதிப்பதைத் தவிர்க்க, நீங்கள் செயல்திறன் கண்காணிப்பு மற்றும் பகுப்பாய்வை ஒரு வலைப் பணியாளருக்கு ஆஃப்லோட் செய்யலாம். இது UI-ஐத் தடுக்காமல் பின்னணியில் செயல்திறன் தரவைச் சேகரித்து செயலாக்க உங்களை அனுமதிக்கிறது. எடுத்துக்காட்டாக, செயல்திறன் நிகழ்வுகளைக் கேட்டு, பகுப்பாய்விற்காக தரவை பிரதான திரிக்கு அனுப்பும் ஒரு வலைப் பணியாளரை நீங்கள் உருவாக்கலாம்.

உலகளாவிய எழுத்து வழிகாட்டுதல்: உலகளாவிய பார்வையாளர்களுக்குப் பொருத்தமான எடுத்துக்காட்டுகளைப் பயன்படுத்தவும். ஒரு குறிப்பிட்ட நாடு அல்லது கலாச்சாரத்திற்கு குறிப்பிட்ட எடுத்துக்காட்டுகளைத் தவிர்க்கவும்.

4. பகுப்பாய்வு தளங்களுடன் ஒருங்கிணைத்தல்

செயல்திறன் தரவை ஒரு மையப்படுத்தப்பட்ட இடத்தில் சேகரித்து பகுப்பாய்வு செய்ய Performance Observer API-ஐ பகுப்பாய்வு தளங்களுடன் ஒருங்கிணைக்கலாம். இது காலப்போக்கில் செயல்திறன் போக்குகளைக் கண்காணிக்கவும், செயல்திறன் பின்னடைவுகளைக் கண்டறியவும், செயல்திறன் அளவீடுகளை மற்ற பயனர் நடத்தை தரவுகளுடன் தொடர்புபடுத்தவும் உங்களை அனுமதிக்கிறது. உங்கள் பகுப்பாய்வு தளத்திற்கு அதன் API-ஐப் பயன்படுத்தி அல்லது அவற்றை ஒரு சேவையக பக்க இறுதிப்புள்ளிக்கு பதிவு செய்வதன் மூலம் செயல்திறன் உள்ளீடுகளை அனுப்பலாம்.

5. பழைய உலாவிகளுக்கு பாலிஃபில்களைப் பயன்படுத்துதல்

Performance Observer API பெரும்பாலான நவீன உலாவிகளால் ஆதரிக்கப்பட்டாலும், அது பழைய உலாவிகளில் கிடைக்காமல் இருக்கலாம். பழைய உலாவிகளை ஆதரிக்க, API-யின் ஒரு பின்னடைவு செயலாக்கத்தை வழங்கும் ஒரு பாலிஃபில்லை நீங்கள் பயன்படுத்தலாம். உங்கள் பயன்பாட்டில் நீங்கள் பயன்படுத்தக்கூடிய பல பாலிஃபில்கள் ஆன்லைனில் கிடைக்கின்றன.

Performance Observer API-ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

Performance Observer API-ஐ திறம்படப் பயன்படுத்தவும் பொதுவான இடர்ப்பாடுகளைத் தவிர்க்கவும், இந்த சிறந்த நடைமுறைகளைப் பின்பற்றவும்:

• உங்கள் இலக்குகளுக்குப் பொருத்தமான அளவீடுகளை மட்டுமே கண்காணிக்கவும். செயல்திறனைப் பாதிக்கக்கூடிய அதிகப்படியான தரவைச் சேகரிப்பதைத் தவிர்க்கவும்.
• மிகவும் முக்கியமான தரவில் கவனம் செலுத்த வடிகட்டலைப் பயன்படுத்தவும். நீங்கள் செயலாக்க வேண்டிய தரவின் அளவைக் குறைக்க குறிப்பிட்ட அளவுகோல்களின் அடிப்படையில் செயல்திறன் உள்ளீடுகளை வடிகட்டவும்.
• செயல்திறன் கண்காணிப்பை ஒரு வலைப் பணியாளருக்கு ஆஃப்லோட் செய்யவும். இது செயல்திறன் கண்காணிப்பு பிரதான திரியின் செயல்திறனைப் பாதிப்பதைத் தடுக்கும்.
• காலப்போக்கில் செயல்திறன் போக்குகளைக் கண்காணிக்க பகுப்பாய்வு தளங்களுடன் ஒருங்கிணைக்கவும். இது செயல்திறன் பின்னடைவுகளைக் கண்டறியவும், செயல்திறன் அளவீடுகளை மற்ற பயனர் நடத்தை தரவுகளுடன் தொடர்புபடுத்தவும் உங்களை அனுமதிக்கும்.
• பழைய உலாவிகளை ஆதரிக்க பாலிஃபில்களைப் பயன்படுத்தவும். இது உங்கள் செயல்திறன் கண்காணிப்புக் குறியீடு பரந்த அளவிலான உலாவிகளில் வேலை செய்வதை உறுதி செய்யும்.
• உங்கள் செயல்திறன் கண்காணிப்புக் குறியீட்டை முழுமையாக சோதிக்கவும். உங்கள் குறியீடு தானாகவே எந்த செயல்திறன் சிக்கல்களையும் அறிமுகப்படுத்தவில்லை என்பதை உறுதிப்படுத்தவும்.
• தரவு தனியுரிமை விதிமுறைகளைக் கவனத்தில் கொள்ளுங்கள். பயனரின் அனுமதியின்றி நீங்கள் எந்தவொரு தனிப்பட்ட முறையில் அடையாளம் காணக்கூடிய தகவலையும் (PII) சேகரிக்கவில்லை என்பதை உறுதிப்படுத்தவும்.

SEO மேம்படுத்தல்: ஈர்க்கக்கூடிய மெட்டா விளக்கத்தை உருவாக்கவும். வலைப்பதிவு இடுகையின் உள்ளடக்கத்தை சுருக்கமாகக் கூறும் ஒரு சுருக்கமான விளக்கம் JSON மெட்டாடேட்டாவில் வழங்கப்பட்டுள்ளது.

முடிவுரை

Performance Observer API என்பது ஒரு சக்திவாய்ந்த கருவியாகும், இது டெவலப்பர்களுக்கு இயக்கநேர செயல்திறன் அளவீடுகளைக் கண்காணிக்கவும் பகுப்பாய்வு செய்யவும், இடையூறுகளைக் கண்டறியவும், மற்றும் ஒரு மென்மையான, வேகமான, மற்றும் மிகவும் சுவாரஸ்யமான பயனர் அனுபவத்திற்காக தங்கள் வலைப் பயன்பாடுகளை மேம்படுத்தவும் உதவுகிறது. API-யின் முக்கிய கருத்துக்கள் மற்றும் அம்சங்களைப் புரிந்துகொள்வதன் மூலமும், அதன் பயன்பாட்டிற்கான சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலமும், உங்கள் பயன்பாடுகளின் செயல்திறன் பற்றிய மதிப்புமிக்க நுண்ணறிவுகளைப் பெறலாம் மற்றும் உங்கள் பயனர்களுக்கு அவர்களின் இருப்பிடம் அல்லது சாதனத்தைப் பொருட்படுத்தாமல் ஒரு சிறந்த பயனர் அனுபவத்தை வழங்கலாம். வலைப் பயன்பாடுகள் பெருகிய முறையில் சிக்கலானதாக மாறும்போது, உகந்த செயல்திறன் மற்றும் பயனர் திருப்தியை உறுதி செய்வதற்கான ஒரு இன்றியமையாத கருவியாக Performance Observer API தொடர்ந்து இருக்கும்.

எல்லாவற்றிற்கும் மேலாக பயனர் அனுபவத்திற்கு முன்னுரிமை அளிக்க நினைவில் கொள்ளுங்கள். செயல்திறன் மேம்படுத்தல் எப்போதும் உங்கள் பயனர்களுக்கு ஒரு தடையற்ற மற்றும் சுவாரஸ்யமான அனுபவத்தை வழங்கும் நோக்கத்தால் இயக்கப்பட வேண்டும். Performance Observer API-ஐ திறம்படப் பயன்படுத்துவதன் மூலம், உங்கள் பயன்பாட்டின் செயல்திறன் பற்றிய ஆழமான புரிதலைப் பெறலாம் மற்றும் பயனர் அனுபவத்தை மேம்படுத்த தகவலறிந்த முடிவுகளை எடுக்கலாம்.

செயல்திறனின் உலகளாவிய தாக்கங்களை கவனமாகக் கருத்தில் கொள்வதன் மூலம், டெவலப்பர்கள் உலகெங்கிலும் உள்ள பயனர்களுக்கு வேகமான, பதிலளிக்கக்கூடிய மற்றும் அணுகக்கூடிய வலைப் பயன்பாடுகளை உருவாக்க முடியும். இதற்கு நெட்வொர்க் தாமதம், சாதனத் திறன்கள் மற்றும் கலாச்சார விருப்பத்தேர்வுகள் போன்ற காரணிகளைக் கணக்கில் எடுத்துக்கொள்ளும் ஒரு முழுமையான அணுகுமுறை தேவைப்படுகிறது.