ജാവാസ്ക്രിപ്റ്റ് അസിങ്ക് റിസോഴ്സ് ലോഡിംഗ്: പെർഫോമൻസ് ഒപ്റ്റിമൈസേഷനുള്ള ഒരു ആഗോള ഗൈഡ്

ഇന്നത്തെ അതിവേഗ ഡിജിറ്റൽ ലോകത്ത്, വെബ്സൈറ്റിന്റെ പ്രകടനം പരമപ്രധാനമാണ്. ഉപയോക്താക്കൾ വിവരങ്ങളിലേക്ക് തൽക്ഷണ പ്രവേശനം പ്രതീക്ഷിക്കുന്നു, കൂടാതെ പതുക്കെ ലോഡുചെയ്യുന്ന വെബ്സൈറ്റുകൾ നിരാശ, ഉപേക്ഷിക്കൽ, ഒടുവിൽ അവസരങ്ങൾ നഷ്ടപ്പെടൽ എന്നിവയ്ക്ക് കാരണമാകും. ആധുനിക വെബ് ഡെവലപ്‌മെന്റിന് ജാവാസ്ക്രിപ്റ്റ് അത്യന്താപേക്ഷിതമാണെങ്കിലും, അത് ശരിയായി കൈകാര്യം ചെയ്തില്ലെങ്കിൽ പലപ്പോഴും ഒരു തടസ്സമാകാറുണ്ട്. പ്രകടനം മെച്ചപ്പെടുത്തുന്നതിനുള്ള ഏറ്റവും ഫലപ്രദമായ സാങ്കേതിക വിദ്യകളിലൊന്നാണ് അസിൻക്രണസ് റിസോഴ്സ് ലോഡിംഗ്. ഈ ഗൈഡ് അസിൻക്രണസ് ജാവാസ്ക്രിപ്റ്റ് റിസോഴ്സ് ലോഡിംഗിനെക്കുറിച്ച് വിശദമായി ചർച്ചചെയ്യുന്നു, ഒപ്പം ആഗോള പ്രേക്ഷകർക്കായി പ്രായോഗിക ഉദാഹരണങ്ങളും പരിഗണനകളും നൽകുന്നു.

എന്തുകൊണ്ട് അസിൻക്രണസ് റിസോഴ്സ് ലോഡിംഗ് പ്രധാനമാണ്

ഒരു ബ്രൗസർ ഒരു HTML ഡോക്യുമെന്റിൽ <script> ടാഗ് കാണുമ്പോൾ, അത് സാധാരണയായി സ്ക്രിപ്റ്റ് ഡൗൺലോഡ് ചെയ്യാനും പ്രവർത്തിപ്പിക്കാനും വേണ്ടി HTML പാഴ്സിംഗ് നിർത്തുന്നു. ഈ സിൻക്രണസ് സ്വഭാവം പേജ് റെൻഡർ ചെയ്യുന്നതിൽ കാര്യമായ കാലതാമസമുണ്ടാക്കും, പ്രത്യേകിച്ചും സ്ക്രിപ്റ്റ് വലുതാണെങ്കിൽ അല്ലെങ്കിൽ വേഗത കുറഞ്ഞ സെർവറിൽ ഹോസ്റ്റ് ചെയ്തിട്ടുണ്ടെങ്കിൽ. അസിൻക്രണസ് ലോഡിംഗ്, സ്ക്രിപ്റ്റ് പശ്ചാത്തലത്തിൽ ഡൗൺലോഡ് ചെയ്യുമ്പോൾ തന്നെ HTML പാഴ്സിംഗ് തുടരാൻ ബ്രൗസറിനെ അനുവദിക്കുന്നു, ഇത് വേഗതയേറിയ പ്രാരംഭ പേജ് ലോഡിലേക്കും മികച്ച ഉപയോക്തൃ അനുഭവത്തിലേക്കും നയിക്കുന്നു. ആഗോളതലത്തിൽ, പ്രത്യേകിച്ച് വേഗത കുറഞ്ഞതോ വിശ്വസനീയമല്ലാത്തതോ ആയ ഇന്റർനെറ്റ് കണക്ഷനുകളുള്ള ഉപയോക്താക്കൾക്ക്, അസിൻക്രണസ് ലോഡിംഗിന്റെ പ്രയോജനങ്ങൾ ഇതിലും കൂടുതലാണ്.

async, defer ആട്രിബ്യൂട്ടുകൾ

