முகப்பு செயல்திறன் கண்காணிப்பாளர்: உலகளாவிய வலைக்கான விரிவான மெட்ரிக்ஸ் சேகரிப்பு

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

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

முகப்பு செயல்திறனின் உலகளாவிய கட்டாயம்

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

செயல்திறன் என்பது ஏற்றுதல் வேகத்தைப் பற்றியது மட்டுமல்ல; அது பதிலளிப்பு, காட்சி நிலைத்தன்மை மற்றும் ஊடாடல்களின் மென்மை ஆகியவற்றை உள்ளடக்கியது. ஒவ்வொரு பயனரும், எல்லா இடங்களிலும், உங்கள் பயன்பாடு அவர்களுக்காக வேலை செய்கிறது, அவர்களுக்கு எதிராக அல்ல என்பதை உணருவதை உறுதி செய்வதே இதன் நோக்கம். உண்மையான பயனர் கண்காணிப்பு (RUM) கருவிகள், செயல்திறன் கண்காணிப்பாளர் போன்ற ஏபிஐ-களால் இயக்கப்படுகின்றன, இந்த பன்முக யதார்த்தத்தைக் கைப்பற்றுவதில் அடிப்படையானவை.

செயல்திறன் கண்காணிப்பாளர்களின் எழுச்சி: அவை ஏன் அவசியம்

வரலாற்று ரீதியாக, கிளையன்ட் பக்கத்தில் விரிவான முகப்பு செயல்திறன் மெட்ரிக்ஸை சேகரிப்பது பெரும்பாலும் சிரமமானதாக இருந்தது, இது கைமுறை கணக்கீடுகள், `Date.now()` அழைப்புகள் அல்லது உலாவி-குறிப்பிட்ட செயல்திறன் ஏபிஐ-களை பாகுபடுத்துவதை நம்பியிருந்தது. பயனுள்ளதாக இருந்தாலும், இந்த முறைகளுக்கு தரப்படுத்தல் இல்லை, துல்லியமற்ற தன்மைக்கு ஆளாகின, மற்றும் எப்போதும் ஒரு நிலையான, நிகழ்வு-இயக்கும் தரவு ஓட்டத்தை வழங்கவில்லை.

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

பாரம்பரிய மெட்ரிக்ஸ் சேகரிப்பின் வரம்புகள்

• நிலையற்ற நேரம்: குறியீடு தொகுதிகளைச் சுற்றி `Date.now()` அழைப்புகளை கைமுறையாகச் சேர்ப்பது ஜாவாஸ்கிரிப்ட் செயல்படுத்தல் மாறுபாடுகள் மற்றும் பணி திட்டமிடல் காரணமாக துல்லியமற்றதாக இருக்கலாம்.
• வரையறுக்கப்பட்ட நுணுக்கம்: பாரம்பரிய `performance.timing` (இப்போது `performance.getEntriesByType('navigation')` க்கு ஆதரவாக கைவிடப்பட்டது) உயர்-நிலை நெட்வொர்க் நேரங்களை வழங்கியது, ஆனால் ரெண்டரிங், லேஅவுட் ஷிப்ட்கள் அல்லது குறிப்பிட்ட உறுப்பு ஏற்றுதல் பற்றிய விரிவான தகவல்கள் இல்லை.
• வாக்குப்பதிவு மேல்நிலைச் செலவு: செயல்திறன் மெட்ரிக்ஸை தொடர்ந்து சரிபார்ப்பது அதன் சொந்த செயல்திறன் மேல்நிலைச் செலவை அறிமுகப்படுத்தலாம், அது அளவிட முயலும் பயனர் அனுபவத்தைப் பாதிக்கிறது.
• உலாவி முரண்பாடுகள்: வெவ்வேறு உலாவிகள் செயல்திறன் தரவை வெவ்வேறு வழிகளில் வெளிப்படுத்தலாம், இது உலகளவில் வலுவான கண்காணிப்பு தீர்வை உருவாக்குவதை சவாலாக ஆக்குகிறது.
• நிகழ்வு-இயக்கும் நுண்ணறிவுகளின் பற்றாக்குறை: செயல்திறன் மாறும் தன்மையுடையது. ஒரு ஒற்றை ஸ்னாப்ஷாட் முழு கதையையும் கூறாது. குறிப்பிடத்தக்க நிகழ்வுகள் நிகழும்போது அவற்றுக்கு எதிர்வினையாற்றுவதுதான் தேவை.

செயல்திறன் கண்காணிப்பாளர் ஏபிஐ இந்த வரம்புகளைத் தாண்டி, செழுமையான செயல்திறன் தரவை சேகரிக்க ஒரு தரப்படுத்தப்பட்ட, நிகழ்வு-இயக்கும் மற்றும் குறைந்த மேல்நிலைச் செலவு பொறிமுறையை வழங்குகிறது.

செயல்திறன் கண்காணிப்பாளர் ஏபிஐ-யை ஆழமாக ஆராய்தல்

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

செயல்திறன் கண்காணிப்பாளர் எவ்வாறு செயல்படுகிறது: ஒரு முக்கிய கருத்து

அதன் மையத்தில், செயல்திறன் கண்காணிப்பாளர் ஒரு எளிய மற்றும் சக்திவாய்ந்த பொறிமுறையாகும்:

1. நீங்கள் ஒரு `PerformanceObserver` நிகழ்வை உருவாக்குகிறீர்கள், அதன் கட்டமைப்பாளருக்கு ஒரு கால்பேக் செயல்பாட்டை அனுப்புகிறீர்கள். இந்த கால்பேக் புதிய செயல்திறன் உள்ளீடுகள் கவனிக்கப்படும் போதெல்லாம் செயல்படுத்தப்படும்.
2. நீங்கள் பின்னர் கண்காணிப்பாளருக்கு அதன் `observe()` முறையை அழைப்பதன் மூலம் எந்த வகையான செயல்திறன் உள்ளீடுகளில் ஆர்வமாக உள்ளீர்கள் என்று அறிவுறுத்துகிறீர்கள், ஒன்று அல்லது அதற்கு மேற்பட்ட `entryTypes` ஐக் குறிப்பிடுகிறீர்கள்.
3. உலாவி குறிப்பிட்ட வகைகளின் புதிய உள்ளீடுகளைப் பதிவு செய்யும்போது, உங்கள் கால்பேக் செயல்பாடு `PerformanceObserverEntryList` αντικείμενοடன் அழைக்கப்படுகிறது, இது கடைசி கால்பேக்கிற்குப் பிறகு அனைத்து புதிய உள்ளீடுகளையும் கொண்டுள்ளது.
4. நினைவக கசிவுகள் மற்றும் தேவையற்ற செயலாக்கத்தைத் தடுக்க இனி தேவைப்படாதபோது நீங்கள் கண்காணிப்பாளரைத் துண்டிக்கலாம்.

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

