വെബ് പെർഫോമൻസ് മെച്ചപ്പെടുത്താം: കോർ വെബ് വൈറ്റൽസിനെക്കുറിച്ചൊരു സമഗ്രമായ ഗൈഡ്

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

എന്താണ് കോർ വെബ് വൈറ്റൽസ്?

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

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

എന്തുകൊണ്ടാണ് കോർ വെബ് വൈറ്റൽസ് പ്രാധാന്യമർഹിക്കുന്നത്

കോർ വെബ് വൈറ്റൽസ് വെറും സാങ്കേതിക മെട്രിക്കുകൾ മാത്രമല്ല; അവ ഉപയോക്തൃ അനുഭവം, എസ്.ഇ.ഒ, ബിസിനസ്സ് ഫലങ്ങൾ എന്നിവയെ നേരിട്ട് സ്വാധീനിക്കുന്നു. അവ എന്തുകൊണ്ട് ഇത്ര പ്രധാനമാണെന്ന് താഴെ പറയുന്നു:

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

ഓരോ കോർ വെബ് വൈറ്റലിനെയും മനസ്സിലാക്കാം

നമുക്ക് ഓരോ കോർ വെബ് വൈറ്റലിനെയും അടുത്തറിയുകയും അവ എങ്ങനെ ഒപ്റ്റിമൈസ് ചെയ്യാമെന്ന് പര്യവേക്ഷണം ചെയ്യുകയും ചെയ്യാം:

1. ലാർജസ്റ്റ് കണ്ടെന്റ്ഫുൾ പെയിന്റ് (LCP)

എന്താണിത്: പേജ് ആദ്യമായി ലോഡ് ചെയ്യാൻ തുടങ്ങിയതുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ, വ്യൂപോർട്ടിനുള്ളിൽ ഏറ്റവും വലിയ ഉള്ളടക്ക ഘടകം (ചിത്രം, വീഡിയോ, അല്ലെങ്കിൽ ബ്ലോക്ക്-ലെവൽ ടെക്സ്റ്റ്) ദൃശ്യമാകുന്നതിന് എടുക്കുന്ന സമയം LCP അളക്കുന്നു. ഒരു പേജിന്റെ പ്രധാന ഉള്ളടക്കം എത്ര വേഗത്തിൽ ലോഡാകുന്നു എന്നതിനെക്കുറിച്ചുള്ള ഒരു ധാരണ ഇത് നൽകുന്നു.

നല്ല LCP സ്കോർ: 2.5 സെക്കൻഡോ അതിൽ കുറവോ.

മോശം LCP സ്കോർ: 4 സെക്കൻഡിൽ കൂടുതൽ.

LCP-യെ ബാധിക്കുന്ന ഘടകങ്ങൾ:

• സെർവർ പ്രതികരണ സമയം: വേഗത കുറഞ്ഞ സെർവർ പ്രതികരണ സമയം LCP-യെ കാര്യമായി വൈകിപ്പിക്കും.
• റെൻഡർ-ബ്ലോക്കിംഗ് ജാവാസ്ക്രിപ്റ്റും സി.എസ്.എസ്-ഉം: ഈ റിസോഴ്സുകൾക്ക് ബ്രൗസറിനെ പേജ് റെൻഡർ ചെയ്യുന്നതിൽ നിന്ന് തടയാനും LCP വൈകിപ്പിക്കാനും കഴിയും.
• റിസോഴ്സ് ലോഡ് സമയം: വലിയ ചിത്രങ്ങൾ, വീഡിയോകൾ, മറ്റ് റിസോഴ്സുകൾ എന്നിവ ലോഡ് ചെയ്യാൻ കൂടുതൽ സമയമെടുത്തേക്കാം, ഇത് LCP-യെ ബാധിക്കും.
• ക്ലയിന്റ്-സൈഡ് റെൻഡറിംഗ്: അമിതമായ ക്ലയിന്റ്-സൈഡ് റെൻഡറിംഗ് LCP-യെ വൈകിപ്പിക്കും, കാരണം പ്രധാന ഉള്ളടക്കം റെൻഡർ ചെയ്യുന്നതിന് മുമ്പ് ബ്രൗസറിന് ജാവാസ്ക്രിപ്റ്റ് എക്സിക്യൂട്ട് ചെയ്യാൻ കാത്തിരിക്കേണ്ടിവരും.

