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

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

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

உண்மையான பயனர் கண்காணிப்பை (RUM) புரிந்துகொள்ளுதல்

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

ரியாக்ட் பயன்பாடுகளுக்கு RUM ஏன் இன்றியமையாதது

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

RUM உடன் கண்காணிக்க வேண்டிய முக்கிய ரியாக்ட் செயல்திறன் அளவீடுகள்

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

கோர் வெப் வைட்டல்ஸ் (Core Web Vitals)

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

• லார்ஜஸ்ட் கன்டென்ட்ஃபுல் பெயிண்ட் (LCP): இந்த அளவீடு வியூபோர்ட்டிற்குள் உள்ள மிகப்பெரிய படம் அல்லது உரைப் பகுதி கண்ணுக்குத் தெரிய ஆகும் நேரத்தை அளவிடுகிறது. ரியாக்ட் பயன்பாடுகளுக்கு, LCP பெரும்பாலும் முக்கியமான கூறுகளின் ஆரம்ப ரெண்டர் அல்லது ஹீரோ படங்கள்/பேனர்களை ஏற்றுவதுடன் தொடர்புடையது. ஒரு மோசமான LCP ஒரு மெதுவான ஆரம்ப ஏற்றுதல் அனுபவத்தைக் குறிக்கிறது, இது பயனர் ஈடுபாட்டிற்கு தீங்கு விளைவிக்கும், குறிப்பாக மெதுவான இணைப்புகள் அல்லது பழைய சாதனங்களில் உள்ள பயனர்களுக்கு.

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

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

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

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

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

ரியாக்ட்டிற்கான பிற அத்தியாவசிய RUM அளவீடுகள்

• ஃபர்ஸ்ட் கன்டென்ட்ஃபுல் பெயிண்ட் (FCP): பக்கம் ஏற்றத் தொடங்கும் நேரத்திலிருந்து பக்கத்தின் உள்ளடக்கத்தின் எந்தப் பகுதியும் திரையில் ரெண்டர் செய்யப்படும் வரை உள்ள நேரத்தை அளவிடுகிறது. LCP "மிகப்பெரிய" உள்ளடக்கத்தில் கவனம் செலுத்தும் அதே வேளையில், FCP முதல் காட்சிப் பின்னூட்டத்தைக் குறிக்கிறது, ஒரு தலைப்பு அல்லது பின்னணி நிறம் போன்றவை.
• டைம் டு இன்டராக்டிவ் (TTI): பக்கம் ஏற்றத் தொடங்கும் நேரத்திலிருந்து அது பார்வைக்கு ரெண்டர் செய்யப்படும் வரை, அதன் முதன்மை ஆதாரங்களை ஏற்றி, பயனர் உள்ளீட்டிற்கு நம்பகத்தன்மையுடன் பதிலளிக்கக்கூடியதாக இருக்கும் வரை உள்ள நேரத்தை அளவிடுகிறது. ரியாக்ட் பயன்பாடுகளுக்கு, இது பெரும்பாலும் அனைத்து முக்கிய ஜாவாஸ்கிரிப்ட்களும் பாகுபடுத்தப்பட்டு செயல்படுத்தப்பட்டு, நிகழ்வு கையாளர்கள் இணைக்கப்படும்போது நிகழ்கிறது.
• மொத்த தடுப்பு நேரம் (TBT): FCP மற்றும் TTI க்கு இடையில் உள்ள மொத்த நேரத்தை அளவிடுகிறது, அங்கு பிரதான திரி உள்ளீட்டு பதிலைத் தடுக்கும் அளவுக்கு நீண்ட நேரம் தடுக்கப்பட்டது. அதிக TBT பயனர் தொடர்பைத் தடுக்கும் குறிப்பிடத்தக்க ஜாவாஸ்கிரிப்ட் இயக்கத்தைக் குறிக்கிறது, இது நேரடியாக INP-ஐ பாதிக்கிறது.
• வள நேரங்கள் (Resource Timing): DNS தேடல், TCP இணைப்பு, TLS கைகுலுக்கல், கோரிக்கை மற்றும் மறுமொழி நேரங்கள் உட்பட தனிப்பட்ட வளங்களின் (படங்கள், ஸ்கிரிப்ட்கள், CSS, எழுத்துருக்கள், API அழைப்புகள்) ஏற்றுதல் நேரங்கள் பற்றிய விரிவான அளவீடுகள். இது மெதுவான சொத்துக்கள் அல்லது மூன்றாம் தரப்பு ஸ்கிரிப்ட்களைக் கண்டறிய உதவுகிறது.
• தனிப்பயன் அளவீடுகள் (Custom Metrics): நிலையான அளவீடுகளுக்கு அப்பால், உங்கள் ரியாக்ட் பயன்பாட்டின் தனித்துவமான அம்சங்களுக்கு குறிப்பிட்ட தனிப்பயன் RUM அளவீடுகளை நீங்கள் வரையறுக்கலாம். எடுத்துக்காட்டுகள் பின்வருமாறு:
  • முதல் தரவு ஏற்றத்திற்கான நேரம் (எ.கா., ஒரு டாஷ்போர்டு கூறுக்கு)
  • ஒரு குறிப்பிட்ட முக்கியமான கூறுகளை ரெண்டர் செய்வதற்கான நேரம்
  • கிளையண்டின் கண்ணோட்டத்தில் இருந்து குறிப்பிட்ட API அழைப்புகளின் தாமதம்
  • வெற்றிகரமான மற்றும் தோல்வியுற்ற கூறு மவுண்ட்கள்/அன்மவுண்ட்கள் (பிழை கண்காணிப்புக்கு அதிகம் என்றாலும்)
  இந்த தனிப்பயன் அளவீடுகள் உங்கள் ரியாக்ட் கட்டமைப்பிற்குள் பயனர் உணரும் செயல்திறன் தடைகள் பற்றிய ஆழமான நுண்ணறிவுகளை வழங்குகின்றன.

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

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

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

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

