ஃபிரன்ட்எண்ட் டேட்டாடாக்: நவீன வலைச் செயலிகளுக்கான விரிவான உள்கட்டமைப்பு கண்காணிப்பு

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

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

• ஃபிரன்ட்எண்ட் கண்காணிப்புக்கு டேட்டடாக்கை அமைத்தல்
• ஃபிரன்ட்எண்ட் செயல்திறனைக் கண்காணிக்க வேண்டிய முக்கிய அளவீடுகள்
• டேட்டாடாக் உடன் உண்மையான பயனர் கண்காணிப்பு (RUM)
• முன்கூட்டியே சிக்கல்களைக் கண்டறிய செயற்கை சோதனை
• டேட்டாடாக் நுண்ணறிவுகளுடன் ஃபிரன்ட்எண்ட் செயல்திறனை மேம்படுத்துவதற்கான சிறந்த நடைமுறைகள்

ஃபிரன்ட்எண்ட் உள்கட்டமைப்பு கண்காணிப்பு என்றால் என்ன?

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

• உலாவி செயல்திறன்: ஏற்றுதல் நேரங்கள், ரெண்டரிங் செயல்திறன், ஜாவாஸ்கிரிப்ட் செயல்படுத்தல், மற்றும் வளங்களை ஏற்றுதல்.
• நெட்வொர்க் செயல்திறன்: தாமதம், கோரிக்கை தோல்விகள், மற்றும் DNS தீர்வு.
• மூன்றாம் தரப்பு சேவைகள்: ஃபிரன்ட்எண்ட் பயன்படுத்தும் APIகள், CDNகள், மற்றும் பிற வெளிப்புற சேவைகளின் செயல்திறன் மற்றும் கிடைக்கும் தன்மை.
• பயனர் அனுபவம்: பயனர் தொடர்புகள், பிழை விகிதங்கள், மற்றும் உணரப்பட்ட செயல்திறனை அளவிடுதல்.

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

ஃபிரன்ட்எண்ட் கண்காணிப்புக்கு டேட்டடாக்கை ஏன் தேர்வு செய்ய வேண்டும்?

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

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

ஃபிரன்ட்எண்ட் கண்காணிப்புக்கு டேட்டடாக்கை அமைத்தல்

ஃபிரன்ட்எண்ட் கண்காணிப்புக்கு டேட்டடாக்கை அமைப்பது பின்வரும் படிகளை உள்ளடக்கியது:

1. டேட்டாடாக் கணக்கை உருவாக்குதல்

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

2. டேட்டாடாக் RUM உலாவி SDK-ஐ நிறுவுதல்

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

            npm install @datadog/browser-rum
            

              
                Copy
              
            
          

அல்லது:

            yarn add @datadog/browser-rum
            

              
                Copy
              
            
          

3. RUM SDK-ஐ தொடங்குதல்

உங்கள் செயலியின் பிரதான ஜாவாஸ்கிரிப்ட் கோப்பில், உங்கள் டேட்டாடாக் செயலி ஐடி, கிளையன்ட் டோக்கன் மற்றும் சேவைப் பெயருடன் RUM SDK-ஐத் தொடங்கவும்:

            import { datadogRum } from '@datadog/browser-rum'

datadogRum.init({
  applicationId: 'YOUR_APPLICATION_ID',
  clientToken: 'YOUR_CLIENT_TOKEN',
  service: 'your-service-name',
  env: 'production',
  version: '1.0.0',
  sampleRate: 100,
  premiumSampleRate: 100,
  trackResources: true,
  trackLongTasks: true,
  trackUserInteractions: true,
});

datadogRum.startSessionReplayRecording();

            

              
                Copy
              
            
          

அளவுருக்களின் விளக்கம்:

• applicationId: உங்கள் டேட்டாடாக் செயலி ஐடி.
• clientToken: உங்கள் டேட்டாடாக் கிளையன்ட் டோக்கன்.
• service: உங்கள் சேவையின் பெயர்.
• env: சூழல் (எ.கா., production, staging).
• version: உங்கள் செயலியின் பதிப்பு.
• sampleRate: கண்காணிக்கப்பட வேண்டிய அமர்வுகளின் சதவீதம். 100 என்ற மதிப்பு அனைத்து அமர்வுகளும் கண்காணிக்கப்படும் என்பதைக் குறிக்கிறது.
• premiumSampleRate: அமர்வு மறுபதிவுகளைப் பதிவு செய்வதற்கான அமர்வுகளின் சதவீதம்.
• trackResources: வளங்களை ஏற்றுதல் நேரங்களைக் கண்காணிக்க வேண்டுமா.
• trackLongTasks: பிரதான த்ரெட்டைத் தடுக்கும் நீண்ட பணிகளைக் கண்காணிக்க வேண்டுமா.
• trackUserInteractions: கிளிக்குகள் மற்றும் படிவ சமர்ப்பிப்புகள் போன்ற பயனர் தொடர்புகளைக் கண்காணிக்க வேண்டுமா.

