இணைய செயல்திறனைத் திறத்தல்: செயல்திறன் கண்காணிப்பு API பற்றிய ஒரு ஆழமான பார்வை

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

பாரம்பரிய முறைகள் பெரும்பாலும் performance.getEntries() போன்ற செயல்பாடுகளுடன் செயல்திறன் தரவிற்காக மீண்டும் மீண்டும் சோதிப்பதை உள்ளடக்கியது. இது திறனற்றதாக இருக்கலாம், சோதனைகளுக்கு இடையில் நிகழும் முக்கியமான நிகழ்வுகளைத் தவறவிட வாய்ப்புள்ளது, மேலும் அது அளவிட முயற்சிக்கும் செயல்திறன் சுமையைக் கூட கூட்டக்கூடும். செயல்திறன் கண்காணிப்பு API இந்த செயல்முறையை புரட்சிகரமாக்குகிறது, செயல்திறன் நிகழ்வுகள் நடக்கும்போது వాటికి ಚಂದಾದಾರರಾಗಲು ಅಸಮಕಾಲಿಕ, ಕಡಿಮೆ-மேலோட்டமான பொறிமுறையை வழங்குகிறது. இந்த வழிகாட்டி இந்த அத்தியாவசிய API பற்றி ஒரு ஆழமான பார்வையை உங்களுக்கு வழங்கும், அதன் சக்தியைப் பயன்படுத்தி முக்கிய இணைய அளவீடுகளைக் கண்காணிக்கவும், தடைகளை அடையாளம் காணவும், மற்றும் இறுதியில் உலகளாவிய பார்வையாளர்களுக்கு வேகமான, மேலும் சுவாரஸ்யமான இணைய அனுபவங்களை உருவாக்கவும் எப்படி என்பதைக் காண்பிக்கும்.

செயல்திறன் கண்காணிப்பு API என்றால் என்ன?

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

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

பழைய முறை vs. புதிய முறை

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

• பழைய முறை (Polling): உங்கள் மெட்ரிக் பதிவு செய்யப்பட்டுள்ளதா என்பதைப் பார்க்க, performance.getEntriesByName('my-metric') ஐ அவ்வப்போது அழைக்க setTimeout அல்லது requestAnimationFrame ஐப் பயன்படுத்தலாம். இது சிக்கலானது, ஏனெனில் நீங்கள் மிகவும் தாமதமாகச் சரிபார்த்து நிகழ்வைத் தவறவிடலாம், அல்லது அடிக்கடி சரிபார்த்து CPU சுழற்சிகளை வீணடிக்கலாம். நீங்கள் தொடர்ந்து உள்ளீடுகளை அழிக்காவிட்டால் உலாவியின் செயல்திறன் இடையகத்தை நிரப்பும் அபாயமும் உள்ளது.
• புதிய முறை (Observing): நீங்கள் ஒருமுறை PerformanceObserver ஐ அமைக்கிறீர்கள். அது பின்னணியில் அமைதியாக இருந்து, குறைந்தபட்ச வளங்களைப் பயன்படுத்துகிறது. ஒரு தொடர்புடைய செயல்திறன் உள்ளீடு பதிவு செய்யப்பட்டவுடன்—அது பக்க ஏற்றத்திற்குப் பிறகு ஒரு மில்லி விநாடியாக இருந்தாலும் சரி அல்லது ஒரு பயனரின் அமர்வில் பத்து நிமிடங்கள் கழித்து இருந்தாலும் சரி—உங்கள் குறியீடு உடனடியாக அறிவிக்கப்படும். இது நீங்கள் ஒரு நிகழ்வையும் தவறவிடாமல் இருப்பதை உறுதி செய்கிறது மற்றும் உங்கள் கண்காணிப்புக் குறியீடு முடிந்தவரை திறமையாக உள்ளது.

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

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

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

தொடங்குதல்: செயல்திறன் கண்காணிப்பின் அடிப்படைகள்

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

1. ஒரு கால்பேக்குடன் ஒரு கண்காணிப்பாளரை உருவாக்குதல்

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

const observer = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log('Entry Type:', entry.entryType); console.log('Entry Name:', entry.name); console.log('Start Time:', entry.startTime); console.log('Duration:', entry.duration); } });

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

2. குறிப்பிட்ட நுழைவு வகைகளைக் கண்காணித்தல்

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

// இரண்டு வகையான உள்ளீடுகளைக் கண்காணிக்கத் தொடங்குங்கள் observer.observe({ entryTypes: ['mark', 'measure'] });

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