முக்கிய நுழைவு வகைகள் மற்றும் அவை என்ன அளவிடுகின்றன

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

• 'paint': இந்த நுழைவு வகை பக்கத்தின் வாழ்க்கைச் சுழற்சியில் முக்கிய ரெண்டரிங் தருணங்களைப் பற்றிய தகவல்களை வழங்குகிறது, குறிப்பாக `first-paint` மற்றும் `first-contentful-paint` (FCP).
  • first-paint: வழிசெலுத்தலுக்குப் பிறகு உலாவி திரையில் எந்தவொரு காட்சி மாற்றத்தையும் முதலில் ரெண்டர் செய்யும் நேரத்தைக் குறிக்கிறது. இது வெறும் பின்னணி நிறமாக இருக்கலாம்.
  • first-contentful-paint: உலாவி DOM-லிருந்து முதல் உள்ளடக்கத்தை ரெண்டர் செய்யும் நேரத்தைக் குறிக்கிறது, இது பக்கம் உண்மையில் ஏற்றப்படுகிறது என்ற முதல் பின்னூட்டத்தை பயனருக்கு வழங்குகிறது. இது ஒரு முக்கியமான பயனர்-மைய மெட்ரிக் ஆகும், இது பயனர் எப்போது பக்கம் பயனுள்ளதாக மாறத் தொடங்குகிறது என்பதை உணர முடியும் என்பதைக் குறிக்கிறது.
• 'largest-contentful-paint': இந்த நுழைவு வகை காட்சிப் பகுதிக்குள் தெரியும் மிகப்பெரிய படம் அல்லது உரைத் தொகுதியின் ரெண்டர் நேரத்தை அளவிடுகிறது. LCP என்பது கோர் வெப் வைட்டல்ஸ்களில் ஒன்றாகும் மற்றும் உணரப்பட்ட ஏற்றுதல் வேகத்திற்கான ஒரு முக்கியமான மெட்ரிக் ஆகும். ஒரு வேகமான LCP பயனர்களுக்கு பக்கம் பயனுள்ளது மற்றும் சரியாக ஏற்றப்படுகிறது என்று உறுதியளிக்கிறது. உலகளாவிய பயனர்களுக்கு, பட அளவுகள், நெட்வொர்க் வேகம் மற்றும் சேவையக இருப்பிடங்களைப் பொறுத்து LCP கணிசமாக மாறுபடலாம், இது அதன் கண்காணிப்பை மிக முக்கியமாக்குகிறது.
• 'layout-shift': இந்த நுழைவு வகை எதிர்பாராத லேஅவுட் மாற்றங்களைப் பற்றிய தகவல்களை வழங்குகிறது, இது கும்முலேட்டிவ் லேஅவுட் ஷிப்ட் (CLS) க்கு பங்களிக்கிறது, இது மற்றொரு கோர் வெப் வைட்டல் ஆகும். CLS பக்கத்தின் வாழ்க்கைச் சுழற்சியின் போது ஏற்படும் எதிர்பாராத லேஅவுட் மாற்றத்தின் அளவைக் கணக்கிடுகிறது. எதிர்பாராத லேஅவுட் மாற்றங்கள் பயனர்களுக்கு எரிச்சலூட்டுகின்றன, இது தவறான கிளிக்குகளுக்கும் ஒரு வெறுப்பூட்டும் அனுபவத்திற்கும் வழிவகுக்கிறது. இதைக் கவனிப்பது, ஏற்றப்பட்ட பிறகு மாறும் நிலையற்ற கூறுகளை அடையாளம் காண உதவுகிறது.
• 'element': இந்த நுழைவு வகை டெவலப்பர்களுக்கு குறிப்பிட்ட கூறுகளின் ரெண்டர் நேரம் மற்றும் அளவை அளவிட அனுமதிக்கிறது. கோர் வெப் வைட்டல் இல்லையென்றாலும், ஒரு ஹீரோ படம், ஒரு முதன்மை அழைப்பு-க்கு-செயல் பொத்தான் அல்லது ஒரு முக்கியமான தரவு அட்டவணை போன்ற முக்கியமான கூறுகளின் செயல்திறனைக் கண்காணிக்க இது மிகவும் பயனுள்ளதாக இருக்கும். இது பெரும்பாலும் எலிமென்ட் டைமிங் ஏபிஐ உடன் இணைந்து பயன்படுத்தப்படுகிறது.
• 'navigation': திசைதிருப்பல்கள், DNS தேடல், TCP இணைப்பு, கோரிக்கை/பதில் மற்றும் DOM செயலாக்கம் உட்பட தற்போதைய பக்கத்தின் வழிசெலுத்தல் பற்றிய விரிவான நேரத் தகவல்களை வழங்குகிறது. இது பழைய `performance.timing` இடைமுகத்தை மாற்றுகிறது மற்றும் மிகவும் செழுமையான தரவுத்தொகுப்பை வழங்குகிறது. நெட்வொர்க் மற்றும் ஆரம்ப சேவையக பக்க செயல்திறனைப் புரிந்துகொள்வது அவசியம்.
• 'resource': பக்கத்தால் ஏற்றப்பட்ட அனைத்து வளங்கள் (படங்கள், ஸ்கிரிப்டுகள், ஸ்டைல்ஷீட்கள், எழுத்துருக்கள், அஜாக்ஸ் கோரிக்கைகள் போன்றவை) பற்றிய விரிவான நேரத் தகவல்களை வழங்குகிறது. இதில் ஃபெட்ச் தொடக்கம், பதில் தொடக்கம், பதில் முடிவு, பரிமாற்ற அளவு மற்றும் பல அடங்கும். இது மெதுவாக ஏற்றப்படும் சொத்துக்களை அடையாளம் காண்பதற்கு விலைமதிப்பற்றது, குறிப்பாக அதிக தாமத நெட்வொர்க்குகளில் உள்ள பயனர்கள் அல்லது தொலைதூர CDN-களிலிருந்து உள்ளடக்கத்தை அணுகுபவர்களுக்கு இது பொருந்தும்.
• 'longtask': உலாவியின் முக்கிய திரி 50 மில்லி விநாடிகள் அல்லது அதற்கு மேல் தடுக்கப்பட்ட காலங்களை அடையாளம் காட்டுகிறது. நீண்ட பணிகள் பயனர் உள்ளீட்டிற்கு பதிலளிப்பதிலிருந்தோ அல்லது UI-ஐப் புதுப்பிப்பதிலிருந்தோ உலாவியைத் தடுக்கின்றன, இது உணரப்பட்ட தடுமாற்றம் மற்றும் பதிலளிக்காத தன்மைக்கு வழிவகுக்கிறது. நீண்ட பணிகளைக் கண்காணிப்பது, வளரும் சந்தைகளில் பொதுவான குறைந்த-நிலை சாதனங்களில் குறிப்பாக, ஊடாடலை மேம்படுத்த மேம்படுத்தப்பட வேண்டிய ஜாவாஸ்கிரிப்ட் குறியீட்டைத் துல்லியமாக அடையாளம் காண உதவுகிறது.
• 'event': 'click', 'mousedown', 'keydown' போன்ற குறிப்பிட்ட DOM நிகழ்வுகளுக்கான நேரத் தகவல்களை வழங்குகிறது. இதில் நிகழ்வின் செயலாக்க நேரம் (கால அளவு) மற்றும் நிகழ்வுக்குப் பிறகு காட்சிப் புதுப்பிப்பை வழங்க உலாவி எடுத்துக்கொண்ட நேரம் ஆகியவை அடங்கும். இது முதல் உள்ளீடு தாமதம் (FID) மற்றும் அடுத்த பெயிண்டிற்கு ஊடாடல் (INP) ஆகியவற்றை அளவிடுவதற்கு முக்கியமானது, இவை பயனர் பதிலளிப்பிற்கு முக்கியமானவை. அதிக நெட்வொர்க் தாமதம் உள்ள பயனர்களுக்கு, ஒரு ஊடாடலுக்கும் அடுத்த காட்சி பின்னூட்டத்திற்கும் இடையிலான நேரம் குறிப்பாக கவனிக்கத்தக்கது.
• 'frame': (தற்போது சில உலாவிகளில் சோதனை நிலையில் உள்ளது) தனிப்பட்ட அனிமேஷன் பிரேம்கள் பற்றிய தகவல்களை வழங்குகிறது, அனிமேஷன் செயல்திறன் மற்றும் மென்மை பற்றிய நுண்ணறிவுகளை வழங்குகிறது.
• 'interaction': (புதியது, இன்னும் உருவாகி வருகிறது; 'event'-இன் சில அம்சங்களை மாற்றுகிறது) பயனர் ஊடாடல்கள் பற்றிய உயர்-நிலை தகவல்களை வழங்குகிறது, தொடர்புடைய நிகழ்வுகளை (எ.கா., ஒரு 'mousedown' மற்றும் 'mouseup' ஒரு ஒற்றை ஊடாடலாக) குழுவாக்கி, பயனர் பதிலளிப்பு பற்றிய ஒரு முழுமையான பார்வையை அளிக்கிறது மற்றும் அடுத்த பெயிண்டிற்கு ஊடாடல் (INP)-க்கு பங்களிக்கிறது. பயனர் செயல்களுக்கு UI எவ்வளவு விரைவாக பதிலளிக்கிறது என்பதைப் புரிந்துகொள்வது இது முக்கியம்.

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

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

