വെബ് പെർഫോമൻസ് മെച്ചപ്പെടുത്താം: പെർഫോമൻസ് ഒബ്സർവർ എപിഐ-യുടെ ആഴത്തിലുള്ള വിശകലനം

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

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

എന്താണ് പെർഫോമൻസ് ഒബ്സർവർ എപിഐ?

അടിസ്ഥാനപരമായി, പെർഫോമൻസ് എൻട്രികൾ എന്നറിയപ്പെടുന്ന പ്രകടന അളവെടുപ്പ് ഇവന്റുകൾ നിരീക്ഷിക്കാനും ശേഖരിക്കാനും ഒരു മാർഗ്ഗം നൽകുന്ന ഒരു ഇന്റർഫേസാണ് പെർഫോമൻസ് ഒബ്സർവർ എപിഐ. ബ്രൗസറിനുള്ളിലെ പ്രകടനവുമായി ബന്ധപ്പെട്ട പ്രവർത്തനങ്ങൾക്കായി ഒരു പ്രത്യേക ലിസണറായി ഇതിനെ കരുതാം. നിങ്ങൾ ബ്രൗസറിനോട് "ഇതുവരെ എന്തെങ്കിലും സംഭവിച്ചോ?" എന്ന് സജീവമായി ചോദിക്കുന്നതിനുപകരം, ബ്രൗസർ നിങ്ങളോട് മുൻ‌കൂട്ടി പറയുന്നു, "ഒരു പുതിയ പെർഫോമൻസ് ഇവന്റ് ഇപ്പോൾ സംഭവിച്ചു! വിശദാംശങ്ങൾ ഇതാ."

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

പഴയ രീതി vs. പുതിയ രീതി

പെർഫോമൻസ് ഒബ്സർവറിന്റെ പുതുമയെ വിലമതിക്കാൻ, നമുക്ക് രണ്ട് സമീപനങ്ങളെയും താരതമ്യം ചെയ്യാം:

• പഴയ രീതി (പോളിംഗ്): നിങ്ങളുടെ മെട്രിക് രേഖപ്പെടുത്തിയിട്ടുണ്ടോയെന്ന് കാണാൻ performance.getEntriesByName('my-metric') എന്ന ഫംഗ്ഷൻ ഇടയ്ക്കിടെ വിളിക്കുന്നതിന് നിങ്ങൾ setTimeout അല്ലെങ്കിൽ requestAnimationFrame ഉപയോഗിച്ചേക്കാം. ഇത് പ്രശ്നമാണ്, കാരണം നിങ്ങൾ വളരെ വൈകി പരിശോധിക്കുകയും ഇവന്റ് നഷ്ടപ്പെടുത്തുകയും ചെയ്യാം, അല്ലെങ്കിൽ വളരെ ഇടയ്ക്കിടെ പരിശോധിച്ച് സിപിയു സൈക്കിളുകൾ പാഴാക്കാം. നിങ്ങൾ പതിവായി എൻട്രികൾ ക്ലിയർ ചെയ്യുന്നില്ലെങ്കിൽ ബ്രൗസറിന്റെ പെർഫോമൻസ് ബഫർ നിറയാനുള്ള സാധ്യതയുമുണ്ട്.
• പുതിയ രീതി (നിരീക്ഷിക്കൽ): നിങ്ങൾ ഒരു PerformanceObserver ഒരിക്കൽ സജ്ജീകരിക്കുന്നു. ഇത് കുറഞ്ഞ വിഭവങ്ങൾ ഉപയോഗിച്ച് പശ്ചാത്തലത്തിൽ നിശ്ശബ്ദമായി പ്രവർത്തിക്കുന്നു. ഒരു പ്രസക്തമായ പെർഫോമൻസ് എൻട്രി രേഖപ്പെടുത്തിയ ഉടൻ തന്നെ—അത് പേജ് ലോഡ് കഴിഞ്ഞ് ഒരു മില്ലിസെക്കൻഡ് ആയാലും ഉപയോക്താവിന്റെ സെഷനിൽ പത്ത് മിനിറ്റ് കഴിഞ്ഞാലും—നിങ്ങളുടെ കോഡ് തൽക്ഷണം അറിയിക്കപ്പെടുന്നു. ഇത് നിങ്ങൾ ഒരിക്കലും ഒരു ഇവന്റ് നഷ്ടപ്പെടുത്തില്ലെന്നും നിങ്ങളുടെ നിരീക്ഷണ കോഡ് കഴിയുന്നത്ര കാര്യക്ഷമമാണെന്നും ഉറപ്പാക്കുന്നു.