• PerformanceObserver API: இது பெரும்பாலான Web Vitals மற்றும் பிற செயல்திறன் காலவரிசை உள்ளீடுகளை சேகரிக்க பரிந்துரைக்கப்பட்ட வழியாகும். இது paint (FCP, LCP-க்கு), layout-shift (CLS-க்கு), longtask (TBT-க்கு), மற்றும் event (INP-க்கு) போன்ற பல்வேறு வகையான செயல்திறன் நிகழ்வுகள் நடக்கும்போது அவற்றுக்கு குழுசேர உங்களை அனுமதிக்கிறது.

              
              const observer = new PerformanceObserver((entryList) => {
                  for (const entry of entryList.getEntries()) {
                      // Process performance entry, e.g., send to analytics
                      console.log(entry.entryType, entry.name, entry.startTime, entry.duration);
                  }
              });
  
              // Observe different types of performance entries
              observer.observe({ type: 'paint', buffered: true });
              observer.observe({ type: 'layout-shift', buffered: true });
              observer.observe({ type: 'longtask', buffered: true });
              observer.observe({ type: 'event', buffered: true });
              observer.observe({ type: 'navigation', buffered: true });
              observer.observe({ type: 'resource', buffered: true });
          
              
  
                
                  Copy
                
              
            

  பார்வையாளர் துவக்கப்படுவதற்கு முன்பு ஏற்பட்ட உள்ளீடுகளைப் பிடிக்க buffered: true பயன்படுத்துவது முக்கியம்.

• நேவிகேஷன் டைமிங் API (performance.timing): ஒட்டுமொத்த வழிசெலுத்தல் மற்றும் ஆவண சுமை வாழ்க்கை சுழற்சி தொடர்பான நேர அளவீடுகளை வழங்குகிறது. பெரும்பாலான பயன்பாட்டு நிகழ்வுகளுக்கு PerformanceObserver ஆல் மாற்றப்பட்டாலும், இது இன்னும் பயனுள்ள உயர்-நிலை நேர முத்திரைகளை வழங்க முடியும்.
• ரிசோர்ஸ் டைமிங் API (performance.getEntriesByType('resource')): PerformanceResourceTiming பொருட்களின் வரிசையைத் திருப்புகிறது, ஆவணத்தால் ஏற்றப்பட்ட ஒவ்வொரு வளத்திற்கும் (படங்கள், ஸ்கிரிப்ட்கள், CSS, XHRs, முதலியன) விரிவான நேரத் தகவலை வழங்குகிறது. மெதுவாக ஏற்றப்படும் சொத்துக்களைக் கண்டறிய இது சிறந்தது.
• லாங் டாஸ்க்ஸ் API (PerformanceObserver({ type: 'longtask' })): பிரதான திரியைத் தடுக்கும் நீண்டகால ஜாவாஸ்கிரிப்ட் பணிகளைக் கண்டறிகிறது, இது மோசமான பதிலளிக்கக்கூடிய தன்மைக்கு (அதிக TBT மற்றும் INP) பங்களிக்கிறது.
• ஈவென்ட் டைமிங் API (PerformanceObserver({ type: 'event' })): பயனர் தொடர்புகளுக்கான விரிவான நேரத் தகவலைப் புகாரளிக்கிறது, இது INP-ஐ கணக்கிடுவதற்கு முக்கியமானது.

மூன்றாம் தரப்பு RUM கருவிகள் மற்றும் அனலிட்டிக்ஸ் தளங்கள்

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

• கூகிள் அனலிட்டிக்ஸ் (GA4 + Web Vitals): கூகிள் அனலிட்டிக்ஸ் 4 (GA4) Web Vitals-ஐ கண்காணிக்க சொந்த திறன்களைக் கொண்டுள்ளது. Core Web Vitals தரவை நேரடியாக GA4 க்கு அனுப்ப web-vitals போன்ற நூலகங்களைப் பயன்படுத்தலாம். இது பல பயன்பாடுகளுக்கு செலவு குறைந்த தீர்வாகும் மற்றும் செயல்திறன் தரவை பயனர் நடத்தை அளவீடுகளுடன் தொடர்புபடுத்த உங்களை அனுமதிக்கிறது.

              
              // Example using web-vitals library
              import { getCLS, getFID, getLCP, getINP } from 'web-vitals';
  
              function sendToAnalytics(metric) {
                  const body = JSON.stringify(metric);
                  // Replace with your actual analytics sending logic (e.g., Google Analytics, custom endpoint)
                  if (navigator.sendBeacon) {
                      navigator.sendBeacon('/analytics', body);
                  } else {
                      fetch('/analytics', { body, method: 'POST', keepalive: true });
                  }
              }
  
              getCLS(sendToAnalytics);
              getFID(sendToAnalytics); // Deprecated in favor of INP for Core Web Vitals
              getLCP(sendToAnalytics);
              getINP(sendToAnalytics); // Recommend this for responsiveness
          
              
  
                
                  Copy
                
              
            

  இந்த web-vitals நூலகம் சரியான நேரத்தில் அளவீடுகளைப் புகாரளிப்பதில் உள்ள சிக்கல்களைக் கையாளுகிறது (எ.கா., CLS பக்கம் இறக்கப்படும்போது அல்லது பார்வை மாறும்போது புகாரளிக்கப்படுகிறது).

