ആഗോള വെബ് ഒപ്റ്റിമൈസേഷനായുള്ള ജാവാസ്ക്രിപ്റ്റ് ക്രിട്ടിക്കൽ പാത്ത് അനാലിസിസിനെക്കുറിച്ചുള്ള ഈ സമഗ്രമായ ഗൈഡ് ഉപയോഗിച്ച് വേഗതയേറിയ ലോഡിംഗ് സമയവും മികച്ച ഉപയോക്തൃ അനുഭവവും നേടൂ.
വെബ് പെർഫോമൻസ് മെച്ചപ്പെടുത്താം: ജാവാസ്ക്രിപ്റ്റ് ക്രിട്ടിക്കൽ പാത്ത് അനാലിസിസിനെക്കുറിച്ച് ഒരു ആഴത്തിലുള്ള പഠനം
ഇന്നത്തെ പരസ്പരം ബന്ധപ്പെട്ടിരിക്കുന്ന ഡിജിറ്റൽ ലോകത്ത്, വെബ് പെർഫോമൻസ് എന്നത് ഒരു നേട്ടം മാത്രമല്ല; അതൊരു അടിസ്ഥാനപരമായ പ്രതീക്ഷയാണ്. ലോകമെമ്പാടുമുള്ള ഉപയോക്താക്കൾ, അതിവേഗ ഫൈബർ ഒപ്റ്റിക്സുള്ള തിരക്കേറിയ നഗരങ്ങൾ മുതൽ നെറ്റ്വർക്ക് സ്ഥിരതയിൽ വ്യത്യാസമുള്ള വിദൂര പ്രദേശങ്ങൾ വരെ, തൽക്ഷണ ആക്‌സസും സുഗമമായ ഇടപെടലുകളും ആവശ്യപ്പെടുന്നു. ഒരു മികച്ച വെബിന്റെ ഹൃദയഭാഗത്ത് വിഭവങ്ങളുടെ കാര്യക്ഷമമായ വിതരണവും നിർവ്വഹണവുമാണ്, അതിൽ ജാവാസ്ക്രിപ്റ്റ് പലപ്പോഴും ഏറ്റവും പ്രധാനപ്പെട്ടതും ചിലപ്പോൾ ഏറ്റവും വെല്ലുവിളി നിറഞ്ഞതുമായ പങ്ക് വഹിക്കുന്നു. ഈ സമഗ്രമായ ഗൈഡ് നിങ്ങളെ ജാവാസ്ക്രിപ്റ്റ് ക്രിട്ടിക്കൽ പാത്ത് അനാലിസിസിലൂടെ ഒരു യാത്ര കൊണ്ടുപോകും, യഥാർത്ഥ ആഗോള ഉപയോക്താക്കൾക്കായി മിന്നൽ വേഗത്തിലുള്ള വെബ് അനുഭവങ്ങൾ നിർമ്മിക്കുന്നതിനുള്ള അറിവും പ്രായോഗിക തന്ത്രങ്ങളും നൽകും.
വെബ്സൈറ്റുകൾ കൂടുതൽ സങ്കീർണ്ണമാകുമ്പോൾ, പലപ്പോഴും അത്യാധുനിക ജാവാസ്ക്രിപ്റ്റ് ഫ്രെയിംവർക്കുകളും ലൈബ്രറികളും ഉപയോഗിക്കുമ്പോൾ, പെർഫോമൻസിലെ തടസ്സങ്ങൾക്കുള്ള സാധ്യത വർദ്ധിക്കുന്നു. ബ്രൗസറിന്റെ ക്രിട്ടിക്കൽ റെൻഡറിംഗ് പാത്തുമായി ജാവാസ്ക്രിപ്റ്റ് എങ്ങനെ സംവദിക്കുന്നു എന്ന് മനസ്സിലാക്കുന്നത്, ഉപയോക്താക്കളെയും ബിസിനസ്സ് ലക്ഷ്യങ്ങളെയും ബാധിക്കുന്നതിന് മുമ്പ് ഈ പ്രശ്നങ്ങൾ തിരിച്ചറിയുന്നതിനും പരിഹരിക്കുന്നതിനും അത്യന്താപേക്ഷിതമാണ്.
ക്രിട്ടിക്കൽ റെൻഡറിംഗ് പാത്ത് (CRP) മനസ്സിലാക്കാം
ജാവാസ്ക്രിപ്റ്റിന്റെ പങ്ക് വിശകലനം ചെയ്യുന്നതിന് മുമ്പ്, ക്രിട്ടിക്കൽ റെൻഡറിംഗ് പാത്തിനെ (CRP) കുറിച്ച് അടിസ്ഥാനപരമായ ധാരണ നേടാം. HTML, CSS, JavaScript എന്നിവയെ സ്ക്രീനിൽ കാണുന്ന യഥാർത്ഥ പിക്സലുകളായി മാറ്റാൻ ബ്രൗസർ സ്വീകരിക്കുന്ന ഘട്ടങ്ങളുടെ ക്രമമാണ് CRP. CRP ഒപ്റ്റിമൈസ് ചെയ്യുക എന്നതിനർത്ഥം ഉപയോക്താവിന് ഉടനടി ദൃശ്യമാകുന്ന ഉള്ളടക്കത്തിന്റെ പ്രദർശനത്തിന് മുൻഗണന നൽകുക, അതുവഴി പെർഫോമൻസും ഉപയോക്തൃ അനുഭവവും മെച്ചപ്പെടുത്തുക എന്നതാണ്. ഇതിലെ പ്രധാന ഘട്ടങ്ങൾ ഇവയാണ്:
- DOM നിർമ്മാണം (ഡോക്യുമെൻ്റ് ഒബ്ജക്റ്റ് മോഡൽ): ബ്രൗസർ HTML ഡോക്യുമെൻ്റ് പാഴ്സ് ചെയ്യുകയും പേജിന്റെ ഘടനയെയും ഉള്ളടക്കത്തെയും പ്രതിനിധീകരിക്കുന്ന DOM ട്രീ നിർമ്മിക്കുകയും ചെയ്യുന്നു.
- CSSOM നിർമ്മാണം (CSS ഒബ്ജക്റ്റ് മോഡൽ): DOM ഘടകങ്ങളുടെ സ്റ്റൈലിംഗ് നിർണ്ണയിക്കുന്ന CSSOM ട്രീ നിർമ്മിക്കുന്നതിന് ബ്രൗസർ CSS ഫയലുകളും ഇൻലൈൻ സ്റ്റൈലുകളും പാഴ്സ് ചെയ്യുന്നു.
- റെൻഡർ ട്രീ നിർമ്മാണം: DOM, CSSOM ട്രീകൾ സംയോജിപ്പിച്ച് റെൻഡർ ട്രീ രൂപീകരിക്കുന്നു. ഈ ട്രീയിൽ ദൃശ്യമായ ഘടകങ്ങളും അവയുടെ കണക്കുകൂട്ടിയ സ്റ്റൈലുകളും മാത്രമേ അടങ്ങിയിട്ടുള്ളൂ.
<head>അല്ലെങ്കിൽdisplay: none;പോലുള്ള ഘടകങ്ങൾ ഉൾപ്പെടുത്തിയിട്ടില്ല. - ലേഔട്ട് (റിഫ്ലോ): റെൻഡർ ട്രീ നിർമ്മിച്ചുകഴിഞ്ഞാൽ, ബ്രൗസർ സ്ക്രീനിലെ എല്ലാ ഘടകങ്ങളുടെയും കൃത്യമായ സ്ഥാനവും വലുപ്പവും കണക്കാക്കുന്നു. ഇത് കമ്പ്യൂട്ടേഷണലായി വളരെ ഭാരമേറിയ ഒരു പ്രക്രിയയാണ്.
- പെയിൻ്റ്: ഓരോ ഘടകത്തിൻ്റെയും വിഷ്വൽ പ്രോപ്പർട്ടികൾ (നിറങ്ങൾ, ബോർഡറുകൾ, ഷാഡോകൾ, ടെക്സ്റ്റ്, ചിത്രങ്ങൾ) പ്രയോഗിച്ച് ബ്രൗസർ സ്ക്രീനിൽ പിക്സലുകൾ വരയ്ക്കുന്ന അവസാന ഘട്ടമാണിത്.
- കോമ്പോസിറ്റിംഗ്: ഘടകങ്ങൾ ലെയറുകളായോ ആനിമേറ്റഡായോ ആണെങ്കിൽ, ബ്രൗസർ അവയെ ലെയറുകളായി വേർതിരിച്ച് അന്തിമ റെൻഡറിംഗിനായി ശരിയായ ക്രമത്തിൽ ഒരുമിച്ച് ചേർക്കാം.
CRP ഒപ്റ്റിമൈസേഷന്റെ ലക്ഷ്യം ഈ ഘട്ടങ്ങളിൽ ചെലവഴിക്കുന്ന സമയം കുറയ്ക്കുക എന്നതാണ്, പ്രത്യേകിച്ചും പ്രാരംഭ കാഴ്‌ചയിലുള്ള ഉള്ളടക്കത്തിന്, ഇതിനെ "above-the-fold" ഉള്ളടക്കം എന്ന് പറയാറുണ്ട്. ഈ ഘട്ടങ്ങളെ, പ്രത്യേകിച്ച് റെൻഡർ ട്രീയുടെ നിർമ്മാണത്തെ, വൈകിപ്പിക്കുന്ന ഏതൊരു വിഭവത്തെയും റെൻഡർ-ബ്ലോക്കിംഗ് ആയി കണക്കാക്കുന്നു.
ക്രിട്ടിക്കൽ റെൻഡറിംഗ് പാത്തിൽ ജാവാസ്ക്രിപ്റ്റിന്റെ സ്വാധീനം
ജാവാസ്ക്രിപ്റ്റ് ഒരു ശക്തമായ ഭാഷയാണ്, എന്നാൽ അതിന്റെ സ്വഭാവം CRP-യിൽ കാര്യമായ കാലതാമസം വരുത്താൻ സാധ്യതയുണ്ട്. എന്തുകൊണ്ടെന്നാൽ:
- പാഴ്‌സർ-ബ്ലോക്കിംഗ് സ്വഭാവം: ഡിഫോൾട്ടായി, ബ്രൗസറിന്റെ HTML പാഴ്‌സർ
asyncഅല്ലെങ്കിൽdeferആട്രിബ്യൂട്ട് ഇല്ലാത്ത ഒരു<script>ടാഗ് കാണുമ്പോൾ, അത് HTML പാഴ്സിംഗ് നിർത്തുന്നു. ഇത് സ്ക്രിപ്റ്റ് ഡൗൺലോഡ് ചെയ്യുകയും (അത് എക്സ്റ്റേണൽ ആണെങ്കിൽ), എക്സിക്യൂട്ട് ചെയ്യുകയും, അതിനുശേഷം മാത്രമേ HTML-ന്റെ ബാക്കി ഭാഗം പാഴ്സ് ചെയ്യുന്നത് പുനരാരംഭിക്കുകയുള്ളൂ. കാരണം, ജാവാസ്ക്രിപ്റ്റിന് DOM അല്ലെങ്കിൽ CSSOM മാറ്റാൻ സാധ്യതയുണ്ട്, അതിനാൽ പേജ് ഘടന നിർമ്മിക്കുന്നത് തുടരുന്നതിന് മുമ്പ് ബ്രൗസർ അത് എക്സിക്യൂട്ട് ചെയ്യണം. ഈ നിർത്തിവെക്കൽ ഒരു പ്രധാന തടസ്സമാണ്. - DOM, CSSOM മാനിപ്പുലേഷൻ: ജാവാസ്ക്രിപ്റ്റ് പലപ്പോഴും DOM, CSSOM എന്നിവയുമായി സംവദിക്കുകയും മാറ്റങ്ങൾ വരുത്തുകയും ചെയ്യുന്നു. ഈ ട്രീകൾ പൂർണ്ണമായി നിർമ്മിക്കുന്നതിന് മുമ്പ് സ്ക്രിപ്റ്റുകൾ പ്രവർത്തിക്കുകയാണെങ്കിൽ, അല്ലെങ്കിൽ അവ വിപുലമായ മാറ്റങ്ങൾക്ക് കാരണമാകുകയാണെങ്കിൽ, ബ്രൗസറിനെ ലേഔട്ടുകൾ വീണ്ടും കണക്കാക്കാനും (റിഫ്ലോകൾ) ഘടകങ്ങൾ വീണ്ടും പെയിൻ്റ് ചെയ്യാനും ഇത് നിർബന്ധിതരാക്കും, ഇത് വലിയ പെർഫോമൻസ് ഓവർഹെഡിന് കാരണമാകും.
- നെറ്റ്വർക്ക് അഭ്യർത്ഥനകൾ: എക്സ്റ്റേണൽ ജാവാസ്ക്രിപ്റ്റ് ഫയലുകൾക്ക് നെറ്റ്വർക്ക് അഭ്യർത്ഥനകൾ ആവശ്യമാണ്. ഒരു ഉപയോക്താവിന് ലഭ്യമായ ലേറ്റൻസിയും ബാൻഡ്‌വിഡ്ത്തും ഈ ഫയലുകൾ എത്ര വേഗത്തിൽ ഡൗൺലോഡ് ചെയ്യാമെന്നതിനെ നേരിട്ട് ബാധിക്കുന്നു. അസ്ഥിരമായ ഇൻ്റർനെറ്റ് ഇൻഫ്രാസ്ട്രക്ചറുള്ള പ്രദേശങ്ങളിലെ ഉപയോക്താക്കൾക്ക് ഇത് കാര്യമായ കാലതാമസമുണ്ടാക്കാം.
- എക്സിക്യൂഷൻ സമയം: ഡൗൺലോഡ് ചെയ്‌തതിന് ശേഷവും, സങ്കീർണ്ണമോ മോശമായി ഒപ്റ്റിമൈസ് ചെയ്തതോ ആയ ജാവാസ്ക്രിപ്റ്റ് ഉപയോക്താവിൻ്റെ ഉപകരണത്തിൽ പാഴ്സ് ചെയ്യാനും എക്സിക്യൂട്ട് ചെയ്യാനും കാര്യമായ സമയമെടുക്കും. ചില ആഗോള വിപണികളിൽ സാധാരണമായേക്കാവുന്ന താഴ്ന്ന നിലവാരത്തിലുള്ള ഉപകരണങ്ങളിലോ പഴയ മൊബൈൽ ഫോണുകളിലോ ഇത് പ്രത്യേകിച്ചും പ്രശ്നമാണ്, കാരണം അവയ്ക്ക് ശക്തി കുറഞ്ഞ സിപിയു-കൾ ആണുള്ളത്.
- തേർഡ്-പാർട്ടി സ്ക്രിപ്റ്റുകൾ: അനലിറ്റിക്സ്, പരസ്യങ്ങൾ, സോഷ്യൽ മീഡിയ വിഡ്ജറ്റുകൾ, മറ്റ് തേർഡ്-പാർട്ടി സ്ക്രിപ്റ്റുകൾ എന്നിവ പലപ്പോഴും അധിക നെറ്റ്വർക്ക് അഭ്യർത്ഥനകളും എക്സിക്യൂഷൻ ഓവർഹെഡും ഉണ്ടാക്കുന്നു, ഇത് പലപ്പോഴും ഡെവലപ്പറുടെ നേരിട്ടുള്ള നിയന്ത്രണത്തിന് പുറത്താണ്. ഇവ ജാവാസ്ക്രിപ്റ്റ് ക്രിട്ടിക്കൽ പാത്തിനെ ഗണ്യമായി വർദ്ധിപ്പിക്കും.
ചുരുക്കത്തിൽ, ഡൈനാമിക് അനുഭവങ്ങൾ ഒരുക്കാൻ ജാവാസ്ക്രിപ്റ്റിന് കഴിയും, എന്നാൽ ശ്രദ്ധാപൂർവ്വം കൈകാര്യം ചെയ്തില്ലെങ്കിൽ, പേജ് ലോഡിംഗ് വേഗത കുറയ്ക്കുന്നതിനും പ്രതികരണശേഷിയില്ലാത്ത യൂസർ ഇൻ്റർഫേസുകൾക്കും ഏറ്റവും വലിയ കാരണക്കാരനാകാനും ഇതിന് കഴിയും.
എന്താണ് ജാവാസ്ക്രിപ്റ്റിനായുള്ള ക്രിട്ടിക്കൽ പാത്ത് അനാലിസിസ്?
ബ്രൗസറിന്റെ ക്രിട്ടിക്കൽ റെൻഡറിംഗ് പാത്തിനെയും മൊത്തത്തിലുള്ള പേജ് ലോഡ് പെർഫോമൻസിനെയും കാര്യമായി ബാധിക്കുന്ന ജാവാസ്ക്രിപ്റ്റ് കോഡ് തിരിച്ചറിയുന്നതിനും, അളക്കുന്നതിനും, ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനുമുള്ള ഒരു വ്യവസ്ഥാപിത പ്രക്രിയയാണ് ജാവാസ്ക്രിപ്റ്റ് ക്രിട്ടിക്കൽ പാത്ത് അനാലിസിസ്. ഇതിൽ താഴെ പറയുന്ന കാര്യങ്ങൾ മനസ്സിലാക്കുന്നത് ഉൾപ്പെടുന്നു:
- ഏതൊക്കെ ജാവാസ്ക്രിപ്റ്റ് ഫയലുകളാണ് റെൻഡർ-ബ്ലോക്കിംഗ്.
- ഈ സ്ക്രിപ്റ്റുകൾ ഡൗൺലോഡ് ചെയ്യാനും, പാഴ്സ് ചെയ്യാനും, കംപൈൽ ചെയ്യാനും, എക്സിക്യൂട്ട് ചെയ്യാനും എത്ര സമയം എടുക്കുന്നു.
- ഫസ്റ്റ് കണ്ടന്റ്ഫുൾ പെയിൻ്റ് (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 നിരവധി സവിശേഷതകൾ വാഗ്ദാനം ചെയ്യുന്നു.
- പെർഫോമൻസ് പാനൽ:
- മുഴുവൻ ക്രിട്ടിക്കൽ റെൻഡറിംഗ് പാത്തും ദൃശ്യവൽക്കരിക്കുന്നതിന് ഒരു പേജ് ലോഡ് റെക്കോർഡ് ചെയ്യുക. സ്ക്രിപ്റ്റുകൾ എപ്പോൾ ഡൗൺലോഡ് ചെയ്യപ്പെടുന്നു, പാഴ്സ് ചെയ്യപ്പെടുന്നു, കംപൈൽ ചെയ്യപ്പെടുന്നു, എക്സിക്യൂട്ട് ചെയ്യപ്പെടുന്നു എന്ന് നിങ്ങൾക്ക് കാണാൻ കഴിയും.
- "ലോംഗ് ടാസ്ക്കുകൾ" (50ms-ൽ കൂടുതൽ പ്രധാന ത്രെഡിനെ ബ്ലോക്ക് ചെയ്യുന്ന ജാവാസ്ക്രിപ്റ്റ് ടാസ്ക്കുകൾ) തിരിച്ചറിയുക, ഇത് TBT-യിലേക്കും FID-യിലേക്കും സംഭാവന ചെയ്യുന്നു.
- സിപിയു ഉപയോഗം വിശകലനം ചെയ്യുകയും ഏറ്റവും കൂടുതൽ പ്രോസസ്സിംഗ് പവർ ഉപയോഗിക്കുന്ന ഫംഗ്ഷനുകൾ തിരിച്ചറിയുകയും ചെയ്യുക.
- ഫ്രെയിം റേറ്റുകൾ, ലേഔട്ട് ഷിഫ്റ്റുകൾ, പെയിന്റിംഗ് ഇവന്റുകൾ എന്നിവ ദൃശ്യവൽക്കരിക്കുക.
- നെറ്റ്വർക്ക് പാനൽ:
- എല്ലാ നെറ്റ്വർക്ക് അഭ്യർത്ഥനകളും (HTML, CSS, JS, ചിത്രങ്ങൾ, ഫോണ്ടുകൾ) നിരീക്ഷിക്കുക.
- അഭ്യർത്ഥിച്ച എല്ലാ ജാവാസ്ക്രിപ്റ്റ് ഫയലുകളും കാണുന്നതിന് "JS" ഉപയോഗിച്ച് ഫിൽട്ടർ ചെയ്യുക.
- ഡൗൺലോഡ് വലുപ്പങ്ങൾ, ട്രാൻസ്ഫർ സമയങ്ങൾ, അഭ്യർത്ഥന മുൻഗണനകൾ എന്നിവ നിരീക്ഷിക്കുക.
- റെൻഡർ-ബ്ലോക്കിംഗ് സ്ക്രിപ്റ്റുകൾ തിരിച്ചറിയുക (പലപ്പോഴും വാട്ടർഫാൾ ഡയഗ്രാമിൽ അവയുടെ ആദ്യ സ്ഥാനത്ത് സൂചിപ്പിക്കുന്നു).
- വ്യത്യസ്ത ആഗോള ഉപയോക്താക്കളിൽ പെർഫോമൻസ് സ്വാധീനം മനസ്സിലാക്കാൻ വിവിധ നെറ്റ്വർക്ക് സാഹചര്യങ്ങൾ (ഉദാ: "Fast 3G", "Slow 3G") അനുകരിക്കുക.
- കവറേജ് പാനൽ:
- ഉപയോഗിക്കാത്ത ജാവാസ്ക്രിപ്റ്റും CSS കോഡും തിരിച്ചറിയുന്നു. ഒരു സാധാരണ പേജ് ലോഡിനിടെ നിങ്ങളുടെ കോഡിന്റെ ഏത് ഭാഗങ്ങളാണ് എക്സിക്യൂട്ട് ചെയ്യാത്തതെന്ന് കാണിക്കുന്നതിലൂടെ ബണ്ടിൽ വലുപ്പം കുറയ്ക്കുന്നതിന് ഇത് വിലമതിക്കാനാവാത്തതാണ്.
- യഥാർത്ഥത്തിൽ ആവശ്യമുള്ള ക്രിട്ടിക്കൽ ജാവാസ്ക്രിപ്റ്റും അനാവശ്യമായി ലോഡ് ചെയ്യുന്നതും തമ്മിലുള്ള വ്യത്യാസം മനസ്സിലാക്കാൻ സഹായിക്കുന്നു.
- ലൈറ്റ്ഹൗസ്:
- പെർഫോമൻസ്, ആക്സസിബിലിറ്റി, SEO, മികച്ച രീതികൾ എന്നിവയ്ക്കായി ഒരു ഓഡിറ്റ് നൽകുന്ന Chrome DevTools-ൽ സംയോജിപ്പിച്ചിട്ടുള്ള ഒരു ഓട്ടോമേറ്റഡ് ടൂൾ.
- "റെൻഡർ-ബ്ലോക്കിംഗ് റിസോഴ്സുകൾ ഒഴിവാക്കുക," "ജാവാസ്ക്രിപ്റ്റ് എക്സിക്യൂഷൻ സമയം കുറയ്ക്കുക," "ഉപയോഗിക്കാത്ത ജാവാസ്ക്രിപ്റ്റ് നീക്കം ചെയ്യുക" തുടങ്ങിയ ജാവാസ്ക്രിപ്റ്റുമായി ബന്ധപ്പെട്ട പ്രായോഗിക നിർദ്ദേശങ്ങൾ നൽകുന്നു.
- 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 എലമെന്റിലോ ഡോക്യുമെൻ്റ്ഫ്രാഗ്മെൻ്റിലോ എല്ലാ മാറ്റങ്ങളും വരുത്തുക, തുടർന്ന് അത് ഒരു തവണ ചേർക്കുക). 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) ഭൂഖണ്ഡങ്ങളിലുടനീളമുള്ള പ്രാരംഭ ലോഡ്
React, Angular, അല്ലെങ്കിൽ Vue ഉപയോഗിച്ച് നിർമ്മിച്ച ഒരു SPA-ക്ക് ഗണ്യമായ പ്രാരംഭ ജാവാസ്ക്രിപ്റ്റ് ബണ്ടിൽ ഉണ്ടായിരിക്കാം. തുടർന്നുള്ള നാവിഗേഷനുകൾ വേഗതയുള്ളതാണെങ്കിലും, ആദ്യത്തെ ലോഡ് വേദനാജനകമാണ്. ഫൈബർ കണക്ഷനുള്ള വടക്കേ അമേരിക്കയിലെ ഒരു ഉപയോക്താവ് ഇത് ശ്രദ്ധിക്കണമെന്നില്ല, എന്നാൽ തെക്കുകിഴക്കൻ ഏഷ്യയിലെ ഒരു അസ്ഥിരമായ മൊബൈൽ കണക്ഷനിലുള്ള ഉപയോക്താവിന് തികച്ചും വ്യത്യസ്തമായ ആദ്യ അനുഭവം ഉണ്ടാകും.
- ഒപ്റ്റിമൈസേഷൻ: പ്രാരംഭ ഉള്ളടക്കത്തിനായി സെർവർ-സൈഡ് റെൻഡറിംഗ് (SSR) അല്ലെങ്കിൽ സ്റ്റാറ്റിക് സൈറ്റ് ജനറേഷൻ (SSG) നടപ്പിലാക്കി ഉടനടി FCP, LCP എന്നിവ നൽകുക. ഇത് ചില ജാവാസ്ക്രിപ്റ്റ് പ്രോസസ്സിംഗ് സെർവറിലേക്ക് മാറ്റുന്നു. ഇത് വ്യത്യസ്ത റൂട്ടുകൾക്കും ഫീച്ചറുകൾക്കുമായി അഗ്രസ്സീവ് കോഡ് സ്പ്ലിറ്റിംഗുമായി സംയോജിപ്പിക്കുക, പ്രധാന ആപ്ലിക്കേഷൻ ഷെല്ലിന് ആവശ്യമായ ജാവാസ്ക്രിപ്റ്റിനായി
<link rel="preload">ഉപയോഗിക്കുക. പ്രാരംഭ ഹൈഡ്രേഷനിൽ ഏതെങ്കിലും കനത്ത ക്ലയിന്റ്-സൈഡ് കണക്കുകൂട്ടലുകൾക്കായി വെബ് വർക്കേഴ്സ് ഉപയോഗിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക.
പെർഫോമൻസ് തുടർച്ചയായി അളക്കുകയും നിരീക്ഷിക്കുകയും ചെയ്യുക
ഒപ്റ്റിമൈസേഷൻ ഒരു തവണത്തെ ജോലിയല്ല; അതൊരു തുടർ പ്രക്രിയയാണ്. വെബ് ആപ്ലിക്കേഷനുകൾ വികസിക്കുന്നു, ആശ്രിതത്വങ്ങൾ മാറുന്നു, നെറ്റ്വർക്ക് സാഹചര്യങ്ങൾ ആഗോളതലത്തിൽ വ്യത്യാസപ്പെടുന്നു. തുടർച്ചയായ അളവുകളും നിരീക്ഷണവും അത്യാവശ്യമാണ്.
- ലാബ് ഡാറ്റയും ഫീൽഡ് ഡാറ്റയും:
- ലാബ് ഡാറ്റ: ഒരു നിയന്ത്രിത പരിതസ്ഥിതിയിൽ ശേഖരിച്ചത് (ഉദാ: ലൈറ്റ്ഹൗസ്, വെബ്പേജ്ടെസ്റ്റ്). ഡീബഗ്ഗിംഗിനും നിർദ്ദിഷ്ട തടസ്സങ്ങൾ തിരിച്ചറിയുന്നതിനും മികച്ചതാണ്.
- ഫീൽഡ് ഡാറ്റ (റിയൽ യൂസർ മോണിറ്ററിംഗ് - RUM): നിങ്ങളുടെ സൈറ്റുമായി സംവദിക്കുന്ന യഥാർത്ഥ ഉപയോക്താക്കളിൽ നിന്ന് ശേഖരിച്ചത് (ഉദാ: ഗൂഗിൾ അനലിറ്റിക്സ്, കസ്റ്റം RUM സൊല്യൂഷനുകൾ). ആഗോളതലത്തിൽ വൈവിധ്യമാർന്ന ഉപയോക്തൃ ഡെമോഗ്രാഫിക്സ്, ഉപകരണങ്ങൾ, നെറ്റ്വർക്ക് സാഹചര്യങ്ങൾ എന്നിവയിലുടനീളമുള്ള യഥാർത്ഥ പ്രകടനം മനസ്സിലാക്കാൻ അത്യാവശ്യമാണ്. RUM ടൂളുകൾക്ക് നിങ്ങളുടെ യഥാർത്ഥ ഉപയോക്തൃ അടിത്തറയ്ക്കായി FCP, LCP, FID, CLS, മറ്റ് കസ്റ്റം മെട്രിക്കുകൾ എന്നിവ ട്രാക്ക് ചെയ്യാൻ സഹായിക്കും.
- CI/CD പൈപ്പ്ലൈനുകളിൽ സംയോജിപ്പിക്കുക: നിങ്ങളുടെ കണ്ടിന്യൂവസ് ഇൻ്റഗ്രേഷൻ/കണ്ടിന്യൂവസ് ഡിപ്ലോയ്മെൻ്റ് വർക്ക്ഫ്ലോയുടെ ഭാഗമായി പ്രകടന പരിശോധനകൾ ഓട്ടോമേറ്റ് ചെയ്യുക. Lighthouse CI പോലുള്ള ടൂളുകൾക്ക് ഓരോ പുൾ അഭ്യർത്ഥനയിലോ വിന്യാസത്തിലോ പ്രകടന ഓഡിറ്റുകൾ പ്രവർത്തിപ്പിക്കാനും പ്രൊഡക്ഷനിൽ എത്തുന്നതിന് മുമ്പ് റിഗ്രഷനുകൾ ഫ്ലാഗ് ചെയ്യാനും കഴിയും.
- പെർഫോമൻസ് ബജറ്റുകൾ സജ്ജമാക്കുക: നിർദ്ദിഷ്ട പ്രകടന ലക്ഷ്യങ്ങൾ സ്ഥാപിക്കുക (ഉദാ: പരമാവധി ജാവാസ്ക്രിപ്റ്റ് ബണ്ടിൽ വലുപ്പം, ടാർഗെറ്റ് FCP/LCP/TTI മൂല്യങ്ങൾ) അവയ്‌ക്കെതിരെ നിരീക്ഷിക്കുക. പുതിയ ഫീച്ചറുകൾ ചേർക്കുമ്പോൾ കാലക്രമേണ പ്രകടനം കുറയുന്നത് തടയാൻ ഇത് സഹായിക്കുന്നു.
മോശം ജാവാസ്ക്രിപ്റ്റ് പെർഫോമൻസിന്റെ ആഗോള ആഘാതം
ജാവാസ്ക്രിപ്റ്റ് ക്രിട്ടിക്കൽ പാത്ത് ഒപ്റ്റിമൈസേഷൻ അവഗണിക്കുന്നതിന്റെ അനന്തരഫലങ്ങൾ കേവലം ഒരു സാങ്കേതിക തകരാറിനപ്പുറം വ്യാപിക്കുന്നു:
- വൈവിധ്യമാർന്ന പ്രേക്ഷകർക്കുള്ള പ്രവേശനക്ഷമത: വേഗത കുറഞ്ഞ വെബ്സൈറ്റുകൾ പരിമിതമായ ബാൻഡ്‌വിഡ്ത്ത്, വിലയേറിയ ഡാറ്റാ പ്ലാനുകൾ, അല്ലെങ്കിൽ പഴയതും ശക്തി കുറഞ്ഞതുമായ ഉപകരണങ്ങളുള്ള ഉപയോക്താക്കളെ അനുപാതമില്ലാതെ ബാധിക്കുന്നു. ജാവാസ്ക്രിപ്റ്റ് ഒപ്റ്റിമൈസ് ചെയ്യുന്നത് നിങ്ങളുടെ സൈറ്റ് വിശാലമായ ആഗോള ജനവിഭാഗത്തിന് ആക്സസ് ചെയ്യാവുന്നതും ഉപയോഗയോഗ്യവുമാണെന്ന് ഉറപ്പാക്കുന്നു.
- ഉപയോക്തൃ അനുഭവവും ഇടപഴകലും: വേഗതയേറിയതും പ്രതികരണശേഷിയുള്ളതുമായ ഒരു വെബ്സൈറ്റ് ഉയർന്ന ഉപയോക്തൃ സംതൃപ്തിക്കും, ദൈർഘ്യമേറിയ സെഷനുകൾക്കും, വർദ്ധിച്ച ഇടപഴകലിനും കാരണമാകുന്നു. നേരെമറിച്ച്, വേഗത കുറഞ്ഞ പേജുകൾ സാംസ്കാരിക പശ്ചാത്തലം പരിഗണിക്കാതെ നിരാശയ്ക്കും, ഉയർന്ന ബൗൺസ് നിരക്കുകൾക്കും, സൈറ്റിൽ കുറഞ്ഞ സമയം ചെലവഴിക്കുന്നതിനും കാരണമാകുന്നു.
- സെർച്ച് എഞ്ചിൻ ഒപ്റ്റിമൈസേഷൻ (SEO): സെർച്ച് എഞ്ചിനുകൾ, പ്രത്യേകിച്ച് ഗൂഗിൾ, പേജ് വേഗതയും കോർ വെബ് വൈറ്റൽസും റാങ്കിംഗ് ഘടകങ്ങളായി കൂടുതലായി ഉപയോഗിക്കുന്നു. മോശം ജാവാസ്ക്രിപ്റ്റ് പ്രകടനം നിങ്ങളുടെ തിരയൽ റാങ്കിംഗിനെ പ്രതികൂലമായി ബാധിക്കും, ഇത് ലോകമെമ്പാടുമുള്ള ഓർഗാനിക് ട്രാഫിക് കുറയ്ക്കുന്നു.
- ബിസിനസ്സ് മെട്രിക്കുകൾ: ഇ-കൊമേഴ്‌സ് സൈറ്റുകൾ, ഉള്ളടക്ക പ്രസാധകർ, അല്ലെങ്കിൽ SaaS പ്ലാറ്റ്‌ഫോമുകൾ എന്നിവയ്ക്ക്, മെച്ചപ്പെട്ട പ്രകടനം മികച്ച പരിവർത്തന നിരക്കുകൾ, ഉയർന്ന വരുമാനം, ശക്തമായ ബ്രാൻഡ് ലോയൽറ്റി എന്നിവയുമായി നേരിട്ട് ബന്ധപ്പെട്ടിരിക്കുന്നു. എല്ലാ പ്രദേശങ്ങളിലും വേഗത്തിൽ ലോഡ് ചെയ്യുന്ന ഒരു സൈറ്റ് ആഗോളതലത്തിൽ മികച്ച രീതിയിൽ പരിവർത്തനം ചെയ്യുന്നു.
- വിഭവ ഉപഭോഗം: കുറഞ്ഞ ജാവാസ്ക്രിപ്റ്റും കൂടുതൽ കാര്യക്ഷമമായ എക്സിക്യൂഷനും അർത്ഥമാക്കുന്നത് ഉപയോക്തൃ ഉപകരണങ്ങളിൽ കുറഞ്ഞ സിപിയു, ബാറ്ററി ഉപഭോഗം എന്നാണ്, ഇത് എല്ലാ ഉപയോക്താക്കൾക്കും പരിഗണന നൽകുന്ന ഒരു വശമാണ്, പ്രത്യേകിച്ച് പരിമിതമായ പവർ സ്രോതസ്സുകളോ പഴയ ഹാർഡ്‌വെയറോ ഉള്ളവർക്ക്.
ജാവാസ്ക്രിപ്റ്റ് പെർഫോമൻസിലെ ഭാവി പ്രവണതകൾ
വെബ് പ്രകടനത്തിന്റെ ലാൻഡ്സ്കേപ്പ് എപ്പോഴും വികസിച്ചുകൊണ്ടിരിക്കുന്നു. ക്രിട്ടിക്കൽ പാത്തിൽ ജാവാസ്ക്രിപ്റ്റിന്റെ സ്വാധീനം കൂടുതൽ കുറയ്ക്കുന്ന നൂതനാശയങ്ങളിൽ ശ്രദ്ധിക്കുക:
- വെബ്അസെംബ്ലി (Wasm): കമ്പ്യൂട്ടേഷണലായി ഭാരമേറിയ ജോലികൾക്ക് നേറ്റീവ് പ്രകടനത്തിന് സമാനമായ പ്രകടനം വാഗ്ദാനം ചെയ്യുന്നു, C++, Rust, അല്ലെങ്കിൽ Go പോലുള്ള ഭാഷകളിൽ എഴുതിയ കോഡ് വെബിൽ പ്രവർത്തിപ്പിക്കാൻ ഡെവലപ്പർമാരെ അനുവദിക്കുന്നു. നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ ഭാഗങ്ങളിൽ ജാവാസ്ക്രിപ്റ്റിന്റെ എക്സിക്യൂഷൻ വേഗത ഒരു തടസ്സമാകുമ്പോൾ ഇത് ഒരു ശക്തമായ ബദലാകാം.
- പാർട്ടിടൗൺ: തേർഡ്-പാർട്ടി സ്ക്രിപ്റ്റുകളെ ഒരു വെബ് വർക്കറിലേക്ക് മാറ്റാൻ ലക്ഷ്യമിടുന്ന ഒരു ലൈബ്രറി, അവയെ പ്രധാന ത്രെഡിൽ നിന്ന് ഓഫ്‌ലോഡ് ചെയ്യുകയും അവയുടെ പ്രകടന സ്വാധീനം ഗണ്യമായി കുറയ്ക്കുകയും ചെയ്യുന്നു.
- ക്ലയൻ്റ് ഹിൻ്റ്സ്: ഉപയോക്താവിന്റെ ഉപകരണം, നെറ്റ്വർക്ക്, യൂസർ-ഏജന്റ് മുൻഗണനകൾ എന്നിവ മുൻകൂട്ടി മനസ്സിലാക്കാൻ സെർവറുകളെ അനുവദിക്കുന്ന HTTP ഹെഡർ ഫീൽഡുകളുടെ ഒരു കൂട്ടം, ഇത് കൂടുതൽ ഒപ്റ്റിമൈസ് ചെയ്ത റിസോഴ്സ് ഡെലിവറി പ്രാപ്തമാക്കുന്നു (ഉദാ: വേഗത കുറഞ്ഞ കണക്ഷനുകളിലുള്ള ഉപയോക്താക്കൾക്ക് ചെറിയ ചിത്രങ്ങളോ കുറഞ്ഞ സ്ക്രിപ്റ്റുകളോ നൽകുന്നത്).
ഉപസംഹാരം
വേഗത കുറഞ്ഞ വെബ് പ്രകടനത്തിന്റെ മൂലകാരണങ്ങൾ കണ്ടെത്തുന്നതിനും പരിഹരിക്കുന്നതിനുമുള്ള ഒരു ശക്തമായ രീതിയാണ് ജാവാസ്ക്രിപ്റ്റ് ക്രിട്ടിക്കൽ പാത്ത് അനാലിസിസ്. റെൻഡർ-ബ്ലോക്കിംഗ് സ്ക്രിപ്റ്റുകൾ വ്യവസ്ഥാപിതമായി തിരിച്ചറിയുക, പേലോഡ് വലുപ്പങ്ങൾ കുറയ്ക്കുക, എക്സിക്യൂഷൻ ഒപ്റ്റിമൈസ് ചെയ്യുക, തന്ത്രപരമായി വിഭവങ്ങൾ ലോഡ് ചെയ്യുക എന്നിവയിലൂടെ നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ വേഗതയും പ്രതികരണശേഷിയും ഗണ്യമായി വർദ്ധിപ്പിക്കാൻ കഴിയും. ഇത് കേവലം ഒരു സാങ്കേതിക വ്യായാമമല്ല; എല്ലായിടത്തുമുള്ള ഓരോ വ്യക്തിക്കും മികച്ച ഉപയോക്തൃ അനുഭവം നൽകാനുള്ള ഒരു പ്രതിബദ്ധതയാണ്. യഥാർത്ഥ ആഗോള വെബിൽ, പ്രകടനം എന്നത് സാർവത്രികമായ സഹാനുഭൂതിയാണ്.
ഇന്നുതന്നെ ഈ തന്ത്രങ്ങൾ പ്രയോഗിക്കാൻ തുടങ്ങുക. നിങ്ങളുടെ സൈറ്റ് വിശകലനം ചെയ്യുക, ഒപ്റ്റിമൈസേഷനുകൾ നടപ്പിലാക്കുക, നിങ്ങളുടെ പ്രകടനം തുടർച്ചയായി നിരീക്ഷിക്കുക. നിങ്ങളുടെ ഉപയോക്താക്കളും, നിങ്ങളുടെ ബിസിനസ്സും, ആഗോള വെബും അതിന് നിങ്ങളോട് നന്ദി പറയും.