செயல்திறன் கண்காணிப்பாளர் ஏபிஐ-யை எவ்வாறு அமைப்பது மற்றும் பயன்படுத்துவது என்பதற்கான நடைமுறை எடுத்துக்காட்டுகள் வழியாகச் செல்வோம்.

அடிப்படை அமைப்பு: ஒரு ஒற்றை நுழைவு வகையைக் கவனித்தல்

உதாரணமாக, FCP-ஐப் பிடிக்க `paint` நிகழ்வுகளைக் கவனிக்க:

            if ('PerformanceObserver' in window) {
  const observer = new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      if (entry.name === 'first-contentful-paint') {
        console.log('FCP:', entry.startTime);
        // Send this data to your analytics/RUM platform
        sendToAnalytics('fcp', entry.startTime);
        // Disconnect after the first FCP is found, as it won't change
        observer.disconnect();
      }
    }
  });

  observer.observe({ type: 'paint', buffered: true });
}

function sendToAnalytics(metricName, value) {
  // Placeholder for sending data. In a real application, you'd use a robust RUM solution.
  console.log(`Sending ${metricName} to analytics with value: ${value}`);
  // Example: fetch('/api/performance', { method: 'POST', body: JSON.stringify({ metricName, value }) });
}
            

              
                Copy
              
            
          

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

பல நுழைவு வகைகளைக் கவனித்தல்

நீங்கள் ஒரு ஒற்றை கண்காணிப்பாளர் நிகழ்வுடன் பல நுழைவு வகைகளைக் கவனிக்கலாம்:

            if ('PerformanceObserver' in window) {
  const observer = new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      console.log(`${entry.entryType}:`, entry);

      if (entry.entryType === 'largest-contentful-paint') {
        console.log('LCP:', entry.startTime);
        sendToAnalytics('lcp', entry.startTime);
      } else if (entry.entryType === 'layout-shift') {
        // Collect CLS data. Note that CLS needs accumulation.
        // More on this in the CLS section.
        console.log('Layout Shift detected:', entry.value);
        sendToAnalytics('layout_shift_occurrence', entry.value);
      } else if (entry.entryType === 'resource') {
        // Filter for specific resources, e.g., large images or critical JS files
        if (entry.duration > 1000 || entry.decodedBodySize > 50000) {
          console.log(`Slow/Large Resource: ${entry.name}, duration: ${entry.duration}, size: ${entry.decodedBodySize}`);
          sendToAnalytics('slow_resource', { name: entry.name, duration: entry.duration, size: entry.decodedBodySize });
        }
      }
      // ... handle other entry types ...
    }
  });

  observer.observe({
    entryTypes: ['paint', 'largest-contentful-paint', 'layout-shift', 'resource', 'longtask'],
    buffered: true // Essential for early metrics
  });
}