• 'resource': ஸ்கிரிப்டுகள், படங்கள் மற்றும் ஸ்டைல்ஷீட்கள் போன்ற சொத்துகளுக்கான நெட்வொர்க் கோரிக்கைகள் பற்றிய விவரங்கள்.
• 'paint': முதல்-வரைதல் மற்றும் முதல்-உள்ளடக்கம்-வரைதல் ஆகியவற்றிற்கான நேரம்.
• 'largest-contentful-paint': உணரப்பட்ட ஏற்றுதல் வேகத்திற்கான முக்கிய இணைய அளவீடு.
• 'layout-shift': காட்சி நிலைத்தன்மைக்கான முக்கிய இணைய அளவீடு.
• 'first-input': முதல் உள்ளீட்டு தாமத முக்கிய இணைய அளவீட்டிற்காகப் பயன்படுத்தப்படும் முதல் பயனர் தொடர்பு பற்றிய தகவல்.
• 'longtask': பிரதான திரியில் 50 மில்லி விநாடிகளுக்கு மேல் எடுக்கும் பணிகளை அடையாளம் காட்டுகிறது, இது பதிலளிக்காத நிலையை ஏற்படுத்தக்கூடும்.
• 'mark' & 'measure': பயனர் நேர API ஐப் பயன்படுத்தி உங்கள் சொந்த குறியீட்டில் நீங்கள் வரையறுக்கும் தனிப்பயன் குறிப்பான்கள் மற்றும் அளவீடுகள்.

3. கண்காணிப்பாளரை நிறுத்துதல்

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

observer.disconnect();

நடைமுறை பயன்பாடுகள்: முக்கிய இணைய அளவீடுகளைக் கண்காணித்தல்

முக்கிய இணைய அளவீடுகள் (Core Web Vitals) என்பது ஒரு வலைப்பக்கத்தின் ஒட்டுமொத்த பயனர் அனுபவத்தில் கூகிள் முக்கியமானதாகக் கருதும் குறிப்பிட்ட காரணிகளின் தொகுப்பாகும். அவற்றைக் கண்காணிப்பது செயல்திறன் கண்காணிப்பு API இன் மிக சக்திவாய்ந்த பயன்பாடுகளில் ஒன்றாகும். ஒவ்வொன்றையும் எவ்வாறு அளவிடுவது என்று பார்ப்போம்.

மிகப்பெரிய உள்ளடக்கம் வரைதல் (LCP) கண்காணித்தல்

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

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

// LCP-ஐக் கவனித்து இறுதி மதிப்பைப் பதிவு செய்யவும் let lcpValue = 0; const lcpObserver = new PerformanceObserver((entryList) => { const entries = entryList.getEntries(); // கடைசி நுழைவு மிகவும் புதுப்பித்த LCP வேட்பாளர் const lastEntry = entries[entries.length - 1]; lcpValue = lastEntry.startTime; console.log(`LCP updated: ${lcpValue.toFixed(2)}ms`, lastEntry.element); }); lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true }); // பயனர் தொடர்பு கொண்ட பிறகு கண்காணிப்பாளரைத் துண்டிப்பது நல்ல நடைமுறை, // ஏனெனில் தொடர்புகள் புதிய LCP வேட்பாளர்களை அனுப்புவதை நிறுத்தக்கூடும். // window.addEventListener('beforeunload', () => lcpObserver.disconnect());

buffered: true இன் பயன்பாட்டைக் கவனியுங்கள். இது ஒரு முக்கியமான விருப்பமாகும், இது observe() முறை அழைக்கப்படுவதற்கு *முன்பு* பதிவு செய்யப்பட்ட உள்ளீடுகளைச் சேர்க்க கண்காணிப்பாளருக்கு அறிவுறுத்துகிறது. இது நீங்கள் ஒரு ஆரம்ப LCP நிகழ்வைத் தவறவிடுவதைத் தடுக்கிறது.

முதல் உள்ளீட்டு தாமதம் (FID) மற்றும் அடுத்த வரைதலுக்கான இடைவினை (INP) ஆகியவற்றைக் கண்காணித்தல்

இந்த அளவீடுகள் ஊடாடும் தன்மையை அளவிடுகின்றன. பயனர் முதன்முதலில் பக்கத்துடன் தொடர்பு கொள்ள முயற்சிக்கும்போது அவர்களின் அனுபவத்தை அவை அளவிடுகின்றன.

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

அடுத்த வரைதலுக்கான இடைவினை (INP) என்பது ஒரு புதிய, மேலும் விரிவான அளவீடு ஆகும், இது மார்ச் 2024 இல் முக்கிய இணைய அளவீடாக FID ஐ மாற்றியுள்ளது. FID *முதல்* தொடர்பின் *தாமதத்தை* மட்டுமே அளவிடும்போது, INP பக்கத்தின் வாழ்க்கைச் சுழற்சி முழுவதும் *அனைத்து* பயனர் தொடர்புகளின் *மொத்த தாமதத்தையும்* மதிப்பிடுகிறது, மிக மோசமான ஒன்றைப் புகாரளிக்கிறது. இது ஒட்டுமொத்த பதிலளிப்புத் தன்மையின் சிறந்த படத்தை அளிக்கிறது. ஒரு நல்ல INP 200 மில்லி விநாடிகள் அல்லது அதற்கும் குறைவு.