LCP എങ്ങനെ ഒപ്റ്റിമൈസ് ചെയ്യാം:

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

2. ഫസ്റ്റ് ഇൻപുട്ട് ഡിലേ (FID)

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

നല്ല FID സ്കോർ: 100 മില്ലിസെക്കൻഡോ അതിൽ കുറവോ.

മോശം FID സ്കോർ: 300 മില്ലിസെക്കൻഡിൽ കൂടുതൽ.

FID-യെ ബാധിക്കുന്ന ഘടകങ്ങൾ:

• അമിതമായ ജാവാസ്ക്രിപ്റ്റ് എക്സിക്യൂഷൻ: ദീർഘനേരം പ്രവർത്തിക്കുന്ന ജാവാസ്ക്രിപ്റ്റ് ടാസ്ക്കുകൾക്ക് മെയിൻ ത്രെഡ് ബ്ലോക്ക് ചെയ്യാനും ഉപയോക്തൃ ഇൻപുട്ടിനോട് പ്രതികരിക്കാനുള്ള ബ്രൗസറിന്റെ കഴിവിനെ വൈകിപ്പിക്കാനും കഴിയും.
• തേർഡ്-പാർട്ടി സ്ക്രിപ്റ്റുകൾ: തേർഡ്-പാർട്ടി സ്ക്രിപ്റ്റുകൾ (ഉദാ. അനലിറ്റിക്സ് ട്രാക്കറുകൾ, സോഷ്യൽ മീഡിയ വിഡ്ജറ്റുകൾ) മെയിൻ ത്രെഡിൽ ദീർഘനേരം പ്രവർത്തിക്കുന്ന ടാസ്ക്കുകൾ എക്സിക്യൂട്ട് ചെയ്യുകയാണെങ്കിൽ FID-ക്ക് കാരണമായേക്കാം.

FID എങ്ങനെ ഒപ്റ്റിമൈസ് ചെയ്യാം:

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

3. ക്യുമുലേറ്റീവ് ലേഔട്ട് ഷിഫ്റ്റ് (CLS)

എന്താണിത്: ഒരു പേജിന്റെ മുഴുവൻ ലൈഫ്‌സ്പാനിലും സംഭവിക്കുന്ന എല്ലാ അപ്രതീക്ഷിത ലേഔട്ട് ഷിഫ്റ്റുകളുടെയും ആകെത്തുകയാണ് CLS അളക്കുന്നത്. ദൃശ്യമായ ഘടകങ്ങൾ പേജിൽ അപ്രതീക്ഷിതമായി സ്ഥാനം മാറുമ്പോൾ ലേഔട്ട് ഷിഫ്റ്റുകൾ സംഭവിക്കുന്നു, ഇത് ഉപയോക്താവിന് അലോസരമുണ്ടാക്കുന്ന അനുഭവത്തിന് കാരണമാകുന്നു.

നല്ല CLS സ്കോർ: 0.1 അല്ലെങ്കിൽ അതിൽ കുറവ്.

മോശം CLS സ്കോർ: 0.25-ൽ കൂടുതൽ.

CLS-നെ ബാധിക്കുന്ന ഘടകങ്ങൾ:

• അളവുകളില്ലാത്ത ചിത്രങ്ങൾ: വീതിയും ഉയരവും വ്യക്തമാക്കാത്ത ചിത്രങ്ങൾ ലേഔട്ട് ഷിഫ്റ്റുകൾക്ക് കാരണമാകും, കാരണം ബ്രൗസറിന് അവയ്ക്കായി എത്ര സ്ഥലം നീക്കിവയ്ക്കണമെന്ന് അറിയില്ല.
• അളവുകളില്ലാത്ത പരസ്യങ്ങൾ, എംബഡുകൾ, ഐഫ്രെയിമുകൾ: ചിത്രങ്ങളെപ്പോലെ, അളവുകളില്ലാത്ത പരസ്യങ്ങൾ, എംബഡുകൾ, ഐഫ്രെയിമുകൾ എന്നിവയും ലേഔട്ട് ഷിഫ്റ്റുകൾക്ക് കാരണമാകും.
• ഡൈനാമിക്കായി ചേർക്കുന്ന ഉള്ളടക്കം: നിലവിലുള്ള ഉള്ളടക്കത്തിന് മുകളിൽ പുതിയ ഉള്ളടക്കം ചേർക്കുന്നത് ലേഔട്ട് ഷിഫ്റ്റുകൾക്ക് കാരണമാകും.
• FOIT/FOUT-ന് കാരണമാകുന്ന ഫോണ്ടുകൾ: ഫോണ്ട് ലോഡിംഗ് സ്വഭാവം (ഫ്ലാഷ് ഓഫ് ഇൻവിസിബിൾ ടെക്സ്റ്റ്/ഫ്ലാഷ് ഓഫ് അൺസ്റ്റൈൽഡ് ടെക്സ്റ്റ്) ലേഔട്ട് ഷിഫ്റ്റുകൾക്ക് കാരണമാകും.

CLS എങ്ങനെ ഒപ്റ്റിമൈസ് ചെയ്യാം:

• ചിത്രങ്ങളിലും വീഡിയോകളിലും എപ്പോഴും വീതിയും ഉയരവും ആട്രിബ്യൂട്ടുകൾ ഉൾപ്പെടുത്തുക: ഇത് ബ്രൗസറിന് ഈ ഘടകങ്ങൾക്കായി ശരിയായ അളവിൽ സ്ഥലം നീക്കിവയ്ക്കാൻ അനുവദിക്കുന്നു, അങ്ങനെ ലേഔട്ട് ഷിഫ്റ്റുകൾ തടയുന്നു. റെസ്പോൺസീവ് ഇമേജുകൾക്കായി, വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങൾക്കായി വ്യത്യസ്ത ഇമേജ് വലുപ്പങ്ങൾ വ്യക്തമാക്കുന്നതിന് `srcset` ആട്രിബ്യൂട്ടും `sizes` ആട്രിബ്യൂട്ടും ഉപയോഗിക്കുക.
• പരസ്യ സ്ലോട്ടുകൾക്കായി സ്ഥലം നീക്കിവയ്ക്കുക: പരസ്യങ്ങൾ ലോഡാകുമ്പോൾ ഉണ്ടാകുന്ന ലേഔട്ട് ഷിഫ്റ്റുകൾ തടയുന്നതിനായി പരസ്യ സ്ലോട്ടുകൾക്ക് മുൻകൂട്ടി സ്ഥലം അനുവദിക്കുക.
• നിലവിലുള്ള ഉള്ളടക്കത്തിന് മുകളിൽ പുതിയ ഉള്ളടക്കം ചേർക്കുന്നത് ഒഴിവാക്കുക: നിങ്ങൾക്ക് പുതിയ ഉള്ളടക്കം ചേർക്കണമെങ്കിൽ, അത് ഫോൾഡിന് താഴെയോ അല്ലെങ്കിൽ നിലവിലുള്ള ഉള്ളടക്കം നീങ്ങാത്ത രീതിയിലോ ചെയ്യുക.
• ഫോണ്ട് ലോഡിംഗ് സ്വഭാവം കുറയ്ക്കുക: FOIT/FOUT ഒഴിവാക്കാൻ `font-display: swap` ഉപയോഗിക്കുക. `font-display: swap` കസ്റ്റം ഫോണ്ട് ലോഡുചെയ്യുമ്പോൾ ഒരു ഫാൾബാക്ക് ഫോണ്ട് ഉപയോഗിക്കാൻ ബ്രൗസറിനോട് പറയുന്നു, ഇത് ശൂന്യമായ ടെക്സ്റ്റ് ഡിസ്പ്ലേ തടയുന്നു.
• നിങ്ങളുടെ വെബ്സൈറ്റ് സമഗ്രമായി പരീക്ഷിക്കുക: ലേഔട്ട് ഷിഫ്റ്റുകൾ കണ്ടെത്താനും പരിഹരിക്കാനും ലൈറ്റ്ഹൗസ് പോലുള്ള ടൂളുകൾ ഉപയോഗിക്കുക. സുസ്ഥിരമായ ഒരു ലേഔട്ട് ഉറപ്പാക്കാൻ വിവിധ ഉപകരണങ്ങളിലും സ്ക്രീൻ വലുപ്പങ്ങളിലും നിങ്ങളുടെ വെബ്സൈറ്റ് നേരിട്ട് പരീക്ഷിക്കുക.