• பிரத்யேக RUM தளங்கள் (எ.கா., New Relic, Datadog, Dynatrace, Sentry, Splunk Observability, AppDynamics): இவை வலுவான RUM திறன்களை வழங்கும் விரிவான பயன்பாட்டு செயல்திறன் கண்காணிப்பு (APM) கருவிகளாகும். அவை ஆழமான நுண்ணறிவுகள், தானியங்கி கருவிமயமாக்கல், ஒழுங்கின்மை கண்டறிதல் மற்றும் உங்கள் முழு அடுக்கு முழுவதும் (முன்பக்கம், பின்தளம், உள்கட்டமைப்பு) ஒருங்கிணைப்புகளை வழங்குகின்றன.
  • நன்மைகள்: செழிப்பான டாஷ்போர்டுகள், பின்தள செயல்திறனுடன் தொடர்பு, மேம்பட்ட எச்சரிக்கை, விநியோகிக்கப்பட்ட தடமறிதலுக்கான ஆதரவு.
  • தீமைகள்: விலை அதிகமாக இருக்கலாம், அதிக அமைப்பு தேவைப்படலாம்.
  • உலகளாவிய கண்ணோட்டம்: பல உலகளாவிய தரவு மையங்களை வழங்குகின்றன மற்றும் புவியியல், நெட்வொர்க் வகை மற்றும் சாதனம் ஆகியவற்றின் மூலம் செயல்திறனைப் பிரிக்க முடியும், இது சர்வதேச பயன்பாடுகளுக்கு ஏற்றதாக அமைகிறது.
• சிறப்பு இணைய செயல்திறன் கண்காணிப்பு கருவிகள் (எ.கா., SpeedCurve, Calibre, Lighthouse CI): இந்த கருவிகள் பெரும்பாலும் முன்பக்க செயல்திறனில் பெரிதும் கவனம் செலுத்துகின்றன, RUM ஐ செயற்கை கண்காணிப்பு, விரிவான நீர்வீழ்ச்சி வரைபடங்கள் மற்றும் பட்ஜெட் நிர்வாகத்துடன் இணைக்கின்றன.

உள் அளவீடுகளுக்கான தனிப்பயன் ரியாக்ட் செயலாக்கங்கள்

மேலும் நுணுக்கமான, ரியாக்ட்-குறிப்பிட்ட நுண்ணறிவுகளுக்கு, நீங்கள் ரியாக்ட்டின் உள்ளமைக்கப்பட்ட கருவிகளைப் பயன்படுத்தலாம் அல்லது தனிப்பயன் ஹூக்குகளை உருவாக்கலாம்.

• React.Profiler: இந்த API முதன்மையாக மேம்பாடு மற்றும் பிழைத்திருத்தத்திற்காக உள்ளது, ஆனால் அதன் கருத்துக்களை உற்பத்தி தரவு சேகரிப்புக்கு மாற்றியமைக்கலாம் (கவனத்துடன், ஏனெனில் இது மேல்நிலைச் செலவைக் கொண்டிருக்கலாம்). ஒரு ரியாக்ட் பயன்பாடு எவ்வளவு அடிக்கடி ரெண்டர் செய்கிறது மற்றும் ரெண்டரிங்கின் "செலவு" என்ன என்பதை அளவிட இது உங்களை அனுமதிக்கிறது.

              
              import React from 'react';
  
              function MyComponent() {
                  return (
                      <React.Profiler id="MyComponent" onRender={(id, phase, actualDuration, baseDuration, startTime, commitTime, interactions) => {
                          // Log or send performance data for this component
                          console.log(`Component: ${id}, Phase: ${phase}, Actual Duration: ${actualDuration}ms`);
                          // Consider sending this data to your RUM endpoint with additional context
                      }}>
                          <div>... My React Component Content ...</div>
                      </React.Profiler>
                  );
              }
          
              
  
                
                  Copy
                
              
            

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

• ரெண்டரிங்கை அளவிடுவதற்கான தனிப்பயன் ஹூக்குகள்: குறிப்பிட்ட கூறுகளுக்கான ரெண்டர் எண்ணிக்கைகள் அல்லது மறு-ரெண்டர் நேரங்களைக் கண்காணிக்க useState, useEffect, மற்றும் useRef ஆகியவற்றைப் பயன்படுத்தும் தனிப்பயன் ஹூக்குகளை நீங்கள் உருவாக்கலாம்.

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

உலகளாவிய பார்வையாளர்களை மனதில் வைத்து, உங்கள் ரியாக்ட் பயன்பாட்டில் RUM ஐ ஒருங்கிணைப்பதற்கான ஒரு கட்டமைக்கப்பட்ட அணுகுமுறை இங்கே:

1. உங்கள் RUM உத்தி மற்றும் கருவிகளைத் தேர்வு செய்யவும்

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

2. வெப் வைட்டல்ஸ் அறிக்கையிடலை ஒருங்கிணைக்கவும்