நீங்கள் 'first-input' உள்ளீட்டு வகையைப் பயன்படுத்தி FID ஐக் கண்காணிக்கலாம்:

// FID ஐக் கண்காணிக்கவும் const fidObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { const fid = entry.processingStart - entry.startTime; console.log(`FID: ${fid.toFixed(2)}ms`); // முதல் உள்ளீடு புகாரளிக்கப்பட்ட பிறகு துண்டிக்கவும் fidObserver.disconnect(); } }); fidObserver.observe({ type: 'first-input', buffered: true });

INP ஐக் கண்காணிப்பது ஒரு நிகழ்வின் முழு கால அளவையும் பார்ப்பதால் சற்று அதிக ஈடுபாடு கொண்டது. நீங்கள் 'event' உள்ளீட்டு வகையைக் கவனித்து, கால அளவைக் கணக்கிட்டு, மிக நீண்ட ஒன்றைக் கண்காணித்து வருகிறீர்கள்.

// எளிமைப்படுத்தப்பட்ட INP கண்காணிப்பு உதாரணம் let worstInp = 0; const inpObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // INP என்பது நிகழ்வின் கால அளவு const inp = entry.duration; // தற்போதைய மோசமானதை விட நீண்ட தொடர்புகளில் மட்டுமே நாங்கள் அக்கறை கொள்கிறோம் if (inp > worstInp) { worstInp = inp; console.log(`New worst INP: ${worstInp.toFixed(2)}ms`); } } }); inpObserver.observe({ type: 'event', durationThreshold: 16, buffered: true }); // durationThreshold மிகவும் குறுகிய, அநேகமாக முக்கியமற்ற நிகழ்வுகளை வடிகட்ட உதவுகிறது.

ஒட்டுமொத்த தளவமைப்பு மாற்றத்தைக் (CLS) கண்காணித்தல்

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

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

// மொத்த CLS மதிப்பெண்ணைக் கவனித்து கணக்கிடுங்கள் let clsScore = 0; const clsObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // பயனர் உள்ளீட்டால் ஏற்பட்ட மாற்றங்களை நாங்கள் கணக்கிட விரும்பவில்லை if (!entry.hadRecentInput) { clsScore += entry.value; console.log(`Current CLS score: ${clsScore.toFixed(4)}`); } } }); clsObserver.observe({ type: 'layout-shift', buffered: true });

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

முக்கிய இணைய அளவீடுகளுக்கு அப்பால்: மற்ற சக்திவாய்ந்த நுழைவு வகைகள்

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

நீண்ட பணிகளைக் கண்காணித்தல் (`longtask`)

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

// நீண்ட பணிகளைக் கண்காணிக்கவும் const longTaskObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log(`Long Task Detected: ${entry.duration.toFixed(2)}ms`); // 'attribution' பண்பு சில நேரங்களில் நீண்ட பணிக்கு என்ன காரணம் என்று சொல்லும் console.log('Attribution:', entry.attribution); } }); longTaskObserver.observe({ type: 'longtask', buffered: true });

வள நேரங்களைப் பகுப்பாய்வு செய்தல் (`resource`)

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

// வள நேரங்களைக் கண்காணிக்கவும் const resourceObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // மெதுவாக ஏற்றப்படும் படங்களைக் கண்டுபிடிப்போம் if (entry.initiatorType === 'img' && entry.duration > 500) { console.warn(`Slow image detected: ${entry.name}`, `Duration: ${entry.duration.toFixed(2)}ms`); } } }); // இந்த ஸ்கிரிப்ட் இயங்குவதற்கு முன்பு ஏற்றப்பட்ட சொத்துக்களைப் பிடிக்க // வள நேரங்களுக்கு 'buffered: true' ஐப் பயன்படுத்துவது கிட்டத்தட்ட எப்போதும் அவசியம். resourceObserver.observe({ type: 'resource', buffered: true });

தனிப்பயன் செயல்திறன் குறிகளைக் கணக்கிடுதல் (`mark` மற்றும் `measure`)

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

• performance.mark('start-operation'): 'start-operation' என்ற பெயரில் ஒரு நேரமுத்திரையை உருவாக்குகிறது.
• performance.mark('end-operation'): மற்றொரு நேரமுத்திரையை உருவாக்குகிறது.
• performance.measure('my-operation', 'start-operation', 'end-operation'): இரண்டு குறிகளுக்கும் இடையில் ஒரு அளவீட்டை உருவாக்குகிறது.

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