എന്തുകൊണ്ടാണ് നിങ്ങൾ പെർഫോമൻസ് ഒബ്സർവർ ഉപയോഗിക്കേണ്ടത്

നിങ്ങളുടെ ഡെവലപ്‌മെന്റ് വർക്ക്ഫ്ലോയിൽ പെർഫോമൻസ് ഒബ്സർവർ എപിഐ സംയോജിപ്പിക്കുന്നത് ആഗോളതലത്തിൽ സാന്നിധ്യമുള്ള ആധുനിക വെബ് ആപ്ലിക്കേഷനുകൾക്ക് നിർണായകമായ നിരവധി നേട്ടങ്ങൾ നൽകുന്നു.

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

തുടങ്ങാം: പെർഫോമൻസ് ഒബ്സർവറിന്റെ അടിസ്ഥാനങ്ങൾ

ഈ എപിഐ ഉപയോഗിക്കുന്നത് ലളിതമാണ്. ഈ പ്രക്രിയയിൽ മൂന്ന് പ്രധാന ഘട്ടങ്ങളാണുള്ളത്: ഒരു ഒബ്സർവർ ഉണ്ടാക്കുക, ഒരു കോൾബാക്ക് നിർവചിക്കുക, എന്താണ് നിരീക്ഷിക്കേണ്ടതെന്ന് ഒബ്സർവറിനോട് പറയുക.

1. ഒരു കോൾബാക്ക് ഉപയോഗിച്ച് ഒബ്സർവർ ഉണ്ടാക്കൽ

ആദ്യം, നിങ്ങൾ ഒരു PerformanceObserver ഒബ്ജക്റ്റ് ഇൻസ്റ്റാൾ ചെയ്യുകയും അതിലേക്ക് ഒരു കോൾബാക്ക് ഫംഗ്ഷൻ പാസ്സ് ചെയ്യുകയും വേണം. പുതിയ എൻട്രികൾ കണ്ടെത്തുമ്പോഴെല്ലാം ഈ ഫംഗ്ഷൻ പ്രവർത്തിക്കും.

const observer = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log('Entry Type:', entry.entryType); console.log('Entry Name:', entry.name); console.log('Start Time:', entry.startTime); console.log('Duration:', entry.duration); } });

കോൾബാക്കിന് ഒരു PerformanceObserverEntryList ഒബ്ജക്റ്റ് ലഭിക്കുന്നു. പുതുതായി നിരീക്ഷിച്ച എല്ലാ പെർഫോമൻസ് എൻട്രികളുടെയും ഒരു അറേ ലഭിക്കുന്നതിന് നിങ്ങൾക്ക് ഈ ലിസ്റ്റിൽ getEntries() മെത്തേഡ് വിളിക്കാം.

2. പ്രത്യേക എൻട്രി തരങ്ങൾ നിരീക്ഷിക്കൽ

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

// രണ്ട് തരം എൻട്രികൾ നിരീക്ഷിക്കാൻ തുടങ്ങുക observer.observe({ entryTypes: ['mark', 'measure'] });

ഏറ്റവും സാധാരണമായ ചില എൻട്രി തരങ്ങളിൽ ഇവ ഉൾപ്പെടുന്നു:

• 'resource': സ്ക്രിപ്റ്റുകൾ, ചിത്രങ്ങൾ, സ്റ്റൈൽഷീറ്റുകൾ പോലുള്ള അസറ്റുകൾക്കായുള്ള നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകളെക്കുറിച്ചുള്ള വിശദാംശങ്ങൾ.
• 'paint': first-paint, first-contentful-paint എന്നിവയുടെ സമയം.
• 'largest-contentful-paint': ലോഡിംഗ് വേഗത മനസ്സിലാക്കുന്നതിനുള്ള കോർ വെബ് വൈറ്റൽ മെട്രിക്.
• 'layout-shift': വിഷ്വൽ സ്ഥിരതയ്ക്കുള്ള കോർ വെബ് വൈറ്റൽ മെട്രിക്.
• 'first-input': ഫസ്റ്റ് ഇൻപുട്ട് ഡിലെ കോർ വെബ് വൈറ്റലിനായി ഉപയോഗിക്കുന്ന ആദ്യ ഉപയോക്തൃ ഇടപെടലിനെക്കുറിച്ചുള്ള വിവരങ്ങൾ.
• 'longtask': പ്രധാന ത്രെഡിൽ 50 മില്ലിസെക്കൻഡിൽ കൂടുതൽ സമയമെടുക്കുന്ന ടാസ്ക്കുകൾ തിരിച്ചറിയുന്നു, ഇത് പ്രതികരണശേഷി കുറയ്ക്കാൻ കാരണമാകും.
• 'mark' & 'measure': യൂസർ ടൈമിംഗ് എപിഐ ഉപയോഗിച്ച് നിങ്ങളുടെ സ്വന്തം കോഡിൽ നിങ്ങൾ നിർവചിക്കുന്ന കസ്റ്റം മാർക്കറുകളും അളവുകളും.

3. ഒബ്സർവർ നിർത്തുന്നു

നിങ്ങൾക്ക് ഡാറ്റ ശേഖരിക്കേണ്ട ആവശ്യമില്ലാതാകുമ്പോൾ, വിഭവങ്ങൾ സ്വതന്ത്രമാക്കുന്നതിന് ഒബ്സർവർ ഡിസ്കണക്ട് ചെയ്യുന്നത് നല്ല ശീലമാണ്.

observer.disconnect();

പ്രായോഗിക ഉപയോഗങ്ങൾ: കോർ വെബ് വൈറ്റൽസ് നിരീക്ഷിക്കൽ

ഒരു വെബ്‌പേജിന്റെ മൊത്തത്തിലുള്ള ഉപയോക്തൃ അനുഭവത്തിൽ ഗൂഗിൾ പ്രധാനമായി കരുതുന്ന ഒരു കൂട്ടം ഘടകങ്ങളാണ് കോർ വെബ് വൈറ്റൽസ്. അവയെ നിരീക്ഷിക്കുന്നത് പെർഫോമൻസ് ഒബ്സർവർ എപിഐയുടെ ഏറ്റവും ശക്തമായ പ്രയോഗങ്ങളിൽ ഒന്നാണ്. ഓരോന്നും എങ്ങനെ അളക്കാമെന്ന് നോക്കാം.

ലാർജസ്റ്റ് കണ്ടെന്റ്ഫുൾ പെയിന്റ് (LCP) നിരീക്ഷിക്കൽ

LCP ലോഡിംഗ് പ്രകടനം അളക്കുന്നു. പേജ് ലോഡ് ടൈംലൈനിൽ പ്രധാന ഉള്ളടക്കം ലോഡ് ചെയ്തേക്കാവുന്ന പോയിന്റിനെ ഇത് അടയാളപ്പെടുത്തുന്നു. ഒരു നല്ല LCP സ്കോർ 2.5 സെക്കൻഡോ അതിൽ കുറവോ ആണ്.

പേജ് ലോഡ് ചെയ്യുമ്പോൾ LCP എലമെന്റ് മാറാം. തുടക്കത്തിൽ, ഒരു തലക്കെട്ട് LCP എലമെന്റ് ആയിരിക്കാം, എന്നാൽ പിന്നീട്, ഒരു വലിയ ചിത്രം ലോഡ് ചെയ്യുകയും പുതിയ LCP എലമെന്റ് ആയി മാറുകയും ചെയ്യാം. അതുകൊണ്ടാണ് പെർഫോമൻസ് ഒബ്സർവർ അനുയോജ്യമാകുന്നത്—അത് റെൻഡർ ചെയ്യപ്പെടുമ്പോൾ ഓരോ സാധ്യതയുള്ള LCP കാൻഡിഡേറ്റിനെയും കുറിച്ച് നിങ്ങളെ അറിയിക്കുന്നു.