முக்கியம்: `YOUR_APPLICATION_ID` மற்றும் `YOUR_CLIENT_TOKEN` ஆகியவற்றை உங்கள் உண்மையான டேட்டாடாக் நற்சான்றுகளுடன் மாற்றவும். இவை உங்கள் டேட்டாடாக் கணக்கு அமைப்புகளில் RUM அமைப்புகளின் கீழ் காணப்படும்.

4. உள்ளடக்க பாதுகாப்பு கொள்கையை (CSP) உள்ளமைத்தல்

நீங்கள் ஒரு உள்ளடக்க பாதுகாப்பு கொள்கையை (CSP) பயன்படுத்துகிறீர்கள் என்றால், டேட்டாடாக் தரவைச் சேகரிக்க அனுமதிக்க அதை நீங்கள் உள்ளமைக்க வேண்டும். உங்கள் CSP-க்கு பின்வரும் வழிமுறைகளைச் சேர்க்கவும்:

            connect-src https://*.datadoghq.com https://*.data.dog;
img-src https://*.datadoghq.com https://*.data.dog data:;
script-src 'self' https://*.datadoghq.com https://*.data.dog;

            

              
                Copy
              
            
          

5. உங்கள் செயலியை வரிசைப்படுத்துதல்

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

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

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

1. பக்க ஏற்றுதல் நேரம்

பக்க ஏற்றுதல் நேரம் என்பது ஒரு வலைப்பக்கம் முழுமையாக ஏற்றப்பட்டு ஊடாடும் நிலைக்கு வர எடுக்கும் நேரமாகும். இது பயனர் அனுபவத்திற்கு ஒரு முக்கியமான அளவீடு ஆகும். டேட்டாடாக் பக்க ஏற்றுதல் நேரம் தொடர்பான பல்வேறு அளவீடுகளை வழங்குகிறது, அவற்றுள்:

• First Contentful Paint (FCP): திரையில் முதல் உள்ளடக்கம் (உரை, படம், போன்றவை) தோன்ற எடுக்கும் நேரம்.
• Largest Contentful Paint (LCP): திரையில் மிகப்பெரிய உள்ளடக்க உறுப்பு தோன்ற எடுக்கும் நேரம். LCP ஒரு முக்கிய வலை உயிர்மெய் அளவீடு ஆகும்.
• First Input Delay (FID): முதல் பயனர் தொடர்புக்கு (எ.கா., ஒரு கிளிக்) உலாவி பதிலளிக்க எடுக்கும் நேரம். FID-ம் ஒரு முக்கிய வலை உயிர்மெய் அளவீடு ஆகும்.
• Time to Interactive (TTI): பக்கம் முழுமையாக ஊடாடும் நிலைக்கு வர எடுக்கும் நேரம்.
• Load Event End: ஏற்றுதல் நிகழ்வு முடிவடையும் நேரம்.

2.5 வினாடிகள் அல்லது அதற்கும் குறைவான LCP, 100 மில்லி வினாடிகள் அல்லது அதற்கும் குறைவான FID, மற்றும் 5 வினாடிகள் அல்லது அதற்கும் குறைவான TTI-ஐ இலக்காகக் கொள்ளுங்கள். இவை நல்ல பயனர் அனுபவத்திற்கான கூகிளால் பரிந்துரைக்கப்பட்ட வரையறைகள் ஆகும்.

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

2. ஜாவாஸ்கிரிப்ட் பிழைகள்

ஜாவாஸ்கிரிப்ட் பிழைகள் பயனர் அனுபவத்தை சீர்குலைத்து, அம்சங்கள் சரியாக வேலை செய்வதைத் தடுக்கலாம். டேட்டாடாக் தானாகவே ஜாவாஸ்கிரிப்ட் பிழைகளைப் பிடித்து báo cáo செய்கிறது, இது பிழைகளை விரைவாகக் கண்டறிந்து சரிசெய்ய உங்களை அனுமதிக்கிறது.

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