Core Web Vitals-ஐப் பிடிக்க web-vitals நூலகத்தைப் பயன்படுத்தவும் மற்றும் அவற்றை உங்கள் தேர்ந்தெடுக்கப்பட்ட அனலிட்டிக்ஸ் இறுதிப்புள்ளிக்கு (எ.கா., கூகிள் அனலிட்டிக்ஸ், ஒரு தனிப்பயன் சேவையகம்) அனுப்பவும். இந்த குறியீடு உங்கள் பயன்பாட்டு வாழ்க்கைச் சுழற்சியில் ஆரம்பத்திலேயே இயங்குவதை உறுதிசெய்யவும் (எ.கா., index.js இல் அல்லது பிரதான App கூறுகளின் useEffect ஹூக்கில்).

3. முக்கிய பயனர் தொடர்புகள் மற்றும் API அழைப்புகளை கருவியாகக் கொள்ளவும்

• API செயல்திறன்: முக்கியமான API அழைப்புகளுக்கு எடுக்கப்பட்ட நேரத்தை அளவிட உலாவியின் fetch அல்லது XMLHttpRequest குறுக்கீடு (அல்லது அவற்றைச் சுற்றியுள்ள ஒரு ராப்பர்) பயன்படுத்தவும். நீங்கள் கோரிக்கைகளுக்கு தனித்துவமான அடையாளங்காட்டிகளைச் சேர்க்கலாம் மற்றும் அவற்றின் தொடக்க மற்றும் முடிவு நேரங்களைப் பதிவு செய்யலாம்.

              
              // Example of a simple fetch wrapper for timing
              async function timedFetch(url, options) {
                  const startTime = performance.now();
                  try {
                      const response = await fetch(url, options);
                      const endTime = performance.now();
                      const duration = endTime - startTime;
                      console.log(`API Call to ${url} took ${duration}ms`);
                      // Send this metric to your RUM system, perhaps with status code and payload size
                      return response;
                  } catch (error) {
                      const endTime = performance.now();
                      const duration = endTime - startTime;
                      console.error(`API Call to ${url} failed after ${duration}ms:`, error);
                      // Send failure metric
                      throw error;
                  }
              }
          
              
  
                
                  Copy
                
              
            

• கூறு-குறிப்பிட்ட அளவீடுகள்: மிகவும் முக்கியமான கூறுகளுக்கு, அவற்றின் மவுண்ட், அப்டேட் மற்றும் அன்மவுண்ட் கால அளவுகளைக் கண்காணிக்க React.Profiler (கவனமாக) அல்லது தனிப்பயன் கருவிமயமாக்கலைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள். உங்கள் பயன்பாட்டின் சிக்கலான பகுதிகளில் செயல்திறன் பின்னடைவுகளைக் கண்டறிய இது குறிப்பாக பயனுள்ளதாக இருக்கும்.
• பயனர் ஓட்ட நேரம்: பல-படி பயனர் ஓட்டங்களுக்கு (எ.கா., "கார்ட்டில் சேர்" முதல் "செக்அவுட் முடிந்தது" வரை) எடுக்கப்பட்ட நேரத்தைக் கண்காணிக்கவும். இது பயனரின் பயண செயல்திறனின் முழுமையான பார்வையை வழங்குகிறது.

4. சூழல் தகவலைப் பிடிக்கவும்

RUM தரவு உண்மையிலேயே மதிப்புமிக்கதாக இருக்க, அதற்கு சூழல் தேவை. ஒரு உலகளாவிய பார்வையாளர்களுக்கு, இந்த சூழல் மிக முக்கியமானது:

• பயனர் முகவர்: சாதன வகை (டெஸ்க்டாப், மொபைல், டேப்லெட்), இயக்க முறைமை, உலாவி பதிப்பு. இது சில சூழல்களுக்கு குறிப்பிட்ட சிக்கல்களைக் கண்டறிய உதவுகிறது.
• நெட்வொர்க் தகவல்: இணைப்பு வகை (4G, Wi-Fi, பிராட்பேண்ட்), பயனுள்ள சுற்று-பயண நேரம் (RTT), பதிவிறக்க/பதிவேற்ற வேகங்கள். நெட்வொர்க் தகவல் API (navigator.connection) இதில் சிலவற்றை வழங்க முடியும், இருப்பினும் இது உலகளவில் ஆதரிக்கப்படவில்லை.
• புவிஇருப்பிடம்: பெயர் மறைக்கப்பட்ட நாடு அல்லது பிராந்தியம். புவியியல் செயல்திறன் மாறுபாடுகளைப் புரிந்துகொள்ள இது இன்றியமையாதது. இருப்பிடத் தரவைச் சேகரிக்கும் மற்றும் சேமிக்கும்போது தனியுரிமை விதிமுறைகளை (GDPR, CCPA) மனதில் கொள்ளுங்கள்.
• பயனர் ஐடி/அமர்வு ஐடி: பல பக்க பார்வைகள் அல்லது அமர்வுகளில் ஒரு பயனரின் அனுபவத்தைக் கண்காணிக்க ஒரு பெயர் மறைக்கப்பட்ட அடையாளங்காட்டி.
• பயன்பாட்டு பதிப்பு: குறிப்பிட்ட குறியீடு பயன்படுத்தல்களுடன் செயல்திறன் மாற்றங்களைத் தொடர்புபடுத்த அவசியம்.
• A/B சோதனை குழு: நீங்கள் A/B சோதனைகளை இயக்குகிறீர்கள் என்றால், செயல்திறன் வெவ்வேறு பயனர் அனுபவங்களை எவ்வாறு பாதிக்கிறது என்பதைப் பார்க்க சோதனை குழுவைச் சேர்க்கவும்.

5. தரவு பரிமாற்றம் மற்றும் மாதிரியாக்கத்தை செயல்படுத்தவும்

