செயல்திறன் விவரக்குறிப்பு, வலைப் பயன்பாடுகளை மேம்படுத்துதல் மற்றும் பல்வேறு தளங்களில் பயனர் அனுபவத்தை மேம்படுத்துதல் ஆகியவற்றிற்காக உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்துவதற்கான ஒரு விரிவான வழிகாட்டி.
உலாவி டெவலப்பர் கருவிகள்: வலை மேம்படுத்தலுக்கான செயல்திறன் விவரக்குறிப்பில் தேர்ச்சி பெறுதல்
இன்றைய வேகமான டிஜிட்டல் உலகில், இணையதளம் மற்றும் வலைப் பயன்பாட்டின் செயல்திறன் மிக முக்கியமானது. மெதுவாக ஏற்றப்படும் அல்லது பதிலளிக்காத ஒரு வலைப் பக்கம் விரக்தியடைந்த பயனர்கள், கைவிடப்பட்ட ஷாப்பிங் கார்ட்கள் மற்றும் உங்கள் பிராண்டின் நற்பெயரில் எதிர்மறையான தாக்கத்திற்கு வழிவகுக்கும். அதிர்ஷ்டவசமாக, நவீன உலாவிகள் சக்திவாய்ந்த டெவலப்பர் கருவிகளை வழங்குகின்றன, அவை உங்கள் வலைத்தளத்தின் செயல்திறனை நுணுக்கமாகப் பகுப்பாய்வு செய்து மேம்படுத்த அனுமதிக்கின்றன. உலகளாவிய பார்வையாளர்களுக்காக ஒரு மென்மையான மற்றும் ஈர்க்கக்கூடிய பயனர் அனுபவத்தை உறுதிசெய்து, செயல்திறன் விவரக்குறிப்பிற்காக உலாவி டெவலப்பர் கருவிகளை எவ்வாறு பயன்படுத்துவது என்பது பற்றிய ஒரு விரிவான கண்ணோட்டத்தை இந்த வழிகாட்டி வழங்கும்.
செயல்திறன் விவரக்குறிப்பைப் புரிந்துகொள்ளுதல்
செயல்திறன் விவரக்குறிப்பு என்பது உங்கள் வலைப் பயன்பாட்டின் செயல்பாட்டைப் பகுப்பாய்வு செய்து, இடையூறுகள் மற்றும் மேம்பாட்டிற்கான பகுதிகளைக் கண்டறியும் செயல்முறையாகும். வெவ்வேறு சூழ்நிலைகளில் உங்கள் குறியீடு எவ்வாறு செயல்படுகிறது என்பதைப் புரிந்துகொள்வதன் மூலம், மேம்படுத்தல் உத்திகள் குறித்து தகவலறிந்த முடிவுகளை எடுக்கலாம். இதில் CPU பயன்பாடு, நினைவக நுகர்வு, ரெண்டரிங் நேரம் மற்றும் நெட்வொர்க் தாமதம் போன்ற பல்வேறு அளவீடுகளை அளவிடுவது அடங்கும்.
செயல்திறன் விவரக்குறிப்பு ஏன் முக்கியமானது?
- மேம்படுத்தப்பட்ட பயனர் அனுபவம்: வேகமான ஏற்றுதல் நேரங்கள் மற்றும் மென்மையான தொடர்புகள் மகிழ்ச்சியான பயனர்களுக்கு வழிவகுக்கும்.
- குறைக்கப்பட்ட பவுன்ஸ் விகிதம்: விரைவாக ஏற்றப்படும் ஒரு வலைத்தளத்தை பயனர்கள் கைவிடுவது குறைவு.
- மேம்படுத்தப்பட்ட SEO: கூகிள் போன்ற தேடுபொறிகள் வலைத்தள வேகத்தை ஒரு தரவரிசைக் காரணியாகக் கருதுகின்றன.
- குறைந்த உள்கட்டமைப்பு செலவுகள்: மேம்படுத்தப்பட்ட குறியீடு குறைவான வளங்களைப் பயன்படுத்துகிறது, இது சேவையகச் சுமை மற்றும் அலைவரிசை பயன்பாட்டைக் குறைக்கிறது.
- அதிகரித்த மாற்று விகிதங்கள்: ஒரு தடையற்ற பயனர் அனுபவம் இ-காமர்ஸ் வலைத்தளங்களுக்கு அதிக மாற்று விகிதங்களுக்கு வழிவகுக்கும்.
உலாவி டெவலப்பர் கருவிகளுக்கான அறிமுகம்
குரோம், பயர்பாக்ஸ், சஃபாரி மற்றும் எட்ஜ் போன்ற நவீன வலை உலாவிகள் உங்கள் வலைத்தளத்தின் செயல்திறன் பற்றிய ஏராளமான தகவல்களை வழங்கும் உள்ளமைக்கப்பட்ட டெவலப்பர் கருவிகளுடன் வருகின்றன. இந்த கருவிகள் பொதுவாக பின்வரும் பேனல்களைக் கொண்டிருக்கும்:
- Elements: DOM கட்டமைப்பு மற்றும் CSS பாணிகளை ஆய்வு செய்தல் மற்றும் மாற்றுதல்.
- Console: ஜாவாஸ்கிரிப்ட் பதிவுகள், பிழைகள் மற்றும் எச்சரிக்கைகளைப் பார்ப்பது.
- Sources/Debugger: ஜாவாஸ்கிரிப்ட் குறியீட்டை பிழைத்திருத்தம் செய்தல்.
- Network: நெட்வொர்க் கோரிக்கைகள் மற்றும் பதில்களைப் பகுப்பாய்வு செய்தல்.
- Performance: CPU பயன்பாடு, நினைவக நுகர்வு மற்றும் ரெண்டரிங் செயல்திறனை விவரக்குறித்தல்.
- Memory: நினைவக ஒதுக்கீடு மற்றும் குப்பை சேகரிப்பைப் பகுப்பாய்வு செய்தல்.
- Application: குக்கீகள், லோக்கல் ஸ்டோரேஜ் மற்றும் சர்வீஸ் வொர்க்கர்களை ஆய்வு செய்தல்.
இந்த வழிகாட்டி முதன்மையாக Performance மற்றும் Network பேனல்களில் கவனம் செலுத்தும், ஏனெனில் அவை செயல்திறன் விவரக்குறிப்பிற்கு மிகவும் பொருத்தமானவை.
குரோம் டெவ்டூல்ஸ் உடன் செயல்திறன் விவரக்குறிப்பு
குரோம் டெவ்டூல்ஸ் என்பது வலை மேம்பாடு மற்றும் பிழைத்திருத்தத்திற்கான ஒரு சக்திவாய்ந்த கருவிகளின் தொகுப்பாகும். டெவ்டூல்ஸைத் திறக்க, ஒரு வலைப் பக்கத்தில் வலது கிளிக் செய்து "Inspect" அல்லது "Inspect Element" என்பதைத் தேர்ந்தெடுக்கலாம், அல்லது விசைப்பலகை குறுக்குவழியான Ctrl+Shift+I (அல்லது macOS இல் Cmd+Option+I) ஐப் பயன்படுத்தலாம்.
செயல்திறன் பேனல்
குரோம் டெவ்டூல்ஸில் உள்ள செயல்திறன் பேனல் உங்கள் வலைப் பயன்பாட்டின் செயல்திறனைப் பதிவுசெய்து பகுப்பாய்வு செய்ய உங்களை அனுமதிக்கிறது. அதை எவ்வாறு பயன்படுத்துவது என்பது இங்கே:
- டெவ்டூல்ஸைத் திறக்கவும்: பக்கத்தில் வலது கிளிக் செய்து "Inspect" என்பதைத் தேர்ந்தெடுக்கவும்.
- செயல்திறன் பேனலுக்குச் செல்லவும்: "Performance" தாவலைக் கிளிக் செய்யவும்.
- பதிவு செய்யத் தொடங்குங்கள்: பதிவு செய்யத் தொடங்க "Record" பொத்தானை (மேல்-இடது மூலையில் உள்ள வட்டப் பொத்தான்) கிளிக் செய்யவும்.
- உங்கள் வலைத்தளத்துடன் தொடர்பு கொள்ளுங்கள்: நீங்கள் பகுப்பாய்வு செய்ய விரும்பும் செயல்களைச் செய்யவும், அதாவது ஒரு பக்கத்தை ஏற்றுவது, பொத்தான்களைக் கிளிக் செய்வது அல்லது ஸ்க்ரோலிங் செய்வது.
- பதிவு செய்வதை நிறுத்துங்கள்: பதிவு செய்வதை நிறுத்த "Stop" பொத்தானைக் கிளிக் செய்யவும்.
- முடிவுகளைப் பகுப்பாய்வு செய்யுங்கள்: செயல்திறன் பேனல் உங்கள் வலைத்தளத்தின் செயல்பாட்டின் விரிவான காலவரிசையைக் காண்பிக்கும், இதில் CPU பயன்பாடு, நினைவக நுகர்வு மற்றும் ரெண்டரிங் செயல்திறன் ஆகியவை அடங்கும்.
செயல்திறன் காலவரிசையைப் புரிந்துகொள்ளுதல்
செயல்திறன் காலவரிசை என்பது காலப்போக்கில் உங்கள் வலைத்தளத்தின் செயல்பாட்டின் ஒரு காட்சிப் பிரதிநிதித்துவமாகும். இது பல பிரிவுகளாகப் பிரிக்கப்பட்டுள்ளது, ஒவ்வொன்றும் உங்கள் வலைத்தளத்தின் செயல்திறன் குறித்த வெவ்வேறு நுண்ணறிவுகளை வழங்குகின்றன:
- Frames: உங்கள் வலைத்தளத்தின் பிரேம் வீதத்தைக் காட்டுகிறது. ஒரு மென்மையான பிரேம் வீதம் பொதுவாக வினாடிக்கு 60 பிரேம்கள் (FPS) ஆகும்.
- CPU Usage: ஜாவாஸ்கிரிப்ட் இயக்கம், ரெண்டரிங் மற்றும் குப்பை சேகரிப்பு போன்ற வெவ்வேறு செயல்முறைகளால் செலவிடப்பட்ட CPU நேரத்தின் அளவைக் காட்டுகிறது.
- Network: உங்கள் வலைத்தளத்தால் செய்யப்பட்ட நெட்வொர்க் கோரிக்கைகளைக் காட்டுகிறது.
- Main Thread: பிரதான த்ரெட்டில் உள்ள செயல்பாட்டைக் காட்டுகிறது, அங்கு பெரும்பாலான ஜாவாஸ்கிரிப்ட் இயக்கம் மற்றும் ரெண்டரிங் நிகழ்கின்றன.
- GPU: GPU செயல்பாட்டைக் காட்டுகிறது.
முக்கிய செயல்திறன் அளவீடுகள்
செயல்திறன் காலவரிசையை பகுப்பாய்வு செய்யும் போது, பின்வரும் முக்கிய அளவீடுகளுக்கு கவனம் செலுத்துங்கள்:
- Total Blocking Time (TBT): நீண்ட நேரம் இயங்கும் பணிகளால் பிரதான த்ரெட் தடுக்கப்பட்ட மொத்த நேரத்தை அளவிடுகிறது. அதிக TBT மோசமான பயனர் அனுபவத்திற்கு வழிவகுக்கும்.
- First Contentful Paint (FCP): முதல் உள்ளடக்க உறுப்பு (எ.கா., படம், உரை) திரையில் தோன்றுவதற்கு எடுக்கும் நேரத்தை அளவிடுகிறது.
- Largest Contentful Paint (LCP): மிகப்பெரிய உள்ளடக்க உறுப்பு திரையில் தோன்றுவதற்கு எடுக்கும் நேரத்தை அளவிடுகிறது.
- Cumulative Layout Shift (CLS): பக்கத்தை ஏற்றும்போது ஏற்படும் எதிர்பாராத தளவமைப்பு மாற்றங்களின் அளவை அளவிடுகிறது.
- Time to Interactive (TTI): பக்கம் முழுமையாக ஊடாடக்கூடியதாக மாறுவதற்கு எடுக்கும் நேரத்தை அளவிடுகிறது.
ஜாவாஸ்கிரிப்ட் இயக்கத்தைப் பகுப்பாய்வு செய்தல்
ஜாவாஸ்கிரிப்ட் இயக்கம் பெரும்பாலும் செயல்திறன் இடையூறுகளுக்கு ஒரு முக்கிய பங்களிப்பாகும். செயல்திறன் பேனல் ஜாவாஸ்கிரிப்ட் செயல்பாடு அழைப்புகள், இயக்க நேரம் மற்றும் நினைவக ஒதுக்கீடு பற்றிய விரிவான தகவல்களை வழங்குகிறது. ஜாவாஸ்கிரிப்ட் இயக்கத்தைப் பகுப்பாய்வு செய்ய:
- நீண்ட நேரம் இயங்கும் செயல்பாடுகளைக் கண்டறியவும்: பிரதான த்ரெட் காலவரிசையில் நீண்ட பட்டிகளைத் தேடுங்கள். இவை செயல்படுவதற்கு கணிசமான நேரம் எடுக்கும் செயல்பாடுகளைக் குறிக்கின்றன.
- அழைப்பு அடுக்கை ஆராயுங்கள்: அழைப்பு அடுக்கைக் காண ஒரு நீண்ட பட்டியில் கிளிக் செய்யவும், இது நீண்ட நேரம் இயங்கும் செயல்பாட்டிற்கு வழிவகுத்த செயல்பாட்டு அழைப்புகளின் வரிசையைக் காட்டுகிறது.
- உங்கள் குறியீட்டை மேம்படுத்துங்கள்: அதிக CPU நேரத்தை நுகரும் செயல்பாடுகளைக் கண்டறிந்து மேம்படுத்துங்கள். இதில் கணக்கீடுகளின் எண்ணிக்கையைக் குறைத்தல், முடிவுகளைத் தேக்குதல் அல்லது திறமையான அல்காரிதம்களைப் பயன்படுத்துதல் ஆகியவை அடங்கும்.
உதாரணம்: ஒரு பெரிய தரவுத்தொகுப்பை வடிகட்ட ஒரு வலைப் பயன்பாடு சிக்கலான ஜாவாஸ்கிரிப்ட் செயல்பாட்டைப் பயன்படுத்தும் ஒரு சூழ்நிலையைக் கவனியுங்கள். பயன்பாட்டை விவரக்குறிப்பதன் மூலம், இந்த செயல்பாடு செயல்படுவதற்கு பல வினாடிகள் ஆவதையும், இது UI-ஐ முடக்குவதையும் நீங்கள் கண்டறியலாம். பின்னர் நீங்கள் ஒரு திறமையான வடிகட்டுதல் அல்காரிதமைப் பயன்படுத்தி அல்லது தரவை சிறிய பகுதிகளாகப் பிரித்து அவற்றை தொகுப்புகளாகச் செயலாக்குவதன் மூலம் செயல்பாட்டை மேம்படுத்தலாம்.
ரெண்டரிங் செயல்திறனைப் பகுப்பாய்வு செய்தல்
ரெண்டரிங் செயல்திறன் என்பது உலாவி உங்கள் வலைத்தளத்தின் காட்சி கூறுகளை எவ்வளவு விரைவாகவும் மென்மையாகவும் ரெண்டர் செய்ய முடியும் என்பதைக் குறிக்கிறது. மோசமான ரெண்டரிங் செயல்திறன் சீரற்ற அனிமேஷன்கள், மெதுவான ஸ்க்ரோலிங் மற்றும் ஒட்டுமொத்த மந்தமான பயனர் அனுபவத்திற்கு வழிவகுக்கும். ரெண்டரிங் செயல்திறனைப் பகுப்பாய்வு செய்ய:
- ரெண்டரிங் இடையூறுகளைக் கண்டறியவும்: பிரதான த்ரெட் காலவரிசையில் "Layout," "Paint," அல்லது "Composite" என்று பெயரிடப்பட்ட நீண்ட பட்டிகளைத் தேடுங்கள்.
- தளவமைப்பு குப்பைக்கூளத்தைக் குறைக்கவும்: தளவமைப்பு மறு கணக்கீடுகளைத் தூண்டும் DOM இல் அடிக்கடி மாற்றங்கள் செய்வதைத் தவிர்க்கவும்.
- CSS-ஐ மேம்படுத்துங்கள்: திறமையான CSS தேர்வாளர்களைப் பயன்படுத்தவும் மற்றும் ரெண்டரிங்கை மெதுவாக்கக்கூடிய சிக்கலான CSS விதிகளைத் தவிர்க்கவும்.
- வன்பொருள் முடுக்கத்தைப் பயன்படுத்தவும்:
transformமற்றும்opacityபோன்ற CSS பண்புகளைப் பயன்படுத்தி வன்பொருள் முடுக்கத்தைத் தூண்டவும், இது ரெண்டரிங் செயல்திறனை மேம்படுத்தும்.
உதாரணம்: பல DOM கூறுகளின் நிலை மற்றும் அளவை அடிக்கடி புதுப்பிப்பதை உள்ளடக்கிய ஒரு சிக்கலான அனிமேஷனைக் கொண்ட ஒரு வலைத்தளம் மோசமான ரெண்டரிங் செயல்திறனை அனுபவிக்கக்கூடும். வன்பொருள் முடுக்கத்தைப் பயன்படுத்துவதன் மூலம் (எ.கா., transform: translate3d(x, y, z)), அனிமேஷனை GPU க்கு மாற்றலாம், இதன் விளைவாக மென்மையான செயல்திறன் கிடைக்கும்.
பயர்பாக்ஸ் டெவலப்பர் கருவிகளுடன் செயல்திறன் விவரக்குறிப்பு
பயர்பாக்ஸ் டெவலப்பர் கருவிகள் குரோம் டெவ்டூல்ஸைப் போன்ற செயல்பாட்டை வழங்குகின்றன, இது உங்கள் வலைப் பயன்பாட்டின் செயல்திறனை விவரக்குறிக்க உங்களை அனுமதிக்கிறது. பயர்பாக்ஸ் டெவலப்பர் கருவிகளைத் திறக்க, ஒரு வலைப் பக்கத்தில் வலது கிளிக் செய்து "Inspect" என்பதைத் தேர்ந்தெடுக்கவும் அல்லது விசைப்பலகை குறுக்குவழியான Ctrl+Shift+I (அல்லது macOS இல் Cmd+Option+I) ஐப் பயன்படுத்தவும்.
செயல்திறன் பேனல்
பயர்பாக்ஸ் டெவலப்பர் கருவிகளில் உள்ள செயல்திறன் பேனல் உங்கள் வலைத்தளத்தின் செயல்பாட்டின் விரிவான காலவரிசையை வழங்குகிறது. அதை எவ்வாறு பயன்படுத்துவது என்பது இங்கே:
- டெவ்டூல்ஸைத் திறக்கவும்: பக்கத்தில் வலது கிளிக் செய்து "Inspect" என்பதைத் தேர்ந்தெடுக்கவும்.
- செயல்திறன் பேனலுக்குச் செல்லவும்: "Performance" தாவலைக் கிளிக் செய்யவும்.
- பதிவு செய்யத் தொடங்குங்கள்: பதிவு செய்யத் தொடங்க "Start Recording Performance" பொத்தானை (மேல்-இடது மூலையில் உள்ள வட்டப் பொத்தான்) கிளிக் செய்யவும்.
- உங்கள் வலைத்தளத்துடன் தொடர்பு கொள்ளுங்கள்: நீங்கள் பகுப்பாய்வு செய்ய விரும்பும் செயல்களைச் செய்யவும்.
- பதிவு செய்வதை நிறுத்துங்கள்: பதிவு செய்வதை நிறுத்த "Stop Recording Performance" பொத்தானைக் கிளிக் செய்யவும்.
- முடிவுகளைப் பகுப்பாய்வு செய்யுங்கள்: செயல்திறன் பேனல் உங்கள் வலைத்தளத்தின் செயல்பாட்டின் விரிவான காலவரிசையைக் காண்பிக்கும், இதில் CPU பயன்பாடு, நினைவக நுகர்வு மற்றும் ரெண்டரிங் செயல்திறன் ஆகியவை அடங்கும்.
பயர்பாக்ஸ் டெவ்டூல்ஸ் செயல்திறன் பேனலில் உள்ள முக்கிய அம்சங்கள்
- Flame Chart: அழைப்பு அடுக்கின் ஒரு காட்சிப் பிரதிநிதித்துவத்தை வழங்குகிறது, இது நீண்ட நேரம் இயங்கும் செயல்பாடுகளை எளிதில் அடையாளம் காண உதவுகிறது.
- Call Tree: ஒவ்வொரு செயல்பாட்டிலும் செலவிடப்பட்ட மொத்த நேரத்தைக் காட்டுகிறது, அதன் குழந்தைகளில் செலவழித்த நேரம் உட்பட.
- Platform Events: உலாவி மூலம் தூண்டப்பட்ட நிகழ்வுகளைக் காட்டுகிறது, அதாவது குப்பை சேகரிப்பு மற்றும் தளவமைப்பு மறு கணக்கீடுகள்.
- Memory Timeline: காலப்போக்கில் நினைவக ஒதுக்கீடு மற்றும் குப்பை சேகரிப்பைக் கண்காணிக்கிறது.
சஃபாரி வலை ஆய்வாளருடன் செயல்திறன் விவரக்குறிப்பு
சஃபாரி வலை ஆய்வாளர் macOS மற்றும் iOS இல் வலைப் பயன்பாடுகளைப் பிழைத்திருத்தம் செய்வதற்கும் விவரக்குறிப்பதற்கும் ஒரு விரிவான கருவிகளின் தொகுப்பை வழங்குகிறது. சஃபாரியில் வலை ஆய்வாளரை இயக்க, சஃபாரி > விருப்பத்தேர்வுகள் > மேம்பட்டது என்பதற்குச் சென்று, "பட்டிப் பட்டியில் டெவலப் மெனுவைக் காட்டு" விருப்பத்தைத் தேர்வுசெய்யவும்.
காலவரிசை தாவல்
சஃபாரி வலை ஆய்வாளரில் உள்ள காலவரிசை தாவல் உங்கள் வலைப் பயன்பாட்டின் செயல்திறனைப் பதிவுசெய்து பகுப்பாய்வு செய்ய உங்களை அனுமதிக்கிறது. அதை எவ்வாறு பயன்படுத்துவது என்பது இங்கே:
- வலை ஆய்வாளரை இயக்கவும்: சஃபாரி > விருப்பத்தேர்வுகள் > மேம்பட்டது என்பதற்குச் சென்று "பட்டிப் பட்டியில் டெவலப் மெனுவைக் காட்டு" என்பதைத் தேர்வுசெய்யவும்.
- வலை ஆய்வாளரைத் திறக்கவும்: டெவலப் > வலை ஆய்வாளரைக் காட்டு என்பதற்குச் செல்லவும்.
- காலவரிசை தாவலுக்குச் செல்லவும்: "Timeline" தாவலைக் கிளிக் செய்யவும்.
- பதிவு செய்யத் தொடங்குங்கள்: பதிவு செய்யத் தொடங்க "Record" பொத்தானைக் கிளிக் செய்யவும்.
- உங்கள் வலைத்தளத்துடன் தொடர்பு கொள்ளுங்கள்: நீங்கள் பகுப்பாய்வு செய்ய விரும்பும் செயல்களைச் செய்யவும்.
- பதிவு செய்வதை நிறுத்துங்கள்: பதிவு செய்வதை நிறுத்த "Stop" பொத்தானைக் கிளிக் செய்யவும்.
- முடிவுகளைப் பகுப்பாய்வு செய்யுங்கள்: காலவரிசை தாவல் உங்கள் வலைத்தளத்தின் செயல்பாட்டின் விரிவான காலவரிசையைக் காண்பிக்கும், இதில் CPU பயன்பாடு, நினைவக நுகர்வு மற்றும் ரெண்டரிங் செயல்திறன் ஆகியவை அடங்கும்.
சஃபாரி வலை ஆய்வாளர் காலவரிசை தாவலில் உள்ள முக்கிய அம்சங்கள்
- CPU Usage: வெவ்வேறு செயல்முறைகளால் செலவிடப்பட்ட CPU நேரத்தின் அளவைக் காட்டுகிறது.
- JavaScript Samples: ஜாவாஸ்கிரிப்ட் செயல்பாடு அழைப்புகள் மற்றும் இயக்க நேரம் பற்றிய விரிவான தகவல்களை வழங்குகிறது.
- Rendering Frames: உங்கள் வலைத்தளத்தின் பிரேம் வீதத்தைக் காட்டுகிறது.
- Memory Usage: காலப்போக்கில் நினைவக ஒதுக்கீடு மற்றும் குப்பை சேகரிப்பைக் கண்காணிக்கிறது.
எட்ஜ் டெவ்டூல்ஸ் உடன் செயல்திறன் விவரக்குறிப்பு
குரோமியம் அடிப்படையிலான எட்ஜ் டெவ்டூல்ஸ், குரோம் டெவ்டூல்ஸைப் போன்ற செயல்திறன் விவரக்குறிப்பு திறன்களை வழங்குகிறது. ஒரு வலைப்பக்கத்தில் வலது கிளிக் செய்து "Inspect" என்பதைத் தேர்ந்தெடுப்பதன் மூலம் அல்லது Ctrl+Shift+I (அல்லது macOS இல் Cmd+Option+I) ஐப் பயன்படுத்துவதன் மூலம் அதை அணுகலாம்.
எட்ஜ் டெவ்டூல்ஸில் உள்ள செயல்திறன் பேனலின் செயல்பாடு மற்றும் பயன்பாடு இந்த வழிகாட்டியில் முன்பு விவரிக்கப்பட்டபடி குரோம் டெவ்டூல்ஸைப் போலவே உள்ளது.
நெட்வொர்க் பகுப்பாய்வு
செயல்திறன் விவரக்குறிப்புக்கு கூடுதலாக, உங்கள் வலைத்தளத்தின் செயல்திறனை மேம்படுத்துவதற்கு நெட்வொர்க் பகுப்பாய்வு முக்கியமானது. உலாவி டெவலப்பர் கருவிகளில் உள்ள நெட்வொர்க் பேனல் உங்கள் வலைத்தளத்தால் செய்யப்பட்ட நெட்வொர்க் கோரிக்கைகளைப் பகுப்பாய்வு செய்யவும், மெதுவாக ஏற்றப்படும் வளங்களைக் கண்டறியவும் மற்றும் உங்கள் வலைத்தளத்தின் ஏற்றுதல் வேகத்தை மேம்படுத்தவும் உங்களை அனுமதிக்கிறது.
நெட்வொர்க் பேனலைப் பயன்படுத்துதல்
- டெவ்டூல்ஸைத் திறக்கவும்: பக்கத்தில் வலது கிளிக் செய்து "Inspect" என்பதைத் தேர்ந்தெடுக்கவும்.
- நெட்வொர்க் பேனலுக்குச் செல்லவும்: "Network" தாவலைக் கிளிக் செய்யவும்.
- பக்கத்தை மீண்டும் ஏற்றவும்: நெட்வொர்க் கோரிக்கைகளைப் பிடிக்க பக்கத்தை மீண்டும் ஏற்றவும்.
- முடிவுகளைப் பகுப்பாய்வு செய்யுங்கள்: நெட்வொர்க் பேனல் அனைத்து நெட்வொர்க் கோரிக்கைகளின் பட்டியலைக் காண்பிக்கும், இதில் URL, நிலைக் குறியீடு, வகை, அளவு மற்றும் எடுத்துக்கொள்ளப்பட்ட நேரம் ஆகியவை அடங்கும்.
முக்கிய நெட்வொர்க் அளவீடுகள்
நெட்வொர்க் பேனலை பகுப்பாய்வு செய்யும் போது, பின்வரும் முக்கிய அளவீடுகளுக்கு கவனம் செலுத்துங்கள்:
- Request Time: ஒரு கோரிக்கை முடிவடைவதற்கு எடுக்கும் நேரத்தை அளவிடுகிறது.
- Latency: சேவையகத்திலிருந்து தரவின் முதல் பைட் வருவதற்கு எடுக்கும் நேரத்தை அளவிடுகிறது.
- Resource Size: பதிவிறக்கம் செய்யப்படும் வளத்தின் அளவை அளவிடுகிறது.
- Status Code: கோரிக்கையின் நிலையைக் குறிக்கிறது (எ.கா., 200 OK, 404 Not Found).
நெட்வொர்க் செயல்திறனை மேம்படுத்துதல்
நெட்வொர்க் செயல்திறனை மேம்படுத்துவதற்கான சில உத்திகள் இங்கே:
- HTTP கோரிக்கைகளைக் குறைக்கவும்: கோப்புகளை இணைப்பதன் மூலமும், CSS ஸ்ப்ரைட்களைப் பயன்படுத்துவதன் மூலமும், சிறிய வளங்களை இன்லைன் செய்வதன் மூலமும் HTTP கோரிக்கைகளின் எண்ணிக்கையைக் குறைக்கவும்.
- வளங்களை சுருக்கவும்: உரை அடிப்படையிலான வளங்களை (எ.கா., HTML, CSS, ஜாவாஸ்கிரிப்ட்) Gzip அல்லது Brotli சுருக்கத்தைப் பயன்படுத்தி சுருக்கவும்.
- வளங்களைத் தேக்கவும்: நிலையான சொத்துக்களை உள்ளூரில் சேமிக்க உலாவி கேச்சிங்கைப் பயன்படுத்தவும், அவற்றை மீண்டும் மீண்டும் பதிவிறக்கம் செய்ய வேண்டிய தேவையைக் குறைக்கவும்.
- உள்ளடக்க விநியோக நெட்வொர்க்கைப் (CDN) பயன்படுத்தவும்: வெவ்வேறு புவியியல் இடங்களில் உள்ள பயனர்களுக்கான ஏற்றுதல் நேரங்களை மேம்படுத்த, உங்கள் வலைத்தளத்தின் உள்ளடக்கத்தை உலகெங்கிலும் உள்ள பல சேவையகங்களில் விநியோகிக்கவும். உதாரணமாக, ஐரோப்பாவில் ஹோஸ்ட் செய்யப்பட்ட ஒரு வலைத்தளத்தை ஆசியாவில் உள்ள பயனர்கள் அணுகும்போது ஒரு CDN ஏற்றுதல் நேரங்களை மேம்படுத்த முடியும்.
- படங்களை மேம்படுத்துங்கள்: படங்களைச் சுருக்கி, கோப்பு அளவுகளைக் குறைக்க பொருத்தமான பட வடிவங்களைப் (எ.கா., WebP) பயன்படுத்தவும்.
- படங்களை சோம்பேறித்தனமாக ஏற்றவும்: படங்கள் வியூபோர்ட்டில் தெரியும் போது மட்டுமே அவற்றை ஏற்றவும்.
செயல்திறன் மேம்படுத்தலுக்கான சிறந்த நடைமுறைகள்
உங்கள் வலைத்தளத்தின் செயல்திறனை மேம்படுத்துவதற்கான சில பொதுவான சிறந்த நடைமுறைகள் இங்கே:
- ஜாவாஸ்கிரிப்டை மேம்படுத்துங்கள்: ஜாவாஸ்கிரிப்ட் குறியீட்டைக் குறைக்கவும், DOM கையாளுதல்களின் எண்ணிக்கையைக் குறைக்கவும் மற்றும் பிரதான த்ரெட்டைத் தடுப்பதைத் தவிர்க்கவும்.
- CSS-ஐ மேம்படுத்துங்கள்: திறமையான CSS தேர்வாளர்களைப் பயன்படுத்தவும், சிக்கலான CSS விதிகளைத் தவிர்க்கவும் மற்றும் விலையுயர்ந்த CSS பண்புகளின் பயன்பாட்டைக் குறைக்கவும்.
- படங்களை மேம்படுத்துங்கள்: படங்களைச் சுருக்கவும், பொருத்தமான பட வடிவங்களைப் பயன்படுத்தவும் மற்றும் படங்களை சோம்பேறித்தனமாக ஏற்றவும்.
- உலாவி கேச்சிங்கைப் பயன்படுத்தவும்: நிலையான சொத்துக்களுக்கு பொருத்தமான கேச் ஹெடர்களை அமைக்க உங்கள் சேவையகத்தை உள்ளமைக்கவும்.
- ஒரு CDN-ஐப் பயன்படுத்தவும்: உங்கள் வலைத்தளத்தின் உள்ளடக்கத்தை உலகெங்கிலும் உள்ள பல சேவையகங்களில் விநியோகிக்கவும்.
- செயல்திறனைக் கண்காணிக்கவும்: உலாவி டெவலப்பர் கருவிகள் மற்றும் பிற செயல்திறன் கண்காணிப்பு கருவிகளைப் பயன்படுத்தி உங்கள் வலைத்தளத்தின் செயல்திறனைத் தொடர்ந்து கண்காணிக்கவும்.
உலகளாவிய கண்ணோட்டம்: உலகளாவிய பார்வையாளர்களுக்காக மேம்படுத்தும்போது, வெவ்வேறு பிராந்தியங்களில் நெட்வொர்க் தாமதம் மற்றும் அலைவரிசை வரம்புகள் போன்ற காரணிகளைக் கருத்தில் கொள்ளுங்கள். உதாரணமாக, வளர்ந்து வரும் நாடுகளில் உள்ள பயனர்கள் வளர்ந்த நாடுகளில் உள்ள பயனர்களை விட மெதுவான இணைய இணைப்புகளைக் கொண்டிருக்கலாம். இந்த பிராந்தியங்களில் உள்ள பயனர்களுக்கு படங்களை மேம்படுத்துவதும் HTTP கோரிக்கைகளைக் குறைப்பதும் குறிப்பாக முக்கியம்.
நிஜ உலக உதாரணங்கள்
வலைப் பயன்பாடுகளை மேம்படுத்த செயல்திறன் விவரக்குறிப்பை எவ்வாறு பயன்படுத்தலாம் என்பதற்கான சில நிஜ உலக உதாரணங்களைப் பார்ப்போம்:
- இ-காமர்ஸ் வலைத்தளம்: ஒரு இ-காமர்ஸ் வலைத்தளம் மெதுவான ஏற்றுதல் நேரங்களை அனுபவித்து வந்தது, இது அதிக பவுன்ஸ் விகிதங்களுக்கு வழிவகுத்தது. வலைத்தளத்தை விவரக்குறிக்க உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்துவதன் மூலம், டெவலப்பர்கள் ஒரு பெரிய ஜாவாஸ்கிரிப்ட் கோப்பு பிரதான த்ரெட்டைத் தடுப்பதைக் கண்டறிந்தனர். அவர்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டை மேம்படுத்தி கோப்பு அளவைக் குறைத்தனர், இதன் விளைவாக ஏற்றுதல் நேரங்களில் குறிப்பிடத்தக்க முன்னேற்றம் மற்றும் பவுன்ஸ் விகிதங்களில் குறைப்பு ஏற்பட்டது.
- செய்தி வலைத்தளம்: ஒரு செய்தி வலைத்தளம் மோசமான ரெண்டரிங் செயல்திறனை அனுபவித்து வந்தது, இது சீரற்ற ஸ்க்ரோலிங்கிற்கு வழிவகுத்தது. வலைத்தளத்தை விவரக்குறிக்க உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்துவதன் மூலம், டெவலப்பர்கள் வலைத்தளம் DOM இல் அடிக்கடி மாற்றங்களைச் செய்வதைக் கண்டறிந்தனர், இது தளவமைப்பு குப்பைக்கூளத்தைத் தூண்டியது. அவர்கள் DOM கட்டமைப்பை மேம்படுத்தி DOM கையாளுதல்களின் எண்ணிக்கையைக் குறைத்தனர், இதன் விளைவாக மென்மையான ஸ்க்ரோலிங் மற்றும் சிறந்த பயனர் அனுபவம் ஏற்பட்டது.
- சமூக ஊடக தளம்: ஒரு சமூக ஊடக தளம் படங்களுக்கு மெதுவான ஏற்றுதல் நேரங்களை அனுபவித்து வந்தது. நெட்வொர்க் கோரிக்கைகளைப் பகுப்பாய்வு செய்ய உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்துவதன் மூலம், டெவலப்பர்கள் படங்கள் திறமையாக சுருக்கப்படவில்லை என்பதைக் கண்டறிந்தனர். அவர்கள் படங்களை மேம்படுத்தி அவற்றை பல சேவையகங்களில் விநியோகிக்க ஒரு CDN-ஐப் பயன்படுத்தினர், இதன் விளைவாக பட ஏற்றுதல் நேரங்களில் குறிப்பிடத்தக்க முன்னேற்றம் ஏற்பட்டது.
முடிவுரை
செயல்திறன் விவரக்குறிப்பு மற்றும் உங்கள் வலைப் பயன்பாட்டின் செயல்திறனை மேம்படுத்துவதற்கு உலாவி டெவலப்பர் கருவிகள் அவசியம். இந்த கருவிகளை எவ்வாறு திறம்படப் பயன்படுத்துவது என்பதைப் புரிந்துகொள்வதன் மூலம், நீங்கள் இடையூறுகளைக் கண்டறியலாம், உங்கள் குறியீட்டை மேம்படுத்தலாம் மற்றும் உலகளாவிய பார்வையாளர்களுக்கான பயனர் அனுபவத்தை மேம்படுத்தலாம். உங்கள் வலைத்தளத்தின் செயல்திறனைத் தொடர்ந்து கண்காணிக்கவும், அனைத்து பயனர்களுக்கும், அவர்களின் இருப்பிடம் அல்லது சாதனத்தைப் பொருட்படுத்தாமல், வேகமான மற்றும் ஈர்க்கக்கூடிய அனுபவத்தை உறுதிசெய்ய உங்கள் மேம்படுத்தல் உத்திகளைத் தேவைக்கேற்ப மாற்றியமைக்கவும் நினைவில் கொள்ளுங்கள்.
செயல்திறன் விவரக்குறிப்பில் தேர்ச்சி பெறுவது என்பது தொடர்ச்சியான கற்றல் மற்றும் பரிசோதனை தேவைப்படும் ஒரு தொடர்ச்சியான செயல்முறையாகும். சமீபத்திய வலை செயல்திறன் சிறந்த நடைமுறைகளுடன் புதுப்பித்த நிலையில் இருப்பதன் மூலமும், உலாவி டெவலப்பர் கருவிகளின் சக்தியைப் பயன்படுத்துவதன் மூலமும், உங்கள் வலைப் பயன்பாடுகள் உலகெங்கிலும் உள்ள பயனர்களுக்கு வேகமானதாகவும், பதிலளிக்கக்கூடியதாகவும், ஈர்க்கக்கூடியதாகவும் இருப்பதை உறுதிசெய்ய முடியும்.