// உங்கள் பயன்பாட்டுக் குறியீட்டில்: performance.mark('start-data-processing'); // ... சில சிக்கலான தரவு செயலாக்கம் ... performance.mark('end-data-processing'); performance.measure('data-processing-duration', 'start-data-processing', 'end-data-processing'); // உங்கள் கண்காணிப்பு ஸ்கிரிப்டில்: const customObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntriesByName('data-processing-duration')) { console.log(`Custom Measurement '${entry.name}': ${entry.duration.toFixed(2)}ms`); } }); customObserver.observe({ entryTypes: ['measure'] });

மேம்பட்ட கருத்துகள் மற்றும் சிறந்த நடைமுறைகள்

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

• எப்போதும் `buffered: true` ஐக் கருத்தில் கொள்ளுங்கள்: பக்க ஏற்றத்தில் ஆரம்பத்தில் ஏற்படக்கூடிய உள்ளீட்டு வகைகளுக்கு ('resource', 'paint', அல்லது 'largest-contentful-paint' போன்றவை), அவற்றைத் தவறவிடுவதைத் தவிர்க்க பஃபர் செய்யப்பட்ட கொடியைப் பயன்படுத்துவது அவசியம்.
• உலாவி ஆதரவைச் சரிபார்க்கவும்: நவீன உலாவிகளில் பரவலாக ஆதரிக்கப்பட்டாலும், அதைப் பயன்படுத்துவதற்கு முன்பு அதன் இருப்பைச் சரிபார்ப்பது எப்போதும் புத்திசாலித்தனம். ஒரு குறிப்பிட்ட உலாவி எந்த உள்ளீட்டு வகைகளை ஆதரிக்கிறது என்பதையும் நீங்கள் சரிபார்க்கலாம்.
• if ('PerformanceObserver' in window && PerformanceObserver.supportedEntryTypes.includes('longtask')) { // நீண்ட பணிகளுக்கு செயல்திறன் கண்காணிப்பைப் பாதுகாப்பாகப் பயன்படுத்தலாம் }
• பகுப்பாய்வு சேவைக்கு தரவை அனுப்பவும்: கன்சோலில் தரவைப் பதிவு செய்வது மேம்பாட்டிற்கு சிறந்தது, ஆனால் உண்மையான உலக கண்காணிப்புக்கு, நீங்கள் இந்தத் தரவைத் திரட்ட வேண்டும். கிளையண்டிலிருந்து இந்த டெலிமெட்ரியை அனுப்ப சிறந்த வழி navigator.sendBeacon() API ஐப் பயன்படுத்துவதாகும். இது ஒரு சேவையகத்திற்கு சிறிய அளவிலான தரவை அனுப்புவதற்காக வடிவமைக்கப்பட்ட ஒரு தடுக்காத பொறிமுறையாகும், மேலும் ஒரு பக்கம் இறக்கப்படும்போதும் இது நம்பகத்தன்மையுடன் செயல்படுகிறது.
• கண்காணிப்பாளர்களை அக்கறைக்கு ஏற்ப குழுவாக்குங்கள்: பல உள்ளீட்டு வகைகளுக்கு ஒரே கண்காணிப்பாளரைப் பயன்படுத்த முடிந்தாலும், வெவ்வேறு அக்கறைகளுக்கு (எ.கா., முக்கிய இணைய அளவீடுகளுக்கு ஒன்று, வள நேரங்களுக்கு ஒன்று, தனிப்பயன் அளவீடுகளுக்கு ஒன்று) தனித்தனி கண்காணிப்பாளர்களை உருவாக்குவது பெரும்பாலும் தூய்மையானது. இது குறியீட்டின் வாசிப்புத்திறன் மற்றும் பராமரிப்பினை மேம்படுத்துகிறது.
• செயல்திறன் மேல்நிலையைப் புரிந்து கொள்ளுங்கள்: API மிகவும் குறைந்த மேல்நிலை கொண்டதாக வடிவமைக்கப்பட்டுள்ளது. இருப்பினும், கனமான கணக்கீடுகளைச் செய்யும் மிகவும் சிக்கலான கால்பேக் செயல்பாடு செயல்திறனை பாதிக்கக்கூடும். உங்கள் கண்காணிப்பாளர் கால்பேக்குகளை மெலிதாகவும் திறமையாகவும் வைத்திருங்கள். எந்தவொரு கனமான செயலாக்கத்தையும் ஒரு வலை பணியாளருக்கு ஒத்திவைக்கவும் அல்லது செயலாக்கத்திற்காக உங்கள் பின்தளத்திற்கு மூலத் தரவை அனுப்பவும்.

முடிவுரை: செயல்திறன்-முதல் கலாச்சாரத்தை உருவாக்குதல்

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

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