// LCP നിരീക്ഷിച്ച് അവസാന മൂല്യം ലോഗ് ചെയ്യുക let lcpValue = 0; const lcpObserver = new PerformanceObserver((entryList) => { const entries = entryList.getEntries(); // അവസാന എൻട്രിയാണ് ഏറ്റവും പുതിയ LCP കാൻഡിഡേറ്റ് const lastEntry = entries[entries.length - 1]; lcpValue = lastEntry.startTime; console.log(`LCP updated: ${lcpValue.toFixed(2)}ms`, lastEntry.element); }); lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true }); // ഉപയോക്താവ് ഇടപെട്ടതിന് ശേഷം ഒബ്സർവർ ഡിസ്കണക്ട് ചെയ്യുന്നത് നല്ലതാണ്, // കാരണം ഇടപെടലുകൾ പുതിയ LCP കാൻഡിഡേറ്റുകൾ അയക്കുന്നത് നിർത്താൻ കാരണമാകും. // window.addEventListener('beforeunload', () => lcpObserver.disconnect());

buffered: true എന്ന ഓപ്ഷൻ ശ്രദ്ധിക്കുക. observe() മെത്തേഡ് വിളിക്കുന്നതിന് *മുമ്പ്* രേഖപ്പെടുത്തിയ എൻട്രികൾ ഉൾപ്പെടുത്താൻ ഒബ്സർവറിന് നിർദ്ദേശം നൽകുന്ന ഒരു നിർണ്ണായക ഓപ്ഷനാണിത്. ഇത് നേരത്തെയുള്ള ഒരു LCP ഇവന്റ് നഷ്ടപ്പെടുന്നത് തടയുന്നു.

ഫസ്റ്റ് ഇൻപുട്ട് ഡിലെ (FID), ഇന്ററാക്ഷൻ ടു നെക്സ്റ്റ് പെയിന്റ് (INP) എന്നിവ നിരീക്ഷിക്കൽ

ഈ മെട്രിക്കുകൾ ഇന്ററാക്റ്റിവിറ്റി അളക്കുന്നു. ഉപയോക്താക്കൾ ആദ്യമായി പേജുമായി സംവദിക്കാൻ ശ്രമിക്കുമ്പോൾ അവരുടെ അനുഭവം ഇത് അളക്കുന്നു.

ഫസ്റ്റ് ഇൻപുട്ട് ഡിലെ (FID) ഒരു ഉപയോക്താവ് ആദ്യമായി ഒരു പേജുമായി സംവദിക്കുന്ന സമയം മുതൽ (ഉദാഹരണത്തിന്, ഒരു ബട്ടൺ ക്ലിക്ക് ചെയ്യുമ്പോൾ) ആ ഇടപെടലിനോടുള്ള പ്രതികരണമായി ബ്രൗസറിന് ഇവന്റ് ഹാൻഡ്‌ലറുകൾ പ്രോസസ്സ് ചെയ്യാൻ തുടങ്ങാൻ കഴിയുന്ന സമയം വരെ അളക്കുന്നു. ഒരു നല്ല FID 100 മില്ലിസെക്കൻഡോ അതിൽ കുറവോ ആണ്.