function sendToAnalytics(metricName, value) {
  console.log(`Sending ${metricName} to analytics with value:`, value);
}
            

              
                Copy
              
            
          

பஃபர் செய்யப்பட்ட உள்ளீடுகளைக் கையாளுதல் மற்றும் துண்டித்தல்

ஆரம்பத்தில் நிகழும் மெட்ரிக்ஸ் (FCP, LCP, CLS பங்களிப்புகள் போன்றவை) க்கு, `buffered: true` முக்கியமானது. இருப்பினும், தொடர்ச்சியான மெட்ரிக்ஸ் (`longtask` அல்லது FID/INP க்கான `event` போன்றவை) க்கு, கண்காணிப்பாளர் செயலில் இருக்கும் வரை புகாரளித்துக் கொண்டே இருக்கும்.

கண்காணிப்பாளர்கள் இனி தேவைப்படாதபோது, குறிப்பாக ஒற்றை-நிகழ்வு மெட்ரிக்ஸ் அல்லது பக்கத்திலிருந்து வெளியேறுவதற்கு முன்பு அவற்றைத் துண்டிப்பது ஒரு நல்ல நடைமுறையாகும். நீண்டகால மெட்ரிக்ஸ் க்காக, இறுதி திரட்டப்பட்ட தரவை அனுப்ப `pagehide` அல்லது `beforeunload` நிகழ்வுகளில் நீங்கள் பொதுவாகத் துண்டிப்பீர்கள்.

            // Example for disconnecting and sending final CLS score
let cumulativeLayoutShiftScore = 0;

const clsObserver = new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cumulativeLayoutShiftScore += entry.value;
    }
  }
});

clsObserver.observe({ type: 'layout-shift', buffered: true });

window.addEventListener('pagehide', () => {
  // Send the final CLS score before the page is hidden
  sendToAnalytics('cumulative_layout_shift', cumulativeLayoutShiftScore);
  clsObserver.disconnect();
});
            

              
                Copy
              
            
          

மேம்பட்ட பயன்பாட்டு வழக்குகள் மற்றும் தனிப்பயன் மெட்ரிக்ஸ்

தரமான நுழைவு வகைகளுக்கு அப்பால், செயல்திறன் கண்காணிப்பாளரை மிகவும் தனிப்பயனாக்கப்பட்ட கண்காணிப்புக்காகப் பயன்படுத்தலாம்:

• கூறு ரெண்டர் நேரங்களை அளவிடுதல்: உங்கள் பயன்பாட்டுக் குறியீட்டிற்குள் `performance.mark()` மற்றும் `performance.measure()` ஐப் பயன்படுத்தி தனிப்பயன் நேரங்களை வரையறுக்கலாம், பின்னர் இவற்றை `entryType: 'measure'` உடன் கவனிக்கலாம்.

              // In your component's mount/render lifecycle
  performance.mark('myComponent:startRender');
  // ... component rendering logic ...
  performance.mark('myComponent:endRender');
  performance.measure('myComponentRenderDuration', 'myComponent:startRender', 'myComponent:endRender');
  
  // Then, in your observer:
  const customObserver = new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntriesByName('myComponentRenderDuration')) {
      console.log(`Component 'myComponent' rendered in ${entry.duration}ms`);
      sendToAnalytics('custom_component_render', entry.duration);
    }
  });
  customObserver.observe({ type: 'measure', buffered: true });
              
  
                
                  Copy
                
              
            

• குறிப்பிட்ட செயல்களுக்கான பயனர் ஊடாடல் தாமதம்: `event` மற்றும் `interaction` நுழைவு வகைகள் பல நிகழ்வுகளை உள்ளடக்கியிருந்தாலும், நீங்கள் ஒரு சிக்கலான ஊடாடல் வரிசையை நேரப்படுத்த விரும்பலாம். குறிப்பிட்ட பயனர்-தூண்டிய செயல்பாடுகளைச் சுற்றி `performance.mark()` மற்றும் `performance.measure()` ஐப் பயன்படுத்தவும் (எ.கா., ஒரு படிவத்தைச் சமர்ப்பித்தல், ஒரு முடிவற்ற சுருள் பகுதியை ஏற்றுதல்).
• மெய்நிகர் DOM புதுப்பிப்புகள் (எ.கா., React/Vue ரெண்டர் நேரங்கள்): கட்டமைப்புகள் பெரும்பாலும் அவற்றின் சொந்த நேர பொறிமுறைகளைக் கொண்டுள்ளன. நீங்கள் இவற்றில் இணைந்து தனிப்பயன் செயல்திறன் உள்ளீடுகளை உருவாக்கலாம், அவை பின்னர் ஒரு `PerformanceObserver` நிகழ்வால் கவனிக்கப்படுகின்றன.

உலகளாவிய பார்வையாளர்களுக்கான முக்கியமான மெட்ரிக்ஸ்

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

முதல் உள்ளடக்க பெயிண்ட் (FCP) மற்றும் உலகளாவிய உணர்வுகள்

FCP என்பது திரையில் உள்ளடக்கத்தின் முதல் பிக்சல் தோன்றும் நேரத்தை அளவிடுகிறது, இது பயனருக்கு பக்கம் ஏற்றப்படுகிறது என்று சமிக்ஞை செய்கிறது. மெதுவான இணைய உள்கட்டமைப்பு உள்ள பகுதிகளில் அல்லது தரவு-வரையறுக்கப்பட்ட திட்டங்களில் உள்ள பயனர்களுக்கு, ஒரு விரைவான FCP இன்றியமையாதது. இது கவலையைக் குறைத்து உடனடியாக காட்சிப் பின்னூட்டத்தை வழங்குகிறது, பயன்பாடு பதிலளிக்கக்கூடியது என்று సూచిస్తుంది. ஒரு நீண்ட வெற்றுத் திரை பயனர்கள் பக்கத்தை கைவிட வழிவகுக்கும், அது உடைந்ததாகவோ அல்லது மிகவும் மெதுவாகவோ இருப்பதாகக் கருதி.

செயல்திறன் கண்காணிப்பாளருடன் கண்காணித்தல்: `entryType: 'paint'` ஐப் பயன்படுத்தி `entry.name === 'first-contentful-paint'` க்காக வடிகட்டவும்.