3. வளங்களை ஏற்றுதல் நேரம்

வளங்களை ஏற்றுதல் நேரம் என்பது படங்கள், CSS கோப்புகள், மற்றும் ஜாவாஸ்கிரிப்ட் கோப்புகள் போன்ற தனிப்பட்ட வளங்களை ஏற்றுவதற்கு எடுக்கும் நேரமாகும். நீண்ட வளங்களை ஏற்றுதல் நேரங்கள் மெதுவான பக்க ஏற்றுதல் நேரங்களுக்கு பங்களிக்கக்கூடும்.

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

4. API தாமதம்

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

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

5. பயனர் நடவடிக்கைகள்

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

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

டேட்டாடாக் உடன் உண்மையான பயனர் கண்காணிப்பு (RUM)

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

RUM-இன் நன்மைகள்

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

டேட்டடாக்கில் உள்ள முக்கிய RUM அம்சங்கள்

• அமர்வு மறுபதிவு (Session Replay): பயனர்கள் என்ன அனுபவிக்கிறார்கள் என்பதைத் துல்லியமாகப் பார்க்க, பயனர் அமர்வுகளைப் பதிவுசெய்து மீண்டும் இயக்கவும். சிக்கல்களைத் தீர்ப்பதற்கும் பயனர் நடத்தையைப் புரிந்துகொள்வதற்கும் இது விலைமதிப்பற்றது.
• வள நேரம் (Resource Timing): படங்கள், CSS கோப்புகள், மற்றும் ஜாவாஸ்கிரிப்ட் கோப்புகள் போன்ற தனிப்பட்ட வளங்களின் ஏற்றுதல் நேரங்களைக் கண்காணிக்கவும்.
• பிழை கண்காணிப்பு (Error Tracking): ஜாவாஸ்கிரிப்ட் பிழைகளைப் பிடித்து பகுப்பாய்வு செய்து, பிழைகளை விரைவாகக் கண்டறிந்து சரிசெய்யவும்.
• பயனர் பகுப்பாய்வு (User Analytics): கிளிக்குகள், படிவ சமர்ப்பிப்புகள், மற்றும் பக்க மாற்றங்கள் போன்ற பயனர் நடத்தையைப் பகுப்பாய்வு செய்யவும்.
• தனிப்பயன் நிகழ்வுகள் (Custom Events): உங்கள் செயலிக்கு குறிப்பிட்ட தனிப்பயன் நிகழ்வுகளைக் கண்காணிக்கவும்.

அமர்வு மறுபதிவைப் பயன்படுத்துதல்

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

அமர்வு மறுபதிவை இயக்க, நீங்கள் `premiumSampleRate` விருப்பத்தை 0-க்கும் அதிகமான மதிப்புடன் RUM SDK-ஐத் தொடங்க வேண்டும். உதாரணமாக, 10% அமர்வுகளுக்கு அமர்வு மறுபதிவுகளைப் பதிவு செய்ய, `premiumSampleRate`-ஐ 10 என அமைக்கவும்:

            datadogRum.init({
  // ... other options
  premiumSampleRate: 10,
});

datadogRum.startSessionReplayRecording();

            

              
                Copy
              
            
          

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

முன்கூட்டியே சிக்கல்களைக் கண்டறிய செயற்கை சோதனை

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

செயற்கை சோதனையின் நன்மைகள்

• முன்கூட்டியே சிக்கல்களைக் கண்டறிதல்: உண்மையான பயனர்களைப் பாதிக்கும் முன் செயல்திறன் சிக்கல்கள் மற்றும் கிடைக்கும் தன்மைச் சிக்கல்களைக் கண்டறியவும்.
• உலகளாவிய பாதுகாப்பு: அனைத்து பயனர்களுக்கும் சீரான செயல்திறனை உறுதி செய்ய, உலகின் பல்வேறு இடங்களிலிருந்து உங்கள் செயலியைச் சோதிக்கவும்.
• API கண்காணிப்பு: உங்கள் API-களின் செயல்திறன் மற்றும் கிடைக்கும் தன்மையைக் கண்காணிக்கவும்.
• பின்னடைவு சோதனை (Regression testing): புதிய குறியீடு மாற்றங்கள் செயல்திறன் பின்னடைவுகளை அறிமுகப்படுத்தவில்லை என்பதை உறுதிப்படுத்த செயற்கை சோதனைகளைப் பயன்படுத்தவும்.
• மூன்றாம் தரப்பு சேவை கண்காணிப்பு: உங்கள் செயலி சார்ந்திருக்கும் மூன்றாம் தரப்பு சேவைகளின் செயல்திறனைக் கண்காணிக்கவும்.