ഇന്ററാക്ഷൻ ടു നെക്സ്റ്റ് പെയിന്റ് (INP) 2024 മാർച്ചിൽ FID-ക്ക് പകരമായി കോർ വെബ് വൈറ്റലായി മാറിയ ഒരു പുതിയതും കൂടുതൽ സമഗ്രവുമായ മെട്രിക്കാണ്. FID *ആദ്യ* ഇടപെടലിന്റെ *ഡിലെ* മാത്രം അളക്കുമ്പോൾ, INP പേജിന്റെ ലൈഫ് സൈക്കിളിലുടനീളം *എല്ലാ* ഉപയോക്തൃ ഇടപെടലുകളുടെയും *മൊത്തം ലേറ്റൻസി* വിലയിരുത്തുകയും ഏറ്റവും മോശമായത് റിപ്പോർട്ട് ചെയ്യുകയും ചെയ്യുന്നു. ഇത് മൊത്തത്തിലുള്ള പ്രതികരണശേഷിയുടെ മികച്ച ചിത്രം നൽകുന്നു. ഒരു നല്ല INP 200 മില്ലിസെക്കൻഡോ അതിൽ കുറവോ ആണ്.

'first-input' എൻട്രി തരം ഉപയോഗിച്ച് നിങ്ങൾക്ക് FID നിരീക്ഷിക്കാം:

// FID നിരീക്ഷിക്കുക const fidObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { const fid = entry.processingStart - entry.startTime; console.log(`FID: ${fid.toFixed(2)}ms`); // ആദ്യ ഇൻപുട്ട് റിപ്പോർട്ട് ചെയ്ത ശേഷം ഡിസ്കണക്ട് ചെയ്യുക fidObserver.disconnect(); } }); fidObserver.observe({ type: 'first-input', buffered: true });

INP നിരീക്ഷിക്കുന്നത് ഒരു ഇവന്റിന്റെ പൂർണ്ണ ദൈർഘ്യം പരിശോധിക്കുന്നതിനാൽ അല്പം കൂടുതൽ സങ്കീർണ്ണമാണ്. നിങ്ങൾ 'event' എൻട്രി തരം നിരീക്ഷിക്കുകയും ദൈർഘ്യം കണക്കാക്കുകയും ഏറ്റവും ദൈർഘ്യമേറിയത് ട്രാക്ക് ചെയ്യുകയും ചെയ്യുന്നു.

// ലളിതമായ INP നിരീക്ഷണ ഉദാഹരണം let worstInp = 0; const inpObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // INP എന്നത് ഇവന്റിന്റെ ദൈർഘ്യമാണ് const inp = entry.duration; // നിലവിലെ ഏറ്റവും മോശമായതിനേക്കാൾ ദൈർഘ്യമേറിയ ഇടപെടലുകളിൽ മാത്രം ഞങ്ങൾ ശ്രദ്ധിക്കുന്നു if (inp > worstInp) { worstInp = inp; console.log(`New worst INP: ${worstInp.toFixed(2)}ms`); } } }); inpObserver.observe({ type: 'event', durationThreshold: 16, buffered: true }); // durationThreshold വളരെ ചെറിയതും അപ്രധാനവുമായ ഇവന്റുകൾ ഫിൽട്ടർ ചെയ്യാൻ സഹായിക്കുന്നു.

ക്യുമുലേറ്റീവ് ലേഔട്ട് ഷിഫ്റ്റ് (CLS) നിരീക്ഷിക്കൽ

CLS വിഷ്വൽ സ്ഥിരത അളക്കുന്നു. ഉപയോക്താക്കൾക്ക് എത്രതവണ അപ്രതീക്ഷിത ലേഔട്ട് ഷിഫ്റ്റുകൾ അനുഭവപ്പെടുന്നു എന്ന് അളക്കാൻ ഇത് സഹായിക്കുന്നു—ഉള്ളടക്കം മുന്നറിയിപ്പില്ലാതെ പേജിൽ നീങ്ങുന്ന ഒരു നിരാശാജനകമായ അനുഭവം. ഒരു നല്ല CLS സ്കോർ 0.1 അല്ലെങ്കിൽ അതിൽ കുറവോ ആണ്.

എല്ലാ വ്യക്തിഗത ലേഔട്ട് ഷിഫ്റ്റ് സ്കോറുകളുടെയും ഒരു സമാഹാരമാണ് ഈ സ്കോർ. പെർഫോമൻസ് ഒബ്സർവർ ഇവിടെ അത്യന്താപേക്ഷിതമാണ്, കാരണം ഓരോ ഷിഫ്റ്റും സംഭവിക്കുമ്പോൾ തന്നെ അത് റിപ്പോർട്ട് ചെയ്യുന്നു.

