ഫ്രണ്ടെൻഡ് പെർഫോമൻസ് എപിഐ: നാവിഗേഷനും റിസോഴ്സ് ടൈമിംഗും മെച്ചപ്പെടുത്താം

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

പ്രകടന നിരീക്ഷണത്തിന്റെ ആവശ്യകത മനസ്സിലാക്കാം

എപിഐയുടെ വിശദാംശങ്ങളിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, പ്രകടന നിരീക്ഷണം എന്തുകൊണ്ട് നിർണായകമാണെന്ന് നമുക്ക് മനസ്സിലാക്കാം:

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

ഫ്രണ്ടെൻഡ് പെർഫോമൻസ് എപിഐയെ പരിചയപ്പെടാം

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

ഇതിലെ പ്രധാന ഇന്റർഫേസ് Performance ആണ്, ഇത് window.performance വഴി ലഭ്യമാകും. ഈ ഇന്റർഫേസ് വിവിധ പ്രകടന സംബന്ധമായ ഡാറ്റ ലഭ്യമാക്കുന്നതിനുള്ള മെത്തേഡുകളും പ്രോപ്പർട്ടികളും നൽകുന്നു.

നാവിഗേഷൻ ടൈമിംഗ് എപിഐ: പേജ് ലോഡ് പ്രകടനം അളക്കുന്നു

നാവിഗേഷൻ ടൈമിംഗ് എപിഐ പേജ് ലോഡ് പ്രോസസ്സിന്റെ വിവിധ ഘട്ടങ്ങളെക്കുറിച്ചുള്ള വിശദമായ ടൈമിംഗ് വിവരങ്ങൾ നൽകുന്നു. ഇത് കാലതാമസം എവിടെയാണ് സംഭവിക്കുന്നതെന്ന് കൃത്യമായി കണ്ടെത്താനും നിങ്ങളുടെ ഒപ്റ്റിമൈസേഷൻ ശ്രമങ്ങൾ അതിനനുസരിച്ച് കേന്ദ്രീകരിക്കാനും നിങ്ങളെ അനുവദിക്കുന്നു.

നാവിഗേഷൻ ടൈമിംഗ് നൽകുന്ന പ്രധാന മെട്രിക്കുകൾ

• navigationStart: ബ്രൗസർ പേജ് ലോഡ് ചെയ്യാൻ തുടങ്ങുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• unloadEventStart: മുൻ പേജിലെ അൺലോഡ് ഇവന്റ് ആരംഭിക്കുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• unloadEventEnd: മുൻ പേജിലെ അൺലോഡ് ഇവന്റ് അവസാനിക്കുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• redirectStart: റീഡയറക്ട് ആരംഭിക്കുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• redirectEnd: റീഡയറക്ട് അവസാനിക്കുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• fetchStart: ബ്രൗസർ ഡോക്യുമെന്റ് ലഭ്യമാക്കാൻ തുടങ്ങുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• domainLookupStart: ഡൊമെയ്ൻ നെയിം ലുക്കപ്പ് ആരംഭിക്കുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• domainLookupEnd: ഡൊമെയ്ൻ നെയിം ലുക്കപ്പ് അവസാനിക്കുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• connectStart: ബ്രൗസർ സെർവറുമായി ഒരു കണക്ഷൻ സ്ഥാപിക്കാൻ തുടങ്ങുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• connectEnd: ബ്രൗസർ സെർവറുമായി ഒരു കണക്ഷൻ സ്ഥാപിച്ചു കഴിയുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• secureConnectionStart: ബ്രൗസർ സുരക്ഷിത കണക്ഷൻ ഹാൻഡ്‌ഷേക്ക് ആരംഭിക്കുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• requestStart: ബ്രൗസർ സെർവറിൽ നിന്ന് ഡോക്യുമെന്റ് അഭ്യർത്ഥിക്കാൻ തുടങ്ങുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• responseStart: ബ്രൗസറിന് സെർവറിൽ നിന്ന് പ്രതികരണത്തിന്റെ ആദ്യ ബൈറ്റ് ലഭിക്കുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• responseEnd: ബ്രൗസറിന് സെർവറിൽ നിന്ന് പ്രതികരണം പൂർണ്ണമായി ലഭിക്കുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• domLoading: ബ്രൗസർ HTML ഡോക്യുമെന്റ് പാഴ്സ് ചെയ്യാൻ തുടങ്ങുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• domInteractive: ബ്രൗസർ HTML ഡോക്യുമെന്റ് പാഴ്സ് ചെയ്ത് കഴിയുകയും DOM തയ്യാറാകുകയും ചെയ്യുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• domContentLoadedEventStart: DOMContentLoaded ഇവന്റ് ആരംഭിക്കുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• domContentLoadedEventEnd: DOMContentLoaded ഇവന്റ് അവസാനിക്കുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• domComplete: ബ്രൗസർ HTML ഡോക്യുമെന്റ് പാഴ്സ് ചെയ്ത് കഴിയുകയും എല്ലാ റിസോഴ്സുകളും ലോഡ് ചെയ്യുകയും ചെയ്യുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• loadEventStart: ലോഡ് ഇവന്റ് ആരംഭിക്കുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• loadEventEnd: ലോഡ് ഇവന്റ് അവസാനിക്കുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.

