ஜாவாஸ்கிரிப்ட் முக்கிய வலை உயிர் கூறுகளை எவ்வாறு பாதிக்கிறது என்பதைப் புரிந்து கொள்ளுங்கள் மற்றும் சிறந்த பயனர் அனுபவத்திற்காக அதன் செயல்திறனை மேம்படுத்துவதற்கான உத்திகளைக் கற்றுக்கொள்ளுங்கள்.
பிரவுசர் செயல்திறன் அளவீடுகள்: முக்கிய வலை உயிர் கூறுகளில் ஜாவாஸ்கிரிப்ட்டின் தாக்கம்
இன்றைய டிஜிட்டல் உலகில், இணையதள செயல்திறன் மிக முக்கியமானது. மெதுவாக ஏற்றப்படும் அல்லது பதிலளிக்காத இணையதளம் பயனர் விரக்தி, அதிக பவுன்ஸ் விகிதங்கள் மற்றும் இறுதியில் வருவாய் இழப்புக்கு வழிவகுக்கும். முக்கிய வலை உயிர் கூறுகள் (Core Web Vitals - CWV) என்பது கூகிளால் வரையறுக்கப்பட்ட அளவீடுகளின் தொகுப்பாகும். இது ஏற்றுதல், ஊடாடுதல் மற்றும் காட்சி நிலைத்தன்மை தொடர்பான பயனர் அனுபவத்தை (UX) அளவிடுகிறது. நவீன வலை உருவாக்கத்திற்கு ஜாவாஸ்கிரிப்ட் அவசியமானதாக இருந்தாலும், அது இந்த அளவீடுகளை கணிசமாக பாதிக்கலாம். இந்த விரிவான வழிகாட்டி ஜாவாஸ்கிரிப்ட் மற்றும் முக்கிய வலை உயிர் கூறுகளுக்கு இடையிலான உறவை ஆராய்ந்து, மேம்படுத்துவதற்கான செயல்முறை சார்ந்த நுண்ணறிவுகளை வழங்குகிறது.
முக்கிய வலை உயிர் கூறுகளைப் புரிந்துகொள்வது
முக்கிய வலை உயிர் கூறுகள் இணையதள செயல்திறனை அளவிடுவதற்கான ஒரு ஒருங்கிணைந்த கட்டமைப்பை வழங்குகின்றன. அவை வெறும் வேகத்தைப் பற்றியது மட்டுமல்ல, பயனரின் உணரப்பட்ட அனுபவத்தில் கவனம் செலுத்துகின்றன. மூன்று முக்கிய அளவீடுகள்:
- மிகப்பெரிய உள்ளடக்கக் காட்சி (LCP): பக்கம் முதலில் ஏற்றத் தொடங்கியதிலிருந்து, வியூபோர்ட்டிற்குள் மிகப்பெரிய உள்ளடக்க உறுப்பு (படம், வீடியோ, பிளாக்-லெவல் டெக்ஸ்ட்) தெரிவதற்கு எடுக்கும் நேரத்தை அளவிடுகிறது. ஒரு நல்ல LCP ஸ்கோர் 2.5 வினாடிகள் அல்லது அதற்கும் குறைவாகும்.
- முதல் உள்ளீட்டுத் தாமதம் (FID): ஒரு பயனர் ஒரு பக்கத்துடன் முதலில் தொடர்பு கொள்ளும் நேரத்திலிருந்து (எ.கா., ஒரு இணைப்பைக் கிளிக் செய்வது, ஒரு பொத்தானைத் தட்டுவது) அந்த தொடர்புக்கு பிரவுசர் பதிலளிக்க எடுக்கும் நேரத்தை அளவிடுகிறது. ஒரு நல்ல FID ஸ்கோர் 100 மில்லி விநாடிகள் அல்லது அதற்கும் குறைவாகும்.
- ஒட்டுமொத்த தளவமைப்பு மாற்றம் (CLS): ஒரு பக்கத்தின் ஆயுட்காலத்தில் ஏற்படும் எதிர்பாராத தளவமைப்பு மாற்றங்களின் அளவை அளவிடுகிறது. ஒரு நல்ல CLS ஸ்கோர் 0.1 அல்லது அதற்கும் குறைவாகும்.
இந்த அளவீடுகள் தேடுபொறி உகப்பாக்கத்திற்கு (SEO) முக்கியமானவை, ஏனெனில் கூகிள் இவற்றை தரவரிசை சமிக்ஞைகளாகப் பயன்படுத்துகிறது. CWV-க்காக மேம்படுத்துவது பயனர் அனுபவத்தை மேம்படுத்துவதோடு மட்டுமல்லாமல், உங்கள் இணையதளத்தை தேடல் முடிவுகளில் உயர்வாக தரவரிசைப்படுத்தவும் உதவுகிறது.
முக்கிய வலை உயிர் கூறுகளில் ஜாவாஸ்கிரிப்ட்டின் தாக்கம்
ஜாவாஸ்கிரிப்ட் ஒரு சக்திவாய்ந்த மொழியாகும், இது மாறும் மற்றும் ஊடாடும் வலை அனுபவங்களை செயல்படுத்துகிறது. இருப்பினும், மோசமாக மேம்படுத்தப்பட்ட ஜாவாஸ்கிரிப்ட் முக்கிய வலை உயிர் கூறுகளை எதிர்மறையாக பாதிக்கலாம்.
மிகப்பெரிய உள்ளடக்கக் காட்சி (LCP)
ஜாவாஸ்கிரிப்ட் பல வழிகளில் LCP-ஐ தாமதப்படுத்தலாம்:
- ரெண்டர்-தடுக்கும் வளங்களைத் தடுப்பது:
asyncஅல்லதுdeferபண்புக்கூறுகள் இல்லாமல் HTML-இன் <head> பகுதியில் ஏற்றப்படும் ஜாவாஸ்கிரிப்ட் கோப்புகள், பிரவுசர் பக்கத்தை ரெண்டர் செய்வதைத் தடுக்கலாம். ஏனென்றால், பிரவுசர் பயனருக்கு எதையும் காண்பிப்பதற்கு முன்பு இந்த ஸ்கிரிப்ட்களைப் பதிவிறக்கம் செய்து, பாகுபடுத்தி, இயக்க வேண்டும். - கனமான ஜாவாஸ்கிரிப்ட் இயக்கம்: நீண்ட நேரம் இயங்கும் ஜாவாஸ்கிரிப்ட் பணிகள் மெயின் த்ரெட்டைத் தடுக்கலாம், இது பிரவுசர் மிகப்பெரிய உள்ளடக்க உறுப்பை விரைவாக ரெண்டர் செய்வதைத் தடுக்கிறது.
- ஜாவாஸ்கிரிப்ட் மூலம் படங்களை மெதுவாக ஏற்றுதல்: மெதுவாக ஏற்றுதல் ஆரம்ப ஏற்றுதல் நேரத்தை மேம்படுத்த முடியும் என்றாலும், தவறாக செயல்படுத்தப்பட்டால், அது LCP-ஐ தாமதப்படுத்தலாம். எடுத்துக்காட்டாக, LCP உறுப்பு மெதுவாக ஏற்றப்படும் ஒரு படமாக இருந்தால், ஜாவாஸ்கிரிப்ட் இயங்கும் வரை அந்தப் படம் பெறப்படாது, இது LCP-ஐ தாமதப்படுத்தக்கூடும்.
- ஜாவாஸ்கிரிப்ட் மூலம் எழுத்துரு ஏற்றுதல்: எழுத்துருக்களை மாறும் வகையில் ஏற்ற ஜாவாஸ்கிரிப்டைப் பயன்படுத்துவது (எ.கா., Font Face Observer-ஐப் பயன்படுத்தி) LCP உறுப்பில் அந்த எழுத்துரு பயன்படுத்தப்பட்டால் LCP-ஐ தாமதப்படுத்தலாம்.
உதாரணம்: ஒரு செய்தி இணையதளம் ஒரு பெரிய ஹீரோ படத்தையும் கட்டுரைத் தலைப்பையும் LCP உறுப்பாகக் காட்டுகிறது என்று வைத்துக்கொள்வோம். அந்தப் படத்தைக் ஏற்றுவதற்கு முன்பு பகுப்பாய்வு அல்லது விளம்பரங்களைக் கையாள இணையதளம் ஒரு பெரிய ஜாவாஸ்கிரிப்ட் பண்டலை ஏற்றினால், LCP தாமதமாகும். மெதுவான இணைய இணைப்புகள் உள்ள பகுதிகளில் (எ.கா., தென்கிழக்கு ஆசியா அல்லது ஆப்பிரிக்காவின் சில பகுதிகள்) உள்ள பயனர்கள் இந்தத் தாமதத்தை இன்னும் கடுமையாக உணருவார்கள்.
முதல் உள்ளீட்டுத் தாமதம் (FID)
FID ஆனது பிரவுசரின் மெயின் த்ரெட் செயலிழந்து பயனர் உள்ளீட்டிற்கு பதிலளிக்க எடுக்கும் நேரத்தால் நேரடியாக பாதிக்கப்படுகிறது. ஜாவாஸ்கிரிப்ட் மெயின் த்ரெட் செயல்பாட்டில் ஒரு முக்கிய பங்கு வகிக்கிறது.
- நீண்ட பணிகள்: நீண்ட பணிகள் என்பது 50 மில்லி விநாடிகளுக்கு மேல் எடுக்கும் ஜாவாஸ்கிரிப்ட் இயக்கத் தொகுதிகளாகும். இந்தப் பணிகள் மெயின் த்ரெட்டைத் தடுக்கின்றன, இதனால் அந்த நேரத்தில் பயனர் உள்ளீட்டிற்கு பிரவுசர் பதிலளிக்காமல் போகிறது.
- மூன்றாம் தரப்பு ஸ்கிரிப்டுகள்: மூன்றாம் தரப்பு ஸ்கிரிப்டுகள் (எ.கா., பகுப்பாய்வு, விளம்பரம், சமூக ஊடக விட்ஜெட்டுகள்) பெரும்பாலும் சிக்கலான ஜாவாஸ்கிரிப்ட் குறியீட்டை இயக்குகின்றன, இது மெயின் த்ரெட்டைத் தடுத்து FID-ஐ அதிகரிக்கக்கூடும்.
- சிக்கலான நிகழ்வு கையாளுபவர்கள்: திறமையற்ற அல்லது மோசமாக மேம்படுத்தப்பட்ட நிகழ்வு கையாளுபவர்கள் (எ.கா., கிளிக் ஹேண்ட்லர்கள், ஸ்க்ரோல் ஹேண்ட்லர்கள்) நீண்ட பணிகளுக்கு பங்களித்து FID-ஐ அதிகரிக்கலாம்.
உதாரணம்: ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி உருவாக்கப்பட்ட ஒரு சிக்கலான தேடல் வடிகட்டி கூறுடன் கூடிய ஒரு மின்-வணிக இணையதளத்தை கற்பனை செய்து பாருங்கள். முடிவுகளை வடிகட்டுவதற்குப் பொறுப்பான ஜாவாஸ்கிரிப்ட் குறியீடு மேம்படுத்தப்படவில்லை என்றால், ஒரு பயனர் ஒரு வடிப்பானைப் பயன்படுத்தும்போது அது மெயின் த்ரெட்டைத் தடுக்கலாம். இந்தத் தாமதம் மொபைல் சாதனங்கள் அல்லது பழைய வன்பொருள் உள்ள பயனர்களுக்கு குறிப்பாக எரிச்சலூட்டுவதாக இருக்கும்.
ஒட்டுமொத்த தளவமைப்பு மாற்றம் (CLS)
ஆரம்ப பக்க ஏற்றுதலுக்குப் பிறகு எதிர்பாராத தளவமைப்பு மாற்றங்களை ஏற்படுத்துவதன் மூலம் ஜாவாஸ்கிரிப்ட் CLS-க்கு பங்களிக்க முடியும்.
- மாறும் வகையில் உட்செலுத்தப்பட்ட உள்ளடக்கம்: ஆரம்ப பக்க ஏற்றுதலுக்குப் பிறகு DOM-இல் உள்ளடக்கத்தைச் செருகுவது கீழே உள்ள கூறுகளை கீழே தள்ள காரணமாகலாம். இது குறிப்பாக விளம்பரங்கள், உட்பொதிக்கப்பட்ட உள்ளடக்கம் (எ.கா., YouTube வீடியோக்கள், சமூக ஊடக இடுகைகள்) மற்றும் குக்கீ ஒப்புதல் பேனர்களுடன் பொதுவானது.
- எழுத்துரு ஏற்றுதல்: பக்கம் ரெண்டர் செய்யப்பட்ட பிறகு ஒரு தனிப்பயன் எழுத்துரு ஏற்றப்பட்டு பயன்படுத்தப்பட்டால், அது உரையை மீண்டும் பாயச் செய்து, தளவமைப்பு மாற்றத்தை ஏற்படுத்தலாம். இது FOUT (Flash of Unstyled Text) அல்லது FOIT (Flash of Invisible Text) சிக்கல் என்று அழைக்கப்படுகிறது.
- அனிமேஷன்கள் மற்றும் மாற்றங்கள்: மேம்படுத்தப்படாத அனிமேஷன்கள் மற்றும் மாற்றங்கள் தளவமைப்பு மாற்றங்களை ஏற்படுத்தலாம். எடுத்துக்காட்டாக, ஒரு உறுப்பின்
topஅல்லதுleftபண்புகளை அனிமேட் செய்வது தளவமைப்பு மாற்றத்தைத் தூண்டும், அதேசமயம்transformபண்பை அனிமேட் செய்வது அவ்வாறு செய்யாது.
உதாரணம்: ஒரு பயண முன்பதிவு இணையதளத்தைக் கருத்தில் கொள்ளுங்கள். ஆரம்ப பக்க ஏற்றுதலுக்குப் பிறகு தேடல் முடிவுகளுக்கு மேலே ஒரு விளம்பர பேனரை மாறும் வகையில் செருக ஜாவாஸ்கிரிப்ட் பயன்படுத்தப்பட்டால், முழு தேடல் முடிவுகள் பகுதியும் கீழே தள்ளப்பட்டு, ஒரு குறிப்பிடத்தக்க தளவமைப்பு மாற்றத்தை ஏற்படுத்தும். இது கிடைக்கக்கூடிய விருப்பங்களை உலாவ முயற்சிக்கும் பயனர்களுக்கு திசைதிருப்பக்கூடியதாகவும் எரிச்சலூட்டுவதாகவும் இருக்கும்.
ஜாவாஸ்கிரிப்ட் செயல்திறனை மேம்படுத்துவதற்கான உத்திகள்
முக்கிய வலை உயிர் கூறுகளை மேம்படுத்துவதற்கு ஜாவாஸ்கிரிப்ட் செயல்திறனை மேம்படுத்துவது மிக முக்கியம். நீங்கள் செயல்படுத்தக்கூடிய பல உத்திகள் இங்கே:
1. கோட் ஸ்பிளிட்டிங் (Code Splitting)
கோட் ஸ்பிளிட்டிங் என்பது உங்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டை சிறிய பண்டல்களாக உடைப்பதை உள்ளடக்குகிறது, அவை தேவைக்கேற்ப ஏற்றப்படலாம். இது பதிவிறக்கம் செய்யப்பட்டு பாகுபடுத்தப்பட வேண்டிய ஆரம்ப ஜாவாஸ்கிரிப்ட்டின் அளவைக் குறைத்து, LCP மற்றும் FID-ஐ மேம்படுத்துகிறது.
செயல்படுத்துதல்:
- டைனமிக் இறக்குமதிகள்: தொகுதிகள் தேவைப்படும்போது மட்டுமே ஏற்றுவதற்கு டைனமிக் இறக்குமதிகளை (
import()) பயன்படுத்தவும். எடுத்துக்காட்டாக, ஒரு பயனர் ஒரு குறிப்பிட்ட அம்சத்திற்குச் செல்லும்போது மட்டுமே அந்த அம்சத்திற்கான குறியீட்டை நீங்கள் ஏற்றலாம். - Webpack, Parcel, and Rollup: உங்கள் குறியீட்டை தானாகவே சிறிய துண்டுகளாகப் பிரிக்க Webpack, Parcel, அல்லது Rollup போன்ற மாட்யூல் பண்டலர்களைப் பயன்படுத்தவும். இந்தக் கருவிகள் உங்கள் குறியீட்டைப் பகுப்பாய்வு செய்து உங்கள் பயன்பாட்டின் சார்புகளின் அடிப்படையில் மேம்படுத்தப்பட்ட பண்டல்களை உருவாக்குகின்றன.
உதாரணம்: ஒரு ஆன்லைன் கற்றல் தளம், ஒரு பயனர் ஒரு குறிப்பிட்ட பாடத் தொகுதியை அணுகும்போது மட்டுமே அந்தத் தொகுதிக்கான ஜாவாஸ்கிரிப்ட் குறியீட்டை ஏற்ற கோட் ஸ்பிளிட்டிங்கைப் பயன்படுத்தலாம். இது பயனர் அனைத்து தொகுதிகளுக்கான குறியீட்டையும் முன்கூட்டியே பதிவிறக்கம் செய்வதைத் தடுத்து, ஆரம்ப ஏற்றுதல் நேரத்தை மேம்படுத்துகிறது.
2. ட்ரீ ஷேக்கிங் (Tree Shaking)
ட்ரீ ஷேக்கிங் என்பது உங்கள் ஜாவாஸ்கிரிப்ட் பண்டல்களில் இருந்து பயன்படுத்தப்படாத குறியீட்டை அகற்றும் ஒரு நுட்பமாகும். இது உங்கள் பண்டல்களின் அளவைக் குறைத்து, LCP மற்றும் FID-ஐ மேம்படுத்துகிறது.
செயல்படுத்துதல்:
- ES மாட்யூல்கள்: உங்கள் ஜாவாஸ்கிரிப்ட் மாட்யூல்களை வரையறுக்க ES மாட்யூல்களை (
importமற்றும்export) பயன்படுத்தவும். Webpack மற்றும் Rollup போன்ற மாட்யூல் பண்டலர்கள் பின்னர் உங்கள் குறியீட்டைப் பகுப்பாய்வு செய்து பயன்படுத்தப்படாத ஏற்றுமதிகளை அகற்ற முடியும். - தூய செயல்பாடுகள்: மாட்யூல் பண்டலர்கள் பயன்படுத்தப்படாத குறியீட்டைக் கண்டறிந்து அகற்றுவதை எளிதாக்க தூய செயல்பாடுகளை (ஒரே உள்ளீட்டிற்கு எப்போதும் ஒரே வெளியீட்டைத் தரும் மற்றும் பக்க விளைவுகள் இல்லாத செயல்பாடுகள்) எழுதுங்கள்.
உதாரணம்: ஒரு உள்ளடக்க மேலாண்மை அமைப்பு (CMS) ஒரு பெரிய பயன்பாட்டு செயல்பாடுகளின் நூலகத்தை உள்ளடக்கியிருக்கலாம். ட்ரீ ஷேக்கிங் இந்த நூலகத்திலிருந்து இணையதளத்தின் குறியீட்டில் உண்மையில் பயன்படுத்தப்படாத எந்த செயல்பாடுகளையும் அகற்றி, ஜாவாஸ்கிரிப்ட் பண்டலின் அளவைக் குறைக்கும்.
3. மினிஃபிகேஷன் மற்றும் சுருக்கம்
மினிஃபிகேஷன் உங்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டிலிருந்து தேவையற்ற எழுத்துக்களை (எ.கா., வெள்ளை இடம், கருத்துகள்) நீக்குகிறது. சுருக்கம் Gzip அல்லது Brotli போன்ற வழிமுறைகளைப் பயன்படுத்தி உங்கள் ஜாவாஸ்கிரிப்ட் கோப்புகளின் அளவைக் குறைக்கிறது. இரண்டு நுட்பங்களும் உங்கள் ஜாவாஸ்கிரிப்ட்டின் பதிவிறக்க அளவைக் குறைத்து, LCP-ஐ மேம்படுத்துகின்றன.
செயல்படுத்துதல்:
- மினிஃபிகேஷன் கருவிகள்: உங்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டை மினிஃபை செய்ய UglifyJS, Terser, அல்லது esbuild போன்ற கருவிகளைப் பயன்படுத்தவும்.
- சுருக்க வழிமுறைகள்: Gzip அல்லது Brotli ஐப் பயன்படுத்தி ஜாவாஸ்கிரிப்ட் கோப்புகளை சுருக்க உங்கள் வலை சேவையகத்தை உள்ளமைக்கவும். Brotli பொதுவாக Gzip-ஐ விட சிறந்த சுருக்க விகிதங்களை வழங்குகிறது.
- உள்ளடக்க விநியோக நெட்வொர்க் (CDN): உங்கள் பயனர்களுக்கு நெருக்கமான சேவையகங்களிலிருந்து சுருக்கப்பட்ட ஜாவாஸ்கிரிப்ட் கோப்புகளை வழங்க ஒரு CDN-ஐப் பயன்படுத்தவும், இது பதிவிறக்க நேரத்தை மேலும் குறைக்கிறது.
உதாரணம்: ஒரு உலகளாவிய மின்-வணிக இணையதளம் வெவ்வேறு பகுதிகளில் அமைந்துள்ள சேவையகங்களிலிருந்து மினிஃபை செய்யப்பட்ட மற்றும் சுருக்கப்பட்ட ஜாவாஸ்கிரிப்ட் கோப்புகளை வழங்க ஒரு CDN-ஐப் பயன்படுத்தலாம். இது ஒவ்வொரு பிராந்தியத்திலும் உள்ள பயனர்கள் தங்கள் இருப்பிடத்தைப் பொருட்படுத்தாமல் கோப்புகளை விரைவாக பதிவிறக்கம் செய்ய முடியும் என்பதை உறுதி செய்கிறது.
4. Defer மற்றும் Async பண்புக்கூறுகள்
defer மற்றும் async பண்புக்கூறுகள் ஜாவாஸ்கிரிப்ட் கோப்புகள் எவ்வாறு ஏற்றப்பட்டு இயக்கப்படுகின்றன என்பதைக் கட்டுப்படுத்த உங்களை அனுமதிக்கின்றன. இந்தப் பண்புக்கூறுகளைப் பயன்படுத்துவது ஜாவாஸ்கிரிப்ட் பக்கத்தின் ரெண்டரிங்கைத் தடுப்பதைத் தடுத்து, LCP-ஐ மேம்படுத்தும்.
செயல்படுத்துதல்:
defer பண்புக்கூற்றைப் பயன்படுத்தவும். Defer பிரவுசருக்கு ஸ்கிரிப்டை பின்னணியில் பதிவிறக்கம் செய்து HTML பாகுபடுத்தப்பட்ட பிறகு அதை இயக்கச் சொல்கிறது. ஸ்கிரிப்ட்கள் HTML-இல் தோன்றும் வரிசையில் இயக்கப்படுகின்றன.async பண்புக்கூற்றைப் பயன்படுத்தவும். Async பிரவுசருக்கு ஸ்கிரிப்டை பின்னணியில் பதிவிறக்கம் செய்து, HTML பாகுபாட்டைத் தடுக்காமல், பதிவிறக்கம் செய்யப்பட்டவுடன் அதை இயக்கச் சொல்கிறது. ஸ்கிரிப்ட்கள் HTML-இல் தோன்றும் வரிசையில் இயக்கப்படும் என்பதற்கு எந்த உத்தரவாதமும் இல்லை.உதாரணம்: பகுப்பாய்வு ஸ்கிரிப்ட்களுக்கு, async ஐப் பயன்படுத்தவும், மற்றும் பாலிஃபில்கள் போன்ற ஒரு குறிப்பிட்ட வரிசையில் இயங்க வேண்டிய ஸ்கிரிப்ட்களுக்கு, defer ஐப் பயன்படுத்தவும்.
5. மூன்றாம் தரப்பு ஸ்கிரிப்ட்களை மேம்படுத்துங்கள்
மூன்றாம் தரப்பு ஸ்கிரிப்ட்கள் முக்கிய வலை உயிர் கூறுகளை கணிசமாக பாதிக்கலாம். அவற்றின் தாக்கத்தைக் குறைக்க இந்த ஸ்கிரிப்ட்களை மேம்படுத்துவது அவசியம்.
செயல்படுத்துதல்:
- மூன்றாம் தரப்பு ஸ்கிரிப்ட்களை ஒத்திசைவின்றி ஏற்றவும்:
asyncபண்புக்கூற்றைப் பயன்படுத்தி அல்லது ஆரம்ப பக்க ஏற்றுதலுக்குப் பிறகு அவற்றை DOM-இல் மாறும் வகையில் உட்செலுத்துவதன் மூலம் மூன்றாம் தரப்பு ஸ்கிரிப்ட்களை ஏற்றவும். - மூன்றாம் தரப்பு ஸ்கிரிப்ட்களை மெதுவாக ஏற்றவும்: பக்கத்தின் ஆரம்ப ரெண்டரிங்கிற்கு முக்கியமில்லாத மூன்றாம் தரப்பு ஸ்கிரிப்ட்களை மெதுவாக ஏற்றவும்.
- தேவையற்ற மூன்றாம் தரப்பு ஸ்கிரிப்ட்களை அகற்றவும்: உங்கள் இணையதளத்தின் மூன்றாம் தரப்பு ஸ்கிரிப்ட்களை தவறாமல் மதிப்பாய்வு செய்து, இனி தேவைப்படாதவற்றை அகற்றவும்.
- மூன்றாம் தரப்பு ஸ்கிரிப்ட் செயல்திறனைக் கண்காணிக்கவும்: உங்கள் மூன்றாம் தரப்பு ஸ்கிரிப்ட்களின் செயல்திறனைக் கண்காணிக்க WebPageTest அல்லது Lighthouse போன்ற கருவிகளைப் பயன்படுத்தவும்.
உதாரணம்: பயனர் கட்டுரை உள்ளடக்கத்திற்கு கீழே ஸ்க்ரோல் செய்யும் வரை சமூக ஊடக பகிர்வு பொத்தான்களை ஏற்றுவதை தாமதப்படுத்தவும். இது சமூக ஊடக ஸ்கிரிப்ட்கள் பக்கத்தின் ஆரம்ப ரெண்டரிங்கைத் தடுப்பதைத் தடுக்கிறது.
6. படங்கள் மற்றும் வீடியோக்களை மேம்படுத்துங்கள்
படங்கள் மற்றும் வீடியோக்கள் பெரும்பாலும் ஒரு வலைப்பக்கத்தில் மிகப்பெரிய உள்ளடக்கக் கூறுகளாகும். இந்த சொத்துக்களை மேம்படுத்துவது LCP-ஐ கணிசமாக மேம்படுத்தும்.
செயல்படுத்துதல்:
- படங்களை சுருக்கவும்: அதிக தரத்தை இழக்காமல் படங்களை சுருக்க ImageOptim, TinyPNG, அல்லது ImageKit போன்ற கருவிகளைப் பயன்படுத்தவும்.
- நவீன பட வடிவங்களைப் பயன்படுத்தவும்: WebP அல்லது AVIF போன்ற நவீன பட வடிவங்களைப் பயன்படுத்தவும், அவை JPEG அல்லது PNG-ஐ விட சிறந்த சுருக்கத்தை வழங்குகின்றன.
- வீடியோ என்கோடிங்கை மேம்படுத்துங்கள்: வீடியோ தரத்தை கணிசமாக பாதிக்காமல் கோப்பு அளவைக் குறைக்க வீடியோ என்கோடிங் அமைப்புகளை மேம்படுத்துங்கள்.
- பதிலளிக்கக்கூடிய படங்களைப் பயன்படுத்தவும்: பயனரின் சாதனம் மற்றும் திரை அளவிற்கு ஏற்ப வெவ்வேறு பட அளவுகளை வழங்க
<picture>உறுப்பு அல்லது<img>உறுப்பின்srcsetபண்புக்கூற்றைப் பயன்படுத்தவும். - படங்கள் மற்றும் வீடியோக்களை மெதுவாக ஏற்றவும்: ஆரம்ப வியூபோர்ட்டில் தெரியாத படங்கள் மற்றும் வீடியோக்களை மெதுவாக ஏற்றவும்.
உதாரணம்: ஒரு புகைப்பட இணையதளம் WebP படங்கள் மற்றும் பதிலளிக்கக்கூடிய படங்களைப் பயன்படுத்தி வெவ்வேறு சாதனங்களில் உள்ள பயனர்களுக்கு மேம்படுத்தப்பட்ட படங்களை வழங்கலாம், இது பதிவிறக்க அளவைக் குறைத்து LCP-ஐ மேம்படுத்துகிறது.
7. நிகழ்வு கையாளுபவர்களை மேம்படுத்துங்கள்
திறமையற்ற அல்லது மோசமாக மேம்படுத்தப்பட்ட நிகழ்வு கையாளுபவர்கள் நீண்ட பணிகளுக்கு பங்களித்து FID-ஐ அதிகரிக்கலாம். நிகழ்வு கையாளுபவர்களை மேம்படுத்துவது ஊடாடுதலை மேம்படுத்தும்.
செயல்படுத்துதல்:
- டிபவுன்சிங் மற்றும் த்ராட்லிங்: நிகழ்வு கையாளுபவர்கள் செயல்படுத்தப்படும் விகிதத்தைக் கட்டுப்படுத்த டிபவுன்சிங் அல்லது த்ராட்லிங்கைப் பயன்படுத்தவும். டிபவுன்சிங் கடைசி நிகழ்வு ஏற்பட்டதிலிருந்து ஒரு குறிப்பிட்ட நேரம் கடந்த பிறகு மட்டுமே ஒரு நிகழ்வு கையாளுபவர் செயல்படுத்தப்படுவதை உறுதி செய்கிறது. த்ராட்லிங் ஒரு நிகழ்வு கையாளுபவர் ஒரு குறிப்பிட்ட காலத்திற்குள் ஒரு முறை மட்டுமே செயல்படுத்தப்படுவதை உறுதி செய்கிறது.
- நிகழ்வு பிரதிநிதித்துவம்: தனிப்பட்ட குழந்தை கூறுகளுக்கு நிகழ்வு கையாளுபவர்களை இணைப்பதற்குப் பதிலாக, பெற்றோர் உறுப்புக்கு நிகழ்வு கையாளுபவர்களை இணைக்க நிகழ்வு பிரதிநிதித்துவத்தைப் பயன்படுத்தவும். இது உருவாக்கப்பட வேண்டிய நிகழ்வு கையாளுபவர்களின் எண்ணிக்கையைக் குறைத்து செயல்திறனை மேம்படுத்துகிறது.
- நீண்ட நேரம் இயங்கும் நிகழ்வு கையாளுபவர்களைத் தவிர்க்கவும்: நிகழ்வு கையாளுபவர்களுக்குள் நீண்ட நேரம் இயங்கும் பணிகளைச் செய்வதைத் தவிர்க்கவும். ஒரு பணி கணக்கீட்டு ரீதியாக தீவிரமாக இருந்தால், அதை ஒரு வெப் வொர்க்கருக்கு மாற்றுவதைக் கருத்தில் கொள்ளுங்கள்.
உதாரணம்: தன்னியக்க தேடல் உள்ள ஒரு இணையதளத்தில், ஒவ்வொரு கீஸ்ட்ரோக்கிற்கும் API அழைப்புகளைச் செய்வதைத் தவிர்க்க டிபவுன்சிங்கைப் பயன்படுத்தவும். பயனர் ஒரு குறுகிய காலத்திற்கு (எ.கா., 200 மில்லி விநாடிகள்) தட்டச்சு செய்வதை நிறுத்திய பிறகு மட்டுமே API அழைப்பைச் செய்யவும். இது API அழைப்புகளின் எண்ணிக்கையைக் குறைத்து செயல்திறனை மேம்படுத்துகிறது.
8. வெப் வொர்க்கர்கள்
வெப் வொர்க்கர்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டை மெயின் த்ரெட்டிலிருந்து தனியாக பின்னணியில் இயக்க உங்களை அனுமதிக்கின்றன. இது நீண்ட நேரம் இயங்கும் பணிகள் மெயின் த்ரெட்டைத் தடுப்பதைத் தடுத்து FID-ஐ மேம்படுத்தும்.
செயல்படுத்துதல்:
- CPU-தீவிர பணிகளை ஆஃப்லோட் செய்யவும்: CPU-தீவிர பணிகளை (எ.கா., பட செயலாக்கம், சிக்கலான கணக்கீடுகள்) வெப் வொர்க்கர்களுக்கு ஆஃப்லோட் செய்யவும்.
- மெயின் த்ரெட்டுடன் தொடர்பு: வெப் வொர்க்கருக்கும் மெயின் த்ரெட்டுக்கும் இடையில் தொடர்பு கொள்ள
postMessage()API-ஐப் பயன்படுத்தவும்.
உதாரணம்: ஒரு தரவு காட்சிப்படுத்தல் இணையதளம் பெரிய தரவுத்தொகுப்புகளில் சிக்கலான கணக்கீடுகளை பின்னணியில் செய்ய வெப் வொர்க்கர்களைப் பயன்படுத்தலாம். இது கணக்கீடுகள் மெயின் த்ரெட்டைத் தடுப்பதைத் தடுத்து, பயனர் இடைமுகம் பதிலளிக்கக்கூடியதாக இருப்பதை உறுதி செய்கிறது.
9. தளவமைப்பு மாற்றங்களைத் தவிர்க்கவும்
CLS-ஐக் குறைக்க, ஆரம்ப பக்க ஏற்றுதலுக்குப் பிறகு எதிர்பாராத தளவமைப்பு மாற்றங்களை ஏற்படுத்துவதைத் தவிர்க்கவும்.
செயல்படுத்துதல்:
- மாறும் வகையில் உட்செலுத்தப்பட்ட உள்ளடக்கத்திற்கு இடத்தை ஒதுக்கவும்: மாறும் வகையில் உட்செலுத்தப்பட்ட உள்ளடக்கத்திற்கு (எ.கா., விளம்பரங்கள், உட்பொதிக்கப்பட்ட உள்ளடக்கம்) ஒதுக்கிடங்களைப் பயன்படுத்துவதன் மூலம் அல்லது உள்ளடக்கத்தின் பரிமாணங்களை முன்கூட்டியே குறிப்பிடுவதன் மூலம் இடத்தை ஒதுக்கவும்.
- படங்கள் மற்றும் வீடியோக்களில்
widthமற்றும்heightபண்புக்கூறுகளைப் பயன்படுத்தவும்: எப்போதும்<img>மற்றும்<video>கூறுகளில்widthமற்றும்heightபண்புக்கூறுகளைக் குறிப்பிடவும். இது பிரவுசருக்கு கூறுகள் ஏற்றப்படுவதற்கு முன்பு அவற்றுக்கு இடத்தை ஒதுக்க அனுமதிக்கிறது. - இருக்கும் உள்ளடக்கத்திற்கு மேலே உள்ளடக்கத்தைச் செருகுவதைத் தவிர்க்கவும்: இருக்கும் உள்ளடக்கத்திற்கு மேலே உள்ளடக்கத்தைச் செருகுவதைத் தவிர்க்கவும், ஏனெனில் இது கீழே உள்ள உள்ளடக்கம் கீழே தள்ளப்பட காரணமாகும்.
- அனிமேஷன்களுக்கு Top/Left-க்குப் பதிலாக Transform-ஐப் பயன்படுத்தவும்: அனிமேஷன்களுக்கு
topஅல்லதுleftபண்புகளுக்குப் பதிலாகtransformபண்பைப் பயன்படுத்தவும்.transformபண்பை அனிமேட் செய்வது தளவமைப்பு மாற்றத்தைத் தூண்டாது.
உதாரணம்: ஒரு YouTube வீடியோவை உட்பொதிக்கும்போது, வீடியோ ஏற்றப்படும்போது தளவமைப்பு மாற்றங்களைத் தடுக்க <iframe> உறுப்பில் வீடியோவின் அகலம் மற்றும் உயரத்தைக் குறிப்பிடவும்.
10. கண்காணிப்பு மற்றும் தணிக்கை
மேம்படுத்துவதற்கான பகுதிகளைக் கண்டறிய உங்கள் இணையதளத்தின் செயல்திறனை தவறாமல் கண்காணித்து தணிக்கை செய்யவும்.
செயல்படுத்துதல்:
- Google PageSpeed Insights: உங்கள் இணையதளத்தின் செயல்திறனைப் பகுப்பாய்வு செய்து மேம்படுத்துவதற்கான பரிந்துரைகளைப் பெற Google PageSpeed Insights-ஐப் பயன்படுத்தவும்.
- Lighthouse: உங்கள் இணையதளத்தின் செயல்திறன், அணுகல்தன்மை மற்றும் SEO-ஐ தணிக்கை செய்ய Lighthouse-ஐப் பயன்படுத்தவும்.
- WebPageTest: விரிவான செயல்திறன் அளவீடுகளைப் பெறவும் மற்றும் இடையூறுகளைக் கண்டறியவும் WebPageTest-ஐப் பயன்படுத்தவும்.
- உண்மையான பயனர் கண்காணிப்பு (RUM): உண்மையான பயனர்களிடமிருந்து செயல்திறன் தரவைச் சேகரிக்க RUM-ஐ செயல்படுத்தவும். இது உங்கள் இணையதளம் நிஜ உலகில் எவ்வாறு செயல்படுகிறது என்பது குறித்த மதிப்புமிக்க நுண்ணறிவுகளை வழங்குகிறது. Google Analytics, New Relic, மற்றும் Datadog போன்ற கருவிகள் RUM திறன்களை வழங்குகின்றன.
உதாரணம்: ஒரு பன்னாட்டு நிறுவனம் வெவ்வேறு பிராந்தியங்களில் இணையதள செயல்திறனைக் கண்காணிக்கவும் மற்றும் செயல்திறனை மேம்படுத்த வேண்டிய பகுதிகளைக் கண்டறியவும் RUM-ஐப் பயன்படுத்தலாம். எடுத்துக்காட்டாக, நெட்வொர்க் தாமதம் அல்லது சேவையக அருகாமை காரணமாக ஒரு குறிப்பிட்ட நாட்டில் உள்ள பயனர்கள் மெதுவான ஏற்றுதல் நேரங்களை அனுபவிக்கிறார்கள் என்பதை அவர்கள் கண்டறியலாம்.
முடிவுரை
முக்கிய வலை உயிர் கூறுகளை மேம்படுத்துவதற்கும் சிறந்த பயனர் அனுபவத்தை வழங்குவதற்கும் ஜாவாஸ்கிரிப்ட் செயல்திறனை மேம்படுத்துவது அவசியம். இந்த வழிகாட்டியில் கோடிட்டுக் காட்டப்பட்டுள்ள உத்திகளைச் செயல்படுத்துவதன் மூலம், LCP, FID மற்றும் CLS ஆகியவற்றில் ஜாவாஸ்கிரிப்ட்டின் தாக்கத்தை நீங்கள் கணிசமாகக் குறைக்கலாம், இது வேகமான, பதிலளிக்கக்கூடிய மற்றும் நிலையான இணையதளத்திற்கு வழிவகுக்கும். காலப்போக்கில் உகந்த செயல்திறனைப் பராமரிக்க தொடர்ச்சியான கண்காணிப்பு மற்றும் மேம்படுத்தல் ஆகியவை முக்கியமானவை என்பதை நினைவில் கொள்ளுங்கள்.
பயனர் மைய செயல்திறன் அளவீடுகளில் கவனம் செலுத்துவதன் மூலமும் உலகளாவிய கண்ணோட்டத்தை ஏற்றுக்கொள்வதன் மூலமும், உலகெங்கிலும் உள்ள பயனர்களுக்கு அவர்களின் இருப்பிடம், சாதனம் அல்லது நெட்வொர்க் நிலைமைகளைப் பொருட்படுத்தாமல் வேகமான, அணுகக்கூடிய மற்றும் சுவாரஸ்யமான இணையதளங்களை நீங்கள் உருவாக்கலாம்.