• தொகுத்தல் (Batching): ஒவ்வொரு அளவீட்டையும் உடனடியாக அனுப்ப வேண்டாம். அளவீடுகளை ஒன்றாகத் தொகுத்து அவற்றை அவ்வப்போது அல்லது பக்கம் இறக்கப்படும்போது (visibilitychange நிகழ்வு, pagehide நிகழ்வு) navigator.sendBeacon (தடுக்காத அனுப்புதலுக்கு) அல்லது keepalive: true உடன் fetch ஐப் பயன்படுத்தி அனுப்பவும்.
• மாதிரியாக்கம் (Sampling): மிகவும் அதிக போக்குவரத்து உள்ள பயன்பாடுகளுக்கு, ஒவ்வொரு பயனரின் தரவையும் அனுப்புவது அதிகமாக இருக்கலாம். மாதிரியாக்கத்தைக் கருத்தில் கொள்ளுங்கள் (எ.கா., 1% அல்லது 10% பயனர்களிடமிருந்து தரவைச் சேகரித்தல்). துல்லியமான ஒப்பீடுகளை அனுமதிக்க மாதிரியாக்கம் சீராக இருப்பதை உறுதிசெய்யவும். மாதிரியாக்கம் கவனமாகக் கருதப்பட வேண்டும், ஏனெனில் இது குறிப்பிட்ட, சிறிய பயனர் பிரிவுகளுக்கான சிக்கல்களை மறைக்கக்கூடும்.

செயல்படக்கூடிய நுண்ணறிவுகளுக்கு RUM தரவைப் பகுப்பாய்வு செய்தல்

தரவைச் சேகரிப்பது போரில் பாதி மட்டுமே. RUM இன் உண்மையான மதிப்பு செயல்திறன் மேம்பாடுகளை இயக்கும் செயல்படக்கூடிய நுண்ணறிவுகளைப் பெற தரவைப் பகுப்பாய்வு செய்வதில் உள்ளது.

1. உங்கள் தரவைப் பிரிக்கவும்

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

• புவியியல்: செயல்திறன் தொடர்ந்து மோசமாக இருக்கும் நாடுகள் அல்லது பிராந்தியங்களைக் கண்டறியவும். இது CDN கேச்சிங், சேவையக தாமதம் அல்லது பிராந்திய நெட்வொர்க் உள்கட்டமைப்புடன் சிக்கல்களைக் குறிக்கலாம்.
• சாதன வகை: டெஸ்க்டாப் பயனர்களை விட மொபைல் பயனர்கள் அதிகமாக சிரமப்படுகிறார்களா? பழைய சாதனங்கள் மோசமாக செயல்படுகின்றனவா? இது பதிலளிக்கக்கூடிய வடிவமைப்பு மற்றும் மேம்படுத்தல் முன்னுரிமைகளைத் தெரிவிக்கிறது.
• நெட்வொர்க் வகை: 4G மற்றும் Wi-Fi மற்றும் பிராட்பேண்டில் செயல்திறனை ஒப்பிடுக. இது நெட்வொர்க் நிலைமைகளின் தாக்கத்தை எடுத்துக்காட்டுகிறது.
• உலாவி: மோசமான அளவீடுகளைக் காட்டும் குறிப்பிட்ட உலாவி பதிப்புகள் அல்லது வகைகள் (எ.கா., பழைய IE, குறிப்பிட்ட மொபைல் உலாவிகள்) உள்ளதா?
• பயனர் குழுக்கள்: புதிய பயனர்கள் மற்றும் திரும்பும் பயனர்கள் அல்லது தொடர்புடையால் வெவ்வேறு மக்கள்தொகை பிரிவுகளுக்கான செயல்திறனைப் பகுப்பாய்வு செய்யவும்.
• பயன்பாட்டு பக்கங்கள்/பாதைகள்: எந்த குறிப்பிட்ட பக்கங்கள் அல்லது ரியாக்ட் பாதைகள் மெதுவாக உள்ளன என்பதைக் கண்டறியவும்.

2. அடிப்படைகளை நிறுவி போக்குகளைக் கண்காணிக்கவும்

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

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

3. செயல்திறனை வணிக அளவீடுகளுடன் தொடர்புபடுத்தவும்

உங்கள் RUM தரவை உங்கள் வணிக நோக்கங்களுடன் இணைக்கவும். உதாரணமாக:

• உங்கள் இ-காமர்ஸ் தளத்தில் அதிக LCP குறைந்த மாற்று விகிதத்துடன் தொடர்புபடுகிறதா?
• அதிக INP மதிப்புகளைக் கொண்ட பயனர்கள் உங்கள் உள்ளடக்கத் தளத்தில் குறைந்த நேரம் செலவிடுகிறார்களா?
• மேம்படுத்தப்பட்ட CLS குறைவான கைவிடப்பட்ட படிவங்களுக்கு வழிவகுக்கிறதா?

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

4. தடைகளைக் கண்டறிந்து மேம்படுத்தல்களுக்கு முன்னுரிமை அளிக்கவும்

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

• API அழைப்புகளுக்கு மெதுவான சேவையக மறுமொழி நேரங்கள்?
• பிரதான திரியைத் தடுக்கும் பெரிய ஜாவாஸ்கிரிப்ட் தொகுப்புகள்?
• மேம்படுத்தப்படாத படங்கள்?
• அதிகப்படியான ரியாக்ட் மறு-ரெண்டர்கள்?
• மூன்றாம் தரப்பு ஸ்கிரிப்ட் குறுக்கீடு?

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

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

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

1. அதிகப்படியான ரியாக்ட் மறு-ரெண்டர்கள்

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