மிகப்பெரிய உள்ளடக்க பெயிண்ட் (LCP) மற்றும் அலைவரிசைகள் முழுவதும் பயனர் அனுபவம்

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

செயல்திறன் கண்காணிப்பாளருடன் கண்காணித்தல்: `entryType: 'largest-contentful-paint'` ஐப் பயன்படுத்தவும். உள்ளீடு `startTime`-ஐ வழங்குகிறது, மேலும் LCP வேட்பாளராக இருந்த உறுப்புக்கான குறிப்புகளையும் வழங்குகிறது, இது பிழைத்திருத்தத்திற்கு உதவுகிறது.

கும்முலேட்டிவ் லேஅவுட் ஷிப்ட் (CLS) மற்றும் அணுகல்தன்மை

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

செயல்திறன் கண்காணிப்பாளருடன் கண்காணித்தல்: `entryType: 'layout-shift'` ஐப் பயன்படுத்தவும். சமீபத்திய பயனர் உள்ளீடு இல்லாமல் நிகழும் அனைத்து மாற்றங்களின் `entry.value` ஐக் குவித்து மொத்த CLS மதிப்பெண்ணைக் கணக்கிடவும். பக்கம் மறைக்கப்படும்போது அல்லது இறக்கப்படும்போது இறுதி மதிப்பெண்ணை அனுப்ப நினைவில் கொள்ளுங்கள்.

முதல் உள்ளீடு தாமதம் (FID) / அடுத்த பெயிண்டிற்கு ஊடாடல் (INP) மற்றும் பதிலளிப்பு

FID என்பது ஒரு பயனர் ஒரு பக்கத்துடன் முதலில் தொடர்பு கொள்ளும்போது (எ.கா., ஒரு பொத்தானைக் கிளிக் செய்யும் போது) இருந்து உலாவி உண்மையில் அந்த ஊடாடலைச் செயலாக்கத் தொடங்கும் வரையிலான தாமதத்தை அளவிடுகிறது. ஒரு உயர் FID என்பது உலாவியின் முக்கிய திரி பிஸியாக உள்ளது, பெரும்பாலும் ஜாவாஸ்கிரிப்ட் செயலாக்கத்துடன், பக்கத்தை பதிலளிக்காததாக உணர வைக்கிறது. அடுத்த பெயிண்டிற்கு ஊடாடல் (INP) என்பது FID-ஐ விரிவுபடுத்தும் ஒரு வரவிருக்கும் கோர் வெப் வைட்டல் ஆகும், இது பயனர் உள்ளீட்டிலிருந்து அடுத்த காட்சிப் புதுப்பிப்பு வரை ஒரு ஊடாடலின் முழு கால அளவையும் அளவிடுகிறது. ஒரு உயர் INP பக்கம் மந்தமாகவும் பதிலளிக்க மெதுவாகவும் இருப்பதைக் குறிக்கிறது, இது நெட்வொர்க் வேகத்தைப் பொருட்படுத்தாமல் உலகெங்கிலும் பயனர் ஈடுபாட்டிற்கு ஒரு பெரிய தடையாக உள்ளது.

செயல்திறன் கண்காணிப்பாளருடன் கண்காணித்தல்: FID-க்கு `entryType: 'event'` ஐப் பயன்படுத்தவும், முதல் தனித்துவ உள்ளீட்டு நிகழ்வின் `duration`-ஐப் பார்க்கவும். INP-க்கு, `entryType: 'event'` அல்லது, முன்னுரிமையாக, புதிய `entryType: 'interaction'` (கிடைத்தால் மற்றும் நிலையாக இருந்தால்) ஐப் பயன்படுத்தவும். நீங்கள் உள்ளீட்டு நிகழ்வை அடுத்த காட்சிப் புதுப்பிப்புடன் தொடர்புபடுத்த வேண்டும், இது பல RUM வழங்குநர்கள் கையாளும் ஒரு சிக்கலான கணக்கீடு ஆகும். `longtask` உள்ளீடுகளை உடன் கவனிப்பது மோசமான FID/INP-இன் மூல காரணங்களை அடையாளம் காண உதவுகிறது.

முதல் பைட்டிற்கான நேரம் (TTFB) மற்றும் சேவையக இருப்பிட பாதிப்புகள்

TTFB என்பது ஒரு கோரிக்கையைச் செய்த பிறகு சேவையகத்திலிருந்து பதிலின் முதல் பைட்டைப் பெற உலாவி எடுத்துக்கொள்ளும் நேரத்தை அளவிடுகிறது. `PerformanceObserver` வழியாக நேரடியாகக் கவனிக்க முடியாத போதிலும் (இது `navigation` உள்ளீடுகளின் ஒரு பகுதியாகும்), இது அனைத்து அடுத்தடுத்த ஏற்றுதல் நிகழ்வுகளையும் பாதிக்கும் ஒரு அடிப்படை மெட்ரிக் ஆகும். ஒரு உயர் TTFB பெரும்பாலும் சேவையக பக்க செயலாக்க தாமதங்கள், பயனர் மற்றும் சேவையகத்திற்கு இடையிலான நெட்வொர்க் தாமதம் அல்லது மெதுவான CDN பதிலால் ஏற்படுகிறது. ஒரு உலகளாவிய பார்வையாளர்களுக்கு, இது மூலோபாய ரீதியாக வைக்கப்பட்ட சேவையகங்கள், CDN-கள் மற்றும் திறமையான பின்தள கட்டமைப்பின் முக்கியத்துவத்தை எடுத்துக்காட்டுகிறது.

செயல்திறன் கண்காணிப்பாளருடன் கண்காணித்தல்: `entryType: 'navigation'`-இலிருந்து பிரித்தெடுக்கவும். `responseStart - requestStart` கோரிக்கை அனுப்பப்பட்ட பிறகு சேவையக செயலாக்கம் மற்றும் நெட்வொர்க் தாமதத்தின் ஒரு நல்ல அறிகுறியை அளிக்கிறது.

வள ஏற்றுதல் நேரங்கள்: உலகளாவிய CDN-கள் மற்றும் கேச்சிங் உத்திகள்