HTML5, <script> ടാഗിനായി async, defer ആട്രിബ്യൂട്ടുകൾ അവതരിപ്പിച്ചു, ഇത് ഡെവലപ്പർമാർക്ക് സ്ക്രിപ്റ്റുകൾ എങ്ങനെ ലോഡുചെയ്യുന്നു, പ്രവർത്തിപ്പിക്കുന്നു എന്നതിൽ കൂടുതൽ നിയന്ത്രണം നൽകുന്നു.

async ആട്രിബ്യൂട്ട്

HTML പാഴ്സിംഗ് തടയാതെ തന്നെ സ്ക്രിപ്റ്റ് അസിൻക്രണസ് ആയി ഡൗൺലോഡ് ചെയ്യാൻ async ആട്രിബ്യൂട്ട് ബ്രൗസറിനോട് പറയുന്നു. സ്ക്രിപ്റ്റ് ഡൗൺലോഡ് ചെയ്തുകഴിഞ്ഞാൽ, അത് തയ്യാറാകുമ്പോൾ തന്നെ പ്രവർത്തിപ്പിക്കും, ഇത് HTML പാഴ്സിംഗിനെ തടസ്സപ്പെടുത്തിയേക്കാം. async സ്ക്രിപ്റ്റുകളുടെ എക്സിക്യൂഷൻ ഓർഡർ ഉറപ്പില്ല, ഇത് പരസ്പരം ആശ്രയിക്കാത്ത സ്വതന്ത്ര സ്ക്രിപ്റ്റുകൾക്ക് അനുയോജ്യമാക്കുന്നു.

ഉദാഹരണം:

            <script src="script.js" async></script>
            

              
                Copy
              
            
          

ഉപയോഗങ്ങൾ:

• അനലിറ്റിക്സ് ട്രാക്കിംഗ് സ്ക്രിപ്റ്റുകൾ (ഉദാ. ഗൂഗിൾ അനലിറ്റിക്സ്)
• സോഷ്യൽ മീഡിയ വിഡ്ജറ്റുകൾ
• പേജ് മെച്ചപ്പെടുത്തുന്നതും എന്നാൽ പ്രാരംഭ റെൻഡറിംഗിന് അനിവാര്യമല്ലാത്തതുമായ സ്ക്രിപ്റ്റുകൾ

defer ആട്രിബ്യൂട്ട്

defer ആട്രിബ്യൂട്ടും HTML പാഴ്സിംഗ് തടയാതെ സ്ക്രിപ്റ്റ് അസിൻക്രണസ് ആയി ഡൗൺലോഡ് ചെയ്യുന്നു. എന്നിരുന്നാലും, async-ൽ നിന്ന് വ്യത്യസ്തമായി, defer സ്ക്രിപ്റ്റുകൾ HTML ഡോക്യുമെന്റിൽ കാണുന്ന ക്രമത്തിൽ തന്നെ പ്രവർത്തിപ്പിക്കുമെന്ന് ഉറപ്പുനൽകുന്നു, അവ HTML പാഴ്സിംഗ് പൂർത്തിയായതിന് ശേഷം മാത്രമേ പ്രവർത്തിക്കൂ. ഇത് DOM പൂർണ്ണമായി നിർമ്മിച്ചതിനെ ആശ്രയിക്കുന്ന സ്ക്രിപ്റ്റുകൾക്കോ മറ്റ് സ്ക്രിപ്റ്റുകളെ ആശ്രയിക്കുന്നവയ്ക്കോ അനുയോജ്യമാക്കുന്നു.

ഉദാഹരണം:

            <script src="script.js" defer></script>
            

              
                Copy
              
            
          

ഉപയോഗങ്ങൾ:

• DOM-ൽ മാറ്റങ്ങൾ വരുത്തുന്ന സ്ക്രിപ്റ്റുകൾ (ഉദാ. jQuery പോലുള്ള ലൈബ്രറികൾ)
• മറ്റ് സ്ക്രിപ്റ്റുകളെ ആശ്രയിക്കുന്ന സ്ക്രിപ്റ്റുകൾ
• പ്രവർത്തിപ്പിക്കുന്നതിന് മുമ്പ് DOM പൂർണ്ണമായി ലോഡ് ചെയ്യേണ്ട ഏതൊരു സ്ക്രിപ്റ്റും

async, defer എന്നിവയ്ക്കിടയിൽ തിരഞ്ഞെടുക്കൽ

