വെബ്സൈറ്റ് ലോഡിംഗ് സമയം ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനും ആഗോളതലത്തിൽ ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുന്നതിനും പ്രീലോഡ്, പ്രീഫെച്ച്, പ്രീകണക്ട് പോലുള്ള റിസോഴ്സ് ഹിൻ്റുകൾ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് മനസിലാക്കുക.
റിസോഴ്സ് ഹിൻ്റുകൾ ഉപയോഗിച്ച് വെബ്സൈറ്റ് വേഗത വർദ്ധിപ്പിക്കുക: പ്രീലോഡ്, പ്രീഫെച്ച്, പ്രീകണക്ട്
ഇന്നത്തെ അതിവേഗ ഡിജിറ്റൽ ലോകത്ത്, വെബ്സൈറ്റിന്റെ വേഗത വളരെ പ്രധാനമാണ്. വെബ്സൈറ്റുകൾ വേഗത്തിൽ ലോഡുചെയ്യാനും തൽക്ഷണം പ്രതികരിക്കാനും ഉപയോക്താക്കൾ പ്രതീക്ഷിക്കുന്നു. വേഗത കുറഞ്ഞ ലോഡിംഗ് സമയം മോശം ഉപയോക്തൃ അനുഭവത്തിനും, ഉയർന്ന ബൗൺസ് നിരക്കുകൾക്കും, ആത്യന്തികമായി ബിസിനസ്സ് നഷ്ടത്തിനും ഇടയാക്കും. ഏതൊക്കെ റിസോഴ്‌സുകളാണ് പ്രധാനമെന്നും അവയ്ക്ക് എങ്ങനെ മുൻഗണന നൽകാമെന്നും ബ്രൗസറിനോട് പറയുന്നതിലൂടെ വെബ്സൈറ്റ് ലോഡിംഗ് സമയം ഒപ്റ്റിമൈസ് ചെയ്യാൻ ഡെവലപ്പർമാരെ സഹായിക്കുന്ന ശക്തമായ ടൂളുകളാണ് റിസോഴ്സ് ഹിൻ്റുകൾ. ഈ ലേഖനം മൂന്ന് പ്രധാന റിസോഴ്സ് ഹിൻ്റുകൾ പര്യവേക്ഷണം ചെയ്യുന്നു: preload, prefetch, preconnect, കൂടാതെ നടപ്പിലാക്കുന്നതിനുള്ള പ്രായോഗിക ഉദാഹരണങ്ങളും നൽകുന്നു.
റിസോഴ്സ് ഹിൻ്റുകൾ മനസ്സിലാക്കൽ
ഒരു വെബ് പേജിന് ഭാവിയിൽ ആവശ്യമായേക്കാവുന്ന റിസോഴ്സുകളെക്കുറിച്ച് ബ്രൗസറിന് നിർദ്ദേശം നൽകുന്ന ഡയറക്റ്റീവുകളാണ് റിസോഴ്സ് ഹിൻ്റുകൾ. നിർണ്ണായകമായ റിസോഴ്സുകളെക്കുറിച്ച് മുൻകൂട്ടി ബ്രൗസറിനെ അറിയിക്കാൻ ഇത് ഡെവലപ്പർമാരെ അനുവദിക്കുന്നു, ഇത് സാധാരണയിൽ നിന്നും നേരത്തെ തന്നെ അവയെ ഫെച്ച് ചെയ്യാനോ കണക്റ്റുചെയ്യാനോ ബ്രൗസറിനെ പ്രാപ്തമാക്കുന്നു. ഇത് ലോഡിംഗ് സമയം ഗണ്യമായി കുറയ്ക്കുകയും പെർസീവ്ഡ് പെർഫോമൻസ് മെച്ചപ്പെടുത്തുകയും ചെയ്യും.
മൂന്ന് പ്രധാന റിസോഴ്സ് ഹിൻ്റുകൾ ഇവയാണ്:
- Preload: പ്രാരംഭ പേജ് ലോഡിന് ആവശ്യമായ നിർണ്ണായക റിസോഴ്സുകൾ ഫെച്ച് ചെയ്യുന്നു.
- Prefetch: ഭാവിയിലെ നാവിഗേഷനുകൾക്കോ അല്ലെങ്കിൽ പ്രവർത്തനങ്ങൾക്കോ ആവശ്യമായേക്കാവുന്ന റിസോഴ്സുകൾ ഫെച്ച് ചെയ്യുന്നു.
- Preconnect: പ്രധാനപ്പെട്ട തേർഡ്-പാർട്ടി സെർവറുകളിലേക്ക് നേരത്തെ തന്നെ കണക്ഷനുകൾ സ്ഥാപിക്കുന്നു.
പ്രീലോഡ്: നിർണ്ണായക റിസോഴ്സുകൾക്ക് മുൻഗണന നൽകുന്നു
എന്താണ് പ്രീലോഡ്?
Preload എന്നത് ഒരു ഡിക്ലറേറ്റീവ് ഫെച്ച് ആണ്, അത് നിലവിലെ നാവിഗേഷന് ആവശ്യമായ ഒരു റിസോഴ്സ് എത്രയും പെട്ടെന്ന് ഫെച്ച് ചെയ്യാൻ ബ്രൗസറിനോട് പറയാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഇത് CSS അല്ലെങ്കിൽ JavaScript വഴി ലോഡുചെയ്യുന്ന ചിത്രങ്ങൾ, ഫോണ്ടുകൾ, സ്ക്രിപ്റ്റുകൾ, അല്ലെങ്കിൽ സ്റ്റൈൽഷീറ്റുകൾ പോലുള്ള ബ്രൗസർ വൈകി കണ്ടെത്തുന്ന റിസോഴ്സുകൾക്ക് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്. ഈ റിസോഴ്സുകൾ പ്രീലോഡ് ചെയ്യുന്നതിലൂടെ, അവ റെൻഡർ-ബ്ലോക്കിംഗ് ആകുന്നതിൽ നിന്ന് തടയാനും നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പെർസീവ്ഡ് ലോഡിംഗ് വേഗത മെച്ചപ്പെടുത്താനും കഴിയും.
എപ്പോഴാണ് പ്രീലോഡ് ഉപയോഗിക്കേണ്ടത്
preload ഇതിനായി ഉപയോഗിക്കുക:
- Fonts: കസ്റ്റം ഫോണ്ടുകൾ നേരത്തെ ലോഡുചെയ്യുന്നത് ഫ്ലാഷ് ഓഫ് അൺസ്റ്റൈൽഡ് ടെക്സ്റ്റ് (FOUT) അല്ലെങ്കിൽ ഫ്ലാഷ് ഓഫ് ഇൻവിസിബിൾ ടെക്സ്റ്റ് (FOIT) തടയാൻ സഹായിക്കും.
- Images: എബൗവ്-ദി-ഫോൾഡ് ചിത്രങ്ങൾക്ക് മുൻഗണന നൽകുന്നത് അവ വേഗത്തിൽ ലോഡുചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കുകയും, പ്രാരംഭ ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു.
- Scripts and Stylesheets: നിർണ്ണായകമായ CSS അല്ലെങ്കിൽ JavaScript ഫയലുകൾ നേരത്തെ ലോഡുചെയ്യുന്നത് റെൻഡർ-ബ്ലോക്കിംഗ് തടയുന്നു.
- Modules and Web Workers: മൊഡ്യൂളുകളോ വെബ് വർക്കറുകളോ പ്രീലോഡ് ചെയ്യുന്നത് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ റെസ്പോൺസീവ്നസ് മെച്ചപ്പെടുത്താൻ സഹായിക്കും.
പ്രീലോഡ് എങ്ങനെ നടപ്പിലാക്കാം
നിങ്ങളുടെ HTML ഡോക്യുമെന്റിന്റെ <head>-ൽ <link> ടാഗ് ഉപയോഗിച്ച് നിങ്ങൾക്ക് preload നടപ്പിലാക്കാം:
<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/styles/critical.css" as="style">
<link rel="preload" href="/scripts/app.js" as="script">
<link rel="preload" href="/images/hero.jpg" as="image">
വിശദീകരണം:
rel="preload": ബ്രൗസർ ഈ റിസോഴ്സ് പ്രീലോഡ് ചെയ്യണമെന്ന് വ്യക്തമാക്കുന്നു.href="/path/to/resource": പ്രീലോഡ് ചെയ്യേണ്ട റിസോഴ്സിന്റെ URL.as="type": പ്രീലോഡ് ചെയ്യുന്ന റിസോഴ്സിന്റെ തരം വ്യക്തമാക്കുന്നു (ഉദാഹരണത്തിന്, font, style, script, image).asആട്രിബ്യൂട്ട് നിർബന്ധമാണ്, കൂടാതെ റിസോഴ്സ് ശരിയായി മുൻഗണന നൽകാനും കൈകാര്യം ചെയ്യാനും ബ്രൗസറിന് ഇത് അത്യാവശ്യമാണ്. ശരിയായasമൂല്യം ഉപയോഗിക്കുന്നത് ബ്രൗസർ ശരിയായ കണ്ടന്റ് സെക്യൂരിറ്റി പോളിസി (CSP) പ്രയോഗിക്കുന്നുവെന്നും ശരിയായAcceptഹെഡർ അയക്കുന്നുവെന്നും ഉറപ്പാക്കുന്നു.type="mime/type": (ഓപ്ഷണൽ, പക്ഷേ ശുപാർശ ചെയ്യുന്നു) റിസോഴ്സിന്റെ MIME തരം വ്യക്തമാക്കുന്നു. ഇത് ബ്രൗസറിന് ശരിയായ റിസോഴ്സ് ഫോർമാറ്റ് തിരഞ്ഞെടുക്കാൻ സഹായിക്കുന്നു, പ്രത്യേകിച്ച് ഫോണ്ടുകളുടെ കാര്യത്തിൽ.crossorigin="anonymous": (വ്യത്യസ്ത ഒറിജിനിൽ നിന്ന് ലോഡ് ചെയ്യുന്ന ഫോണ്ടുകൾക്ക് ആവശ്യമാണ്) അഭ്യർത്ഥനയ്ക്കുള്ള CORS മോഡ് വ്യക്തമാക്കുന്നു. നിങ്ങൾ ഒരു CDN-ൽ നിന്ന് ഫോണ്ടുകൾ ലോഡുചെയ്യുകയാണെങ്കിൽ, നിങ്ങൾക്ക് ഈ ആട്രിബ്യൂട്ട് ആവശ്യമായി വന്നേക്കാം.
ഉദാഹരണം: ഒരു ഫോണ്ട് പ്രീലോഡ് ചെയ്യുന്നു
നിങ്ങളുടെ വെബ്സൈറ്റിൽ 'OpenSans' എന്ന കസ്റ്റം ഫോണ്ട് ഉപയോഗിക്കുന്നുണ്ടെന്ന് കരുതുക. പ്രീലോഡ് ഇല്ലാതെ, CSS ഫയൽ പാഴ്സ് ചെയ്തതിനു ശേഷം മാത്രമേ ബ്രൗസർ ഈ ഫോണ്ട് കണ്ടെത്തുകയുള്ളൂ. ഇത് ശരിയായ ഫോണ്ടിൽ ടെക്സ്റ്റ് റെൻഡർ ചെയ്യുന്നതിൽ കാലതാമസത്തിന് കാരണമാകും. ഫോണ്ട് പ്രീലോഡ് ചെയ്യുന്നതിലൂടെ, നിങ്ങൾക്ക് ഈ കാലതാമസം ഒഴിവാക്കാം.
<link rel="preload" href="/fonts/OpenSans-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
ഉദാഹരണം: ഒരു നിർണ്ണായക CSS ഫയൽ പ്രീലോഡ് ചെയ്യുന്നു
നിങ്ങളുടെ വെബ്സൈറ്റിൽ പ്രാരംഭ കാഴ്ച റെൻഡർ ചെയ്യുന്നതിന് അത്യാവശ്യമായ ഒരു നിർണ്ണായക CSS ഫയൽ ഉണ്ടെങ്കിൽ, അത് പ്രീലോഡ് ചെയ്യുന്നത് പെർസീവ്ഡ് പെർഫോമൻസ് ഗണ്യമായി മെച്ചപ്പെടുത്തും.
<link rel="preload" href="/styles/critical.css" as="style">
പ്രീലോഡിനുള്ള മികച്ച രീതികൾ
- നിർണ്ണായക റിസോഴ്സുകൾക്ക് മുൻഗണന നൽകുക: പ്രാരംഭ പേജ് ലോഡിന് അത്യാവശ്യമായ റിസോഴ്സുകൾ മാത്രം പ്രീലോഡ് ചെയ്യുക. പ്രീലോഡിന്റെ അമിതമായ ഉപയോഗം പ്രകടനത്തെ പ്രതികൂലമായി ബാധിച്ചേക്കാം.
- ശരിയായ
asആട്രിബ്യൂട്ട് ഉപയോഗിക്കുക: ബ്രൗസർ റിസോഴ്സ് ശരിയായി കൈകാര്യം ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കാൻ എല്ലായ്പ്പോഴും ശരിയായasആട്രിബ്യൂട്ട് വ്യക്തമാക്കുക. typeആട്രിബ്യൂട്ട് ഉൾപ്പെടുത്തുക: ശരിയായ റിസോഴ്സ് ഫോർമാറ്റ് തിരഞ്ഞെടുക്കാൻ ബ്രൗസറിനെ സഹായിക്കുന്നതിന്typeആട്രിബ്യൂട്ട് ഉൾപ്പെടുത്തുക.- ക്രോസ്-ഒറിജിൻ ഫോണ്ടുകൾക്കായി
crossoriginഉപയോഗിക്കുക: ഒരു വ്യത്യസ്ത ഒറിജിനിൽ നിന്ന് ഫോണ്ടുകൾ ലോഡുചെയ്യുമ്പോൾ,crossoriginആട്രിബ്യൂട്ട് ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക. - പ്രകടനം പരിശോധിക്കുക: പ്രീലോഡ് യഥാർത്ഥത്തിൽ ലോഡിംഗ് സമയം മെച്ചപ്പെടുത്തുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ എപ്പോഴും പ്രകടനത്തിന്റെ സ്വാധീനം പരിശോധിക്കുക. സ്വാധീനം അളക്കാൻ Google PageSpeed Insights അല്ലെങ്കിൽ WebPageTest പോലുള്ള ഉപകരണങ്ങൾ ഉപയോഗിക്കുക.
പ്രീഫെച്ച്: ഭാവിയിലെ ആവശ്യങ്ങൾ മുൻകൂട്ടി കാണുന്നു
എന്താണ് പ്രീഫെച്ച്?
Prefetch എന്നത് ഒരു റിസോഴ്സ് ഹിൻ്റാണ്, അത് ഭാവിയിലെ നാവിഗേഷനുകൾക്കോ അല്ലെങ്കിൽ പ്രവർത്തനങ്ങൾക്കോ ആവശ്യമായേക്കാവുന്ന റിസോഴ്സുകൾ ഫെച്ച് ചെയ്യാൻ ബ്രൗസറിനോട് പറയുന്നു. നിലവിലെ പേജിന് ആവശ്യമായ റിസോഴ്സുകളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്ന preload-ൽ നിന്ന് വ്യത്യസ്തമായി, prefetch ഉപയോക്താവിന്റെ അടുത്ത നീക്കം മുൻകൂട്ടി കാണുന്നു. തുടർന്നുള്ള പേജുകളുടെയോ ഘടകങ്ങളുടെയോ ലോഡിംഗ് വേഗത മെച്ചപ്പെടുത്തുന്നതിന് ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.
എപ്പോഴാണ് പ്രീഫെച്ച് ഉപയോഗിക്കേണ്ടത്
prefetch ഇതിനായി ഉപയോഗിക്കുക:
- അടുത്ത പേജിലെ റിസോഴ്സുകൾ: ഉപയോക്താവ് അടുത്തതായി ഒരു പ്രത്യേക പേജിലേക്ക് നാവിഗേറ്റ് ചെയ്യാൻ സാധ്യതയുണ്ടെന്ന് നിങ്ങൾക്കറിയാമെങ്കിൽ, അതിലെ റിസോഴ്സുകൾ പ്രീഫെച്ച് ചെയ്യുക.
- ഉപയോക്തൃ ഇടപെടലുകൾക്കുള്ള റിസോഴ്സുകൾ: ഒരു ഉപയോക്തൃ ഇടപെടൽ പ്രത്യേക റിസോഴ്സുകളുടെ (ഉദാ. ഒരു മോഡൽ വിൻഡോ, ഒരു ഫോം) ലോഡിംഗിന് കാരണമാകുന്നുവെങ്കിൽ, ആ റിസോഴ്സുകൾ പ്രീഫെച്ച് ചെയ്യുക.
- മറ്റ് പേജുകളിലെ ചിത്രങ്ങളും അസറ്റുകളും: ഉപയോക്താവ് സന്ദർശിക്കാൻ സാധ്യതയുള്ള മറ്റ് പേജുകളിൽ ഉപയോഗിക്കുന്ന ചിത്രങ്ങളോ അസറ്റുകളോ പ്രീലോഡ് ചെയ്യുക.
പ്രീഫെച്ച് എങ്ങനെ നടപ്പിലാക്കാം
നിങ്ങളുടെ HTML ഡോക്യുമെന്റിന്റെ <head>-ൽ <link> ടാഗ് ഉപയോഗിച്ച് നിങ്ങൾക്ക് prefetch നടപ്പിലാക്കാം:
<link rel="prefetch" href="/page2.html">
<link rel="prefetch" href="/images/product.jpg">
<link rel="prefetch" href="/scripts/modal.js">
വിശദീകരണം:
rel="prefetch": ബ്രൗസർ ഈ റിസോഴ്സ് പ്രീഫെച്ച് ചെയ്യണമെന്ന് വ്യക്തമാക്കുന്നു.href="/path/to/resource": പ്രീഫെച്ച് ചെയ്യേണ്ട റിസോഴ്സിന്റെ URL.
ഉദാഹരണം: അടുത്ത പേജിന്റെ റിസോഴ്സുകൾ പ്രീഫെച്ച് ചെയ്യുന്നു
നിങ്ങളുടെ വെബ്സൈറ്റിന് ഒരു മൾട്ടി-സ്റ്റെപ്പ് ഫോം പോലുള്ള വ്യക്തമായ ഉപയോക്തൃ ഫ്ലോ ഉണ്ടെങ്കിൽ, ഉപയോക്താവ് നിലവിലെ സ്റ്റെപ്പിൽ ആയിരിക്കുമ്പോൾ അടുത്ത സ്റ്റെപ്പിനായുള്ള റിസോഴ്സുകൾ പ്രീഫെച്ച് ചെയ്യാവുന്നതാണ്.
<link rel="prefetch" href="/form/step2.html">
ഉദാഹരണം: ഒരു മോഡൽ വിൻഡോയ്‌ക്കുള്ള റിസോഴ്സുകൾ പ്രീഫെച്ച് ചെയ്യുന്നു
നിങ്ങളുടെ വെബ്സൈറ്റ് തുറക്കുമ്പോൾ അധിക റിസോഴ്സുകൾ ലോഡ് ചെയ്യുന്ന ഒരു മോഡൽ വിൻഡോ ഉപയോഗിക്കുന്നുണ്ടെങ്കിൽ, തടസ്സമില്ലാത്ത ഉപയോക്തൃ അനുഭവം ഉറപ്പാക്കാൻ ആ റിസോഴ്സുകൾ പ്രീഫെച്ച് ചെയ്യാവുന്നതാണ്.
<link rel="prefetch" href="/scripts/modal.js">
<link rel="prefetch" href="/styles/modal.css">
പ്രീഫെച്ചിനുള്ള മികച്ച രീതികൾ
- അളവോടെ ഉപയോഗിക്കുക: പ്രീഫെച്ച് അളവോടെ ഉപയോഗിക്കണം, കാരണം ഉപയോക്താവിന് പ്രീഫെച്ച് ചെയ്ത റിസോഴ്സുകൾ ആവശ്യമില്ലെങ്കിൽ പോലും ഇത് ബാൻഡ്‌വിഡ്ത്തും റിസോഴ്സുകളും ഉപയോഗിക്കും.
- സംഭവിക്കാൻ സാധ്യതയുള്ള നാവിഗേഷനുകൾക്ക് മുൻഗണന നൽകുക: സംഭവിക്കാൻ സാധ്യതയുള്ള പേജുകൾക്കോ ഇടപെടലുകൾക്കോ ഉള്ള റിസോഴ്സുകൾ പ്രീഫെച്ച് ചെയ്യുക.
- നെറ്റ്‌വർക്ക് അവസ്ഥകൾ പരിഗണിക്കുക: സ്ഥിരവും വേഗതയേറിയതുമായ ഇൻ്റർനെറ്റ് കണക്ഷനുകളുള്ള ഉപയോക്താക്കൾക്ക് പ്രീഫെച്ച് ഏറ്റവും അനുയോജ്യമാണ്. വേഗത കുറഞ്ഞതോ മീറ്റർ ചെയ്തതോ ആയ കണക്ഷനുകളുള്ള ഉപയോക്താക്കൾക്കായി വലിയ റിസോഴ്സുകൾ പ്രീഫെച്ച് ചെയ്യുന്നത് ഒഴിവാക്കുക. ഉപയോക്താവിൻ്റെ കണക്ഷൻ തരം കണ്ടെത്താനും അതിനനുസരിച്ച് പ്രീഫെച്ചിംഗ് ക്രമീകരിക്കാനും നിങ്ങൾക്ക് നെറ്റ്‌വർക്ക് ഇൻഫർമേഷൻ API ഉപയോഗിക്കാം.
- പ്രകടനം നിരീക്ഷിക്കുക: നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനത്തിൽ പ്രീഫെച്ചിന്റെ സ്വാധീനം നിരീക്ഷിക്കുക, അത് മൊത്തത്തിൽ പ്രയോജനം നൽകുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക.
- ഡൈനാമിക് പ്രീഫെച്ചിംഗ് ഉപയോഗിക്കുക: ഉപയോക്തൃ പെരുമാറ്റത്തെയും അനലിറ്റിക്‌സ് ഡാറ്റയെയും അടിസ്ഥാനമാക്കി പ്രീഫെച്ചിംഗ് ഡൈനാമിക്കായി നടപ്പിലാക്കുക. ഉദാഹരണത്തിന്, നിലവിലെ പേജിൽ ഉള്ള ഉപയോക്താക്കൾ പതിവായി സന്ദർശിക്കുന്ന പേജുകളിലെ റിസോഴ്സുകൾ പ്രീഫെച്ച് ചെയ്യുക.
പ്രീകണക്ട്: നേരത്തെയുള്ള കണക്ഷനുകൾ സ്ഥാപിക്കൽ
എന്താണ് പ്രീകണക്ട്?
Preconnect എന്നത് ഒരു റിസോഴ്സ് ഹിൻ്റാണ്, അത് പ്രധാനപ്പെട്ട തേർഡ്-പാർട്ടി സെർവറുകളിലേക്ക് നേരത്തെ തന്നെ കണക്ഷനുകൾ സ്ഥാപിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഒരു കണക്ഷൻ സ്ഥാപിക്കുന്നതിൽ ഡിഎൻഎസ് ലുക്കപ്പ്, ടിസിപി ഹാൻഡ്‌ഷേക്ക്, ടിഎൽഎസ് നെഗോഷ്യേഷൻ എന്നിവയുൾപ്പെടെ നിരവധി ഘട്ടങ്ങൾ ഉൾപ്പെടുന്നു. ഈ ഘട്ടങ്ങൾ ആ സെർവറുകളിൽ നിന്നുള്ള റിസോഴ്സുകൾ ലോഡുചെയ്യുന്നതിന് കാര്യമായ ലേറ്റൻസി ഉണ്ടാക്കും. Preconnect ഈ ഘട്ടങ്ങൾ പശ്ചാത്തലത്തിൽ ആരംഭിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു, അതിനാൽ ബ്രൗസറിന് സെർവറിൽ നിന്ന് ഒരു റിസോഴ്സ് ഫെച്ച് ചെയ്യേണ്ടിവരുമ്പോൾ, കണക്ഷൻ ഇതിനകം സ്ഥാപിച്ചിട്ടുണ്ടാകും.
എപ്പോഴാണ് പ്രീകണക്ട് ഉപയോഗിക്കേണ്ടത്
preconnect ഇതിനായി ഉപയോഗിക്കുക:
- തേർഡ്-പാർട്ടി സെർവറുകൾ: ഫോണ്ടുകൾ, സിഡിഎൻ-കൾ, എപിഐ-കൾ, അല്ലെങ്കിൽ നിങ്ങളുടെ വെബ്സൈറ്റ് ആശ്രയിക്കുന്ന മറ്റേതെങ്കിലും റിസോഴ്സുകൾ ഹോസ്റ്റ് ചെയ്യുന്ന സെർവറുകൾ.
- പതിവായി ഉപയോഗിക്കുന്ന സെർവറുകൾ: നിങ്ങളുടെ വെബ്സൈറ്റ് പതിവായി ആക്‌സസ് ചെയ്യുന്ന സെർവറുകൾ.
പ്രീകണക്ട് എങ്ങനെ നടപ്പിലാക്കാം
നിങ്ങളുടെ HTML ഡോക്യുമെന്റിന്റെ <head>-ൽ <link> ടാഗ് ഉപയോഗിച്ച് നിങ്ങൾക്ക് preconnect നടപ്പിലാക്കാം:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com">
വിശദീകരണം:
rel="preconnect": ബ്രൗസർ സെർവറിലേക്ക് പ്രീകണക്ട് ചെയ്യണമെന്ന് വ്യക്തമാക്കുന്നു.href="https://example.com": പ്രീകണക്ട് ചെയ്യേണ്ട സെർവറിന്റെ URL.crossorigin: (ഓപ്ഷണൽ, പക്ഷേ CORS ഉപയോഗിച്ച് ലോഡ് ചെയ്യുന്ന റിസോഴ്സുകൾക്ക് ആവശ്യമാണ്) കണക്ഷന് CORS ആവശ്യമാണെന്ന് വ്യക്തമാക്കുന്നു.
ഉദാഹരണം: ഗൂഗിൾ ഫോണ്ടുകളിലേക്ക് പ്രീകണക്ട് ചെയ്യുന്നു
നിങ്ങളുടെ വെബ്സൈറ്റ് ഗൂഗിൾ ഫോണ്ടുകൾ ഉപയോഗിക്കുന്നുണ്ടെങ്കിൽ, https://fonts.gstatic.com-ലേക്ക് പ്രീകണക്ട് ചെയ്യുന്നത് ഫോണ്ട് ലോഡിംഗിന്റെ ലേറ്റൻസി ഗണ്യമായി കുറയ്ക്കും.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
ഇവിടെ crossorigin ആട്രിബ്യൂട്ട് നിർണ്ണായകമാണ്, കാരണം ഗൂഗിൾ ഫോണ്ടുകൾ ഫോണ്ടുകൾ നൽകുന്നതിന് CORS ഉപയോഗിക്കുന്നു.
ഉദാഹരണം: ഒരു CDN-ലേക്ക് പ്രീകണക്ട് ചെയ്യുന്നു
നിങ്ങളുടെ വെബ്സൈറ്റ് സ്റ്റാറ്റിക് അസറ്റുകൾ നൽകുന്നതിന് ഒരു CDN ഉപയോഗിക്കുന്നുണ്ടെങ്കിൽ, CDN-ന്റെ ഹോസ്റ്റ് നെയിമിലേക്ക് പ്രീകണക്ട് ചെയ്യുന്നത് ആ അസറ്റുകൾ ലോഡുചെയ്യുന്നതിലുള്ള ലേറ്റൻസി കുറയ്ക്കും.
<link rel="preconnect" href="https://cdn.example.com">
പ്രീകണക്ടിനുള്ള മികച്ച രീതികൾ
- വിവേകത്തോടെ ഉപയോഗിക്കുക: വളരെയധികം സെർവറുകളിലേക്ക് പ്രീകണക്ട് ചെയ്യുന്നത് യഥാർത്ഥത്തിൽ പ്രകടനത്തെ തരംതാഴ്ത്തും, കാരണം കണക്ഷനുകൾ സ്ഥാപിക്കുന്നതിന് ബ്രൗസറിന് പരിമിതമായ റിസോഴ്സുകളേ ഉള്ളൂ.
- പ്രധാനപ്പെട്ട സെർവറുകൾക്ക് മുൻഗണന നൽകുക: നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനത്തിന് ഏറ്റവും നിർണായകമായ സെർവറുകളിലേക്ക് പ്രീകണക്ട് ചെയ്യുക.
- DNS-Prefetch പരിഗണിക്കുക: നിങ്ങൾക്ക് പൂർണ്ണമായി പ്രീകണക്ട് ചെയ്യേണ്ടതില്ലാത്തതും എന്നാൽ DNS നേരത്തെ തന്നെ റിസോൾവ് ചെയ്യേണ്ടതുമായ സെർവറുകൾക്കായി,
<link rel="dns-prefetch" href="https://example.com">ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക. DNS-prefetch DNS ലുക്കപ്പ് മാത്രമേ നടത്തുന്നുള്ളൂ, ഇത് ഒരു പൂർണ്ണ പ്രീകണക്ടിനേക്കാൾ കുറഞ്ഞ റിസോഴ്സ് മാത്രമേ ഉപയോഗിക്കുകയുള്ളു. - പ്രകടനം പരിശോധിക്കുക: പ്രീകണക്ട് മൊത്തത്തിൽ പ്രയോജനം നൽകുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ എപ്പോഴും പ്രകടനത്തിന്റെ സ്വാധീനം പരിശോധിക്കുക.
- മറ്റ് റിസോഴ്സ് ഹിൻ്റുകളുമായി സംയോജിപ്പിക്കുക: മികച്ച പ്രകടനം നേടുന്നതിന് പ്രീലോഡ്, പ്രീഫെച്ച് എന്നിവയുമായി ചേർന്ന് പ്രീകണക്ട് ഉപയോഗിക്കുക. ഉദാഹരണത്തിന്, നിങ്ങളുടെ ഫോണ്ടുകൾ ഹോസ്റ്റ് ചെയ്യുന്ന സെർവറിലേക്ക് പ്രീകണക്ട് ചെയ്യുക, തുടർന്ന് ഫോണ്ട് ഫയലുകൾ പ്രീലോഡ് ചെയ്യുക.
മികച്ച പ്രകടനത്തിനായി റിസോഴ്സ് ഹിൻ്റുകൾ സംയോജിപ്പിക്കുന്നു
റിസോഴ്സ് ഹിൻ്റുകളുടെ യഥാർത്ഥ ശക്തി അവ തന്ത്രപരമായി സംയോജിപ്പിക്കുന്നതിലാണ്. ഇതാ ഒരു പ്രായോഗിക ഉദാഹരണം:
ഒരു CDN-ൽ ഹോസ്റ്റ് ചെയ്ത കസ്റ്റം ഫോണ്ടും ഒരു നിർണ്ണായക ജാവാസ്ക്രിപ്റ്റ് ഫയലും ഉപയോഗിക്കുന്ന ഒരു വെബ്സൈറ്റ് സങ്കൽപ്പിക്കുക.
- CDN-ലേക്ക് പ്രീകണക്ട് ചെയ്യുക: ഫോണ്ടും ജാവാസ്ക്രിപ്റ്റ് ഫയലും ഹോസ്റ്റ് ചെയ്യുന്ന CDN-ലേക്ക് നേരത്തെ ഒരു കണക്ഷൻ സ്ഥാപിക്കുക.
<link rel="preconnect" href="https://cdn.example.com" crossorigin> - ഫോണ്ട് പ്രീലോഡ് ചെയ്യുക: FOUT തടയുന്നതിന് ഫോണ്ട് ലോഡുചെയ്യുന്നതിന് മുൻഗണന നൽകുക.
<link rel="preload" href="https://cdn.example.com/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> - ജാവാസ്ക്രിപ്റ്റ് ഫയൽ പ്രീലോഡ് ചെയ്യുക: ആവശ്യമുള്ളപ്പോൾ ജാവാസ്ക്രിപ്റ്റ് ഫയൽ ലഭ്യമാണെന്ന് ഉറപ്പാക്കാൻ അത് ലോഡുചെയ്യുന്നതിന് മുൻഗണന നൽകുക.
<link rel="preload" href="https://cdn.example.com/scripts/app.js" as="script">
റിസോഴ്സ് ഹിൻ്റുകൾ വിശകലനം ചെയ്യുന്നതിനുള്ള ടൂളുകൾ
നിങ്ങളുടെ റിസോഴ്സ് ഹിൻ്റുകളുടെ ഫലപ്രാപ്തി വിശകലനം ചെയ്യാൻ നിരവധി ടൂളുകൾ സഹായിക്കും:
- Google PageSpeed Insights: റിസോഴ്സ് ഹിൻ്റുകളുടെ ഉപയോഗം ഉൾപ്പെടെ, നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനുള്ള ശുപാർശകൾ നൽകുന്നു.
- WebPageTest: വ്യത്യസ്ത സ്ഥലങ്ങളിൽ നിന്നും നെറ്റ്‌വർക്ക് അവസ്ഥകളിൽ നിന്നും നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനം പരിശോധിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
- Chrome DevTools: Chrome DevTools-ലെ നെറ്റ്‌വർക്ക് പാനൽ റിസോഴ്സ് ലോഡിംഗിന്റെ സമയം കാണിക്കുകയും ഒപ്റ്റിമൈസേഷനുള്ള അവസരങ്ങൾ കണ്ടെത്താൻ സഹായിക്കുകയും ചെയ്യും.
- Lighthouse: വെബ് പേജുകളുടെ ഗുണമേന്മ മെച്ചപ്പെടുത്തുന്നതിനുള്ള ഒരു ഓട്ടോമേറ്റഡ് ടൂൾ. പ്രകടനം, ആക്സസിബിലിറ്റി, പ്രോഗ്രസ്സീവ് വെബ് ആപ്പുകൾ, എസ്ഇഒ എന്നിവയ്‌ക്കും അതിലേറെ കാര്യങ്ങൾക്കുമായി ഇതിന് ഓഡിറ്റുകളുണ്ട്.
സാധാരണ പിഴവുകളും അവ എങ്ങനെ ഒഴിവാക്കാം എന്നതും
- റിസോഴ്സ് ഹിൻ്റുകളുടെ അമിത ഉപയോഗം: വളരെയധികം റിസോഴ്സ് ഹിൻ്റുകൾ ഉപയോഗിക്കുന്നത് പ്രകടനത്തെ പ്രതികൂലമായി ബാധിക്കും. ഏറ്റവും നിർണായകമായ റിസോഴ്സുകളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുക.
- തെറ്റായ
asആട്രിബ്യൂട്ട്: പ്രീലോഡിനായി തെറ്റായasആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നത് റിസോഴ്സ് ശരിയായി ലോഡുചെയ്യുന്നത് തടഞ്ഞേക്കാം. - CORS അവഗണിക്കുന്നത്: ഒരു വ്യത്യസ്ത ഒറിജിനിൽ നിന്ന് റിസോഴ്സുകൾ ലോഡുചെയ്യുമ്പോൾ
crossoriginആട്രിബ്യൂട്ട് ഉൾപ്പെടുത്തുന്നതിൽ പരാജയപ്പെടുന്നത് ലോഡിംഗ് പിശകുകൾക്ക് കാരണമാകും. - പ്രകടനം പരിശോധിക്കാത്തത്: റിസോഴ്സ് ഹിൻ്റുകൾ മൊത്തത്തിൽ പ്രയോജനം നൽകുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ അവയുടെ പ്രകടന സ്വാധീനം എപ്പോഴും പരിശോധിക്കുക.
- തെറ്റായ പാതകൾ: റിസോഴ്സ് ഹിൻ്റുകൾക്കായി വ്യക്തമാക്കിയ എല്ലാ ഫയൽ പാതകളും URL-കളും ശരിയാണോയെന്ന് രണ്ടുതവണ പരിശോധിച്ച് ഉറപ്പാക്കുക, അല്ലാത്തപക്ഷം ഇത് ഒരു പിശകിന് കാരണമാകും.
റിസോഴ്സ് ഹിൻ്റുകളുടെ ഭാവി
പുതിയ ഫീച്ചറുകളും മെച്ചപ്പെടുത്തലുകളും ബ്രൗസർ സ്പെസിഫിക്കേഷനുകളിൽ ചേർക്കുന്നതിലൂടെ, റിസോഴ്സ് ഹിൻ്റുകൾ നിരന്തരം വികസിച്ചുകൊണ്ടിരിക്കുന്നു. റിസോഴ്സ് ഹിൻ്റുകളിലെ ഏറ്റവും പുതിയ സംഭവവികാസങ്ങൾക്കൊപ്പം അപ്‌ഡേറ്റായിരിക്കുന്നത് നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനം കൂടുതൽ ഒപ്റ്റിമൈസ് ചെയ്യാൻ സഹായിക്കും. ഉദാഹരണത്തിന്, ജാവാസ്ക്രിപ്റ്റ് മൊഡ്യൂളുകൾ പ്രീലോഡ് ചെയ്യുന്നതിനായി പ്രത്യേകം രൂപകൽപ്പന ചെയ്ത ഒരു പുതിയ റിസോഴ്സ് ഹിൻ്റാണ് modulepreload. കൂടാതെ, റിസോഴ്സ് ഹിൻ്റുകൾക്കായുള്ള `priority` ആട്രിബ്യൂട്ട് മറ്റ് റിസോഴ്സുകളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഒരു റിസോഴ്സിന്റെ മുൻഗണന വ്യക്തമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഈ ഫീച്ചറുകൾക്കുള്ള ബ്രൗസർ പിന്തുണ ഇപ്പോഴും വികസിച്ചുകൊണ്ടിരിക്കുന്നു, അതിനാൽ അവ നടപ്പിലാക്കുന്നതിന് മുമ്പ് അനുയോജ്യത പരിശോധിക്കുക.
ഉപസംഹാരം
വെബ്സൈറ്റ് ലോഡിംഗ് സമയം ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനും ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുന്നതിനും റിസോഴ്സ് ഹിൻ്റുകൾ ശക്തമായ ടൂളുകളാണ്. preload, prefetch, preconnect എന്നിവ തന്ത്രപരമായി ഉപയോഗിക്കുന്നതിലൂടെ, നിങ്ങൾക്ക് നിർണ്ണായകമായ റിസോഴ്സുകളെക്കുറിച്ച് ബ്രൗസറിനെ മുൻകൂട്ടി അറിയിക്കാനും, ലേറ്റൻസി കുറയ്ക്കാനും, നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പെർസീവ്ഡ് പെർഫോമൻസ് വർദ്ധിപ്പിക്കാനും കഴിയും. നിർണ്ണായക റിസോഴ്സുകൾക്ക് മുൻഗണന നൽകാനും, റിസോഴ്സ് ഹിൻ്റുകൾ വിവേകത്തോടെ ഉപയോഗിക്കാനും, നിങ്ങളുടെ മാറ്റങ്ങളുടെ പ്രകടന സ്വാധീനം എപ്പോഴും പരിശോധിക്കാനും ഓർമ്മിക്കുക. ഈ ലേഖനത്തിൽ പറഞ്ഞിരിക്കുന്ന മികച്ച രീതികൾ പിന്തുടരുന്നതിലൂടെ, നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനം ഗണ്യമായി മെച്ചപ്പെടുത്താനും ലോകമെമ്പാടുമുള്ള നിങ്ങളുടെ ഉപയോക്താക്കൾക്ക് മികച്ച അനുഭവം നൽകാനും കഴിയും.