ஜாவாஸ்கிரிப்ட் கிரிட்டிக்கல் பாத் பகுப்பாய்வுக்கான இந்த விரிவான வழிகாட்டியின் மூலம், உலகளாவிய இணைய மேம்பாட்டிற்காக வேகமான ஏற்றுதல் நேரங்களையும் சிறந்த பயனர் அனுபவங்களையும் பெறுங்கள்.
இணைய செயல்திறனில் தேர்ச்சி பெறுதல்: ஜாவாஸ்கிரிப்ட் கிரிட்டிக்கல் பாத் பகுப்பாய்வில் ஒரு ஆழமான பார்வை
இன்றைய ஒன்றோடொன்று இணைக்கப்பட்ட டிஜிட்டல் உலகில், இணைய செயல்திறன் என்பது ஒரு வெறும் சாதகமான அம்சம் மட்டுமல்ல; அது ஒரு அடிப்படை எதிர்பார்ப்பு. அதிவேக ஃபைபர் ஆப்டிக்ஸ் கொண்ட பரபரப்பான பெருநகரங்கள் முதல் மாறுபட்ட நெட்வொர்க் ஸ்திரத்தன்மை கொண்ட தொலைதூரப் பகுதிகள் வரை, உலகெங்கிலும் உள்ள பயனர்கள் உடனடி அணுகல் மற்றும் தடையற்ற ஊடாடல்களை விரும்புகிறார்கள். ஒரு செயல்திறன்மிக்க இணையத்தின் மையத்தில், வளங்களின் திறமையான விநியோகம் மற்றும் செயல்படுத்தல் உள்ளது, இதில் ஜாவாஸ்கிரிப்ட் பெரும்பாலும் மிக முக்கியமான மற்றும் சில நேரங்களில் மிகவும் சவாலான பங்கைக் கொண்டுள்ளது. இந்த விரிவான வழிகாட்டி உங்களை ஜாவாஸ்கிரிப்ட் கிரிட்டிக்கல் பாத் பகுப்பாய்வுப் பயணத்திற்கு அழைத்துச் செல்லும், இது உண்மையான உலகளாவிய பார்வையாளர்களுக்காக மின்னல் வேக இணைய அனுபவங்களை உருவாக்க தேவையான அறிவையும் செயல்படுத்தக்கூடிய உத்திகளையும் உங்களுக்கு வழங்கும்.
இணையதளங்கள் அதிநவீன ஜாவாஸ்கிரிப்ட் கட்டமைப்புகள் மற்றும் நூலகங்களால் இயக்கப்பட்டு, பெருகிய முறையில் சிக்கலானதாக வளரும்போது, செயல்திறன் தடைகளுக்கான சாத்தியக்கூறுகள் அதிகரிக்கின்றன. உங்கள் பயனர்களையும் வணிக நோக்கங்களையும் பாதிக்கும் முன், இந்தச் சிக்கல்களைக் கண்டறிந்து தீர்க்க, ஜாவாஸ்கிரிப்ட் உலாவியின் கிரிட்டிக்கல் ரெண்டரிங் பாத்துடன் எவ்வாறு ஊடாடுகிறது என்பதைப் புரிந்துகொள்வது மிக முக்கியம்.
கிரிட்டிக்கல் ரெண்டரிங் பாத் (CRP) என்பதைப் புரிந்துகொள்ளுதல்
ஜாவாஸ்கிரிப்ட்டின் பங்கைப் பற்றி ஆராய்வதற்கு முன், கிரிட்டிக்கல் ரெண்டரிங் பாத் (CRP) பற்றிய அடிப்படை புரிதலை ஏற்படுத்துவோம். CRP என்பது ஒரு உலாவி HTML, CSS மற்றும் ஜாவாஸ்கிரிப்டை திரையில் உண்மையான பிக்சல்களாக மாற்றும் படிகளின் வரிசையாகும். CRP-ஐ மேம்படுத்துவது என்பது பயனருக்கு உடனடியாகத் தெரியும் உள்ளடக்கத்தைக் காண்பிப்பதற்கு முன்னுரிமை அளிப்பதாகும், இதன் மூலம் உணரப்பட்ட செயல்திறன் மற்றும் பயனர் அனுபவத்தை மேம்படுத்துகிறது. அதன் முக்கிய நிலைகள்:
- DOM கட்டுமானம் (டூகுமென்ட் ஆப்ஜெக்ட் மாடல்): உலாவி HTML ஆவணத்தை அலசி, பக்கத்தின் கட்டமைப்பு மற்றும் உள்ளடக்கத்தைக் குறிக்கும் DOM மரத்தை உருவாக்குகிறது.
- CSSOM கட்டுமானம் (CSS ஆப்ஜெக்ட் மாடல்): உலாவி CSS கோப்புகள் மற்றும் இன்லைன் ஸ்டைல்களை அலசி, DOM கூறுகளின் ஸ்டைலைக் குறிப்பிடும் CSSOM மரத்தை உருவாக்குகிறது.
- ரெண்டர் மர கட்டுமானம்: DOM மற்றும் CSSOM மரங்கள் இணைந்து ரெண்டர் மரத்தை உருவாக்குகின்றன. இந்த மரம் தெரியும் கூறுகள் மற்றும் அவற்றின் கணக்கிடப்பட்ட ஸ்டைல்களை மட்டுமே கொண்டுள்ளது.
<head>அல்லதுdisplay: none;போன்ற கூறுகள் சேர்க்கப்படாது. - லேஅவுட் (ரிஃப்ளோ): ரெண்டர் மரம் உருவாக்கப்பட்டவுடன், உலாவி திரையில் உள்ள அனைத்து கூறுகளின் துல்லியமான நிலை மற்றும் அளவைக் கணக்கிடுகிறது. இது கணக்கீட்டு ரீதியாக ஒரு தீவிரமான செயல்முறையாகும்.
- பெயிண்ட்: ஒவ்வொரு தனிமத்தின் காட்சிப் பண்புகளையும் (நிறங்கள், எல்லைகள், நிழல்கள், உரை, படங்கள்) பயன்படுத்தி, உலாவி திரையில் பிக்சல்களை வரையும் இறுதி நிலை இதுவாகும்.
- காம்போசிட்டிங்: கூறுகள் அடுக்கப்பட்டிருந்தால் அல்லது அனிமேஷன் செய்யப்பட்டிருந்தால், உலாவி அவற்றை லேயர்களாகப் பிரித்து, இறுதி ரெண்டரிங்கிற்காக சரியான வரிசையில் அவற்றை ஒன்றாக இணைக்கலாம்.
CRP மேம்படுத்தலின் குறிக்கோள், இந்த படிகளில் செலவழிக்கும் நேரத்தைக் குறைப்பதாகும், குறிப்பாக ஆரம்பத்தில் தெரியும் உள்ளடக்கத்திற்கு, இது பெரும்பாலும் "above-the-fold" உள்ளடக்கம் என்று குறிப்பிடப்படுகிறது. இந்த நிலைகளை, குறிப்பாக ரெண்டர் மரத்தின் கட்டுமானத்தை தாமதப்படுத்தும் எந்தவொரு வளமும் ரெண்டர்-பிளாக்கிங் என்று கருதப்படுகிறது.
ஜாவாஸ்கிரிப்ட்டின் கிரிட்டிக்கல் ரெண்டரிங் பாத் மீதான ஆழமான தாக்கம்
ஜாவாஸ்கிரிப்ட் ஒரு சக்திவாய்ந்த மொழி, ஆனால் அதன் இயல்பே CRP-இல் குறிப்பிடத்தக்க தாமதங்களை ஏற்படுத்தக்கூடும். அதற்கான காரணங்கள்:
- பார்சரைத் தடுக்கும் தன்மை: இயல்பாக, உலாவியின் HTML பார்சர்
asyncஅல்லதுdeferபண்புக்கூறு இல்லாத ஒரு<script>குறிச்சொல்லை எதிர்கொள்ளும்போது, அது HTML பார்சிங்கை இடைநிறுத்துகிறது. அது ஸ்கிரிப்டைப் பதிவிறக்கம் செய்து (அது வெளிப்புறமாக இருந்தால்), அதை இயக்கி, பின்னர் மீதமுள்ள HTML-ஐ பார்சிங் செய்வதைத் தொடர்கிறது. ஏனெனில், ஜாவாஸ்கிரிப்ட் DOM அல்லது CSSOM-ஐ மாற்ற வாய்ப்புள்ளது, எனவே பக்க கட்டமைப்பைத் தொடர்ந்து உருவாக்குவதற்கு முன்பு உலாவி அதை இயக்க வேண்டும். இந்த இடைநிறுத்தம் ஒரு பெரிய தடையாகும். - DOM மற்றும் CSSOM கையாளுதல்: ஜாவாஸ்கிரிப்ட் பெரும்பாலும் DOM மற்றும் CSSOM உடன் ஊடாடி அவற்றை மாற்றுகிறது. இந்த மரங்கள் முழுமையாக கட்டமைக்கப்படுவதற்கு முன்பு ஸ்கிரிப்டுகள் இயக்கப்பட்டால், அல்லது அவை விரிவான கையாளுதல்களைத் தூண்டினால், அவை உலாவியை லேஅவுட்களை மீண்டும் கணக்கிட (ரிஃப்ளோஸ்) மற்றும் கூறுகளை மீண்டும் பெயிண்ட் செய்ய கட்டாயப்படுத்தலாம், இது அதிக செயல்திறன் செலவுகளுக்கு வழிவகுக்கும்.
- நெட்வொர்க் கோரிக்கைகள்: வெளிப்புற ஜாவாஸ்கிரிப்ட் கோப்புகளுக்கு நெட்வொர்க் கோரிக்கைகள் தேவை. ஒரு பயனருக்குக் கிடைக்கும் தாமதம் மற்றும் அலைவரிசை, இந்த கோப்புகள் எவ்வளவு விரைவாக பதிவிறக்கம் செய்யப்படலாம் என்பதை நேரடியாகப் பாதிக்கிறது. குறைந்த ஸ்திரமான இணைய உள்கட்டமைப்பு உள்ள பகுதிகளில் உள்ள பயனர்களுக்கு, இது குறிப்பிடத்தக்க தாமதங்களைக் குறிக்கும்.
- செயல்படுத்தும் நேரம்: பதிவிறக்கம் செய்த பிறகும், சிக்கலான அல்லது மோசமாக மேம்படுத்தப்பட்ட ஜாவாஸ்கிரிப்ட், வாடிக்கையாளரின் சாதனத்தில் பார்ஸ் செய்து செயல்படுத்த கணிசமான நேரத்தை எடுத்துக் கொள்ளலாம். குறைந்த விலை சாதனங்கள் அல்லது பழைய மொபைல் போன்களில் இது குறிப்பாக சிக்கலாக உள்ளது, ஏனெனில் அவை குறைந்த சக்திவாய்ந்த CPU-க்களைக் கொண்டுள்ளன, இவை சில உலகளாவிய சந்தைகளில் பரவலாக இருக்கலாம்.
- மூன்றாம் தரப்பு ஸ்கிரிப்டுகள்: அனலிட்டிக்ஸ், விளம்பரங்கள், சமூக ஊடக விட்ஜெட்டுகள் மற்றும் பிற மூன்றாம் தரப்பு ஸ்கிரிப்டுகள் பெரும்பாலும் கூடுதல் நெட்வொர்க் கோரிக்கைகள் மற்றும் செயல்படுத்தும் செலவுகளை அறிமுகப்படுத்துகின்றன, இது அடிக்கடி டெவலப்பரின் நேரடி கட்டுப்பாட்டிற்கு வெளியே உள்ளது. இவை ஜாவாஸ்கிரிப்ட் கிரிட்டிக்கல் பாத்தை கணிசமாக அதிகரிக்கக்கூடும்.
சுருக்கமாக, ஜாவாஸ்கிரிப்ட் டைனமிக் அனுபவங்களை ஒருங்கிணைக்கும் சக்தியைக் கொண்டுள்ளது, ஆனால் கவனமாக நிர்வகிக்கப்படாவிட்டால், அது மெதுவான பக்க சுமைகள் மற்றும் பதிலளிக்காத பயனர் இடைமுகங்களுக்கு மிகப்பெரிய ஒற்றைக் காரணமாகவும் மாறக்கூடும்.
ஜாவாஸ்கிரிப்ட்டிற்கான கிரிட்டிக்கல் பாத் பகுப்பாய்வு என்றால் என்ன?
ஜாவாஸ்கிரிப்ட் கிரிட்டிக்கல் பாத் பகுப்பாய்வு என்பது உலாவியின் கிரிட்டிக்கல் ரெண்டரிங் பாத் மற்றும் ஒட்டுமொத்த பக்க ஏற்றுதல் செயல்திறனை கணிசமாக பாதிக்கும் ஜாவாஸ்கிரிப்ட் குறியீட்டைக் கண்டறிந்து, அளவிட்டு மற்றும் மேம்படுத்தும் ஒரு முறையான செயல்முறையாகும். இது புரிந்துகொள்வதை உள்ளடக்கியது:
- எந்த ஜாவாஸ்கிரிப்ட் கோப்புகள் ரெண்டர்-பிளாக்கிங் ஆகும்.
- இந்த ஸ்கிரிப்டுகள் பதிவிறக்கம், பார்சிங், கம்பைலிங் மற்றும் செயல்படுத்துவதற்கு எவ்வளவு நேரம் செலவிடுகின்றன.
- இந்த ஸ்கிரிப்டுகளின் ஃபர்ஸ்ட் கன்டென்ட்ஃபுல் பெயிண்ட் (FCP), லார்ஜஸ்ட் கன்டென்ட்ஃபுல் பெயிண்ட் (LCP) மற்றும் டைம் டு இன்டராக்டிவ் (TTI) போன்ற முக்கிய பயனர் அனுபவ அளவீடுகளில் ஏற்படும் தாக்கம்.
- வெவ்வேறு ஸ்கிரிப்டுகள் மற்றும் பிற வளங்களுக்கு இடையிலான சார்புகள்.
ஆரம்ப பயனர் அனுபவத்திற்குத் தேவையான அத்தியாவசிய ஜாவாஸ்கிரிப்டை முடிந்தவரை விரைவாக வழங்குவதும், மற்ற அனைத்தையும் தாமதப்படுத்துவது அல்லது ஒத்திசைவற்ற முறையில் ஏற்றுவது இதன் குறிக்கோளாகும். இது பயனர்கள் தங்கள் நெட்வொர்க் நிலைமைகள் அல்லது சாதனத் திறன்களைப் பொருட்படுத்தாமல், தேவையற்ற தாமதங்கள் இல்லாமல் அர்த்தமுள்ள உள்ளடக்கத்தைக் காண்பதையும் பக்கத்துடன் ஊடாட முடிவதையும் உறுதி செய்கிறது.
ஜாவாஸ்கிரிப்ட் செயல்திறனால் பாதிக்கப்படும் முக்கிய அளவீடுகள்
கிரிட்டிக்கல் பாத்தில் ஜாவாஸ்கிரிப்டை மேம்படுத்துவது பல முக்கியமான இணைய செயல்திறன் அளவீடுகளை நேரடியாக பாதிக்கிறது, இவற்றில் பல கூகிளின் கோர் வெப் வைட்டல்ஸின் ஒரு பகுதியாகும், இது உலகளவில் SEO மற்றும் பயனர் திருப்தியைப் பாதிக்கிறது:
ஃபர்ஸ்ட் கன்டென்ட்ஃபுல் பெயிண்ட் (FCP)
பக்கம் ஏற்றத் தொடங்கும் நேரத்திலிருந்து பக்கத்தின் உள்ளடக்கத்தின் ஏதேனும் ஒரு பகுதி திரையில் ரெண்டர் செய்யப்படும் நேரம் வரை FCP அளவிடுகிறது. இது பெரும்பாலும் ஒரு பயனர் ஏதோ நடக்கிறது என்று உணரும் முதல் தருணம். ரெண்டர்-பிளாக்கிங் ஜாவாஸ்கிரிப்ட் FCP-ஐ கணிசமாக தாமதப்படுத்துகிறது, ஏனெனில் இந்த ஸ்கிரிப்டுகள் பதிவிறக்கம் செய்யப்பட்டு செயல்படுத்தப்படும் வரை உலாவி எந்த உள்ளடக்கத்தையும் ரெண்டர் செய்ய முடியாது. மெதுவான FCP, பயனர்கள் பக்கத்தை மெதுவாக உணர்வதற்கோ அல்லது அதைக் கைவிடுவதற்கோ வழிவகுக்கும், குறிப்பாக மெதுவான நெட்வொர்க்குகளில்.
லார்ஜஸ்ட் கன்டென்ட்ஃபுல் பெயிண்ட் (LCP)
LCP என்பது வியூபோர்ட்டில் தெரியும் மிகப்பெரிய படம் அல்லது உரைத் தொகுதியின் ரெண்டர் நேரத்தை அளவிடுகிறது. இந்த அளவீடு ஒரு பக்கத்தின் உணரப்பட்ட ஏற்றுதல் வேகத்தின் முக்கிய குறிகாட்டியாகும். ஜாவாஸ்கிரிப்ட் பல வழிகளில் LCP-ஐ பெரிதும் பாதிக்கலாம்: முக்கியமான படங்கள் அல்லது உரைத் தொகுதிகள் அவற்றின் தெரிவுநிலைக்கு ஜாவாஸ்கிரிப்டை நம்பியிருந்தால், ரெண்டர்-பிளாக்கிங் ஜாவாஸ்கிரிப்ட் இந்த கூறுகளைக் கொண்ட HTML-ஐ பார்சிங் செய்வதைத் தாமதப்படுத்தினால், அல்லது ஜாவாஸ்கிரிப்ட் செயல்படுத்தல் பிரதான த்ரெட் வளங்களுக்காகப் போட்டியிட்டு, ரெண்டரிங் செயல்முறையைத் தாமதப்படுத்தினால்.
ஃபர்ஸ்ட் இன்புட் டிலே (FID)
ஒரு பயனர் ஒரு பக்கத்துடன் முதன்முதலில் ஊடாடும் நேரத்திலிருந்து (எ.கா., ஒரு பொத்தானைக் கிளிக் செய்தல், ஒரு இணைப்பைத் தட்டுதல்) அந்த ஊடாடலுக்குப் பதிலளிக்கும் வகையில் உலாவியால் நிகழ்வு கையாளுதல்களைச் செயலாக்கத் தொடங்கும் நேரம் வரை FID அளவிடுகிறது. பிரதான த்ரெட்டில் அதிக ஜாவாஸ்கிரிப்ட் செயல்படுத்தல் பிரதான த்ரெட்டைத் தடுக்கலாம், இது பக்கத்தை பயனர் உள்ளீட்டிற்குப் பதிலளிக்காமல் செய்து, அதிக FID-க்கு வழிவகுக்கும். இந்த அளவீடு ஊடாடல் மற்றும் பயனர் திருப்திக்கு முக்கியமானது, குறிப்பாக ஊடாடும் பயன்பாடுகள் அல்லது படிவங்களுக்காக.
டைம் டு இன்டராக்டிவ் (TTI)
ஒரு பக்கம் முழுமையாக ஊடாடும் வரை உள்ள நேரத்தை TTI அளவிடுகிறது. ஒரு பக்கம் பயனுள்ள உள்ளடக்கத்தைக் காண்பிக்கும்போது (FCP), மற்றும் அது 50 மில்லி விநாடிகளுக்குள் பயனர் உள்ளீட்டிற்கு நம்பகத்தன்மையுடன் பதிலளிக்கும்போது அது முழுமையாக ஊடாடும் என்று கருதப்படுகிறது. நீண்ட நேரம் இயங்கும் ஜாவாஸ்கிரிப்ட் பணிகள், குறிப்பாக ஆரம்ப ஏற்றுதலின் போது ஏற்படும் பணிகள், பிரதான த்ரெட்டைத் தடுப்பதன் மூலம் TTI-ஐ தாமதப்படுத்தலாம், இது பக்கம் பயனர் ஊடாடல்களுக்குப் பதிலளிப்பதைத் தடுக்கிறது. ஒரு மோசமான TTI மதிப்பெண், ஒரு தளத்துடன் உடனடியாக ஈடுபட எதிர்பார்க்கும் பயனர்களுக்கு குறிப்பாக எரிச்சலூட்டுவதாக இருக்கும்.
மொத்த தடுப்பு நேரம் (TBT)
FCP மற்றும் TTI-க்கு இடையில், பிரதான த்ரெட் உள்ளீட்டுப் பதிலளிப்பைத் தடுக்கும் அளவுக்கு நீண்ட நேரம் தடுக்கப்பட்ட மொத்த நேரத்தை TBT அளவிடுகிறது. எந்தவொரு நீண்ட பணியும் (50 ms-க்கு மேல்) TBT-க்கு பங்களிக்கிறது. ஜாவாஸ்கிரிப்ட் செயல்படுத்தல் நீண்ட பணிகளுக்கான முதன்மைக் காரணமாகும். ஜாவாஸ்கிரிப்ட் செயல்படுத்தலை மேம்படுத்துதல், அதன் பேலோடைக் குறைத்தல் மற்றும் பணிகளை ஆஃப்லோட் செய்தல் ஆகியவை TBT-ஐக் குறைக்கவும் ஒட்டுமொத்த பதிலளிப்பை மேம்படுத்தவும் முக்கியமானவை.
ஜாவாஸ்கிரிப்ட் கிரிட்டிக்கல் பாத் பகுப்பாய்வுக்கான கருவிகள்
திறமையான பகுப்பாய்வுக்கு வலுவான கருவிகள் தேவை. ஜாவாஸ்கிரிப்ட் கிரிட்டிக்கல் பாத் பகுப்பாய்வுக்கான சில இன்றியமையாத வளங்கள் இங்கே:
உலாவி டெவலப்பர் கருவிகள் (Chrome DevTools)
Chrome DevTools ஆழமான செயல்திறன் பகுப்பாய்வுக்காக ஏராளமான அம்சங்களை வழங்குகிறது, இது டெவலப்பர்களுக்கு அவர்களின் இயக்க முறைமை அல்லது இருப்பிடத்தைப் பொருட்படுத்தாமல் உலகளவில் அணுகக்கூடியது.
- செயல்திறன் பேனல்:
- முழு கிரிட்டிக்கல் ரெண்டரிங் பாத்தையும் காட்சிப்படுத்த ஒரு பக்க ஏற்றத்தைப் பதிவு செய்யுங்கள். ஸ்கிரிப்டுகள் எப்போது பதிவிறக்கம் செய்யப்படுகின்றன, பார்ஸ் செய்யப்படுகின்றன, கம்பைல் செய்யப்படுகின்றன மற்றும் செயல்படுத்தப்படுகின்றன என்பதை நீங்கள் காணலாம்.
- TBT மற்றும் FID-க்கு பங்களிக்கும் "நீண்ட பணிகள்" (பிரதான த்ரெட்டை 50ms-க்கு மேல் தடுக்கும் ஜாவாஸ்கிரிப்ட் பணிகள்) ஐக் கண்டறியவும்.
- CPU பயன்பாட்டைப் பகுப்பாய்வு செய்து, அதிக செயலாக்க சக்தியைப் பயன்படுத்தும் செயல்பாடுகளை அடையாளம் காணவும்.
- பிரேம் விகிதங்கள், லேஅவுட் மாற்றங்கள் மற்றும் பெயிண்டிங் நிகழ்வுகளைக் காட்சிப்படுத்தவும்.
- நெட்வொர்க் பேனல்:
- அனைத்து நெட்வொர்க் கோரிக்கைகளையும் (HTML, CSS, JS, படங்கள், எழுத்துருக்கள்) கண்காணிக்கவும்.
- கோரப்பட்ட அனைத்து ஜாவாஸ்கிரிப்ட் கோப்புகளையும் காண "JS" மூலம் வடிகட்டவும்.
- பதிவிறக்க அளவுகள், பரிமாற்ற நேரங்கள் மற்றும் கோரிக்கை முன்னுரிமைகளைக் கவனிக்கவும்.
- ரெண்டர்-பிளாக்கிங் ஸ்கிரிப்டுகளை அடையாளம் காணவும் (பெரும்பாலும் நீர்வீழ்ச்சி வரைபடத்தில் அவற்றின் ஆரம்ப நிலையால் குறிக்கப்படும்).
- பல்வேறு உலகளாவிய பயனர்களின் செயல்திறன் தாக்கத்தைப் புரிந்துகொள்ள வெவ்வேறு நெட்வொர்க் நிலைமைகளை (எ.கா., "வேகமான 3G", "மெதுவான 3G") பின்பற்றவும்.
- கவரேஜ் பேனல்:
- பயன்படுத்தப்படாத ஜாவாஸ்கிரிப்ட் மற்றும் CSS குறியீட்டை அடையாளம் காட்டுகிறது. ஒரு வழக்கமான பக்க ஏற்றத்தின் போது உங்கள் குறியீட்டின் எந்தப் பகுதிகள் செயல்படுத்தப்படவில்லை என்பதைக் காண்பிப்பதன் மூலம் பண்டில் அளவைக் குறைக்க இது விலைமதிப்பற்றது.
- உண்மையில் தேவைப்படும் கிரிட்டிக்கல் ஜாவாஸ்கிரிப்டையும், தேவையற்ற முறையில் ஏற்றப்படுவதையும் புரிந்துகொள்ள உதவுகிறது.
- லைட்ஹவுஸ்:
- Chrome DevTools-இல் ஒருங்கிணைக்கப்பட்ட ஒரு தானியங்கு கருவி, இது செயல்திறன், அணுகல்தன்மை, SEO மற்றும் சிறந்த நடைமுறைகளுக்கான தணிக்கையை வழங்குகிறது.
- "ரெண்டர்-பிளாக்கிங் வளங்களை நீக்கு", "ஜாவாஸ்கிரிப்ட் செயல்படுத்தும் நேரத்தைக் குறை", மற்றும் "பயன்படுத்தப்படாத ஜாவாஸ்கிரிப்டை அகற்று" போன்ற ஜாவாஸ்கிரிப்ட் தொடர்பான செயல்பாட்டு பரிந்துரைகளை வழங்குகிறது.
- FCP, LCP, TTI மற்றும் TBT போன்ற முக்கிய அளவீடுகளுக்கான மதிப்பெண்களை உருவாக்குகிறது, இது முன்னேற்றத்திற்கான தெளிவான அளவுகோலை வழங்குகிறது.
WebPageTest
WebPageTest என்பது ஒரு சக்திவாய்ந்த, இலவச கருவியாகும், இது பல உலகளாவிய இடங்கள் மற்றும் சாதனங்களிலிருந்து மேம்பட்ட செயல்திறன் சோதனையை வழங்குகிறது. வெவ்வேறு பகுதிகள் மற்றும் பயனர் சூழல்களில் செயல்திறன் வேறுபாடுகளைப் புரிந்துகொள்ள இது முக்கியமானது.
- உண்மையான நெட்வொர்க் தாமதம் மற்றும் சர்வர் பதிலளிப்பு நேரங்களை அளவிட உலகெங்கிலும் உள்ள பல்வேறு நகரங்களிலிருந்து சோதனைகளை இயக்கவும்.
- வெவ்வேறு இணைப்பு வேகங்களை (எ.கா., கேபிள், 3G, 4G) மற்றும் சாதன வகைகளை (எ.கா., டெஸ்க்டாப், மொபைல்) உருவகப்படுத்தவும்.
- விரிவான நீர்வீழ்ச்சி விளக்கப்படங்கள், ஃபிலிம்ஸ்ட்ரிப்ஸ் (பக்க ஏற்றத்தின் காட்சி முன்னேற்றம்) மற்றும் மேம்படுத்தப்பட்ட உள்ளடக்கப் பிரிவுகளை வழங்குகிறது.
- "தடுக்கும் நேரம்," "ஸ்கிரிப்டிங் நேரம்," மற்றும் "முதல் பைட் நேரம்" போன்ற குறிப்பிட்ட ஜாவாஸ்கிரிப்ட் தொடர்பான சிக்கல்களை முன்னிலைப்படுத்துகிறது.
Google PageSpeed Insights
லைட்ஹவுஸ் மற்றும் நிஜ-உலக தரவு (CrUX - Chrome User Experience Report) இரண்டையும் பயன்படுத்தி, PageSpeed Insights ஒரு பக்கத்தின் செயல்திறன் மற்றும் செயல்பாட்டு பரிந்துரைகளின் விரைவான கண்ணோட்டத்தை வழங்குகிறது.
- "ஃபீல்ட் தரவு" (நிஜ-பயனர் அனுபவங்கள்) மற்றும் "லேப் தரவு" (உருவகப்படுத்தப்பட்ட சூழல்) இரண்டையும் வழங்குகிறது.
- செயல்படுத்தும் நேரத்தைக் குறைத்தல் அல்லது ரெண்டர்-பிளாக்கிங் வளங்களை நீக்குதல் போன்ற ஜாவாஸ்கிரிப்ட் செயல்திறனை மேம்படுத்துவதற்கான வாய்ப்புகளைத் தெளிவாகக் குறிப்பிடுகிறது.
- ஒருங்கிணைந்த மதிப்பெண் மற்றும் எளிதான விளக்கத்திற்காக தெளிவான வண்ண-குறியிடப்பட்ட பரிந்துரைகளை வழங்குகிறது.
பண்ட்லர் அனலைசர் கருவிகள் (எ.கா., Webpack Bundle Analyzer, Rollup Visualizer)
Webpack அல்லது Rollup போன்ற பண்டலர்களுடன் உருவாக்கப்பட்ட நவீன ஜாவாஸ்கிரிப்ட் பயன்பாடுகளுக்கு, உங்கள் ஜாவாஸ்கிரிப்ட் பண்டல்களின் கலவையைப் புரிந்துகொள்ள இந்த கருவிகள் விலைமதிப்பற்றவை.
- உங்கள் ஜாவாஸ்கிரிப்ட் பண்டல்களில் உள்ள ஒவ்வொரு மாட்யூலின் அளவையும் பார்வைக்குரியதாகக் காட்டுங்கள்.
- பெரிய, தேவையற்ற சார்புகள் அல்லது நகல் குறியீட்டை அடையாளம் காண உதவுங்கள்.
- திறமையான கோட் ஸ்பிளிட்டிங் மற்றும் ட்ரீ-ஷேக்கிங் உத்திகளுக்கு அவசியம், இது உலாவிக்கு வழங்கப்படும் ஜாவாஸ்கிரிப்ட்டின் அளவைக் குறைக்க உங்களை அனுமதிக்கிறது.
ஜாவாஸ்கிரிப்ட் கிரிட்டிக்கல் பாத்தை மேம்படுத்துவதற்கான உத்திகள்
இப்போது நாம் சிக்கலையும் கருவிகளையும் புரிந்துகொண்டோம், கிரிட்டிக்கல் பாத்தில் ஜாவாஸ்கிரிப்டை மேம்படுத்துவதற்கான நடைமுறை, செயல்படுத்தக்கூடிய உத்திகளை ஆராய்வோம்.
1. ரெண்டர்-பிளாக்கிங் ஜாவாஸ்கிரிப்டை நீக்குங்கள்
இது ஒருவேளை மிகவும் தாக்கத்தை ஏற்படுத்தும் முதல் படியாக இருக்கலாம். ஜாவாஸ்கிரிப்ட் உலாவியின் HTML பார்சிங் மற்றும் ரெண்டரிங் செயல்முறையை இடைநிறுத்துவதைத் தடுப்பதே இதன் குறிக்கோள்.
asyncமற்றும்deferபண்புக்கூறுகளைப் பயன்படுத்தவும்:async: HTML பார்சிங்குடன் இணையாக ஸ்கிரிப்டை ஒத்திசைவற்ற முறையில் பதிவிறக்கம் செய்ய உலாவிக்குச் சொல்கிறது. பதிவிறக்கம் செய்யப்பட்டவுடன், ஸ்கிரிப்ட் செயல்படுத்தப்படுகிறது, இது பார்சிங் முடிவடைவதற்கு முன்பு தயாராக இருந்தால் HTML பார்சிங்கைத் தடுக்க வாய்ப்புள்ளது. பலasyncஸ்கிரிப்டுகளுக்கான செயல்படுத்தல் வரிசைக்கு உத்தரவாதம் இல்லை. அனலிட்டிக்ஸ் அல்லது உடனடியாக DOM அல்லது CSSOM-ஐ மாற்றாத மூன்றாம் தரப்பு விட்ஜெட்டுகள் போன்ற சுதந்திரமான ஸ்கிரிப்டுகளுக்கு இது சிறந்தது.defer: ஸ்கிரிப்டை ஒத்திசைவற்ற முறையில் பதிவிறக்கம் செய்கிறது, ஆனால் HTML பார்சிங் முடியும் வரை செயல்படுத்தல் தாமதப்படுத்தப்படுகிறது.deferஉடன் உள்ள ஸ்கிரிப்டுகள் HTML-இல் தோன்றும் வரிசையில் செயல்படுத்தப்படுகின்றன. முழு DOM-ம் கிடைக்க வேண்டிய ஸ்கிரிப்டுகளுக்கு இது சிறந்தது, அதாவது ஊடாடும் கூறுகள் அல்லது பயன்பாட்டு தர்க்கம் போன்றவை.- உதாரணம்:
<script src="analytics.js" async></script><script src="app-logic.js" defer></script>
- கிரிட்டிக்கல் ஜாவாஸ்கிரிப்டை இன்லைன் செய்யவும்: above-the-fold உள்ளடக்கத்திற்கு உடனடியாகத் தேவைப்படும் மிகச் சிறிய, அத்தியாவசிய ஜாவாஸ்கிரிப்ட் குறியீடு துணுக்குகளுக்கு (எ.கா., ஒரு முக்கியமான UI கூறுகளைத் தொடங்கும் ஒரு ஸ்கிரிப்ட்), அவற்றை
<script>குறிச்சொற்களைப் பயன்படுத்தி நேரடியாக HTML-இல் இன்லைன் செய்வதைக் கருத்தில் கொள்ளுங்கள். இது ஒரு நெட்வொர்க் கோரிக்கையைத் தவிர்க்கிறது, ஆனால் நினைவில் கொள்ளுங்கள், இன்லைன் செய்யப்பட்ட ஸ்கிரிப்டுகள் உலாவியால் கேச் செய்யப்படுவதில்லை மற்றும் ஆரம்ப HTML பேலோடை அதிகரிக்கக்கூடும். மிக முக்கியமான, சிறிய ஸ்கிரிப்டுகளுக்கு மட்டும் குறைவாகப் பயன்படுத்தவும். - கிரிட்டிக்கல் அல்லாத ஸ்கிரிப்டுகளை
<body>-இன் இறுதிக்கு நகர்த்தவும்: கிரிட்டிக்கல் அல்லாத<script>குறிச்சொற்களை மூடும்</body>குறிச்சொல்லுக்கு சற்று முன்பு வைப்பது, ஸ்கிரிப்டுகள் எதிர்கொள்ளப்பட்டு செயல்படுத்தப்படுவதற்கு முன்பு HTML உள்ளடக்கம் பார்ஸ் செய்யப்பட்டு ரெண்டர் செய்யப்படுவதை உறுதி செய்கிறது. இது அவற்றை திறம்பட ரெண்டர்-பிளாக்கிங் அல்லாததாக ஆக்குகிறது, இருப்பினும் இது அவற்றை ஒத்திசைவற்றதாக ஆக்காது.
2. ஜாவாஸ்கிரிப்ட் பேலோட் அளவைக் குறைக்கவும்
சிறிய கோப்புகள் வேகமாக பதிவிறக்கம் செய்யப்படுகின்றன, இது உலகளவில் மாறுபடும் நெட்வொர்க் நிலைமைகளில் குறிப்பாக முக்கியமானது.
- மினிஃபிகேஷன்: உங்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டிலிருந்து தேவையற்ற எழுத்துக்களை (வெற்றிடம், கருத்துரைகள், அரைப்புள்ளிகள்) அதன் செயல்பாட்டை மாற்றாமல் அகற்றவும். UglifyJS அல்லது Terser போன்ற பில்ட் கருவிகள் இதை தானியங்குபடுத்தலாம்.
- சுருக்கம் (Gzip/Brotli): உங்கள் வலை சேவையகம் Gzip அல்லது Brotli சுருக்கத்துடன் ஜாவாஸ்கிரிப்ட் கோப்புகளை வழங்குவதை உறுதிசெய்யவும். Brotli பெரும்பாலும் Gzip-ஐ விட சிறந்த சுருக்க விகிதங்களை வழங்குகிறது, இது நெட்வொர்க்கில் இன்னும் சிறிய கோப்பு அளவுகளுக்கு வழிவகுக்கிறது. பெரும்பாலான நவீன CDN-கள் மற்றும் வலை சேவையகங்கள் இதை ஆதரிக்கின்றன.
- ட்ரீ ஷேக்கிங் மற்றும் டெட் கோட் எலிமினேஷன்: நவீன ஜாவாஸ்கிரிப்ட் பண்டலர்கள் (Webpack, Rollup, Parcel) உங்கள் குறியீட்டைப் பகுப்பாய்வு செய்து பயன்படுத்தப்படாத ஏற்றுமதிகள் மற்றும் மாட்யூல்களை அகற்றலாம், இந்த செயல்முறை ட்ரீ ஷேக்கிங் என்று அழைக்கப்படுகிறது. இது இறுதி பண்டில் அளவை வியத்தகு முறையில் குறைக்கிறது. உகந்த ட்ரீ ஷேக்கிங்கிற்காக உங்கள் குறியீடு ES மாட்யூல்களுடன் (
import/export) எழுதப்பட்டுள்ளதை உறுதிப்படுத்தவும். - கோட் ஸ்பிளிட்டிங் மற்றும் லேசி லோடிங்: உங்கள் முழு பயன்பாட்டிற்கான அனைத்து ஜாவாஸ்கிரிப்டையும் முன்கூட்டியே ஏற்றுவதற்குப் பதிலாக, உங்கள் குறியீட்டை சிறிய, சுதந்திரமான துண்டுகளாகப் பிரிக்கவும். இந்தத் துண்டுகள் தேவைப்படும்போது மட்டுமே ஏற்றவும் (எ.கா., ஒரு பயனர் ஒரு குறிப்பிட்ட வழிக்குச் செல்லும்போது, ஒரு பொத்தானைக் கிளிக் செய்யும்போது, அல்லது ஒரு குறிப்பிட்ட பகுதிக்கு ஸ்க்ரோல் செய்யும்போது). இது ஆரம்ப கிரிட்டிக்கல் ஜாவாஸ்கிரிப்ட் பேலோடை கணிசமாகக் குறைக்கிறது.
- டைனமிக் இறக்குமதிகள்: தேவைக்கேற்ப மாட்யூல்களை ஏற்ற
import()தொடரியலைப் பயன்படுத்தவும். உதாரணம்:const module = await import('./my-module.js'); - வழி-அடிப்படையிலான பிரித்தல்: ஒற்றைப் பக்க பயன்பாட்டில் (SPA) வெவ்வேறு வழிகளுக்கு வெவ்வேறு ஜாவாஸ்கிரிப்ட் பண்டல்களை ஏற்றவும்.
- கூறு-அடிப்படையிலான பிரித்தல்: தனிப்பட்ட கூறுகளுக்கான ஜாவாஸ்கிரிப்டை அவை காட்டப்படும்போது மட்டுமே ஏற்றவும்.
- டைனமிக் இறக்குமதிகள்: தேவைக்கேற்ப மாட்யூல்களை ஏற்ற
- தேவையற்ற பாலிஃபில்களைத் தவிர்க்கவும்: உங்கள் இலக்கு பார்வையாளர்களின் உலாவிகளில் உண்மையில் இல்லாத உலாவி அம்சங்களுக்கு மட்டுமே பாலிஃபில்களைச் சேர்க்கவும். Babel போன்ற கருவிகள் உங்கள் browserlist உள்ளமைவின் அடிப்படையில் தேவையான பாலிஃபில்களை மட்டும் சேர்க்கும்படி உள்ளமைக்கப்படலாம்.
- நவீன ஜாவாஸ்கிரிப்டைப் பயன்படுத்தவும்: பெரிய நூலகங்களின் தேவையைக் குறைக்கும் நவீன உலாவி திறன்களைப் பயன்படுத்தவும் (எ.கா., jQuery-இன் AJAX-க்கு பதிலாக நேட்டிவ் Fetch API, தீம் நிர்வாகத்திற்கு ஜாவாஸ்கிரிப்டுக்கு பதிலாக CSS மாறிகள்).
3. ஜாவாஸ்கிரிப்ட் செயல்படுத்தலை மேம்படுத்துங்கள்
ஒரு சிறிய, கிரிட்டிக்கல் ஸ்கிரிப்ட் கூட திறமையற்ற முறையில் செயல்படுத்தப்பட்டால் அல்லது பிரதான த்ரெட்டைத் தடுத்தால் செயல்திறன் சிக்கல்களை ஏற்படுத்தக்கூடும்.
- வெப் வொர்க்கர்கள்: கணக்கீட்டு ரீதியாக தீவிரமான பணிகளுக்கு (எ.கா., சிக்கலான தரவு செயலாக்கம், பட கையாளுதல், கனமான கணக்கீடுகள்), அவற்றை வெப் வொர்க்கர்களுக்கு ஆஃப்லோட் செய்யுங்கள். வெப் வொர்க்கர்கள் ஒரு தனி த்ரெட்டில் இயங்குகின்றன, இது பிரதான UI த்ரெட்டைத் தடுப்பதைத் தடுத்து பக்கத்தைப் பதிலளிக்கக்கூடியதாக வைத்திருக்கிறது. அவை செய்தி அனுப்புவதன் மூலம் பிரதான த்ரெட்டுடன் தொடர்பு கொள்கின்றன.
- டிபவுன்சிங் மற்றும் த்ராட்லிங்: அடிக்கடி தூண்டப்படும் நிகழ்வு கையாளுதல்களுக்கு (எ.கா.,
scroll,resize,mousemove,input), தொடர்புடைய ஜாவாஸ்கிரிப்ட் செயல்பாடு செயல்படுத்தப்படும் விகிதத்தைக் கட்டுப்படுத்த டிபவுன்சிங் அல்லது த்ராட்லிங்கைப் பயன்படுத்தவும். இது தேவையற்ற கணக்கீடுகள் மற்றும் DOM கையாளுதல்களைக் குறைக்கிறது.- டிபவுன்சிங்: ஒரு குறிப்பிட்ட கால செயலற்ற நிலைக்குப் பிறகு மட்டுமே ஒரு செயல்பாட்டை இயக்குகிறது.
- த்ராட்லிங்: ஒரு குறிப்பிட்ட நேர இடைவெளியில் ஒரு செயல்பாட்டை அதிகபட்சம் ஒரு முறை இயக்குகிறது.
- லூப்கள் மற்றும் அல்காரிதம்களை மேம்படுத்துங்கள்: உங்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டில் உள்ள எந்த லூப்கள் அல்லது சிக்கலான அல்காரிதம்களையும் மதிப்பாய்வு செய்து மேம்படுத்துங்கள். சிறிய திறமையின்மைகள் அடிக்கடி இயக்கப்படும்போது அல்லது பெரிய தரவுத்தொகுப்புகளில் வியத்தகு முறையில் அதிகரிக்கலாம்.
- அனிமேஷன்களுக்கு
requestAnimationFrame-ஐப் பயன்படுத்தவும்: மென்மையான காட்சி புதுப்பிப்புகள் மற்றும் அனிமேஷன்களுக்கு,requestAnimationFrame-ஐப் பயன்படுத்தவும். இது நீங்கள் ஒரு அனிமேஷனைச் செய்ய விரும்புவதாக உலாவிக்குத் தெரிவிக்கிறது மற்றும் உலாவியின் அடுத்த மறுவரைவுக்கு முன்பு ஒரு அனிமேஷனைப் புதுப்பிக்க ஒரு குறிப்பிட்ட செயல்பாட்டை அழைக்கக் கோருகிறது. இது புதுப்பிப்புகள் உலாவியின் ரெண்டரிங் சுழற்சியுடன் ஒத்திசைக்கப்படுவதை உறுதி செய்கிறது. - திறமையான DOM கையாளுதல்: விரிவான மற்றும் அடிக்கடி DOM கையாளுதல் விலையுயர்ந்த ரிஃப்ளோக்கள் மற்றும் ரிபெயின்ட்களைத் தூண்டக்கூடும். DOM புதுப்பிப்புகளைத் தொகுக்கவும் (எ.கா., ஒரு பிரிக்கப்பட்ட DOM உறுப்பு அல்லது DocumentFragment-இல் அனைத்து மாற்றங்களையும் செய்து, பின்னர் அதை ஒருமுறை சேர்க்கவும்). DOM-இல் எழுதிய உடனேயே கணக்கிடப்பட்ட ஸ்டைல்களைப் படிப்பதைத் தவிர்க்கவும் (
offsetHeightஅல்லதுgetBoundingClientRectபோன்றவை), ஏனெனில் இது ஒத்திசைவான ரிஃப்ளோக்களைக் கட்டாயப்படுத்தக்கூடும்.
4. திறமையான ஸ்கிரிப்ட் ஏற்றுதல் மற்றும் கேச்சிங்
ஸ்கிரிப்டுகள் எவ்வாறு வழங்கப்படுகின்றன மற்றும் சேமிக்கப்படுகின்றன என்பது கிரிட்டிக்கல் பாத் செயல்திறனை கணிசமாக பாதிக்கக்கூடும்.
- HTTP/2 மற்றும் HTTP/3: உங்கள் சர்வர் மற்றும் CDN ஆகியவை HTTP/2 அல்லது HTTP/3-ஐ ஆதரிக்கின்றன என்பதை உறுதிப்படுத்தவும். இந்த நெறிமுறைகள் மல்டிபிளெக்சிங் (ஒற்றை இணைப்பில் பல கோரிக்கைகள்/பதில்கள்), ஹெடர் சுருக்கம் மற்றும் சர்வர் புஷ் ஆகியவற்றை இயக்குகின்றன, இது HTTP/1.1-ஐ விட பல ஜாவாஸ்கிரிப்ட் கோப்புகளின் விநியோகத்தை வேகப்படுத்தக்கூடும்.
- கேச்சிங்கிற்கான சர்வீஸ் வொர்க்கர்கள்: கிரிட்டிக்கல் ஜாவாஸ்கிரிப்ட் கோப்புகளை (மற்றும் பிற சொத்துக்களை) அவற்றின் ஆரம்ப பதிவிறக்கத்திற்குப் பிறகு கேச் செய்ய சர்வீஸ் வொர்க்கர்களைச் செயல்படுத்தவும். திரும்பி வரும் பார்வையாளர்களுக்கு, இது கேச்சிலிருந்து இந்த வளங்களுக்கு உடனடி அணுகலைக் குறிக்கிறது, இது ஆஃப்லைனில் கூட ஏற்றுதல் நேரங்களை கணிசமாக மேம்படுத்துகிறது.
- உள்ளடக்க ஹேஷ்களுடன் நீண்ட கால கேச்சிங்: நிலையான ஜாவாஸ்கிரிப்ட் சொத்துக்களுக்கு, அவற்றின் கோப்புப்பெயர்களில் ஒரு உள்ளடக்க ஹேஷைச் சேர்க்கவும் (எ.கா.,
app.1a2b3c.js). இது மிக நீண்ட காலத்திற்கு ஆக்கிரோஷமான கேச்சிங் ஹெடர்களை (எ.கா.,Cache-Control: max-age=31536000) அமைக்க உங்களை அனுமதிக்கிறது. கோப்பு மாறும்போது, அதன் ஹேஷ் மாறுகிறது, இது உலாவியை புதிய பதிப்பைப் பதிவிறக்க கட்டாயப்படுத்துகிறது. - ப்ரீலோடிங் மற்றும் ப்ரீஃபெட்சிங்:
<link rel="preload">: ரெண்டரிங்கைத் தடுக்காமல், தற்போதைய வழிசெலுத்தலுக்கு மிகவும் முக்கியமான ஒரு வளத்தை முடிந்தவரை விரைவில் பெற உலாவிக்குத் தெரிவிக்கிறது. பார்சரால் தாமதமாகக் கண்டறியப்படும் கோப்புகளுக்குப் பயன்படுத்தவும் (எ.கா., டைனமிக் முறையில் ஏற்றப்பட்ட ஜாவாஸ்கிரிப்ட் கோப்பு அல்லது CSS-இன் ஆழத்தில் குறிப்பிடப்பட்டது).<link rel="prefetch">: எதிர்கால வழிசெலுத்தலுக்குத் தேவைப்படக்கூடிய ஒரு வளத்தைப் பெற உலாவிக்குத் தெரிவிக்கிறது. இது ஒரு குறைந்த முன்னுரிமை குறிப்பு மற்றும் தற்போதைய பக்கத்தின் ரெண்டரிங்கைத் தடுக்காது.- உதாரணம்:
<link rel="preload" href="/critical-script.js" as="script">
5. மூன்றாம் தரப்பு ஜாவாஸ்கிரிப்ட் மேம்படுத்தல்
மூன்றாம் தரப்பு ஸ்கிரிப்டுகள் (விளம்பரங்கள், அனலிட்டிக்ஸ், சமூக உட்பொதிவுகள்) பெரும்பாலும் அவற்றின் சொந்த செயல்திறன் செலவுகளுடன் வருகின்றன, இது கணிசமானதாக இருக்கலாம்.
- மூன்றாம் தரப்பு ஸ்கிரிப்டுகளைத் தணிக்கை செய்யுங்கள்: உங்கள் தளத்தில் ஏற்றப்பட்ட அனைத்து மூன்றாம் தரப்பு ஸ்கிரிப்டுகளையும் தவறாமல் மதிப்பாய்வு செய்யுங்கள். அவை அனைத்தும் தேவையா? ஏதேனும் அகற்றப்படலாமா அல்லது இலகுவான மாற்றுகளுடன் மாற்றப்படலாமா? சில ஸ்கிரிப்டுகள் கூட நகல் எடுக்கப்பட்டிருக்கலாம்.
asyncஅல்லதுdefer-ஐப் பயன்படுத்தவும்: மூன்றாம் தரப்பு ஸ்கிரிப்டுகளுக்கு எப்போதும்asyncஅல்லதுdeferபண்புக்கூறுகளைப் பயன்படுத்துங்கள். நீங்கள் பொதுவாக அவற்றின் உள்ளடக்கத்தின் மீது கட்டுப்பாடு கொண்டிருக்காததால், உங்கள் முதன்மை உள்ளடக்கத்தைத் தடுப்பதைத் தடுப்பது அவசியம்.- உட்பொதிவுகளை லேசி லோட் செய்யவும்: சமூக ஊடக உட்பொதிவுகளுக்கு (ட்விட்டர் ஃபீட்ஸ், யூடியூப் வீடியோக்கள்) அல்லது சிக்கலான விளம்பர அலகுகளுக்கு, அவற்றை லேசி லோட் செய்யுங்கள், இதனால் அவை வியூபோர்ட்டில் தெரியவரும்போது மட்டுமே ஏற்றப்படும்.
- முடிந்தால் சுயமாக ஹோஸ்ட் செய்யவும்: சில சிறிய, முக்கியமான மூன்றாம் தரப்பு நூலகங்களுக்கு (எ.கா., ஒரு குறிப்பிட்ட எழுத்துரு ஏற்றி, ஒரு சிறிய பயன்பாடு), அவற்றின் உரிமம் அனுமதித்தால் அவற்றை சுயமாக ஹோஸ்ட் செய்வதைக் கருத்தில் கொள்ளுங்கள். இது உங்களுக்கு கேச்சிங், விநியோகம் மற்றும் பதிப்பித்தல் மீது அதிக கட்டுப்பாட்டைக் கொடுக்கும், இருப்பினும் நீங்கள் புதுப்பிப்புகளுக்குப் பொறுப்பாவீர்கள்.
- செயல்திறன் பட்ஜெட்களை நிறுவவும்: அதிகபட்ச ஏற்றுக்கொள்ளக்கூடிய ஜாவாஸ்கிரிப்ட் பண்டில் அளவு மற்றும் செயல்படுத்தும் நேரத்திற்கு ஒரு பட்ஜெட்டை அமைக்கவும். இந்த பட்ஜெட்டில் மூன்றாம் தரப்பு ஸ்கிரிப்டுகளைச் சேர்க்கவும், அவை உங்கள் செயல்திறன் இலக்குகளை விகிதாசாரமாகப் பாதிக்காமல் இருப்பதை உறுதிசெய்ய.
நடைமுறை உதாரணங்கள் மற்றும் உலகளாவிய பரிசீலனைகள்
உலகளாவிய கண்ணோட்டத்தை மனதில் வைத்து, சில கருத்தியல் காட்சிகளுடன் இந்தக் கருத்துக்களை விளக்குவோம்:
வளரும் சந்தைகளில் மின்-வணிக தளம்
பரவலான 3G அல்லது 2G நெட்வொர்க் இணைப்புகள் மற்றும் பழைய ஸ்மார்ட்போன் மாடல்கள் உள்ள ஒரு பகுதியில் உள்ள பயனர்களை இலக்காகக் கொண்ட ஒரு மின்-வணிக வலைத்தளத்தைக் கருத்தில் கொள்ளுங்கள். ஆரம்பப் பக்கத்தில் ஒரு பெரிய ஜாவாஸ்கிரிப்ட் பண்டலை (எ.கா., சுருக்கத்திற்குப் பிறகு 500KB+) ஏற்றும் ஒரு தளம் பேரழிவாக இருக்கும். பயனர்கள் ஒரு வெற்று வெள்ளைத் திரை, நீண்ட ஏற்றுதல் ஸ்பின்னர்கள் மற்றும் சாத்தியமான விரக்தியை அனுபவிப்பார்கள். இந்த ஜாவாஸ்கிரிப்ட்டின் ஒரு பெரிய பகுதி அனலிட்டிக்ஸ், தனிப்பயனாக்குதல் இயந்திரங்கள் அல்லது ஒரு கனமான அரட்டை விட்ஜெட்டாக இருந்தால், அது FCP மற்றும் LCP-ஐ கடுமையாகப் பாதிக்கிறது.
- மேம்படுத்தல்: தயாரிப்பு பக்கங்கள், வகை பக்கங்கள் மற்றும் செக்அவுட் பாய்வுகளுக்கு ஆக்கிரோஷமான கோட் ஸ்பிளிட்டிங்கைச் செயல்படுத்தவும். பயனர் ஊடாட விருப்பம் காட்டும் வரை அல்லது குறிப்பிடத்தக்க தாமதத்திற்குப் பிறகு அரட்டை விட்ஜெட்டை லேசி லோட் செய்யவும். அனலிட்டிக்ஸ் ஸ்கிரிப்டுகளுக்கு
defer-ஐப் பயன்படுத்தவும். முக்கிய தயாரிப்பு படம் மற்றும் விளக்க ரெண்டரிங்கிற்கு முன்னுரிமை அளிக்கவும்.
ஏராளமான சமூக ஊடக விட்ஜெட்டுகளுடன் செய்தி போர்டல்
ஒரு உலகளாவிய செய்தி போர்டல் பெரும்பாலும் பல்வேறு வழங்குநர்களிடமிருந்து பல மூன்றாம் தரப்பு சமூக ஊடக பகிர்வு பொத்தான்கள், கருத்துப் பிரிவுகள் மற்றும் வீடியோ உட்பொதிவுகளை ஒருங்கிணைக்கிறது. இவை ஒத்திசைவாகவும் மேம்படுத்தல் இல்லாமலும் ஏற்றப்பட்டால், அவை ஜாவாஸ்கிரிப்ட் கிரிட்டிக்கல் பாத்தை கடுமையாகப் பெருக்கி, மெதுவான பக்க சுமைகள் மற்றும் தாமதமான TTI-க்கு வழிவகுக்கும்.
- மேம்படுத்தல்: அனைத்து சமூக ஊடக ஸ்கிரிப்டுகளுக்கும்
async-ஐப் பயன்படுத்தவும். கருத்துப் பிரிவுகள் மற்றும் வீடியோ உட்பொதிவுகளை லேசி லோட் செய்யவும், இதனால் பயனர் அவற்றை பார்வையில் ஸ்க்ரோல் செய்யும்போது மட்டுமே அவை ஏற்றப்படும். இலகுவான, தனிப்பயனாக்கப்பட்ட பகிர்வு பொத்தான்களைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள், அவை கிளிக்கில் மட்டுமே முழு மூன்றாம் தரப்பு ஸ்கிரிப்டையும் ஏற்றும்.
கண்டங்கள் முழுவதும் ஒற்றைப் பக்க பயன்பாடு (SPA) ஆரம்ப ஏற்றுதல்
ரியாக்ட், ஆங்குலர் அல்லது வூவுடன் உருவாக்கப்பட்ட ஒரு SPA கணிசமான ஆரம்ப ஜாவாஸ்கிரிப்ட் பண்டலைக் கொண்டிருக்கலாம். அடுத்தடுத்த வழிசெலுத்தல்கள் வேகமாக இருந்தாலும், முதல் ஏற்றுதல் வேதனையாக இருக்கலாம். ஃபைபர் இணைப்பில் உள்ள வட அமெரிக்காவில் உள்ள ஒரு பயனர் அதை அரிதாகவே கவனிக்கலாம், ஆனால் ஏற்ற இறக்கமான மொபைல் இணைப்பில் உள்ள தென்கிழக்கு ஆசியாவில் உள்ள ஒரு பயனர் கணிசமாக வேறுபட்ட முதல் தோற்றத்தை அனுபவிப்பார்.
- மேம்படுத்தல்: உடனடி FCP மற்றும் LCP-ஐ வழங்க ஆரம்ப உள்ளடக்கத்திற்கு சர்வர்-சைட் ரெண்டரிங் (SSR) அல்லது நிலையான தள உருவாக்கம் (SSG) ஆகியவற்றைச் செயல்படுத்தவும். இது சில ஜாவாஸ்கிரிப்ட் செயலாக்கத்தை சர்வருக்கு மாற்றுகிறது. இதை வெவ்வேறு வழிகள் மற்றும் அம்சங்களுக்கான ஆக்கிரோஷமான கோட் ஸ்பிளிட்டிங்குடன் இணைத்து, முக்கிய பயன்பாட்டு ஷெல்லுக்குத் தேவையான ஜாவாஸ்கிரிப்டுக்கு
<link rel="preload">-ஐப் பயன்படுத்தவும். ஆரம்ப ஹைட்ரேஷனின் போது எந்தவொரு கனமான கிளையன்ட்-சைட் கணக்கீடுகளுக்கும் வெப் வொர்க்கர்கள் பயன்படுத்தப்படுவதை உறுதிசெய்யவும்.
செயல்திறனைத் தொடர்ந்து அளவிடுதல் மற்றும் கண்காணித்தல்
மேம்படுத்தல் என்பது ஒரு முறை செய்யும் பணி அல்ல; அது ஒரு தொடர்ச்சியான செயல்முறை. வலை பயன்பாடுகள் உருவாகின்றன, சார்புகள் மாறுகின்றன, மற்றும் நெட்வொர்க் நிலைமைகள் உலகளவில் ஏற்ற இறக்கமாக உள்ளன. தொடர்ச்சியான அளவீடு மற்றும் கண்காணிப்பு அவசியம்.
- லேப் தரவு vs. ஃபீல்ட் தரவு:
- லேப் தரவு: ஒரு கட்டுப்படுத்தப்பட்ட சூழலில் சேகரிக்கப்பட்டது (எ.கா., லைட்ஹவுஸ், WebPageTest). பிழைத்திருத்தம் மற்றும் குறிப்பிட்ட தடைகளைக் கண்டறிவதற்கு சிறந்தது.
- ஃபீல்ட் தரவு (நிஜ பயனர் கண்காணிப்பு - RUM): உங்கள் தளத்துடன் ஊடாடும் உண்மையான பயனர்களிடமிருந்து சேகரிக்கப்பட்டது (எ.கா., கூகிள் அனலிட்டிக்ஸ், தனிப்பயன் RUM தீர்வுகள்). உலகளவில் மாறுபட்ட பயனர் புள்ளிவிவரங்கள், சாதனங்கள் மற்றும் நெட்வொர்க் நிலைமைகளில் நிஜ-உலக செயல்திறனைப் புரிந்துகொள்வதற்கு அவசியம். RUM கருவிகள் உங்கள் உண்மையான பயனர் தளத்திற்காக FCP, LCP, FID, CLS மற்றும் பிற தனிப்பயன் அளவீடுகளைக் கண்காணிக்க உதவும்.
- CI/CD பைப்லைன்களில் ஒருங்கிணைக்கவும்: உங்கள் தொடர்ச்சியான ஒருங்கிணைப்பு/தொடர்ச்சியான வரிசைப்படுத்தல் பணிப்பாய்வின் ஒரு பகுதியாக செயல்திறன் சோதனைகளைத் தானியங்குபடுத்துங்கள். Lighthouse CI போன்ற கருவிகள் ஒவ்வொரு புல் கோரிக்கை அல்லது வரிசைப்படுத்தலிலும் செயல்திறன் தணிக்கைகளை இயக்கலாம், அவை உற்பத்திக்குச் செல்வதற்கு முன்பு பின்னடைவுகளைக் கொடியிடும்.
- செயல்திறன் பட்ஜெட்களை அமைக்கவும்: குறிப்பிட்ட செயல்திறன் இலக்குகளை (எ.கா., அதிகபட்ச ஜாவாஸ்கிரிப்ட் பண்டில் அளவு, இலக்கு FCP/LCP/TTI மதிப்புகள்) நிறுவி, அவற்றுக்கு எதிராகக் கண்காணிக்கவும். இது புதிய அம்சங்கள் சேர்க்கப்படும்போது காலப்போக்கில் செயல்திறன் மோசமடைவதைத் தடுக்க உதவுகிறது.
மோசமான ஜாவாஸ்கிரிப்ட் செயல்திறனின் உலகளாவிய தாக்கம்
ஜாவாஸ்கிரிப்ட் கிரிட்டிக்கல் பாத் மேம்படுத்தலைப் புறக்கணிப்பதன் விளைவுகள் ஒரு வெறும் தொழில்நுட்பக் கோளாறுக்கு அப்பால் நீண்டுள்ளன:
- பல்வேறு பார்வையாளர்களுக்கான அணுகல்தன்மை: மெதுவான வலைத்தளங்கள் வரையறுக்கப்பட்ட அலைவரிசை, விலையுயர்ந்த தரவுத் திட்டங்கள், அல்லது பழைய, குறைந்த சக்திவாய்ந்த சாதனங்களைக் கொண்ட பயனர்களை விகிதாசாரமாகப் பாதிக்கின்றன. ஜாவாஸ்கிரிப்டை மேம்படுத்துவது உங்கள் தளம் ஒரு பரந்த உலகளாவிய மக்கள்தொகைக்கு அணுகக்கூடியதாகவும் பயன்படுத்தக்கூடியதாகவும் இருப்பதை உறுதி செய்கிறது.
- பயனர் அனுபவம் மற்றும் ஈடுபாடு: ஒரு வேகமான, பதிலளிக்கக்கூடிய வலைத்தளம் அதிக பயனர் திருப்தி, நீண்ட அமர்வுகள் மற்றும் அதிகரித்த ஈடுபாட்டிற்கு வழிவகுக்கிறது. மாறாக, மெதுவான பக்கங்கள் விரக்தி, அதிகரித்த பவுன்ஸ் விகிதங்கள் மற்றும் தளத்தில் குறைந்த நேரத்திற்கு வழிவகுக்கிறது, கலாச்சார சூழலைப் பொருட்படுத்தாமல்.
- தேடுபொறி உகப்பாக்கம் (SEO): தேடுபொறிகள், குறிப்பாக கூகிள், பக்க வேகம் மற்றும் கோர் வெப் வைட்டல்ஸை தரவரிசை காரணிகளாகப் பெருகிய முறையில் பயன்படுத்துகின்றன. மோசமான ஜாவாஸ்கிரிப்ட் செயல்திறன் உங்கள் தேடல் தரவரிசைகளை எதிர்மறையாகப் பாதிக்கலாம், இது உலகளவில் கரிம போக்குவரத்தைக் குறைக்கிறது.
- வணிக அளவீடுகள்: மின்-வணிக தளங்கள், உள்ளடக்க வெளியீட்டாளர்கள் அல்லது SaaS தளங்களுக்கு, மேம்பட்ட செயல்திறன் சிறந்த மாற்று விகிதங்கள், அதிக வருவாய் மற்றும் வலுவான பிராண்ட் விசுவாசத்துடன் நேரடியாகத் தொடர்புடையது. ஒவ்வொரு பிராந்தியத்திலும் வேகமாக ஏற்றும் ஒரு தளம் உலகளவில் சிறப்பாக மாற்றுகிறது.
- வள நுகர்வு: குறைவான ஜாவாஸ்கிரிப்ட் மற்றும் திறமையான செயல்படுத்தல் என்பது பயனர் சாதனங்களில் குறைவான CPU மற்றும் பேட்டரி நுகர்வைக் குறிக்கிறது, இது அனைத்து பயனர்களுக்கும், குறிப்பாக வரையறுக்கப்பட்ட சக்தி ஆதாரங்கள் அல்லது பழைய வன்பொருள் உள்ளவர்களுக்கு ஒரு அக்கறையுள்ள அம்சமாகும்.
ஜாவாஸ்கிரிப்ட் செயல்திறனில் எதிர்காலப் போக்குகள்
இணைய செயல்திறனின் நிலப்பரப்பு எப்போதும் உருவாகி வருகிறது. கிரிட்டிக்கல் பாத்தில் ஜாவாஸ்கிரிப்ட்டின் தாக்கத்தை மேலும் குறைக்கும் புதுமைகளைக் கவனியுங்கள்:
- வெப்அசெம்பிளி (Wasm): கணக்கீட்டு ரீதியாக தீவிரமான பணிகளுக்கு கிட்டத்தட்ட நேட்டிவ் செயல்திறனை வழங்குகிறது, இது டெவலப்பர்களை C++, Rust அல்லது Go போன்ற மொழிகளில் எழுதப்பட்ட குறியீட்டை இணையத்தில் இயக்க அனுமதிக்கிறது. ஜாவாஸ்கிரிப்ட்டின் செயல்படுத்தும் வேகம் ஒரு தடையாக இருக்கும் உங்கள் பயன்பாட்டின் பகுதிகளுக்கு இது ஒரு சக்திவாய்ந்த மாற்றாக இருக்கலாம்.
- பார்ட்டிடவுன்: மூன்றாம் தரப்பு ஸ்கிரிப்டுகளை ஒரு வெப் வொர்க்கருக்கு நகர்த்துவதை நோக்கமாகக் கொண்ட ஒரு நூலகம், அவற்றை பிரதான த்ரெட்டிலிருந்து ஆஃப்லோட் செய்து அவற்றின் செயல்திறன் தாக்கத்தை கணிசமாகக் குறைக்கிறது.
- கிளையன்ட் ஹிண்ட்ஸ்: பயனரின் சாதனம், நெட்வொர்க் மற்றும் பயனர்-ஏஜென்ட் விருப்பங்களை சர்வர்கள் முன்கூட்டியே புரிந்துகொள்ள அனுமதிக்கும் HTTP ஹெடர் புலங்களின் ஒரு தொகுப்பு, இது மேலும் மேம்படுத்தப்பட்ட வள விநியோகத்தை செயல்படுத்துகிறது (எ.கா., மெதுவான இணைப்புகளில் உள்ள பயனர்களுக்கு சிறிய படங்கள் அல்லது குறைவான ஸ்கிரிப்டுகளை வழங்குதல்).
முடிவுரை
ஜாவாஸ்கிரிப்ட் கிரிட்டிக்கல் பாத் பகுப்பாய்வு என்பது மெதுவான இணைய செயல்திறனின் மூல காரணங்களைக் கண்டறிந்து தீர்ப்பதற்கான ஒரு சக்திவாய்ந்த வழிமுறையாகும். ரெண்டர்-பிளாக்கிங் ஸ்கிரிப்டுகளை முறையாக அடையாளம் கண்டு, பேலோட் அளவுகளைக் குறைத்து, செயல்படுத்தலை மேம்படுத்தி, வளங்களை உத்தி ரீதியாக ஏற்றுவதன் மூலம், உங்கள் வலைத்தளத்தின் வேகம் மற்றும் பதிலளிப்பை நீங்கள் கணிசமாக மேம்படுத்தலாம். இது ஒரு தொழில்நுட்பப் பயிற்சி மட்டுமல்ல; இது ஒவ்வொரு தனிநபருக்கும், எல்லா இடங்களிலும் ஒரு சிறந்த பயனர் அனுபவத்தை வழங்குவதற்கான ஒரு அர்ப்பணிப்பு. ஒரு உண்மையான உலகளாவிய இணையத்தில், செயல்திறன் என்பது உலகளாவிய பச்சாதாபம்.
இன்றே இந்த உத்திகளைப் பயன்படுத்தத் தொடங்குங்கள். உங்கள் தளத்தைப் பகுப்பாய்வு செய்யுங்கள், மேம்படுத்தல்களைச் செயல்படுத்துங்கள், உங்கள் செயல்திறனைத் தொடர்ந்து கண்காணிக்கவும். உங்கள் பயனர்கள், உங்கள் வணிகம் மற்றும் உலகளாவிய இணையம் அதற்காக உங்களுக்கு நன்றி தெரிவிக்கும்.