பக்கத்தில் ஏற்றப்பட்ட ஒவ்வொரு சொத்துக்கும் `resource` நுழைவு வகை விரிவான நேரங்களை வழங்குகிறது. ஒரு உலகளாவிய பார்வையாளர்களுக்கு, இந்தத் தரவு விலைமதிப்பற்றது. குறிப்பிட்ட பிராந்தியங்களில் உள்ள பயனர்களுக்கு படங்கள் மெதுவாக ஏற்றப்படுகிறதா? எழுத்துருக்கள் பதிவிறக்கம் செய்ய அதிக நேரம் எடுக்கிறதா? இது CDN கட்டமைப்பு, கேச் செல்லாததாக்குதல் அல்லது வெறுமனே பெரிதாக்கப்பட்ட சொத்துக்களுடன் உள்ள சிக்கல்களை சுட்டிக்காட்டலாம். வள நேரங்களை பகுப்பாய்வு செய்வது, முக்கியமான சொத்துக்கள் எல்லா இடங்களிலும் உள்ள பயனர்களுக்கு திறமையாக வழங்கப்படுவதை உறுதி செய்ய உதவுகிறது.

செயல்திறன் கண்காணிப்பாளருடன் கண்காணித்தல்: `entryType: 'resource'` ஐப் பயன்படுத்தவும். `initiatorType` (img, script, link, fetch, etc.), `duration`, `transferSize`, மற்றும் `decodedBodySize` ஆகியவற்றின் அடிப்படையில் உள்ளீடுகளை வடிகட்டி பகுப்பாய்வு செய்யவும்.

நீண்ட பணிகள் மற்றும் முக்கிய திரி தடுத்தல்

நீண்ட பணிகள் என்பது உலாவியின் முக்கிய திரி 50 மில்லி விநாடிகளுக்கு மேல் பிஸியாக இருக்கும் காலங்கள் ஆகும், இது பக்கத்தை பயனர் உள்ளீட்டிற்கு பதிலளிக்காததாக ஆக்குகிறது. இது குறிப்பாக குறைந்த-நிலை சாதனங்களில் உள்ள பயனர்கள் அல்லது பல பின்னணி செயல்முறைகள் இயங்கும் பயனர்களுக்கு சிக்கலானது, இவை பல்வேறு உலகளாவிய சூழல்களில் பொதுவான சூழ்நிலைகளாகும். நீண்ட பணிகளை அடையாளம் காண்பது ஊடாடலைத் தடுக்கும் மற்றும் மேம்படுத்தல் தேவைப்படும் விலையுயர்ந்த ஜாவாஸ்கிரிப்ட் செயல்பாடுகளைத் துல்லியமாக அடையாளம் காண உதவுகிறது.

செயல்திறன் கண்காணிப்பாளருடன் கண்காணித்தல்: `entryType: 'longtask'` ஐப் பயன்படுத்தவும். இந்த உள்ளீடுகள் முக்கிய திரி எப்போது மற்றும் எவ்வளவு நேரம் தடுக்கப்பட்டது என்பதை நேரடியாகக் குறிக்கின்றன.

ஊடாடும் கூறுகளுக்கான நிகழ்வு நேரம்

FID/INP-க்கு அப்பால், முக்கியமான பயன்பாட்டு அம்சங்களில் குறிப்பிட்ட பயனர் ஊடாடல்களின் செயல்திறனை அளவிட `event` நுழைவு வகைகளைப் பயன்படுத்தலாம். உதாரணமாக, உங்களிடம் ஒரு சிக்கலான தேடல் வடிகட்டி அல்லது ஒரு இழுத்து-விடுவதற்கான இடைமுகம் இருந்தால், இந்த ஊடாடல்களுடன் தொடர்புடைய நிகழ்வுகளின் `duration`-ஐக் கவனிப்பது, பயனர் உங்கள் பயன்பாட்டை எங்கிருந்து அணுகினாலும் அவை மென்மையாகவும் பதிலளிக்கக்கூடியதாகவும் இருப்பதை உறுதி செய்ய உதவும்.

செயல்திறன் கண்காணிப்பாளருடன் கண்காணித்தல்: `entryType: 'event'` ஐப் பயன்படுத்தவும், குறிப்பிட்ட நிகழ்வு வகைகள் அல்லது கூறுகளை அடையாளம் காண `name` அல்லது `target` மூலம் வடிகட்டவும்.

கோர் வெப் வைட்டல்ஸ்-க்கு அப்பால்: தனிப்பயன் மெட்ரிக்ஸ் மற்றும் வணிக தாக்கம்

கோர் வெப் வைட்டல்ஸ் (LCP, CLS, FID/INP) சிறந்த பயனர்-மைய மெட்ரிக்ஸ் என்றாலும், அவை ஒரு பயன்பாட்டின் செயல்திறனின் ஒவ்வொரு அம்சத்தையும் அல்லது வணிக இலக்குகளில் அதன் நேரடி தாக்கத்தையும் கைப்பற்றாது. செயல்திறன் கண்காணிப்பாளர் ஏபிஐ, குறிப்பாக தனிப்பயன் `measure` உள்ளீடுகளுடன், உங்களை மேலும் செல்ல அனுமதிக்கிறது.

பயன்பாடு-குறிப்பிட்ட செயல்திறனை அளவிடுதல்

ஒவ்வொரு பயன்பாட்டிற்கும் தனித்துவமான முக்கியமான பாதைகள் மற்றும் பயனர் ஓட்டங்கள் உள்ளன. ஒரு இ-காமர்ஸ் தளத்திற்கு, ஒரு தயாரிப்பு பட கேலரி ஊடாடக்கூடியதாக மாறுவதற்கான நேரம் அல்லது செக்அவுட் பொத்தானின் பதிலளிப்பு மிக முக்கியமாக இருக்கலாம். ஒரு ஸ்ட்ரீமிங் சேவைக்கு, ஒரு பயனர் 'ப்ளே' என்பதைக் கிளிக் செய்த பிறகு வீடியோவை இயக்கத் தொடங்கும் நேரம் முக்கியமானது. இந்த முக்கியமான பயன்பாடு-குறிப்பிட்ட தருணங்களைச் சுற்றி தனிப்பயன் `performance.mark()` மற்றும் `performance.measure()` புள்ளிகளை வரையறுப்பதன் மூலம், உங்கள் பயனர்களுக்கும் உங்கள் வணிகத்திற்கும் உண்மையில் என்ன முக்கியம் என்பது பற்றிய ஆழமான நுண்ணறிவுகளைப் பெறலாம்.

            // Example: Measuring time for a search results component to become interactive