async, defer എന്നിവയ്ക്കിടയിലുള്ള തിരഞ്ഞെടുപ്പ് നിങ്ങളുടെ സ്ക്രിപ്റ്റുകളുടെ പ്രത്യേക ആവശ്യകതകളെ ആശ്രയിച്ചിരിക്കുന്നു. ഇതാ ഒരു ലളിതമായ മാർഗ്ഗനിർദ്ദേശം:

• പരസ്പരം അല്ലെങ്കിൽ DOM-നെ ആശ്രയിക്കാത്ത സ്വതന്ത്ര സ്ക്രിപ്റ്റുകൾക്കായി async ഉപയോഗിക്കുക.
• DOM-നെയോ മറ്റ് സ്ക്രിപ്റ്റുകളെയോ ആശ്രയിക്കുകയും ഒരു നിശ്ചിത ക്രമത്തിൽ പ്രവർത്തിപ്പിക്കുകയും ചെയ്യേണ്ട സ്ക്രിപ്റ്റുകൾക്കായി defer ഉപയോഗിക്കുക.

നിങ്ങൾക്ക് ഉറപ്പില്ലെങ്കിൽ, defer പൊതുവെ സുരക്ഷിതമായ ഒരു ഓപ്ഷനാണ്, കാരണം ഇത് സ്ക്രിപ്റ്റുകൾ ശരിയായ ക്രമത്തിലും DOM തയ്യാറായതിന് ശേഷവും പ്രവർത്തിപ്പിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.

ഡൈനാമിക് സ്ക്രിപ്റ്റ് ലോഡിംഗ്

അസിൻക്രണസ് റിസോഴ്സ് ലോഡിംഗിനുള്ള മറ്റൊരു സാങ്കേതികതയാണ് ഡൈനാമിക് സ്ക്രിപ്റ്റ് ലോഡിംഗ്. ഇതിൽ ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് <script> എലമെന്റുകൾ ഉണ്ടാക്കി DOM-ലേക്ക് ചേർക്കുന്നു. ഈ രീതി സ്ക്രിപ്റ്റുകൾ എപ്പോൾ, എങ്ങനെ ലോഡുചെയ്യുന്നു എന്നതിൽ കൂടുതൽ നിയന്ത്രണം നൽകുന്നു.

ഉദാഹരണം:

            function loadScript(url, callback) {
 const script = document.createElement('script');
 script.src = url;
 script.async = true; // Ensure asynchronous loading

 script.onload = function() {
 if (callback) {
 callback();
 }
 };

 script.onerror = function() {
 console.error('Failed to load script: ' + url);
 };

 document.head.appendChild(script);
}

// Usage:
loadScript('script.js', function() {
 console.log('Script loaded successfully!');
});

            

              
                Copy
              
            
          

ഡൈനാമിക് സ്ക്രിപ്റ്റ് ലോഡിംഗിന്റെ പ്രയോജനങ്ങൾ:

• വ്യവസ്ഥാപിത ലോഡിംഗ്: ചില വ്യവസ്ഥകളെ അടിസ്ഥാനമാക്കി നിങ്ങൾക്ക് സ്ക്രിപ്റ്റുകൾ ലോഡുചെയ്യാനാകും (ഉദാ. ഉപയോക്താവിന്റെ ബ്രൗസർ, ഉപകരണത്തിന്റെ തരം, A/B ടെസ്റ്റിംഗ്).
• ലേസി ലോഡിംഗ്: ആവശ്യമുള്ളപ്പോൾ മാത്രം സ്ക്രിപ്റ്റുകൾ ലോഡുചെയ്യാൻ നിങ്ങൾക്ക് കഴിയും, ഇത് പ്രാരംഭ പേജ് ലോഡ് സമയം കൂടുതൽ മെച്ചപ്പെടുത്തുന്നു.
• എറർ ഹാൻഡ്‌ലിംഗ്: നിങ്ങൾക്ക് സ്ക്രിപ്റ്റ് ലോഡിംഗ് പിശകുകൾ എളുപ്പത്തിൽ കൈകാര്യം ചെയ്യാനും ഫാൾബാക്ക് മെക്കാനിസങ്ങൾ നടപ്പിലാക്കാനും കഴിയും.

റിസോഴ്സുകൾ പ്രീലോഡ് ചെയ്യൽ