// മൊത്തം CLS സ്കോർ നിരീക്ഷിക്കുകയും കണക്കാക്കുകയും ചെയ്യുക let clsScore = 0; const clsObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // ഉപയോക്തൃ ഇൻപുട്ട് കാരണം സംഭവിച്ച ഷിഫ്റ്റുകൾ ഞങ്ങൾ കണക്കാക്കാൻ ആഗ്രഹിക്കുന്നില്ല if (!entry.hadRecentInput) { clsScore += entry.value; console.log(`Current CLS score: ${clsScore.toFixed(4)}`); } } }); clsObserver.observe({ type: 'layout-shift', buffered: true });

hadRecentInput പ്രോപ്പർട്ടി പ്രധാനമാണ്. ഉപയോക്താവിന്റെ ഒരു പ്രവർത്തനത്തോടുള്ള പ്രതികരണമായി സംഭവിക്കുന്ന നിയമാനുസൃതമായ ലേഔട്ട് ഷിഫ്റ്റുകൾ ഫിൽട്ടർ ചെയ്യാൻ ഇത് നിങ്ങളെ സഹായിക്കുന്നു (ഒരു മെനു വികസിപ്പിക്കുന്ന ഒരു ബട്ടൺ ക്ലിക്കുചെയ്യുന്നത് പോലെ), അത് CLS സ്കോറിലേക്ക് കണക്കാക്കരുത്.

കോർ വെബ് വൈറ്റൽസിനപ്പുറം: മറ്റ് ശക്തമായ എൻട്രി തരങ്ങൾ

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

ലോംഗ് ടാസ്ക്കുകൾ ട്രാക്ക് ചെയ്യൽ (`longtask`)

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

// ലോംഗ് ടാസ്ക്കുകൾ നിരീക്ഷിക്കുക const longTaskObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log(`Long Task Detected: ${entry.duration.toFixed(2)}ms`); // 'attribution' പ്രോപ്പർട്ടി ചിലപ്പോൾ ലോംഗ് ടാസ്ക്കിന് കാരണമായത് എന്താണെന്ന് നിങ്ങളോട് പറയും console.log('Attribution:', entry.attribution); } }); longTaskObserver.observe({ type: 'longtask', buffered: true });

റിസോഴ്സ് ടൈമിംഗുകൾ വിശകലനം ചെയ്യൽ (`resource`)

നിങ്ങളുടെ അസറ്റുകൾ എങ്ങനെയാണ് ലോഡ് ചെയ്യുന്നതെന്ന് മനസ്സിലാക്കുന്നത് പെർഫോമൻസ് ട്യൂണിംഗിന്റെ അടിസ്ഥാനമാണ്. 'resource' എൻട്രി തരം നിങ്ങളുടെ പേജിലെ ഓരോ റിസോഴ്സിനും DNS ലുക്കപ്പ്, TCP കണക്ഷൻ, ഉള്ളടക്കം ഡൗൺലോഡ് ചെയ്യുന്ന സമയം എന്നിവ ഉൾപ്പെടെ വിശദമായ നെറ്റ്‌വർക്ക് ടൈമിംഗ് ഡാറ്റ നൽകുന്നു.

// റിസോഴ്സ് ടൈമിംഗുകൾ നിരീക്ഷിക്കുക const resourceObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // വേഗത കുറഞ്ഞ ചിത്രങ്ങൾ കണ്ടെത്താം if (entry.initiatorType === 'img' && entry.duration > 500) { console.warn(`Slow image detected: ${entry.name}`, `Duration: ${entry.duration.toFixed(2)}ms`); } } }); // റിസോഴ്സ് ടൈമിംഗുകൾക്ക് 'buffered: true' ഉപയോഗിക്കുന്നത് മിക്കവാറും എല്ലായ്പ്പോഴും ആവശ്യമാണ് // ഈ സ്ക്രിപ്റ്റ് പ്രവർത്തിക്കുന്നതിന് മുമ്പ് ലോഡ് ചെയ്ത അസറ്റുകൾ പിടിക്കാൻ. resourceObserver.observe({ type: 'resource', buffered: true });

