செயல்திறன் காலக்கோடு: அளவீடுகள் சேகரிப்பிற்கான ஒரு விரிவான வழிகாட்டி

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

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

செயல்திறன் காலக்கோடு ஏபிஐ (Performance Timeline API) என்றால் என்ன?

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

• பக்க ஏற்றுதல் நேரம்
• வளங்கள் ஏற்றுதல் நேரம் (படங்கள், ஸ்கிரிப்டுகள், ஸ்டைல்ஷீட்கள்)
• பயனர் நேர அளவீடுகள்
• பிரேம் வீதம் மற்றும் ரெண்டரிங் செயல்திறன்
• நினைவகப் பயன்பாடு

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

முக்கிய கருத்துகள் மற்றும் இடைமுகங்கள்

செயல்திறன் காலக்கோடு ஏபிஐ சில முக்கிய கருத்துகள் மற்றும் இடைமுகங்களைச் சுற்றி சுழல்கிறது:

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

`performance` பொருள்

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

• `performance.getEntries()`: காலக்கோட்டில் உள்ள அனைத்து செயல்திறன் உள்ளீடுகளின் வரிசையைத் தருகிறது.
• `performance.getEntriesByName(name, entryType)`: ஒரு குறிப்பிட்ட பெயர் மற்றும் நுழைவு வகையுடன் செயல்திறன் உள்ளீடுகளின் வரிசையைத் தருகிறது.
• `performance.getEntriesByType(entryType)`: ஒரு குறிப்பிட்ட வகையின் செயல்திறன் உள்ளீடுகளின் வரிசையைத் தருகிறது.
• `performance.clearMarks(markName)`: ஒரு குறிப்பிட்ட பெயருடன் செயல்திறன் குறிகளை அழிக்கிறது.
• `performance.clearMeasures(measureName)`: ஒரு குறிப்பிட்ட பெயருடன் செயல்திறன் அளவீடுகளை அழிக்கிறது.
• `performance.now()`: வழிசெலுத்தல் தொடங்கியதிலிருந்து கடந்த நேரத்தைக் குறிக்கும் உயர்-தெளிவு நேரமுத்திரையை, பொதுவாக மில்லி விநாடிகளில் வழங்குகிறது. இது கால அளவுகளை அளவிடுவதற்கு முக்கியமானது.

செயல்திறன் நுழைவு வகைகள்

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

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

செயல்திறன் அளவீடுகளைச் சேகரித்தல்

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

• காலக்கோட்டிலிருந்து நேரடியாக உள்ளீடுகளைப் பெறுதல்: குறிப்பிட்ட செயல்திறன் உள்ளீடுகளைப் பெற `performance.getEntries()`, `performance.getEntriesByName()`, அல்லது `performance.getEntriesByType()` ஆகியவற்றைப் பயன்படுத்துதல்.
• செயல்திறன் கண்காணிப்பாளரைப் பயன்படுத்துதல்: புதிய உள்ளீடுகளுக்காக காலக்கோட்டைக் கண்காணித்து, அவற்றுக்கு நிகழ்நேரத்தில் பதிலளித்தல்.

உள்ளீடுகளை நேரடியாகப் பெறுதல்

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

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

            
const resourceEntries = performance.getEntriesByType("resource");

resourceEntries.forEach(entry => {
 console.log(`Resource: ${entry.name}, Duration: ${entry.duration}ms`);
});

            

              
                Copy
              
            
          

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

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

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

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

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

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

            

              
                Copy
              
            
          

இந்தக் குறியீடு "resource" வகையின் புதிய உள்ளீடுகளைக் கேட்கும் செயல்திறன் கண்காணிப்பாளரை உருவாக்குகிறது. காலக்கோட்டில் ஒரு புதிய வள உள்ளீடு சேர்க்கப்படும்போது, கண்காணிப்பாளரின் கால்பேக் செயல்பாடு செயல்படுத்தப்பட்டு, வளத்தின் பெயரையும் கால அளவையும் கன்சோலில் பதிவு செய்கிறது. `observer.observe()` முறை, கண்காணிப்பாளர் எந்த நுழைவு வகைகளைக் கண்காணிக்க வேண்டும் என்பதைக் குறிப்பிடுகிறது.

பயனர் நேரத்தை அளவிடுதல்

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

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

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

            
performance.mark("component-render-start");

// Code to render the component

performance.mark("component-render-end");

performance.measure("component-render-time", "component-render-start", "component-render-end");

const measure = performance.getEntriesByName("component-render-time", "measure")[0];

console.log(`Component render time: ${measure.duration}ms`);

            

              
                Copy
              
            
          

இந்தக் குறியீடு, கூறுகளை ரெண்டரிங் செய்யும் குறியீட்டிற்கு முன்னும் பின்னும், `component-render-start` மற்றும் `component-render-end` ஆகிய இரண்டு குறிகளை உருவாக்குகிறது. பின்னர், அது இரண்டு குறிகளுக்கு இடையில் உள்ள கால அளவைக் கணக்கிட `component-render-time` என்ற அளவை உருவாக்குகிறது. இறுதியாக, இது காலக்கோட்டிலிருந்து அளவீட்டு உள்ளீட்டைப் பெற்று, கால அளவை கன்சோலில் பதிவு செய்கிறது.

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

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

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