കോർ വെബ് വൈറ്റൽസ് അളക്കുന്നതിനുള്ള ടൂളുകൾ

കോർ വെബ് വൈറ്റൽസ് അളക്കുന്നതിനും മെച്ചപ്പെടുത്താനുള്ള മേഖലകൾ കണ്ടെത്തുന്നതിനും നിരവധി ടൂളുകൾ ലഭ്യമാണ്:

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

തുടർച്ചയായ നിരീക്ഷണവും മെച്ചപ്പെടുത്തലും

കോർ വെബ് വൈറ്റൽസ് ഒപ്റ്റിമൈസ് ചെയ്യുന്നത് ഒരു ഒറ്റത്തവണ ടാസ്ക് അല്ല; അതൊരു തുടർ പ്രക്രിയയാണ്. വെബ്സൈറ്റുകൾ വികസിക്കുന്നു, ഉള്ളടക്കം മാറുന്നു, ഉപയോക്തൃ പ്രതീക്ഷകൾ വർദ്ധിക്കുന്നു. മികച്ച പ്രകടനം നിലനിർത്തുന്നതിനും മികച്ച ഉപയോക്തൃ അനുഭവം നൽകുന്നതിനും തുടർച്ചയായ നിരീക്ഷണവും മെച്ചപ്പെടുത്തലും അത്യാവശ്യമാണ്.

തുടർച്ചയായ നിരീക്ഷണത്തിനും മെച്ചപ്പെടുത്തലിനുമുള്ള ചില നുറുങ്ങുകൾ ഇതാ:

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

ഒഴിവാക്കേണ്ട സാധാരണ അപകടങ്ങൾ

കോർ വെബ് വൈറ്റൽസ് ഒപ്റ്റിമൈസ് ചെയ്യുമ്പോൾ, നിങ്ങളുടെ പുരോഗതിയെ തടസ്സപ്പെടുത്തുന്ന ചില സാധാരണ അപകടങ്ങളെക്കുറിച്ച് അറിഞ്ഞിരിക്കുക:

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

കോർ വെബ് വൈറ്റൽസും ആഗോള ലഭ്യതയും (Accessibility)

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

ഉദാഹരണത്തിന്, ഒരു സ്ക്രീൻ റീഡർ ഉപയോഗിക്കുന്ന ഉപയോക്താവിന് വെബ്സൈറ്റ് വേഗത്തിൽ ലോഡാകുകയും കുറഞ്ഞ ലേഔട്ട് ഷിഫ്റ്റുകൾ ഉണ്ടാകുകയും ചെയ്താൽ വളരെ മികച്ച അനുഭവം ലഭിക്കും. അതുപോലെ, ഒരു കോഗ്നിറ്റീവ് ഡിസബിലിറ്റിയുള്ള ഉപയോക്താവിന് വേഗതയേറിയതും പ്രതികരണശേഷിയുള്ളതുമായ ഒരു വെബ്സൈറ്റ് നാവിഗേറ്റ് ചെയ്യാൻ എളുപ്പമായിരിക്കും.

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

ഉപസംഹാരം

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