സാധാരണയായി കണ്ടെത്തുന്നതിനേക്കാൾ നേരത്തെ തന്നെ റിസോഴ്സുകൾ (സ്ക്രിപ്റ്റുകൾ ഉൾപ്പെടെ) ഡൗൺലോഡ് ചെയ്യാൻ ബ്രൗസറിനെ അനുവദിക്കുന്ന ഒരു സാങ്കേതികതയാണ് പ്രീലോഡിംഗ്. ഇത് പ്രകടനം ഗണ്യമായി മെച്ചപ്പെടുത്താൻ സഹായിക്കും, കാരണം ആവശ്യമുള്ളപ്പോൾ റിസോഴ്സുകൾ ഇതിനകം ലഭ്യമായിരിക്കും.

<link rel="preload"> ടാഗ് ഉപയോഗിച്ച്:

            <link rel="preload" href="script.js" as="script">
            

              
                Copy
              
            
          

as ആട്രിബ്യൂട്ട് പ്രീലോഡ് ചെയ്യുന്ന റിസോഴ്സിന്റെ തരം വ്യക്തമാക്കുന്നു (ഉദാ. script, style, font). ഇത് റിസോഴ്സിന് മുൻഗണന നൽകാനും ശരിയായ കാഷിംഗ് നയങ്ങൾ പ്രയോഗിക്കാനും ബ്രൗസറിനെ സഹായിക്കുന്നു.

ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് പ്രീലോഡ് ചെയ്യൽ:

            function preload(url, as) {
 const link = document.createElement('link');
 link.rel = 'preload';
 link.href = url;
 link.as = as;
 document.head.appendChild(link);
}

// Usage:
preload('script.js', 'script');

            

              
                Copy
              
            
          

എപ്പോഴാണ് പ്രീലോഡിംഗ് ഉപയോഗിക്കേണ്ടത്:

റിസോഴ്സുകൾ പ്രീഫെച്ച് ചെയ്യൽ

ഭാവിയിൽ, അതായത് അടുത്ത പേജിൽ, ഒരു റിസോഴ്സ് ആവശ്യമായി വന്നേക്കാം എന്ന് ബ്രൗസറിന് സൂചന നൽകുന്ന ഒരു സാങ്കേതികതയാണ് പ്രീഫെച്ചിംഗ്. ഉപയോക്താവ് നിലവിലെ പേജിൽ ആയിരിക്കുമ്പോൾ തന്നെ ബ്രൗസറിന് പശ്ചാത്തലത്തിൽ ആ റിസോഴ്സ് ഡൗൺലോഡ് ചെയ്യാൻ കഴിയും, ഇത് നാവിഗേഷൻ വേഗത്തിലാക്കുന്നു.

<link rel="prefetch"> ടാഗ് ഉപയോഗിച്ച്:

            <link rel="prefetch" href="next-page-script.js" as="script">
            

              
                Copy
              
            
          

പ്രീഫെച്ചിംഗിനായി as ആട്രിബ്യൂട്ട് ഓപ്ഷണലാണ്, പക്ഷേ റിസോഴ്സിന് മുൻഗണന നൽകാനും ശരിയായ കാഷിംഗ് നയങ്ങൾ പ്രയോഗിക്കാനും ബ്രൗസറിനെ സഹായിക്കുന്നതിന് ഇത് ഉൾപ്പെടുത്താൻ ശുപാർശ ചെയ്യുന്നു.

എപ്പോഴാണ് പ്രീഫെച്ചിംഗ് ഉപയോഗിക്കേണ്ടത്:

• ഉപയോക്താവ് സന്ദർശിക്കാൻ സാധ്യതയുള്ള അടുത്ത പേജിൽ ആവശ്യമായേക്കാവുന്ന റിസോഴ്സുകൾ പ്രീഫെച്ച് ചെയ്യുക.
• നിലവിലെ പേജിന് അനിവാര്യമല്ലാത്തതും എന്നാൽ അടുത്ത പേജിലേക്കുള്ള സുഗമമായ മാറ്റത്തിന് പ്രധാനപ്പെട്ടതുമായ റിസോഴ്സുകൾ പ്രീഫെച്ച് ചെയ്യുക.
• പ്രീഫെച്ചിംഗ് ഉപയോഗിക്കുമ്പോൾ ബാൻഡ്‌വിഡ്ത്ത് ഉപഭോഗത്തെക്കുറിച്ച് ശ്രദ്ധിക്കുക, പ്രത്യേകിച്ചും പരിമിതമായ ഡാറ്റാ പ്ലാനുകളുള്ള ഉപയോക്താക്കൾക്കായി.

കോഡ് സ്പ്ലിറ്റിംഗ്

നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് കോഡിനെ ആവശ്യാനുസരണം ലോഡ് ചെയ്യാൻ കഴിയുന്ന ചെറിയ ഭാഗങ്ങളായി, അല്ലെങ്കിൽ മൊഡ്യൂളുകളായി വിഭജിക്കുന്ന ഒരു സാങ്കേതികതയാണ് കോഡ് സ്പ്ലിറ്റിംഗ്. ഇത് നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റിന്റെ പ്രാരംഭ ഡൗൺലോഡ് വലുപ്പം ഗണ്യമായി കുറയ്ക്കുകയും പേജ് ലോഡ് സമയം മെച്ചപ്പെടുത്തുകയും ചെയ്യും. വെബ്പാക്ക്, പാർസൽ, റോൾഅപ്പ് പോലുള്ള ആധുനിക ജാവാസ്ക്രിപ്റ്റ് ബണ്ട്ലറുകൾ കോഡ് സ്പ്ലിറ്റിംഗ് നടപ്പിലാക്കുന്നത് താരതമ്യേന എളുപ്പമാക്കുന്നു.

കോഡ് സ്പ്ലിറ്റിംഗിന്റെ പ്രയോജനങ്ങൾ:

• കുറഞ്ഞ പ്രാരംഭ ഡൗൺലോഡ് വലുപ്പം: ഉപയോക്താക്കൾക്ക് പ്രാരംഭ പേജ് ലോഡിന് ആവശ്യമായ കോഡ് മാത്രം ഡൗൺലോഡ് ചെയ്താൽ മതി.
• മെച്ചപ്പെട്ട കാഷബിലിറ്റി: കോഡിന്റെ ചെറിയ ഭാഗങ്ങൾ കൂടുതൽ ഫലപ്രദമായി കാഷെ ചെയ്യാൻ കഴിയും.
• വേഗതയേറിയ പേജ് ലോഡ് സമയം: ബ്രൗസറിന് ഡൗൺലോഡ് ചെയ്യാനും പാഴ്സ് ചെയ്യാനും കുറച്ച് ജാവാസ്ക്രിപ്റ്റ് മാത്രമേ ഉണ്ടാകൂ, ഇത് വേഗതയേറിയ പ്രാരംഭ പേജ് ലോഡിലേക്ക് നയിക്കുന്നു.

ആഗോള പ്രേക്ഷകർക്കുള്ള പരിഗണനകൾ

ആഗോള പ്രേക്ഷകർക്കായി വെബ്സൈറ്റ് പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുമ്പോൾ, നെറ്റ്‌വർക്ക് ലേറ്റൻസി, ബാൻഡ്‌വിഡ്ത്ത് പരിമിതികൾ, ഉപകരണ ശേഷികൾ തുടങ്ങിയ ഘടകങ്ങൾ പരിഗണിക്കേണ്ടത് അത്യാവശ്യമാണ്.

കണ്ടന്റ് ഡെലിവറി നെറ്റ്‌വർക്കുകൾ (CDNs)

CDNs എന്നത് ഭൂമിശാസ്ത്രപരമായി വിതരണം ചെയ്യപ്പെട്ട സെർവറുകളുടെ ഒരു ശൃംഖലയാണ്. ഇത് ഉപയോക്താക്കൾക്ക് ഏറ്റവും അടുത്തുള്ള സെർവർ ലൊക്കേഷനിൽ നിന്ന് ഉള്ളടക്കം കാഷെ ചെയ്യുകയും വിതരണം ചെയ്യുകയും ചെയ്യുന്നു. ഇത് നെറ്റ്‌വർക്ക് ലേറ്റൻസി ഗണ്യമായി കുറയ്ക്കുകയും ഡൗൺലോഡ് വേഗത മെച്ചപ്പെടുത്തുകയും ചെയ്യും, പ്രത്യേകിച്ചും നിങ്ങളുടെ ഒറിജിൻ സെർവറിൽ നിന്ന് വളരെ ദൂരെയുള്ള ഉപയോക്താക്കൾക്ക്. ലോകമെമ്പാടുമുള്ള ഉപയോക്താക്കൾക്ക് വേഗതയേറിയതും വിശ്വസനീയവുമായ അനുഭവം നൽകുന്നതിന് ഒരു CDN ഉപയോഗിക്കുന്നത് നിർണായകമാണ്. ക്ലൗഡ്ഫ്ലെയർ, അകാമയ്, ആമസോൺ ക്ലൗഡ്ഫ്രണ്ട് എന്നിവ പ്രശസ്തമായ CDN ദാതാക്കളാണ്.