• தீர்வு: React.memo(): செயல்பாட்டுக் கூறுகளை நினைவில் வைத்துக் கொள்ளுங்கள், அவற்றின் ப்ராப்ஸ் மாறவில்லை என்றால் மறு-ரெண்டர்களைத் தடுக்க.

              
              const MyMemoizedComponent = React.memo(function MyComponent(props) {
                  // Renders only if props change
                  return <div>{props.data}</div>;
              });
          
              
  
                
                  Copy
                
              
            

  ஒரே ப்ராப்ஸ் கொடுக்கப்பட்டால் ஒரே வெளியீட்டை ரெண்டர் செய்யும் "தூய" கூறுகளுக்கு React.memo ஐப் பயன்படுத்தவும்.

• தீர்வு: useCallback() மற்றும் useMemo(): குழந்தை கூறுகளுக்கு ப்ராப்ஸாக அனுப்பப்படும் செயல்பாடுகள் மற்றும் மதிப்புகளை நினைவில் வைத்துக் கொள்ளுங்கள். இது React.memo இல் மூடப்பட்ட குழந்தை கூறுகள் ஒவ்வொரு பெற்றோர் ரெண்டரிலும் புதிய செயல்பாடு அல்லது பொருள் குறிப்புகள் காரணமாக தேவையற்ற முறையில் மறு-ரெண்டர் செய்வதைத் தடுக்கிறது.

              
              function ParentComponent() {
                  const [count, setCount] = useState(0);
  
                  // Memoize the handler function
                  const handleClick = useCallback(() => {
                      setCount(c => c + 1);
                  }, []); // Dependency array: empty means it never changes
  
                  // Memoize a derived value
                  const expensiveValue = useMemo(() => {
                      // Perform expensive calculation
                      return count * 2;
                  }, [count]); // Recalculate only if count changes
  
                  return (
                      <div>
                          <button onClick={handleClick}>Increment</button>
                          <MyMemoizedChild value={expensiveValue} onClick={handleClick} />
                      </div>
                  );
              }
          
              
  
                
                  Copy
                
              
            

• தீர்வு: ஸ்டேட் கோலொகேஷன் மற்றும் கான்டெக்ஸ்ட் API மேம்படுத்தல்: நிலை பயன்படுத்தப்படும் இடத்திற்கு முடிந்தவரை நெருக்கமாக வைக்கவும். கான்டெக்ஸ்ட் API ஆல் நிர்வகிக்கப்படும் உலகளாவிய நிலைக்கு, கான்டெக்ஸ்ட்களைப் பிரிப்பதைக் கருத்தில் கொள்ளுங்கள் அல்லது Redux, Zustand, அல்லது Recoil போன்ற நூலகங்களைப் பயன்படுத்தவும், அவை முழு கூறு மரங்களையும் மறு-ரெண்டர் செய்வதைத் தவிர்க்க மேலும் நுணுக்கமான புதுப்பிப்புகளை வழங்குகின்றன.

2. பெரிய ஜாவாஸ்கிரிப்ட் தொகுப்பு அளவுகள்

மெதுவான LCP மற்றும் TTI க்கு ஒரு முக்கிய பங்களிப்பாளர். பெரிய தொகுப்புகள் பதிவிறக்க அதிக நெட்வொர்க் நேரம் மற்றும் பாகுபடுத்த மற்றும் இயக்க அதிக CPU நேரம் என்று பொருள்.

• தீர்வு: கோட் ஸ்பிளிட்டிங் மற்றும் லேசி லோடிங்: கூறுகள் தேவைப்படும்போது மட்டுமே ஏற்றுவதற்கு React.lazy() மற்றும் Suspense ஐப் பயன்படுத்தவும் (எ.கா., ஒரு பயனர் ஒரு குறிப்பிட்ட பாதைக்கு செல்லும்போது அல்லது ஒரு மோடலைத் திறக்கும்போது).

              
              import React, { Suspense } from 'react';
  
              const LazyComponent = React.lazy(() => import('./LazyComponent'));
  
              function App() {
                  return (
                      <div>
                          <Suspense fallback={<div>Loading...</div>}>
                              <LazyComponent />
                          </Suspense>
                      </div>
                  );
              }
          
              
  
                
                  Copy
                
              
            

  இது ரியாக்ட் ரவுட்டர் போன்ற நூலகங்களைப் பயன்படுத்தி பாதை அடிப்படையிலான கோட் ஸ்பிளிட்டிங்குடன் நன்றாக வேலை செய்கிறது.

• தீர்வு: ட்ரீ ஷேக்கிங்: உங்கள் உருவாக்கக் கருவி (Webpack, Rollup) உங்கள் தொகுப்புகளில் இருந்து பயன்படுத்தப்படாத குறியீட்டை அகற்ற ட்ரீ ஷேக்கிங்கிற்கு உள்ளமைக்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும்.
• தீர்வு: மினிஃபிகேஷன் மற்றும் சுருக்கம்: ஜாவாஸ்கிரிப்ட், CSS, மற்றும் HTML ஐ மினிஃபை செய்து, அவற்றை Gzip அல்லது Brotli சுருக்கத்துடன் வழங்கவும். இது கம்பியில் கோப்பு அளவுகளை கணிசமாகக் குறைக்கிறது.
• தீர்வு: தொகுப்பு உள்ளடக்கங்களைப் பகுப்பாய்வு செய்யவும்: உங்கள் தொகுப்புகளின் உள்ளடக்கங்களைக் காட்சிப்படுத்தவும் மற்றும் மேம்படுத்தக்கூடிய அல்லது மாற்றக்கூடிய பெரிய சார்புகளைக் கண்டறியவும் Webpack Bundle Analyzer போன்ற கருவிகளைப் பயன்படுத்தவும்.