performance.mark('searchResults:dataLoaded');
// Assume data arrives and component renders asynchronously
await renderSearchResults(data);
performance.mark('searchResults:interactive');
performance.measure('searchResultsInteractiveTime', 'searchResults:dataLoaded', 'searchResults:interactive');
            

              
                Copy
              
            
          

செயல்திறனை வணிக விளைவுகளுடன் தொடர்புபடுத்துதல் (எ.கா., மாற்றங்கள், தக்கவைப்பு)

செயல்திறன் மேம்படுத்தலின் இறுதி இலக்கு வணிக முடிவுகளை மேம்படுத்துவதாகும். விரிவான செயல்திறன் மெட்ரிக்ஸை சேகரித்து அவற்றை பயனர் நடத்தை (எ.கா., மாற்று விகிதங்கள், பவுன்ஸ் விகிதங்கள், அமர்வு கால அளவு, பயனர் தக்கவைப்பு) உடன் தொடர்புபடுத்துவதன் மூலம், செயல்திறன் முதலீடுகளுக்கான ஒரு சக்திவாய்ந்த வழக்கை உருவாக்க முடியும். ஒரு உலகளாவிய பார்வையாளர்களுக்கு, ஒரு குறிப்பிட்ட பிராந்தியத்தில் LCP-இல் 500ms முன்னேற்றம் அந்த பிராந்தியத்தில் X% மாற்று அதிகரிப்புக்கு வழிவகுக்கிறது என்பதைப் புரிந்துகொள்வது, செயல்விளக்கக்கூடிய, தரவு-இயக்கும் நுண்ணறிவுகளை வழங்குகிறது. செயல்திறன் கண்காணிப்பாளர் மூல தரவை வழங்குகிறது; உங்கள் பகுப்பாய்வு மற்றும் RUM தளங்கள் புள்ளிகளை இணைக்கின்றன.

செயல்திறன் கண்காணிப்பு மற்றும் தரவு சேகரிப்புக்கான சிறந்த நடைமுறைகள்

ஒரு வலுவான செயல்திறன் கண்காணிப்பு உத்தியை செயல்படுத்துவதற்கு மெட்ரிக்ஸை சேகரிப்பதற்கு அப்பால் கவனமாக பரிசீலனை தேவை.

மாதிரியெடுத்தல் vs. முழு சேகரிப்பு: தரவு மற்றும் மேல்நிலைச் செலவை சமநிலைப்படுத்துதல்

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

• மாதிரியெடுத்தல்: உங்கள் பயனர்களின் ஒரு சதவீதத்திலிருந்து (எ.கா., 1% அல்லது 5%) தரவை சேகரிக்கவும். இது உங்கள் உள்கட்டமைப்பை அதிக சுமையாக்காமல் ஒரு பிரதிநிதித்துவ தரவுத்தொகுப்பை வழங்குகிறது.
• தடுப்பு: தரவு சமர்ப்பிப்பின் அதிர்வெண்ணைக் கட்டுப்படுத்தவும். உதாரணமாக, திரட்டப்பட்ட மெட்ரிக்ஸை ஒவ்வொரு சில விநாடிகளுக்கும் அல்லது பக்கம் இறக்கப்படும்போது மட்டும் அனுப்பவும்.
• வடிகட்டுதல்: முக்கியமான மெட்ரிக்ஸ் அல்லது குறிப்பிட்ட வரம்புகளை மீறும் உள்ளீடுகளை மட்டுமே அனுப்பவும் (எ.கா., 100ms-க்கு மேற்பட்ட `longtask` உள்ளீடுகள் மட்டும், அல்லது குறிப்பிட்ட முக்கியமான கோப்புகளுக்கான `resource` உள்ளீடுகள்).
• திரட்டல்: அனுப்புவதற்கு முன்பு பல சிறிய செயல்திறன் உள்ளீடுகளை ஒரு பெரிய பேலோடில் திரட்டவும்.

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

தரவு பரிமாற்றம் மற்றும் சேமிப்பு: உலகளாவிய பரிசீலனைகள்

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

தனியுரிமை மற்றும் தரவு பாதுகாப்பு: ஒரு உலகளாவிய நெறிமுறை கட்டாயம்

பயனர் செயல்திறன் தரவை சேகரிக்கும்போது, தனியுரிமை மற்றும் பாதுகாப்பு மிக முக்கியமானது, குறிப்பாக ஐரோப்பாவில் GDPR, கலிபோர்னியாவில் CCPA, பிரேசிலில் LGPD மற்றும் உலகெங்கிலும் உள்ள ஒத்த சட்டங்கள் போன்ற கடுமையான விதிமுறைகளுடன். உறுதிப்படுத்தவும்:

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

கருவிகள் மற்றும் RUM தளங்களுடன் ஒருங்கிணைப்பு

செயல்திறன் கண்காணிப்பாளரைப் பயன்படுத்தி உங்கள் சொந்த தனிப்பயன் செயல்திறன் கண்காணிப்பு தீர்வை நீங்கள் உருவாக்க முடியும் என்றாலும், பல வணிக மற்றும் திறந்த மூல RUM (நிகழ்நேர பயனர் கண்காணிப்பு) தளங்கள் இந்த ஏபிஐ-யைப் பயன்படுத்தி ஆயத்த தீர்வுகளை வழங்குகின்றன. கூகிள் அனலிட்டிக்ஸ் (தனிப்பயன் நிகழ்வுகளுடன்), டேட்டாடாக், நியூ ரெலிக், சென்ட்ரி, டைனாட்ரேஸ் அல்லது பூமெராங் போன்ற திறந்த மூல தீர்வுகள் போன்ற கருவிகள் சிக்கலானவற்றின் பெரும்பகுதியை நீக்கி, டாஷ்போர்டுகள், எச்சரிக்கை மற்றும் மேம்பட்ட பகுப்பாய்வு திறன்களை வழங்குகின்றன.

உங்கள் தனிப்பயன் செயல்திறன் கண்காணிப்பாளர் தரவை இந்த தளங்களுடன் ஒருங்கிணைப்பது பெரும்பாலும் அவற்றின் SDK-களைப் பயன்படுத்தி தனிப்பயன் நிகழ்வுகள் அல்லது மெட்ரிக்ஸை அனுப்புவதை உள்ளடக்கியது. இது செயல்திறன் கண்காணிப்பாளரின் நுணுக்கமான கட்டுப்பாட்டை நிறுவப்பட்ட RUM தீர்வுகளின் பகுப்பாய்வு சக்தியுடன் இணைக்க உங்களை அனுமதிக்கிறது.