ഉദാഹരണം: ജപ്പാനിലെ ടോക്കിയോയിലുള്ള ഒരു ഉപയോക്താവ് ന്യൂയോർക്ക് സിറ്റിയിലെ ഒരു സെർവറിൽ ഹോസ്റ്റ് ചെയ്തിട്ടുള്ള ഒരു വെബ്സൈറ്റ് ആക്സസ് ചെയ്യുന്നതായി സങ്കൽപ്പിക്കുക. ഒരു CDN ഇല്ലാതെ, ഉപയോക്താവിന്റെ അഭ്യർത്ഥന ലോകമെമ്പാടും സഞ്ചരിക്കേണ്ടി വരും, ഇത് കാര്യമായ ലേറ്റൻസിക്ക് കാരണമാകും. ഒരു CDN ഉപയോഗിച്ച്, വെബ്സൈറ്റിന്റെ ഉള്ളടക്കം ടോക്കിയോയിലെ ഒരു സെർവറിൽ കാഷെ ചെയ്യപ്പെടും, ഇത് ഉപയോക്താവിന് വളരെ വേഗത്തിൽ അത് ആക്സസ് ചെയ്യാൻ അനുവദിക്കുന്നു.

ഇമേജ് ഒപ്റ്റിമൈസേഷൻ

വെബ്സൈറ്റിന്റെ വലുപ്പം വർദ്ധിപ്പിക്കുന്നതിൽ ചിത്രങ്ങൾ പലപ്പോഴും ഒരു പ്രധാന ഘടകമാണ്. ചിത്രങ്ങൾ കംപ്രസ് ചെയ്യുക, അനുയോജ്യമായ ഫോർമാറ്റുകൾ (ഉദാ. WebP) ഉപയോഗിക്കുക, ശരിയായ വലുപ്പത്തിലേക്ക് മാറ്റുക എന്നിവയിലൂടെ ഡൗൺലോഡ് സമയം ഗണ്യമായി കുറയ്ക്കാൻ കഴിയും. ഉപയോക്താവിന്റെ ഉപകരണത്തിനും സ്ക്രീൻ വലുപ്പത്തിനും അനുസരിച്ച് വ്യത്യസ്ത വലുപ്പത്തിലുള്ള ചിത്രങ്ങൾ നൽകുന്നതിന് റെസ്പോൺസീവ് ഇമേജുകൾ (<picture> എലമെന്റ് അല്ലെങ്കിൽ srcset ആട്രിബ്യൂട്ട്) ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.

ഉദാഹരണം: ImageOptim അല്ലെങ്കിൽ TinyPNG പോലുള്ള ഒരു ടൂൾ ഉപയോഗിച്ച് ചിത്രങ്ങൾ കംപ്രസ് ചെയ്യുന്നത് ഗുണമേന്മയിൽ കാര്യമായ നഷ്ടം കൂടാതെ അവയുടെ ഫയൽ വലുപ്പം 50% ഓ അതിൽ കൂടുതലോ കുറയ്ക്കാൻ കഴിയും.

മിനിഫിക്കേഷനും Gzip കംപ്രഷനും

ഫയൽ വലുപ്പം കുറയ്ക്കുന്നതിന് നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ്, CSS കോഡിൽ നിന്ന് അനാവശ്യ പ്രതീകങ്ങൾ (ഉദാ. വൈറ്റ്‌സ്‌പേസ്, കമന്റുകൾ) നീക്കം ചെയ്യുന്നതാണ് മിനിഫിക്കേഷൻ. Gzip കംപ്രഷൻ ബ്രൗസറിലേക്ക് അയക്കുന്നതിന് മുമ്പ് നിങ്ങളുടെ ഫയലുകളെ കംപ്രസ് ചെയ്യുന്നു, ഇത് ഡൗൺലോഡ് സമയം കൂടുതൽ കുറയ്ക്കുന്നു. മിക്ക വെബ് സെർവറുകളും CDN-കളും Gzip കംപ്രഷനെ പിന്തുണയ്ക്കുന്നു.

ബ്രൗസർ കാഷിംഗ്