നാവിഗേഷൻ ടൈമിംഗ് ഡാറ്റ എങ്ങനെ ലഭ്യമാക്കാം

performance.timing പ്രോപ്പർട്ടി ഉപയോഗിച്ച് നിങ്ങൾക്ക് നാവിഗേഷൻ ടൈമിംഗ് ഡാറ്റ ലഭ്യമാക്കാം:

            
const navigationTiming = performance.timing;

console.log('Navigation Start:', navigationTiming.navigationStart);
console.log('Domain Lookup Time:', navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart);
console.log('Connect Time:', navigationTiming.connectEnd - navigationTiming.connectStart);
console.log('Response Time:', navigationTiming.responseEnd - navigationTiming.responseStart);
console.log('DOM Interactive:', navigationTiming.domInteractive - navigationTiming.navigationStart);
console.log('DOM Complete:', navigationTiming.domComplete - navigationTiming.navigationStart);
console.log('Load Time:', navigationTiming.loadEventEnd - navigationTiming.navigationStart);

            

              
                Copy
              
            
          

നാവിഗേഷൻ ടൈമിംഗ് ഡാറ്റ വ്യാഖ്യാനിക്കുന്നത് എങ്ങനെ

നാവിഗേഷൻ ടൈമിംഗ് ഡാറ്റ വിശകലനം ചെയ്യുന്നത് നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനത്തെക്കുറിച്ചുള്ള വിലയേറിയ ഉൾക്കാഴ്ചകൾ വെളിപ്പെടുത്തും. ഉദാഹരണത്തിന്:

• ഉയർന്ന DNS ലുക്കപ്പ് സമയം: നിങ്ങളുടെ DNS ദാതാവുമായുള്ള പ്രശ്നങ്ങളെയോ അല്ലെങ്കിൽ വേഗത കുറഞ്ഞ DNS റെസൊല്യൂഷനെയോ സൂചിപ്പിക്കുന്നു.
• ഉയർന്ന കണക്ട് സമയം: നിങ്ങളുടെ സെർവറിന്റെ നെറ്റ്‌വർക്ക് കണക്റ്റിവിറ്റിയിലെ പ്രശ്നങ്ങളെയോ അല്ലെങ്കിൽ വേഗത കുറഞ്ഞ TLS ഹാൻഡ്‌ഷെയ്ക്കിനെയോ സൂചിപ്പിക്കുന്നു.
• ഉയർന്ന പ്രതികരണ സമയം: വേഗത കുറഞ്ഞ സെർവർ-സൈഡ് പ്രോസസ്സിംഗിനെയോ അല്ലെങ്കിൽ വലിയ റെസ്പോൺസ് സൈസുകളെയോ സൂചിപ്പിക്കുന്നു.
• ഉയർന്ന DOM ഇന്ററാക്ടീവ് സമയം: കാര്യക്ഷമമല്ലാത്ത ജാവാസ്ക്രിപ്റ്റ് കോഡിനെയോ അല്ലെങ്കിൽ സങ്കീർണ്ണമായ DOM ഘടനയെയോ സൂചിപ്പിക്കുന്നു.
• ഉയർന്ന DOM കംപ്ലീറ്റ് സമയം: ചിത്രങ്ങൾ, സ്ക്രിപ്റ്റുകൾ, സ്റ്റൈൽഷീറ്റുകൾ തുടങ്ങിയ റിസോഴ്സുകൾ ലോഡ് ചെയ്യുന്നതിലെ കാലതാമസത്തെ സൂചിപ്പിക്കുന്നു.