3. திறனற்ற தரவுப் பெறுதல் மற்றும் மேலாண்மை

மெதுவான API மறுமொழிகள் மற்றும் திறனற்ற தரவு கையாளுதல் உள்ளடக்கத்தைக் காண்பிப்பதில் குறிப்பிடத்தக்க தாமதங்களை ஏற்படுத்தும்.

• தீர்வு: தரவு கேச்சிங்: தேவையற்ற நெட்வொர்க் கோரிக்கைகளைக் குறைக்க கிளையன்ட்-பக்கம் (எ.கா., ரியாக்ட் குவெரி, SWR உடன்) அல்லது சேவையக-பக்க கேச்சிங்கை செயல்படுத்தவும்.
• தீர்வு: தரவு முன்கூட்டியே ஏற்றுதல்/முன்பெறுதல்: பயனர் செல்வதற்கு முன்பு வரவிருக்கும் பக்கங்கள் அல்லது கூறுகளுக்கான தரவைப் பெறவும்.
• தீர்வு: கோரிக்கை தொகுத்தல்/டெபவுன்சிங்: பல சிறிய கோரிக்கைகளை ஒரு பெரிய கோரிக்கையாக இணைக்கவும் அல்லது பயனர் உள்ளீடு நிலைபெறும் வரை கோரிக்கைகளை தாமதப்படுத்தவும்.
• தீர்வு: சேவையக-பக்க ரெண்டரிங் (SSR) அல்லது நிலையான தள உருவாக்கம் (SSG): உள்ளடக்கம்-கனமான பக்கங்களுக்கு, SSR (Next.js, Remix) அல்லது SSG (Gatsby, Next.js Static Export) முன்-ரெண்டர் செய்யப்பட்ட HTML ஐ வழங்குவதன் மூலம் ஆரம்ப ஏற்றுதல் நேரங்களை (LCP, FCP) வியத்தகு முறையில் மேம்படுத்த முடியும். இது ரெண்டரிங் வேலையை கிளையண்டிலிருந்து சேவையகத்திற்கு மாற்றுகிறது, குறிப்பாக குறைந்த-நிலை சாதனங்கள் அல்லது மெதுவான நெட்வொர்க்குகளில் உள்ள பயனர்களுக்கு நன்மை பயக்கும்.
• தீர்வு: பின்தள API-களை மேம்படுத்துதல்: உங்கள் பின்தள API-கள் செயல்திறன் மிக்கவை மற்றும் தேவையான தரவை மட்டுமே திருப்புவதை உறுதிசெய்யவும். கிளையண்ட்கள் தங்களுக்குத் தேவையான தரவை மட்டுமே கோர அனுமதிக்க GraphQL ஐப் பயன்படுத்தவும்.

4. மேம்படுத்தப்படாத படங்கள் மற்றும் ஊடகம்

பெரிய, மேம்படுத்தப்படாத படங்கள் மெதுவான LCP மற்றும் அதிகரித்த பக்க அளவிற்கு ஒரு பொதுவான குற்றவாளி.

• தீர்வு: பதிலளிக்கக்கூடிய படங்கள்: வெவ்வேறு திரைத் தீர்மானங்கள் மற்றும் சாதன பிக்சல் விகிதங்களுக்கு பொருத்தமான அளவிலான படங்களை வழங்க srcset மற்றும் sizes பண்புகளைப் பயன்படுத்தவும், அல்லது ரியாக்ட் படக் கூறுகளை (எ.கா., Next.js இல் next/image) பயன்படுத்தவும்.
• தீர்வு: பட சுருக்கம் மற்றும் வடிவங்கள்: தரத்தை தியாகம் செய்யாமல் படங்களை சுருக்கவும் (எ.கா., WebP அல்லது AVIF வடிவங்களைப் பயன்படுத்தி) மற்றும் தானியங்கி மேம்படுத்தலுக்கான கருவிகளைப் பயன்படுத்தவும்.
• தீர்வு: படங்களை மெதுவாக ஏற்றுதல்: loading="lazy" பண்பு அல்லது ஒரு Intersection Observer ஐப் பயன்படுத்தி படங்கள் வியூபோர்ட்டிற்குள் நுழையும்போது மட்டுமே ஏற்றவும்.

5. சிக்கலான கூறு மரங்கள் மற்றும் மெய்நிகராக்கம்

ஆயிரக்கணக்கான பட்டியல் உருப்படிகள் அல்லது சிக்கலான தரவு கட்டங்களை ரெண்டர் செய்வது செயல்திறனை கடுமையாக பாதிக்கும்.

• தீர்வு: விண்டோயிங்/மெய்நிகராக்கம்: நீண்ட பட்டியல்களுக்கு, தற்போது வியூபோர்ட்டில் தெரியும் உருப்படிகளை மட்டுமே ரெண்டர் செய்யவும். react-window அல்லது react-virtualized போன்ற நூலகங்கள் உதவக்கூடும்.
• தீர்வு: பெரிய கூறுகளை உடைத்தல்: பெரிய, ஒற்றைக்கல் கூறுகளை சிறிய, மேலும் நிர்வகிக்கக்கூடியவையாக மறுசீரமைக்கவும். இது மறு-ரெண்டர் செயல்திறன் மற்றும் பராமரிப்பை மேம்படுத்தும்.
• தீர்வு: விலையுயர்ந்த ரெண்டர் கணக்கீடுகளுக்கு useMemo ஐப் பயன்படுத்தவும்: ஒரு கூறுகளின் ரெண்டர் செயல்பாடு அனைத்து ப்ராப்ஸ்களையும் சார்ந்து இல்லாத விலையுயர்ந்த கணக்கீடுகளைச் செய்தால், அந்த கணக்கீடுகளை நினைவில் வைத்துக் கொள்ளுங்கள்.