உலாவி உருவாக்குநர் கருவிகளைப் பயன்படுத்துதல்

செயல்திறனைப் பகுப்பாய்வு செய்வதற்கான சக்திவாய்ந்த மற்றும் உடனடியாகக் கிடைக்கக்கூடிய வளம் உலாவி உருவாக்குநர் கருவிகள். Chrome உருவாக்குநர் கருவிகளில் செயல்திறன் பேனலை எவ்வாறு பயன்படுத்தலாம் என்பது இங்கே (பிற உலாவிகளிலும் இதே போன்ற செயல்பாடுகள் உள்ளன):

1. உருவாக்குநர் கருவிகளைத் திறக்கவும்: வலைப்பக்கத்தில் வலது கிளிக் செய்து "ஆய்வு" என்பதைத் தேர்ந்தெடுக்கவும் அல்லது F12 ஐ அழுத்தவும்.
2. செயல்திறன் பேனலுக்குச் செல்லவும்: "செயல்திறன்" தாவலைக் கிளிக் செய்யவும்.
3. பதிவு செய்யத் தொடங்கவும்: செயல்திறன் தரவைப் பிடிக்க பதிவு பொத்தானை (வழக்கமாக ஒரு வட்டம்) கிளிக் செய்யவும்.
4. பக்கத்துடன் தொடர்பு கொள்ளவும்: பக்கத்தை ஏற்றுவது, பொத்தான்களைக் கிளிக் செய்வது அல்லது ஸ்க்ரோலிங் செய்வது போன்ற நீங்கள் பகுப்பாய்வு செய்ய விரும்பும் செயல்களைச் செய்யவும்.
5. பதிவை நிறுத்தவும்: பதிவை முடிக்க நிறுத்த பொத்தானைக் கிளிக் செய்யவும்.
6. காலக்கோட்டை பகுப்பாய்வு செய்யவும்: செயல்திறன் பேனல் ஏற்றுதல் நேரங்கள், ஜாவாஸ்கிரிப்ட் செயல்படுத்தல், ரெண்டரிங் மற்றும் பெயிண்டிங் உள்ளிட்ட செயல்திறன் நிகழ்வுகளின் காலக்கோட்டைக் காண்பிக்கும்.

காலக்கோடு ஒவ்வொரு நிகழ்வைப் பற்றிய விரிவான தகவல்களை வழங்குகிறது, அதன் கால அளவு, தொடக்க நேரம் மற்றும் பிற நிகழ்வுகளுடனான உறவு உட்பட. நீங்கள் பெரிதாக்கவும் சிறிதாக்கவும், நிகழ்வுகளை வகையின்படி வடிகட்டவும், மேலும் தகவல்களைப் பெற தனிப்பட்ட நிகழ்வுகளை ஆய்வு செய்யவும் முடியும். "Bottom-Up," "Call Tree," மற்றும் "Event Log" தாவல்கள் தரவின் வெவ்வேறு கண்ணோட்டங்களை வழங்குகின்றன, இது செயல்திறன் தடைகளை அடையாளம் காணவும் உங்கள் குறியீட்டை மேம்படுத்தவும் உங்களை அனுமதிக்கிறது.

வலை வைட்டல்கள்: பயனர் அனுபவத்தை அளவிடுதல்

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

• மிகப்பெரிய உள்ளடக்க பெயிண்ட் (LCP): காட்சியின் மிகப்பெரிய உள்ளடக்க உறுப்பு தெரியும் வரை எடுக்கும் நேரத்தை அளவிடுகிறது. ஒரு நல்ல LCP மதிப்பெண் 2.5 வினாடிகள் அல்லது அதற்கும் குறைவானது.
• முதல் உள்ளீட்டு தாமதம் (FID): முதல் பயனர் தொடர்புக்கு (எ.கா., ஒரு பொத்தானைக் கிளிக் செய்வது அல்லது இணைப்பைத் தட்டுவது) உலாவி பதிலளிக்க எடுக்கும் நேரத்தை அளவிடுகிறது. ஒரு நல்ல FID மதிப்பெண் 100 மில்லி விநாடிகள் அல்லது அதற்கும் குறைவானது.
• குவிந்த தளவமைப்பு மாற்றம் (CLS): பக்கத்தில் ஏற்படும் எதிர்பாராத தளவமைப்பு மாற்றங்களின் அளவை அளவிடுகிறது. ஒரு நல்ல CLS மதிப்பெண் 0.1 அல்லது அதற்கும் குறைவானது.

நீங்கள் பல்வேறு கருவிகளைப் பயன்படுத்தி வலை வைட்டல்களை அளவிடலாம், அவற்றுள்:

• குரோம் பயனர் அனுபவ அறிக்கை (CrUX): அநாமதேய குரோம் பயனர் தரவுகளின் அடிப்படையில் வலைத்தளங்களுக்கான நிஜ-உலக செயல்திறன் தரவை வழங்குகிறது.
• லைட்ஹவுஸ்: வலைப்பக்கங்களின் செயல்திறன், அணுகல் மற்றும் எஸ்சிஓ ஆகியவற்றை தணிக்கை செய்யும் ஒரு தானியங்கி கருவி.
• வலை வைட்டல்கள் நீட்டிப்பு: நீங்கள் வலையில் உலாவும்போது நிகழ்நேரத்தில் வலை வைட்டல்கள் அளவீடுகளைக் காண்பிக்கும் ஒரு குரோம் நீட்டிப்பு.
• செயல்திறன் கண்காணிப்பாளர் ஏபிஐ (PerformanceObserver API): நிகழ்வுகள் நடக்கும்போது உலாவியிலிருந்து நேரடியாக வலை வைட்டல்கள் தரவைப் பிடிக்கவும்.

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

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

• மெதுவாக-ஏற்றப்படும் வளங்களை அடையாளம் காணுதல்: ஏற்றுவதற்கு நீண்ட நேரம் எடுக்கும் படங்கள், ஸ்கிரிப்டுகள் மற்றும் ஸ்டைல்ஷீட்களை அடையாளம் காண `resource` நுழைவு வகையைப் பயன்படுத்தவும். இந்த வளங்களை சுருக்குவதன் மூலமோ, உள்ளடக்க விநியோக நெட்வொர்க்கை (CDN) பயன்படுத்துவதன் மூலமோ, அல்லது சோம்பேறி-ஏற்றுதல் (lazy-loading) மூலமோ மேம்படுத்தவும். எடுத்துக்காட்டாக, ஷாப்பிஃபை, மெஜண்டோ அல்லது வூ-காமர்ஸ் போன்ற பல இ-காமர்ஸ் தளங்கள் தயாரிப்புகளை விற்க படங்களை நம்பியுள்ளன. செயல்திறன் காலக்கோடு தரவைப் பயன்படுத்தி பட ஏற்றத்தை மேம்படுத்துவது வாடிக்கையாளர் அனுபவத்தை மேம்படுத்தும், குறிப்பாக மொபைல் பயனர்களுக்கு.
• ஜாவாஸ்கிரிப்ட் செயல்படுத்தும் நேரத்தை அளவிடுதல்: குறிப்பிட்ட ஜாவாஸ்கிரிப்ட் செயல்பாடுகள் செயல்படுத்த எடுக்கும் நேரத்தை அளவிட `mark` மற்றும் `measure` நுழைவு வகைகளைப் பயன்படுத்தவும். மெதுவாக இயங்கும் செயல்பாடுகளை அடையாளம் கண்டு, திறமையான வழிமுறைகளைப் பயன்படுத்துவதன் மூலமோ, முடிவுகளை தற்காலிகமாக சேமிப்பதன் மூலமோ, அல்லது செயல்பாட்டை பிற்காலத்திற்கு ஒத்திவைப்பதன் மூலமோ அவற்றை மேம்படுத்தவும்.
• நீண்ட பணிகளைக் கண்டறிதல்: முக்கிய திரியை நீண்ட காலத்திற்குத் தடுக்கும் பணிகளை அடையாளம் காண `longtask` நுழைவு வகையைப் பயன்படுத்தவும். இந்தப் பணிகளை சிறிய துண்டுகளாக உடைக்கவும் அல்லது UI தடுமாற்றத்தைத் தடுக்க அவற்றை பின்னணி திரிக்கு நகர்த்தவும்.
• முதல் உள்ளடக்க பெயிண்ட் (FCP) மற்றும் மிகப்பெரிய உள்ளடக்க பெயிண்ட் (LCP) ஆகியவற்றைக் கண்காணித்தல்: முதல் உள்ளடக்கம் மற்றும் மிகப்பெரிய உள்ளடக்கம் திரையில் தோன்றுவதற்கு எடுக்கும் நேரத்தைக் கண்காணிக்க `paint` மற்றும் `largest-contentful-paint` நுழைவு வகைகளைப் பயன்படுத்தவும். இந்த அளவீடுகளை மேம்படுத்த முக்கியமான ரெண்டரிங் பாதையை மேம்படுத்தவும்.
• குவிந்த தளவமைப்பு மாற்றத்தை (CLS) பகுப்பாய்வு செய்தல்: எதிர்பாராத தளவமைப்பு மாற்றங்களை ஏற்படுத்தும் உறுப்புகளை அடையாளம் காண `layout-shift` நுழைவு வகையைப் பயன்படுத்தவும். இந்த உறுப்புகளுக்கு இடத்தை ஒதுக்கவும் அல்லது தளவமைப்பு மாற்றங்களை ஏற்படுத்தாமல் அவற்றை அனிமேட் செய்ய `transform` பண்பைப் பயன்படுத்தவும்.

மேம்பட்ட நுட்பங்கள்

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

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

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

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

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

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

செயல்திறன் காலக்கோடு ஏபிஐ-ஐப் பயன்படுத்துவதற்கான சில சிறந்த நடைமுறைகள் இங்கே:

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

முடிவுரை

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