കസ്റ്റം പെർഫോമൻസ് മാർക്കുകൾ അളക്കൽ (`mark`, `measure`)

ചിലപ്പോൾ, നിങ്ങൾക്ക് ആപ്ലിക്കേഷൻ-നിർദ്ദിഷ്ട ലോജിക്കിന്റെ പ്രകടനം അളക്കേണ്ടതുണ്ട്. യൂസർ ടൈമിംഗ് എപിഐ നിങ്ങളെ കസ്റ്റം ടൈംസ്റ്റാമ്പുകൾ സൃഷ്ടിക്കാനും അവയ്ക്കിടയിലുള്ള ദൈർഘ്യം അളക്കാനും അനുവദിക്കുന്നു.

• performance.mark('start-operation'): 'start-operation' എന്ന് പേരുള്ള ഒരു ടൈംസ്റ്റാമ്പ് സൃഷ്ടിക്കുന്നു.
• performance.mark('end-operation'): മറ്റൊരു ടൈംസ്റ്റാമ്പ് സൃഷ്ടിക്കുന്നു.
• performance.measure('my-operation', 'start-operation', 'end-operation'): രണ്ട് മാർക്കുകൾക്കിടയിൽ ഒരു അളവ് സൃഷ്ടിക്കുന്നു.

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

// നിങ്ങളുടെ ആപ്ലിക്കേഷൻ കോഡിൽ: performance.mark('start-data-processing'); // ... ചില സങ്കീർണ്ണമായ ഡാറ്റാ പ്രോസസ്സിംഗ് ... performance.mark('end-data-processing'); performance.measure('data-processing-duration', 'start-data-processing', 'end-data-processing'); // നിങ്ങളുടെ മോണിറ്ററിംഗ് സ്ക്രിപ്റ്റിൽ: const customObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntriesByName('data-processing-duration')) { console.log(`Custom Measurement '${entry.name}': ${entry.duration.toFixed(2)}ms`); } }); customObserver.observe({ entryTypes: ['measure'] });

വിപുലമായ ആശയങ്ങളും മികച്ച രീതികളും

ഒരു പ്രൊഫഷണൽ പ്രൊഡക്ഷൻ എൻവയോൺമെന്റിൽ പെർഫോമൻസ് ഒബ്സർവർ എപിഐ ഫലപ്രദമായി ഉപയോഗിക്കുന്നതിന്, ഈ മികച്ച രീതികൾ പരിഗണിക്കുക.