സ്റ്റാറ്റിക് അസറ്റുകൾ (ഉദാ. ചിത്രങ്ങൾ, സ്ക്രിപ്റ്റുകൾ, സ്റ്റൈൽഷീറ്റുകൾ) ഉപയോക്താവിന്റെ ബ്രൗസർ കാഷെയിൽ സംഭരിക്കുന്നതിന് ബ്രൗസർ കാഷിംഗ് പ്രയോജനപ്പെടുത്തുക. ഇത് തുടർന്നുള്ള സന്ദർശനങ്ങളിൽ ഈ അസറ്റുകൾ കാഷെയിൽ നിന്ന് വീണ്ടെടുക്കാൻ ബ്രൗസറിനെ അനുവദിക്കുന്നു, അവ വീണ്ടും ഡൗൺലോഡ് ചെയ്യേണ്ട ആവശ്യം ഒഴിവാക്കുന്നു. അസറ്റുകൾ എത്രത്തോളം കാഷെ ചെയ്യണമെന്ന് നിയന്ത്രിക്കുന്നതിന് നിങ്ങളുടെ വെബ് സെർവറിൽ ഉചിതമായ കാഷെ ഹെഡറുകൾ കോൺഫിഗർ ചെയ്യുക.

ഉദാഹരണം: ഒരു നീണ്ട എക്സ്പയറേഷൻ സമയം (ഉദാ. Cache-Control: max-age=31536000) ഉള്ള ഒരു Cache-Control ഹെഡർ സജ്ജീകരിക്കുന്നത് ഒരു വർഷത്തേക്ക് അസറ്റ് കാഷെ ചെയ്യാൻ ബ്രൗസറിനോട് പറയുന്നു.

മൊബൈൽ ഒപ്റ്റിമൈസേഷൻ

റെസ്പോൺസീവ് ഡിസൈൻ ഉപയോഗിച്ചും, ചെറിയ സ്ക്രീനുകൾക്കായി ചിത്രങ്ങൾ ഒപ്റ്റിമൈസ് ചെയ്തും, ജാവാസ്ക്രിപ്റ്റിന്റെ ഉപയോഗം കുറച്ചും നിങ്ങളുടെ വെബ്സൈറ്റ് മൊബൈൽ ഉപകരണങ്ങൾക്കായി ഒപ്റ്റിമൈസ് ചെയ്യുക. ഒരു മൊബൈൽ-ഫസ്റ്റ് സമീപനം ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക, അവിടെ നിങ്ങൾ ആദ്യം മൊബൈൽ ഉപകരണങ്ങൾക്കായി ഡിസൈൻ ചെയ്യുകയും തുടർന്ന് വലിയ സ്ക്രീനുകൾക്കായി അനുഭവം ക്രമേണ മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു.

പരിശോധനയും നിരീക്ഷണവും

ഗൂഗിൾ പേജ്സ്പീഡ് ഇൻസൈറ്റ്സ്, വെബ്പേജ്ടെസ്റ്റ്, ലൈറ്റ്ഹൗസ് തുടങ്ങിയ ടൂളുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനം പതിവായി പരിശോധിക്കുകയും നിരീക്ഷിക്കുകയും ചെയ്യുക. ഈ ടൂളുകൾ നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനത്തെക്കുറിച്ചുള്ള വിലയേറിയ ഉൾക്കാഴ്ചകൾ നൽകുകയും മെച്ചപ്പെടുത്താനുള്ള മേഖലകൾ തിരിച്ചറിയുകയും ചെയ്യുന്നു.

ആഗോള കേസ് സ്റ്റഡീസും ഉദാഹരണങ്ങളും

വിവിധ ആഗോള കമ്പനികൾ ജാവാസ്ക്രിപ്റ്റ് അസിങ്ക് ലോഡിംഗിനെയും വെബ് പ്രകടനത്തെയും എങ്ങനെ സമീപിക്കുന്നുവെന്ന് നമുക്ക് പരിശോധിക്കാം:

• അലിബാബ (ചൈന): അവരുടെ ഇ-കൊമേഴ്‌സ് പ്ലാറ്റ്‌ഫോമിന് ആവശ്യമായ വലിയ അളവിലുള്ള ജാവാസ്ക്രിപ്റ്റ് കൈകാര്യം ചെയ്യുന്നതിന് വിപുലമായ കോഡ് സ്പ്ലിറ്റിംഗും ലേസി ലോഡിംഗും ഉപയോഗിക്കുന്നു. ചൈനയിലും തെക്കുകിഴക്കൻ ഏഷ്യയിലും ഉടനീളം വേഗതയേറിയ ലോഡിംഗ് സമയം ഉറപ്പാക്കാൻ അവർ CDN-കളെ വളരെയധികം പ്രയോജനപ്പെടുത്തുന്നു.
• നെറ്റ്ഫ്ലിക്സ് (യുഎസ്എ): വേഗത കുറഞ്ഞ കണക്ഷനുകളിൽ പോലും സുഗമമായ വീഡിയോ പ്ലേബാക്ക് അനുഭവം നൽകുന്നതിന് പ്രീലോഡിംഗും അഡാപ്റ്റീവ് സ്ട്രീമിംഗ് ടെക്നിക്കുകളും ഉപയോഗിക്കുന്നു. ഉപയോക്താവിന്റെ ഉപകരണത്തെയും നെറ്റ്‌വർക്ക് സാഹചര്യങ്ങളെയും അടിസ്ഥാനമാക്കി അവർ ജാവാസ്ക്രിപ്റ്റ് മൊഡ്യൂളുകൾ ഡൈനാമിക് ആയി ലോഡുചെയ്യുന്നു.
• സ്പോട്ടിഫൈ (സ്വീഡൻ): കുറഞ്ഞ ബാൻഡ്‌വിഡ്ത്ത് പരിതസ്ഥിതികൾക്കായി അവരുടെ വെബ് പ്ലെയർ ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു. ഡാറ്റാ ഉപയോഗം കുറയ്ക്കുന്നതിന് അവർ കോഡ് സ്പ്ലിറ്റിംഗ്, ഇമേജ് ഒപ്റ്റിമൈസേഷൻ, ബ്രൗസർ കാഷിംഗ് എന്നിവയുടെ സംയോജനം ഉപയോഗിക്കുന്നു.
• OLX (ആഗോളതലം - ഇന്ത്യ, ബ്രസീൽ, നൈജീരിയ മുതലായവയിൽ): അവരുടെ പ്രധാന വിപണികളിൽ മൊബൈൽ ഇന്റർനെറ്റ് ആക്‌സസ്സിന്റെ പ്രാബല്യം കാരണം മൊബൈൽ പ്രകടനത്തിന് മുൻഗണന നൽകുന്നു. മൊബൈൽ ഉപകരണങ്ങളിൽ വേഗതയേറിയതും ഭാരം കുറഞ്ഞതുമായ അനുഭവം നൽകാൻ അവർ ആക്സിലറേറ്റഡ് മൊബൈൽ പേജുകൾ (AMP) ഉപയോഗിക്കുന്നു.

ഉപസംഹാരം

വെബ്സൈറ്റ് പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനും ആഗോള പ്രേക്ഷകർക്ക് മികച്ച ഉപയോക്തൃ അനുഭവം നൽകുന്നതിനും അസിൻക്രണസ് ജാവാസ്ക്രിപ്റ്റ് റിസോഴ്സ് ലോഡിംഗ് ഒരു നിർണ്ണായക സാങ്കേതികതയാണ്. async, defer ആട്രിബ്യൂട്ടുകൾ, ഡൈനാമിക് സ്ക്രിപ്റ്റ് ലോഡിംഗ്, പ്രീലോഡിംഗ്, പ്രീഫെച്ചിംഗ്, കോഡ് സ്പ്ലിറ്റിംഗ് എന്നിവ ഉപയോഗിക്കുന്നതിലൂടെ, നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ വേഗതയും പ്രതികരണശേഷിയും ഗണ്യമായി മെച്ചപ്പെടുത്താൻ കഴിയും. ആഗോള പ്രേക്ഷകർക്കായി ഒപ്റ്റിമൈസ് ചെയ്യുമ്പോൾ നെറ്റ്‌വർക്ക് ലേറ്റൻസി, ബാൻഡ്‌വിഡ്ത്ത് പരിമിതികൾ, ഉപകരണ ശേഷികൾ തുടങ്ങിയ ഘടകങ്ങൾ പരിഗണിക്കാൻ ഓർമ്മിക്കുക, പ്രകടനം കൂടുതൽ മെച്ചപ്പെടുത്തുന്നതിന് CDN-കൾ, ഇമേജ് ഒപ്റ്റിമൈസേഷൻ, ബ്രൗസർ കാഷിംഗ് തുടങ്ങിയ ടൂളുകൾ പ്രയോജനപ്പെടുത്തുക. മെച്ചപ്പെടുത്താനുള്ള മേഖലകൾ തിരിച്ചറിയുന്നതിനും ലോകത്തെവിടെയായിരുന്നാലും നിങ്ങളുടെ ഉപയോക്താക്കൾക്ക് സാധ്യമായ ഏറ്റവും മികച്ച അനുഭവം നൽകുന്നുവെന്ന് ഉറപ്പാക്കുന്നതിനും നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനം പതിവായി പരിശോധിക്കുകയും നിരീക്ഷിക്കുകയും ചെയ്യുക.