6. மூன்றாம் தரப்பு ஸ்கிரிப்ட்கள்

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

• தீர்வு: ஒத்திசைவற்ற/தள்ளிப்போட்டு ஏற்றுதல்: மூன்றாம் தரப்பு ஸ்கிரிப்ட்களை ஒத்திசைவற்ற முறையில் (async பண்பு) ஏற்றவும் அல்லது அவற்றின் ஏற்றுதலைத் தள்ளிப்போடவும் (defer பண்பு), அவை பிரதான திரியைத் தடுப்பதைத் தடுக்க.
• தீர்வு: <link rel="preconnect"> மற்றும் <link rel="dns-prefetch"> ஐப் பயன்படுத்தவும்: முக்கியமான மூன்றாம் தரப்பு ஸ்கிரிப்ட்களின் மூலங்களுக்கு முன்-இணைப்பு ஏற்படுத்தி கைகுலுக்கல் நேரத்தைக் குறைக்கவும்.
• தீர்வு: தேவையற்ற ஸ்கிரிப்ட்களை தணிக்கை செய்து அகற்றவும்: உங்கள் மூன்றாம் தரப்பு ஒருங்கிணைப்புகளை தவறாமல் மதிப்பாய்வு செய்து, இனி அத்தியாவசியமற்ற எதையும் அகற்றவும்.

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

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

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

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

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

• ஒழுங்கின்மை கண்டறிதலுக்கான மேம்படுத்தப்பட்ட AI/ML: எதிர்கால RUM கருவிகள் நுட்பமான செயல்திறன் சீரழிவுகளைத் தானாகக் கண்டறிய, சாத்தியமான சிக்கல்களைக் கணிக்க மற்றும் மூல காரணங்களை அதிக துல்லியத்துடன் அடையாளம் காண மேம்பட்ட இயந்திர கற்றலைப் பயன்படுத்தும், இது கைமுறை பகுப்பாய்வு நேரத்தைக் குறைக்கும்.
• முன்கணிப்பு பகுப்பாய்வு: எதிர்வினை கண்காணிப்புக்கு அப்பால், RUM அமைப்புகள் பெருகிய முறையில் முன்கணிப்பு திறன்களை வழங்கும், அணிகளை சாத்தியமான செயல்திறன் தடைகளுக்கு அதிக எண்ணிக்கையிலான பயனர்களை கணிசமாக பாதிக்கும் முன்பு எச்சரிக்கும்.
• முழுமையான கண்காணிப்பு: RUM, APM (பின்தளத்திற்கான பயன்பாட்டு செயல்திறன் கண்காணிப்பு), உள்கட்டமைப்பு கண்காணிப்பு மற்றும் பதிவுசெய்தல் ஆகியவற்றுக்கு இடையேயான இறுக்கமான ஒருங்கிணைப்பு பயன்பாட்டு ஆரோக்கியத்தின் உண்மையான ஒருங்கிணைந்த பார்வையை வழங்கும், தரவுத்தளத்திலிருந்து பயனர் இடைமுகம் வரை. இது மைக்ரோ சர்வீஸ்கள் அல்லது சர்வர்லெஸ் பின்தளங்களை நம்பியிருக்கும் சிக்கலான ரியாக்ட் பயன்பாடுகளுக்கு குறிப்பாக முக்கியமானது.
• மேம்பட்ட உலாவி API-கள்: உலாவிகள் தொடர்ந்து புதிய செயல்திறன் API-களை அறிமுகப்படுத்துகின்றன, ரெண்டரிங், நெட்வொர்க்கிங் மற்றும் பயனர் தொடர்பு ஆகியவற்றில் இன்னும் நுணுக்கமான நுண்ணறிவுகளை வழங்குகின்றன. இந்த புதிய திறன்களைப் பற்றி அறிந்திருப்பது ஆழமான RUM நுண்ணறிவுகளைத் திறக்க முக்கியமாகும்.
• அளவீடுகளின் தரப்படுத்தல்: கோர் வெப் வைட்டல்ஸ் ஒரு சிறந்த படியாக இருந்தாலும், மேலும் RUM அளவீடுகளைத் தரப்படுத்துவதற்கான தொடர்ச்சியான முயற்சிகள் வெவ்வேறு பயன்பாடுகள் மற்றும் தொழில்களிடையே எளிதான ஒப்பீடுகள் மற்றும் அளவுகோல்களுக்கு வழிவகுக்கும்.
• கட்டமைப்புகளில் இயல்பாகவே செயல்திறன்: ரியாக்ட் மற்றும் பிற கட்டமைப்புகள் இயல்பாகவே அதிக செயல்திறன் மேம்படுத்தல்களை இணைக்க தொடர்ந்து உருவாகி வருகின்றன, இது டெவலப்பர்கள் மீதான சுமையைக் குறைக்கிறது. RUM இந்த கட்டமைப்பு-நிலை மேம்பாடுகளின் செயல்திறனை சரிபார்க்க உதவும்.

முடிவுரை

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

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