• എപ്പോഴും `buffered: true` പരിഗണിക്കുക: പേജ് ലോഡിന്റെ തുടക്കത്തിൽ സംഭവിക്കാവുന്ന എൻട്രി തരങ്ങൾക്ക് ('resource', 'paint', അല്ലെങ്കിൽ 'largest-contentful-paint' പോലുള്ളവ), അവ നഷ്ടപ്പെടാതിരിക്കാൻ ബഫർ ചെയ്ത ഫ്ലാഗ് ഉപയോഗിക്കുന്നത് അത്യാവശ്യമാണ്.
• ബ്രൗസർ പിന്തുണ പരിശോധിക്കുക: ആധുനിക ബ്രൗസറുകളിൽ വ്യാപകമായി പിന്തുണയ്ക്കുന്നുണ്ടെങ്കിലും, അത് ഉപയോഗിക്കുന്നതിന് മുമ്പ് അതിന്റെ നിലനിൽപ്പ് പരിശോധിക്കുന്നത് എല്ലായ്പ്പോഴും വിവേകപൂർണ്ണമാണ്. ഒരു പ്രത്യേക ബ്രൗസർ ഏതൊക്കെ എൻട്രി തരങ്ങളെ പിന്തുണയ്ക്കുന്നുവെന്നും നിങ്ങൾക്ക് പരിശോധിക്കാം.
• if ('PerformanceObserver' in window && PerformanceObserver.supportedEntryTypes.includes('longtask')) { // ലോംഗ് ടാസ്ക്കുകൾക്കായി പെർഫോമൻസ് ഒബ്സർവർ ഉപയോഗിക്കുന്നത് സുരക്ഷിതമാണ് }
• ഒരു അനലിറ്റിക്സ് സേവനത്തിലേക്ക് ഡാറ്റ അയയ്ക്കുക: ഡെവലപ്‌മെന്റിനായി കൺസോളിലേക്ക് ഡാറ്റ ലോഗ് ചെയ്യുന്നത് മികച്ചതാണ്, എന്നാൽ യഥാർത്ഥ ലോക നിരീക്ഷണത്തിനായി, നിങ്ങൾ ഈ ഡാറ്റ സമാഹരിക്കേണ്ടതുണ്ട്. ക്ലയന്റിൽ നിന്ന് ഈ ടെലിമെട്രി അയയ്ക്കാനുള്ള ഏറ്റവും നല്ല മാർഗം navigator.sendBeacon() എപിഐ ഉപയോഗിക്കുക എന്നതാണ്. ഒരു സെർവറിലേക്ക് ചെറിയ അളവിലുള്ള ഡാറ്റ അയയ്‌ക്കുന്നതിനായി രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്ന ഒരു നോൺ-ബ്ലോക്കിംഗ് സംവിധാനമാണിത്, ഒരു പേജ് അൺലോഡ് ചെയ്യുമ്പോഴും ഇത് വിശ്വസനീയമായി പ്രവർത്തിക്കുന്നു.
• ഒബ്സർവറുകളെ താൽപ്പര്യത്തിനനുസരിച്ച് ഗ്രൂപ്പ് ചെയ്യുക: നിങ്ങൾക്ക് ഒന്നിലധികം എൻട്രി തരങ്ങൾക്കായി ഒരൊറ്റ ഒബ്സർവർ ഉപയോഗിക്കാമെങ്കിലും, വ്യത്യസ്ത താൽപ്പര്യങ്ങൾക്കായി പ്രത്യേക ഒബ്സർവറുകൾ സൃഷ്ടിക്കുന്നത് പലപ്പോഴും കൂടുതൽ വൃത്തിയുള്ളതാണ് (ഉദാഹരണത്തിന്, കോർ വെബ് വൈറ്റൽസിനായി ഒന്ന്, റിസോഴ്സ് ടൈമിംഗുകൾക്കായി ഒന്ന്, കസ്റ്റം മെട്രിക്കുകൾക്കായി ഒന്ന്). ഇത് കോഡിന്റെ വായനാക്ഷമതയും പരിപാലനക്ഷമതയും മെച്ചപ്പെടുത്തുന്നു.
• പെർഫോമൻസ് ഓവർഹെഡ് മനസ്സിലാക്കുക: ഈ എപിഐ വളരെ കുറഞ്ഞ ഓവർഹെഡ് ഉള്ളതായി രൂപകൽപ്പന ചെയ്തിട്ടുള്ളതാണ്. എന്നിരുന്നാലും, കനത്ത കണക്കുകൂട്ടലുകൾ നടത്തുന്ന വളരെ സങ്കീർണ്ണമായ ഒരു കോൾബാക്ക് ഫംഗ്ഷൻ പ്രകടനത്തെ ബാധിക്കാൻ സാധ്യതയുണ്ട്. നിങ്ങളുടെ ഒബ്സർവർ കോൾബാക്കുകൾ ലളിതവും കാര്യക്ഷമവുമാക്കി നിലനിർത്തുക. ഏതെങ്കിലും കനത്ത പ്രോസസ്സിംഗ് ഒരു വെബ് വർക്കറിലേക്ക് മാറ്റുക അല്ലെങ്കിൽ പ്രോസസ്സിംഗിനായി റോ ഡാറ്റ നിങ്ങളുടെ ബാക്കെൻഡിലേക്ക് അയയ്ക്കുക.

ഉപസംഹാരം: ഒരു പെർഫോമൻസ്-ഫസ്റ്റ് സംസ്കാരം കെട്ടിപ്പടുക്കൽ

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

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