தொடர்ச்சியான கண்காணிப்பு மற்றும் எச்சரிக்கை

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

உலகளாவிய செயலாக்கங்களுக்கான சவால்கள் மற்றும் பரிசீலனைகள்

ஒரு வலுவான உலகளாவிய செயல்திறன் கண்காணிப்பு உத்தியை வரிசைப்படுத்துவது அதன் சொந்த சவால்களுடன் வருகிறது.

நெட்வொர்க் தாமதம் மற்றும் உள்கட்டமைப்பு பன்முகத்தன்மை

இணைய உள்கட்டமைப்பு உலகம் முழுவதும் மிகவும் வேறுபடுகிறது. ஒரு பிராந்தியத்தில் வேகமாக கருதப்படுவது மற்றொரு பிராந்தியத்தில் மிகவும் மெதுவாக இருக்கலாம். கண்காணிப்பு கணக்கில் கொள்ள வேண்டும்:

• அதிக தாமதம்: தரவு பாக்கெட்டுகள் நீண்ட தூரங்களில் மெதுவாக பயணிக்கின்றன. TTFB, வள ஏற்றுதல் மற்றும் ஏபிஐ அழைப்புகள் அனைத்தும் பாதிக்கப்படுகின்றன.
• குறைந்த அலைவரிசை: 2G/3G நெட்வொர்க்குகள் அல்லது பகிரப்பட்ட Wi-Fi-இல் உள்ள பயனர்கள் அனைத்து சொத்துக்களுக்கும் நீண்ட பதிவிறக்க நேரங்களை அனுபவிப்பார்கள்.
• பாக்கெட் இழப்பு: நிலையற்ற இணைப்புகள் தரவு இழப்பு மற்றும் மறுபரிமாற்றங்களுக்கு வழிவகுக்கும், ஏற்றுதல் நேரங்களை அதிகரிக்கும்.

சாதன துண்டாக்கம் மற்றும் உலாவி இணக்கத்தன்மை

உலகளாவிய சாதன நிலப்பரப்பு நம்பமுடியாத அளவிற்கு பன்முகத்தன்மை வாய்ந்தது. பயனர்கள் உயர்-நிலை டெஸ்க்டாப்கள் முதல் பல ஆண்டுகளுக்கு முந்தைய நுழைவு-நிலை ஸ்மார்ட்போன்கள் வரை எல்லாவற்றிலும் வலையுடன் ஊடாடுகிறார்கள். உலாவிகளும் பல்வேறு ஏபிஐ-களுக்கான அவற்றின் ஆதரவில் வேறுபடுகின்றன, இருப்பினும் `PerformanceObserver` நவீன உலாவிகளில் மிகவும் நன்றாக ஆதரிக்கப்படுகிறது. பழைய அல்லது குறைவாகப் பொதுவான உலாவிகளை இலக்காகக் கொண்டால் எப்போதும் ஃபால்பேக் பொறிமுறைகள் அல்லது பாலிஃபில்களை உறுதிப்படுத்தவும்.

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

பயனர் உணர்வில் கலாச்சார மற்றும் மொழியியல் நுணுக்கங்கள்

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

ஒழுங்குமுறை இணக்கம் (எ.கா., GDPR, CCPA, LGPD)

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

முகப்பு செயல்திறன் கண்காணிப்பின் எதிர்காலம்

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

முரண்பாடு கண்டறிதலுக்கான AI மற்றும் இயந்திர கற்றல்

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

மேம்படுத்தப்பட்ட உலாவி ஏபிஐ-கள் மற்றும் தரநிலைகள்

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

மேம்பாட்டு பணிப்பாய்வுகளுடன் ஒருங்கிணைப்பு

மேம்பாட்டு பணிப்பாய்வுகளில் RUM தரவின் நெருக்கமான ஒருங்கிணைப்பு (எ.கா., CI/CD குழாய்கள், உள்ளூர் மேம்பாட்டு சூழல்கள்) மிகவும் பொதுவானதாக மாறும். உள்ளூர் மேம்பாட்டு சூழல்கள் பல்வேறு உலகளாவிய நெட்வொர்க் நிலைகளை உருவகப்படுத்தவும் நிகழ்நேர செயல்திறன் கண்காணிப்பாளர் மெட்ரிக்ஸைப் புகாரளிக்கவும் முடியும் என்று கற்பனை செய்து பாருங்கள், இது டெவலப்பர்களுக்கு ஆரம்பத்திலிருந்தே செயல்திறன் மிக்க பயன்பாடுகளை உருவாக்க உதவுகிறது.

முடிவு: ஒரு வேகமான வலைக்காக டெவலப்பர்களுக்கு அதிகாரம் அளித்தல்

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

முக்கிய குறிப்புகள்:

• செயல்திறன் கண்காணிப்பாளர் ஏபிஐ நுணுக்கமான செயல்திறன் தரவை சேகரிக்க ஒரு திறமையான, நிகழ்வு-இயக்கும் வழியை வழங்குகிறது.
• முக்கிய `entryTypes` (paint, LCP, CLS, longtask, resource, event, interaction, navigation) ஐப் புரிந்துகொள்வது விரிவான கண்காணிப்புக்கு முக்கியமானது.
• ஆரம்ப-பக்க ஏற்றுதல் மெட்ரிக்ஸைக் கைப்பற்றுவதற்கு `buffered: true` இன்றியமையாதது.
• `entryType: 'measure'` வழியாக கவனிக்கப்படும் தனிப்பயன் `performance.mark()` மற்றும் `performance.measure()`, பயன்பாடு-குறிப்பிட்ட நுண்ணறிவுகளை அனுமதிக்கிறது.
• நெட்வொர்க், சாதனங்கள், கலாச்சாரம் மற்றும் தனியுரிமைக்கான உலகளாவிய பரிசீலனைகள் பயனுள்ள RUM-க்கு மிக முக்கியமானது.
• RUM தளங்களுடன் ஒருங்கிணைத்து, முன்கூட்டிய செயல்திறன் நிர்வாகத்திற்காக தொடர்ச்சியான கண்காணிப்பு மற்றும் எச்சரிக்கையை நிறுவவும்.

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