செயற்கை சோதனைகளின் வகைகள்

டேட்டாடாக் பல வகையான செயற்கை சோதனைகளை வழங்குகிறது:

• உலாவி சோதனைகள் (Browser Tests): ஒரு உண்மையான உலாவியில் பயனர் தொடர்புகளை உருவகப்படுத்துங்கள், இது உங்கள் செயலியின் இறுதி முதல் இறுதி வரையிலான செயல்பாட்டைச் சோதிக்க உங்களை அனுமதிக்கிறது. இந்த சோதனைகள் பொத்தான்களைக் கிளிக் செய்தல், படிவங்களை நிரப்புதல், மற்றும் பக்கங்களுக்கு இடையில் செல்லுதல் போன்ற செயல்களைச் செய்ய முடியும்.
• API சோதனைகள் (API Tests): HTTP கோரிக்கைகளை அனுப்பி பதில்களைச் சரிபார்ப்பதன் மூலம் உங்கள் API-களின் செயல்திறன் மற்றும் கிடைக்கும் தன்மையைச் சோதிக்கவும்.
• SSL சான்றிதழ் சோதனைகள் (SSL Certificate Tests): உங்கள் SSL சான்றிதழ்களின் காலாவதி தேதி மற்றும் செல்லுபடியாகும் தன்மையைக் கண்காணிக்கவும்.
• DNS சோதனைகள் (DNS Tests): உங்கள் DNS பதிவுகள் சரியாக உள்ளமைக்கப்பட்டுள்ளதா என்பதைச் சரிபார்க்கவும்.

ஒரு உலாவி சோதனையை உருவாக்குதல்

ஒரு உலாவி சோதனையை உருவாக்க, இந்த வழிமுறைகளைப் பின்பற்றவும்:

1. டேட்டாடாக் UI-இல், Synthetic Monitoring > New Test > Browser Test என்பதற்குச் செல்லவும்.
2. நீங்கள் சோதிக்க விரும்பும் பக்கத்தின் URL-ஐ உள்ளிடவும்.
3. டேட்டாடாக் ரெக்கார்டரைப் பயன்படுத்தி நீங்கள் உருவகப்படுத்த விரும்பும் படிகளைப் பதிவு செய்யவும். ரெக்கார்டர் உங்கள் செயல்களைப் பிடித்து சோதனைக்கான குறியீட்டை உருவாக்கும்.
4. சோதனையை எங்கிருந்து இயக்குவது, சோதனையின் அதிர்வெண், மற்றும் சோதனை தோல்வியுற்றால் தூண்டப்பட வேண்டிய எச்சரிக்கைகள் போன்ற சோதனை அமைப்புகளை உள்ளமைக்கவும்.
5. சோதனையைச் சேமிக்கவும்.

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

ஒரு API சோதனையை உருவாக்குதல்

ஒரு API சோதனையை உருவாக்க, இந்த வழிமுறைகளைப் பின்பற்றவும்:

1. டேட்டாடாக் UI-இல், Synthetic Monitoring > New Test > API Test என்பதற்குச் செல்லவும்.
2. நீங்கள் சோதிக்க விரும்பும் API எண்ட்பாயிண்டின் URL-ஐ உள்ளிடவும்.
3. முறை (GET, POST, PUT, DELETE), தலைப்புகள், மற்றும் உடல் உட்பட HTTP கோரிக்கையை உள்ளமைக்கவும்.
4. நிலை குறியீடு, உள்ளடக்க வகை, அல்லது பதில் உடலில் குறிப்பிட்ட தரவின் இருப்பை சரிபார்த்தல் போன்ற பதில்களைச் சரிபார்க்க உறுதிமொழிகளை வரையறுக்கவும்.
5. சோதனையை எங்கிருந்து இயக்குவது, சோதனையின் அதிர்வெண், மற்றும் சோதனை தோல்வியுற்றால் தூண்டப்பட வேண்டிய எச்சரிக்கைகள் போன்ற சோதனை அமைப்புகளை உள்ளமைக்கவும்.
6. சோதனையைச் சேமிக்கவும்.