ഉദാഹരണം: ടൈം ടു ഫസ്റ്റ് ബൈറ്റ് (TTFB) കണക്കാക്കുന്നു

ടൈം ടു ഫസ്റ്റ് ബൈറ്റ് (TTFB) എന്നത് ബ്രൗസറിന് സെർവറിൽ നിന്ന് ഡാറ്റയുടെ ആദ്യ ബൈറ്റ് ലഭിക്കാൻ എടുക്കുന്ന സമയം അളക്കുന്ന ഒരു നിർണായക മെട്രിക്കാണ്. വേഗതയേറിയ ഉപയോക്തൃ അനുഭവത്തിന് കുറഞ്ഞ TTFB അത്യാവശ്യമാണ്.

            
const ttfb = performance.timing.responseStart - performance.timing.navigationStart;
console.log('Time to First Byte (TTFB):', ttfb, 'ms');

            

              
                Copy
              
            
          

വേഗത കുറഞ്ഞ സെർവർ-സൈഡ് പ്രോസസ്സിംഗ്, നെറ്റ്‌വർക്ക് ലേറ്റൻസി, അല്ലെങ്കിൽ സെർവറിന്റെ ഇൻഫ്രാസ്ട്രക്ചറിലെ പ്രശ്നങ്ങൾ എന്നിവ കാരണം ഉയർന്ന TTFB ഉണ്ടാകാം. നിങ്ങളുടെ സെർവർ കോൺഫിഗറേഷൻ ഒപ്റ്റിമൈസ് ചെയ്യുന്നതും, ഒരു കണ്ടന്റ് ഡെലിവറി നെറ്റ്‌വർക്ക് (CDN) ഉപയോഗിക്കുന്നതും, നെറ്റ്‌വർക്ക് ലേറ്റൻസി കുറയ്ക്കുന്നതും TTFB കുറയ്ക്കാൻ സഹായിക്കും.

റിസോഴ്സ് ടൈമിംഗ് എപിഐ: റിസോഴ്സ് ലോഡ് പ്രകടനം അളക്കുന്നു

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

റിസോഴ്സ് ടൈമിംഗ് നൽകുന്ന പ്രധാന മെട്രിക്കുകൾ

• name: റിസോഴ്സിന്റെ URL.
• initiatorType: റിസോഴ്സ് അഭ്യർത്ഥന ആരംഭിച്ച എലമെന്റിന്റെ തരം (ഉദാഹരണത്തിന്, img, script, link).
• startTime: ബ്രൗസർ റിസോഴ്സ് ലഭ്യമാക്കാൻ തുടങ്ങുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• redirectStart: റീഡയറക്ട് ആരംഭിക്കുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• redirectEnd: റീഡയറക്ട് അവസാനിക്കുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• fetchStart: ബ്രൗസർ റിസോഴ്സ് ലഭ്യമാക്കാൻ തുടങ്ങുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• domainLookupStart: ഡൊമെയ്ൻ നെയിം ലുക്കപ്പ് ആരംഭിക്കുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• domainLookupEnd: ഡൊമെയ്ൻ നെയിം ലുക്കപ്പ് അവസാനിക്കുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• connectStart: ബ്രൗസർ സെർവറുമായി ഒരു കണക്ഷൻ സ്ഥാപിക്കാൻ തുടങ്ങുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• connectEnd: ബ്രൗസർ സെർവറുമായി ഒരു കണക്ഷൻ സ്ഥാപിച്ചു കഴിയുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• secureConnectionStart: ബ്രൗസർ സുരക്ഷിത കണക്ഷൻ ഹാൻഡ്‌ഷേക്ക് ആരംഭിക്കുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• requestStart: ബ്രൗസർ സെർവറിൽ നിന്ന് റിസോഴ്സ് അഭ്യർത്ഥിക്കാൻ തുടങ്ങുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• responseStart: ബ്രൗസറിന് സെർവറിൽ നിന്ന് പ്രതികരണത്തിന്റെ ആദ്യ ബൈറ്റ് ലഭിക്കുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• responseEnd: ബ്രൗസറിന് സെർവറിൽ നിന്ന് പ്രതികരണം പൂർണ്ണമായി ലഭിക്കുന്ന സമയത്തിന്റെ ടൈംസ്റ്റാമ്പ്.
• duration: റിസോഴ്സ് ലോഡ് ചെയ്യാൻ എടുത്ത ആകെ സമയം.

റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റ എങ്ങനെ ലഭ്യമാക്കാം

performance.getEntriesByType('resource') മെത്തേഡ് ഉപയോഗിച്ച് നിങ്ങൾക്ക് റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റ ലഭ്യമാക്കാം:

            
const resourceTimings = performance.getEntriesByType('resource');

resourceTimings.forEach(resource => {
  console.log('Resource Name:', resource.name);
  console.log('Initiator Type:', resource.initiatorType);
  console.log('Duration:', resource.duration, 'ms');
});

            

              
                Copy
              
            
          

റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റ വ്യാഖ്യാനിക്കുന്നത് എങ്ങനെ

റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റ വിശകലനം ചെയ്യുന്നത് വേഗത കുറഞ്ഞ റിസോഴ്സുകൾ കണ്ടെത്താനും വേഗതയേറിയ ലോഡിംഗ് സമയത്തിനായി അവയെ ഒപ്റ്റിമൈസ് ചെയ്യാനും നിങ്ങളെ സഹായിക്കും. ഉദാഹരണത്തിന്:

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

ഉദാഹരണം: വേഗത കുറഞ്ഞ ചിത്രങ്ങൾ കണ്ടെത്തുന്നു

റിസോഴ്സ് ടൈമിംഗ് എപിഐ ഉപയോഗിച്ച് വേഗത കുറഞ്ഞ ചിത്രങ്ങൾ എങ്ങനെ കണ്ടെത്താമെന്ന് ഈ ഉദാഹരണം കാണിക്കുന്നു:

            
const resourceTimings = performance.getEntriesByType('resource');

const slowImages = resourceTimings.filter(resource => resource.initiatorType === 'img' && resource.duration > 500);

if (slowImages.length > 0) {
  console.warn('Slow-loading images detected:');
  slowImages.forEach(image => {
    console.log('Image URL:', image.name);
    console.log('Duration:', image.duration, 'ms');
  });
}

            

              
                Copy
              
            
          

വേഗത കുറഞ്ഞ ചിത്രങ്ങൾ കണ്ടെത്തിക്കഴിഞ്ഞാൽ, അവയെ കംപ്രസ്സ് ചെയ്തും, അനുയോജ്യമായി വലുപ്പം മാറ്റിയും, ലേസി ലോഡിംഗ് ടെക്നിക്കുകൾ ഉപയോഗിച്ചും നിങ്ങൾക്ക് ഒപ്റ്റിമൈസ് ചെയ്യാൻ കഴിയും.

പ്രായോഗിക ഉദാഹരണങ്ങളും ഉപയോഗ സാഹചര്യങ്ങളും

യഥാർത്ഥ സാഹചര്യം: ഇ-കൊമേഴ്‌സ് വെബ്സൈറ്റ് ഒപ്റ്റിമൈസേഷൻ

ആഗോളതലത്തിൽ ഉപഭോക്താക്കൾക്ക് സേവനം നൽകുന്ന ഒരു ഇ-കൊമേഴ്‌സ് വെബ്സൈറ്റ് പരിഗണിക്കുക. നാവിഗേഷൻ, റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റ വിശകലനം ചെയ്യുമ്പോൾ ഇനിപ്പറയുന്ന പ്രശ്നങ്ങൾ വെളിപ്പെടുന്നു:

• ഏഷ്യയിലെ ഉപയോക്താക്കൾക്ക് ഉയർന്ന TTFB: ഒറിജിൻ സെർവറും ഏഷ്യയിലെ ഉപയോക്താക്കളും തമ്മിലുള്ള വേഗത കുറഞ്ഞ സെർവർ-സൈഡ് പ്രോസസ്സിംഗിനെയോ നെറ്റ്‌വർക്ക് ലേറ്റൻസിയെയോ സൂചിപ്പിക്കുന്നു.
• വേഗത കുറഞ്ഞ ഉൽപ്പന്ന ചിത്രങ്ങൾ: ചിത്രങ്ങൾ വെബിനായി ഒപ്റ്റിമൈസ് ചെയ്തിട്ടില്ല, ഇത് നീണ്ട ലോഡിംഗ് സമയത്തിന് കാരണമാകുന്നു.
• ഒപ്റ്റിമൈസ് ചെയ്യാത്ത ജാവാസ്ക്രിപ്റ്റ് ഫയലുകൾ: ജാവാസ്ക്രിപ്റ്റ് ഫയലുകൾ മിനിഫൈ ചെയ്യാത്തതും കംപ്രസ്സ് ചെയ്യാത്തതുമാണ്, ഇത് ഫയൽ സൈസുകൾ വർദ്ധിപ്പിക്കുന്നു.

ഈ കണ്ടെത്തലുകളെ അടിസ്ഥാനമാക്കി, ഇനിപ്പറയുന്ന ഒപ്റ്റിമൈസേഷനുകൾ നടപ്പിലാക്കാം:

• കണ്ടന്റ് ഡെലിവറി നെറ്റ്‌വർക്ക് (CDN) നടപ്പിലാക്കുക: വിവിധ പ്രദേശങ്ങളിലെ ഉപയോക്താക്കൾക്കുള്ള ലേറ്റൻസി കുറയ്ക്കുന്നതിന് വെബ്സൈറ്റ് ഉള്ളടക്കം ആഗോളതലത്തിൽ ഒന്നിലധികം സെർവറുകളിലായി വിതരണം ചെയ്യുക.
• ഉൽപ്പന്ന ചിത്രങ്ങൾ ഒപ്റ്റിമൈസ് ചെയ്യുക: ImageOptim അല്ലെങ്കിൽ TinyPNG പോലുള്ള ടൂളുകൾ ഉപയോഗിച്ച് ചിത്രങ്ങൾ കംപ്രസ്സ് ചെയ്യുക, WebP പോലുള്ള അനുയോജ്യമായ ഫയൽ ഫോർമാറ്റുകൾ ഉപയോഗിക്കുക.
• ജാവാസ്ക്രിപ്റ്റ് ഫയലുകൾ മിനിഫൈ ചെയ്ത് കംപ്രസ്സ് ചെയ്യുക: ജാവാസ്ക്രിപ്റ്റ് ഫയലുകൾ മിനിഫൈ ചെയ്യാൻ UglifyJS അല്ലെങ്കിൽ Terser പോലുള്ള ടൂളുകൾ ഉപയോഗിക്കുക, അവയെ കംപ്രസ്സ് ചെയ്യാൻ Gzip അല്ലെങ്കിൽ Brotli ഉപയോഗിക്കുക.
• ചിത്രങ്ങൾ ലേസി ലോഡ് ചെയ്യുക: പ്രാരംഭ പേജ് ലോഡ് സമയം മെച്ചപ്പെടുത്തുന്നതിന് ഫോൾഡിന് താഴെയുള്ള ചിത്രങ്ങൾക്കായി ലേസി ലോഡിംഗ് നടപ്പിലാക്കുക.

ഈ ഒപ്റ്റിമൈസേഷനുകൾ നടപ്പിലാക്കിയ ശേഷം, വെബ്സൈറ്റിന്റെ പ്രകടനം ഗണ്യമായി മെച്ചപ്പെടുന്നു, ഇത് മികച്ച ഉപയോക്തൃ അനുഭവത്തിനും, ഉയർന്ന കൺവേർഷൻ റേറ്റുകൾക്കും, മെച്ചപ്പെട്ട SEO റാങ്കിംഗിനും കാരണമാകുന്നു.

മൊബൈൽ പ്രകടന ഒപ്റ്റിമൈസേഷൻ

ഡെസ്ക്ടോപ്പ് ഉപയോക്താക്കളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ മൊബൈൽ ഉപയോക്താക്കൾക്ക് പലപ്പോഴും വേഗത കുറഞ്ഞ നെറ്റ്‌വർക്ക് കണക്ഷനുകൾ അനുഭവപ്പെടാറുണ്ട്. മൊബൈൽ ഉപകരണങ്ങളിൽ തടസ്സമില്ലാത്ത ഉപയോക്തൃ അനുഭവം നൽകുന്നതിന് മൊബൈൽ പ്രകടനത്തിനായി ഒപ്റ്റിമൈസ് ചെയ്യേണ്ടത് നിർണായകമാണ്.

മൊബൈലിനായുള്ള ചില പ്രത്യേക ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ താഴെ നൽകുന്നു:

• റെസ്പോൺസീവ് ചിത്രങ്ങൾ ഉപയോഗിക്കുക: നെറ്റ്‌വർക്കിലൂടെ കൈമാറ്റം ചെയ്യപ്പെടുന്ന ഡാറ്റയുടെ അളവ് കുറയ്ക്കുന്നതിന് ഉപകരണത്തിന്റെ സ്ക്രീൻ വലുപ്പത്തിനനുസരിച്ച് വ്യത്യസ്ത വലുപ്പത്തിലുള്ള ചിത്രങ്ങൾ നൽകുക.
• ടച്ചിനായി ഒപ്റ്റിമൈസ് ചെയ്യുക: ടച്ച് ഉപകരണങ്ങളിൽ എളുപ്പത്തിൽ ടാപ്പുചെയ്യാൻ കഴിയുന്ന തരത്തിൽ ബട്ടണുകളും ലിങ്കുകളും വലുപ്പമുള്ളതാണെന്നും ആവശ്യത്തിന് അകലമുണ്ടെന്നും ഉറപ്പാക്കുക.
• HTTP അഭ്യർത്ഥനകൾ കുറയ്ക്കുക: CSS, ജാവാസ്ക്രിപ്റ്റ് ഫയലുകൾ സംയോജിപ്പിച്ചും, ക്രിട്ടിക്കൽ CSS ഇൻലൈൻ ചെയ്തും, CSS സ്പ്രൈറ്റുകൾ ഉപയോഗിച്ചും HTTP അഭ്യർത്ഥനകളുടെ എണ്ണം കുറയ്ക്കുക.
• ഫോൾഡിന് മുകളിലുള്ള ഉള്ളടക്കത്തിന് മുൻഗണന നൽകുക: വെബ്സൈറ്റിന്റെ പ്രകടനം മികച്ചതാണെന്ന് തോന്നിപ്പിക്കാൻ സ്ക്രീനിൽ ആദ്യം കാണുന്ന ഉള്ളടക്കം ആദ്യം ലോഡ് ചെയ്യുക.

നാവിഗേഷനും റിസോഴ്സ് ടൈമിംഗിനും അപ്പുറം: മറ്റ് പ്രകടന എപിഐകൾ പര്യവേക്ഷണം ചെയ്യുന്നു

നാവിഗേഷനും റിസോഴ്സ് ടൈമിംഗും അത്യാവശ്യമാണെങ്കിലും, ആഴത്തിലുള്ള പ്രകടന വിശകലനത്തിനായി ഫ്രണ്ടെൻഡ് പെർഫോമൻസ് എപിഐ മറ്റ് ധാരാളം ടൂളുകൾ വാഗ്ദാനം ചെയ്യുന്നു:

• യൂസർ ടൈമിംഗ് എപിഐ: കസ്റ്റം പ്രകടന മെട്രിക്കുകൾ നിർവചിക്കാനും നിങ്ങളുടെ ആപ്ലിക്കേഷനിലെ നിർദ്ദിഷ്ട ഇവന്റുകൾ സംഭവിക്കാൻ എടുക്കുന്ന സമയം അളക്കാനും നിങ്ങളെ അനുവദിക്കുന്നു.
• ലോംഗ് ടാസ്ക്സ് എപിഐ: മെയിൻ ത്രെഡിനെ ബ്ലോക്ക് ചെയ്യുകയും നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ പ്രതികരണശേഷിയെ ബാധിക്കുകയും ചെയ്യുന്ന ദീർഘനേരം പ്രവർത്തിക്കുന്ന ടാസ്ക്കുകൾ കണ്ടെത്താൻ നിങ്ങളെ സഹായിക്കുന്നു.
• പെയിന്റ് ടൈമിംഗ് എപിഐ: ഫസ്റ്റ് പെയിന്റ് (FP), ഫസ്റ്റ് കണ്ടന്റ്ഫുൾ പെയിന്റ് (FCP) പോലുള്ള പേജിന്റെ റെൻഡറിംഗുമായി ബന്ധപ്പെട്ട മെട്രിക്കുകൾ നൽകുന്നു.
• ലാർജസ്റ്റ് കണ്ടന്റ്ഫുൾ പെയിന്റ് (LCP): വ്യൂപോർട്ടിലെ ഏറ്റവും വലിയ ഉള്ളടക്ക ഘടകം ദൃശ്യമാകാൻ എടുക്കുന്ന സമയം അളക്കുന്നു.
• ക്യുമുലേറ്റീവ് ലേഔട്ട് ഷിഫ്റ്റ് (CLS): പേജ് ലോഡ് സമയത്ത് സംഭവിക്കുന്ന അപ്രതീക്ഷിത ലേഔട്ട് ഷിഫ്റ്റുകളുടെ അളവ് അളക്കുന്നു.
• ഇവന്റ് ടൈമിംഗ് എപിഐ: ക്ലിക്ക്, കീ പ്രസ്സ് ഇവന്റുകൾ പോലുള്ള പേജുമായുള്ള ഉപയോക്തൃ ഇടപെടലുകളെക്കുറിച്ചുള്ള വിശദമായ ടൈമിംഗ് വിവരങ്ങൾ വാഗ്ദാനം ചെയ്യുന്നു.

പ്രകടന ഡാറ്റ വിശകലനം ചെയ്യുന്നതിനുള്ള ടൂളുകൾ

നാവിഗേഷൻ, റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റ വിശകലനം ചെയ്യാനും പ്രകടനത്തിലെ തടസ്സങ്ങൾ കണ്ടെത്താനും നിരവധി ടൂളുകൾ നിങ്ങളെ സഹായിക്കും:

• ബ്രൗസർ ഡെവലപ്പർ ടൂളുകൾ: മിക്ക ആധുനിക ബ്രൗസറുകളും നാവിഗേഷൻ, റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റ പരിശോധിക്കാനും നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ വിശകലനം ചെയ്യാനും ജാവാസ്ക്രിപ്റ്റ് കോഡ് പ്രൊഫൈൽ ചെയ്യാനും അനുവദിക്കുന്ന ബിൽറ്റ്-ഇൻ ഡെവലപ്പർ ടൂളുകൾ നൽകുന്നു.
• WebPageTest: വിവിധ ലൊക്കേഷനുകളിൽ നിന്നും ബ്രൗസറുകളിൽ നിന്നും നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനം പരിശോധിക്കാൻ അനുവദിക്കുന്ന ഒരു സൗജന്യ ഓൺലൈൻ ടൂൾ.
• Lighthouse: വെബ് പേജുകളുടെ ഗുണനിലവാരം മെച്ചപ്പെടുത്തുന്നതിനുള്ള ഒരു ഓപ്പൺ സോഴ്‌സ്, ഓട്ടോമേറ്റഡ് ടൂൾ. പ്രകടനം, പ്രവേശനക്ഷമത, പ്രോഗ്രസ്സീവ് വെബ് ആപ്പുകൾ, SEO എന്നിവയ്ക്കും അതിലേറെ കാര്യങ്ങൾക്കുമായി ഇതിന് ഓഡിറ്റുകളുണ്ട്.
• Google PageSpeed Insights: നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനം വിശകലനം ചെയ്യുകയും മെച്ചപ്പെടുത്തുന്നതിനുള്ള ശുപാർശകൾ നൽകുകയും ചെയ്യുന്ന ഒരു സൗജന്യ ഓൺലൈൻ ടൂൾ.
• New Relic, Datadog, മറ്റ് APM ടൂളുകൾ: വെബ് ആപ്ലിക്കേഷനുകൾക്കായി വിശദമായ പ്രകടന നിരീക്ഷണവും വിശകലന ശേഷിയും വാഗ്ദാനം ചെയ്യുന്നു.

വെബ് പ്രകടന ഒപ്റ്റിമൈസേഷനുള്ള മികച്ച രീതികൾ

വെബ് പ്രകടന ഒപ്റ്റിമൈസേഷനുള്ള ചില പൊതുവായ മികച്ച രീതികൾ താഴെ നൽകുന്നു:

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

ഉപസംഹാരം

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