உதாரணக் காட்சி: உங்கள் ஃபிரன்ட்எண்ட் சார்ந்திருக்கும் ஒரு முக்கியமான API எண்ட்பாயிண்டின் கிடைக்கும் தன்மையைக் கண்காணிக்க நீங்கள் ஒரு API சோதனையை உருவாக்கலாம். சோதனை எண்ட்பாயிண்டிற்கு ஒரு கோரிக்கையை அனுப்பி, அது 200 OK நிலைக் குறியீட்டைத் திருப்புவதையும், பதில் உடலில் எதிர்பார்க்கப்படும் தரவு இருப்பதையும் சரிபார்க்கலாம். சோதனை தோல்வியுற்றால், உங்களுக்கு எச்சரிக்கை செய்யப்படும், இது சிக்கலை ஆராய்ந்து உங்கள் பயனர்களைப் பாதிப்பதைத் தடுக்க உங்களை அனுமதிக்கிறது.

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

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

1. படங்களை மேம்படுத்துதல்

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

• படங்களைச் சுருக்குதல்: தரத்தை இழக்காமல் படங்களின் கோப்பு அளவைக் குறைக்க பட சுருக்கக் கருவிகளைப் பயன்படுத்தவும்.
• நவீன பட வடிவங்களைப் பயன்படுத்துதல்: JPEG மற்றும் PNG போன்ற பாரம்பரிய வடிவங்களை விட சிறந்த சுருக்கத்தை வழங்கும் WebP போன்ற நவீன பட வடிவங்களைப் பயன்படுத்தவும்.
• படங்களின் அளவை மாற்றுதல்: படங்கள் காட்டப்படும் காட்சிக்கு பொருத்தமான பரிமாணங்களுக்கு படங்களின் அளவை மாற்றவும். உலாவியால் அளவு குறைக்கப்படும் பெரிய படங்களை வழங்குவதைத் தவிர்க்கவும்.
• சோம்பேறி ஏற்றுதல் (Lazy loading) பயன்படுத்துதல்: படங்கள் வியூபோர்ட்டில் தெரியும் போது மட்டுமே அவற்றை ஏற்றவும். இது ஆரம்ப பக்க ஏற்றுதல் நேரத்தை கணிசமாக மேம்படுத்தும்.
• CDN-ஐப் பயன்படுத்துதல்: உங்கள் பயனர்களுக்கு நெருக்கமான சேவையகங்களிலிருந்து படங்களை வழங்க ஒரு உள்ளடக்க விநியோக வலையமைப்பை (CDN) பயன்படுத்தவும்.

2. CSS மற்றும் ஜாவாஸ்கிரிப்டை மினிஃபை மற்றும் பண்டில் செய்தல்

CSS மற்றும் ஜாவாஸ்கிரிப்ட் கோப்புகளை மினிஃபை செய்வது, வெற்று இடம் மற்றும் கருத்துரைகள் போன்ற தேவையற்ற எழுத்துக்களை நீக்குகிறது, இது கோப்பு அளவைக் குறைக்கிறது. CSS மற்றும் ஜாவாஸ்கிரிப்ட் கோப்புகளை பண்டில் செய்வது பல கோப்புகளை ஒரே கோப்பாக இணைக்கிறது, இது பக்கத்தை ஏற்றுவதற்குத் தேவையான HTTP கோரிக்கைகளின் எண்ணிக்கையைக் குறைக்கிறது.

உங்கள் CSS மற்றும் ஜாவாஸ்கிரிப்ட் கோப்புகளை மினிஃபை மற்றும் பண்டில் செய்ய Webpack, Parcel, அல்லது Rollup போன்ற கருவிகளைப் பயன்படுத்தவும்.

3. உலாவி கேச்சிங்கைப் பயன்படுத்துதல்

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

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

4. ரெண்டரிங் செயல்திறனை மேம்படுத்துதல்

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

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

5. மூன்றாம் தரப்பு சேவைகளைக் கண்காணித்தல்

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

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

6. குறியீடு பிரித்தலைச் செயல்படுத்துதல்

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

உங்கள் செயலியில் குறியீடு பிரித்தலைச் செயல்படுத்த Webpack அல்லது Parcel போன்ற கருவிகளைப் பயன்படுத்தவும்.

முடிவுரை

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

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