ഉണ്ട് വെബ് പ്രകടനം മെച്ചപ്പെടുത്തുന്നതിനുള്ള നിരവധി മാർഗങ്ങൾ. അവയിലൊന്ന് പിന്നീട് ആവശ്യമായ ഉള്ളടക്കം പ്രീലോഡ് ചെയ്യുകയാണ്. CSS പ്രീ-പ്രോസസ്സിംഗ്, ഫുൾ പേജ് പ്രീ-റെൻഡറിംഗ് അല്ലെങ്കിൽ ഡൊമെയ്ൻ നെയിം റെസലൂഷൻ. ഞങ്ങൾ എല്ലാം മുൻകൂട്ടി ചെയ്യുന്നു, തുടർന്ന് ഫലം തൽക്ഷണം പ്രദർശിപ്പിക്കുക! കൊള്ളാം.

അതിലും രസകരമായത് അത് വളരെ ലളിതമായി നടപ്പിലാക്കിയിരിക്കുന്നു എന്നതാണ്. അഞ്ച് ടാഗുകൾ പ്രാഥമിക പ്രവർത്തനങ്ങൾ നടത്താൻ ബ്രൗസറിന് ഒരു കമാൻഡ് നൽകുക:

<link rel="prefetch" href="/ml/style.css" as="style" />
<link rel="preload" href="/ml/style.css" as="style" />

<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />

<link rel="prerender" href="https://example.com/about.html" />

അവർ എന്താണ് ചെയ്യുന്നതെന്നും എപ്പോൾ ഉപയോഗിക്കണമെന്നും നമുക്ക് ചുരുക്കമായി വിശദീകരിക്കാം.

ചാടുക: പ്രിലോഡുചെയ്യുക · പ്രീഫെച്ച് · മുൻകൂട്ടി ബന്ധിപ്പിക്കുക · dns-prefetch · പ്രീറെൻഡർ

പ്രിലോഡുചെയ്യുക

<link rel= "preload"> ഒരു ഉറവിടം (സ്ക്രിപ്റ്റ് അല്ലെങ്കിൽ സ്റ്റൈൽഷീറ്റ് പോലുള്ളവ) എത്രയും വേഗം ലോഡ് ചെയ്യാനും കാഷെ ചെയ്യാനും ബ്രൗസറിനോട് പറയുന്നു. പേജ് ലോഡുചെയ്‌ത് കുറച്ച് നിമിഷങ്ങൾക്ക് ശേഷം ഒരു ഉറവിടം ആവശ്യമായി വരുമ്പോൾ ഇത് ഉപയോഗപ്രദമാണ് - നിങ്ങൾ പ്രക്രിയ വേഗത്തിലാക്കാൻ ആഗ്രഹിക്കുന്നു.

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

വാക്യഘടന

<link rel="preload" href="/ml/style.css" as="style" />

href നിങ്ങൾ ഡൗൺലോഡ് ചെയ്യാൻ ആഗ്രഹിക്കുന്ന ഉറവിടത്തിലേക്ക് പോയിന്റ് ചെയ്യുന്നു.

as ബ്രൗസറിൽ ഡൗൺലോഡ് ചെയ്യാൻ കഴിയുന്ന എന്തും ആകാം:

• style സ്റ്റൈൽ ഷീറ്റുകൾക്കായി,
• script സ്ക്രിപ്റ്റുകൾക്ക്,
• font ഫോണ്ടുകൾക്കായി,
• fetch ഉപയോഗിച്ച് ലോഡ് ചെയ്ത വിഭവങ്ങൾക്ക് fetch() അഥവാ XMLHttpRequest,
• മുഴുവൻ ലിസ്റ്റ് കാണുക MDN-ൽ.

ആട്രിബ്യൂട്ട് വ്യക്തമാക്കേണ്ടത് പ്രധാനമാണ് as - ഡൗൺലോഡുകൾ ശരിയായി മുൻഗണന നൽകാനും ഷെഡ്യൂൾ ചെയ്യാനും ഇത് ബ്രൗസറിനെ സഹായിക്കുന്നു.

എപ്പോൾ ഉപയോഗിക്കണം

സമീപഭാവിയിൽ റിസോഴ്സ് ആവശ്യമുള്ളപ്പോൾ പ്രീലോഡിംഗ് ഉപയോഗിക്കുക. ഉദാഹരണത്തിന്:

• ഒരു ബാഹ്യ ഫയലിൽ നിന്നുള്ള നിലവാരമില്ലാത്ത ഫോണ്ടുകൾ:

  <!-- index.html -->
  <link rel="stylesheet" href="index.css" />
  /* index.css */
  @font-face {
    src: url('comic-sans.woff2') format('woff2');
  }

  സ്ഥിരമായി comic-sans.woff2 ഡൗൺലോഡ് ചെയ്‌ത് പാഴ്‌സ് ചെയ്‌തതിനുശേഷം മാത്രമേ ലോഡ് ചെയ്യാൻ തുടങ്ങൂ index.css. ദീർഘനേരം കാത്തിരിക്കുന്നത് ഒഴിവാക്കാൻ, നിങ്ങൾക്ക് നേരത്തെ ഉപയോഗിച്ച് ഫോണ്ട് ഡൗൺലോഡ് ചെയ്യാം <link rel= "preload">:

  <link rel="preload" href="comic-sans.woff2" as="font" />

• സമീപനം അനുസരിച്ച് നിങ്ങളുടെ ശൈലികൾ വേർതിരിക്കുകയാണെങ്കിൽ ഗുരുതരമായ CSS രണ്ട് ഭാഗങ്ങളായി, നിർണായകവും (ഉടൻ റെൻഡറിംഗിനായി) നിർണ്ണായകമല്ലാത്തതും:

  <style>
  /* Inlined critical styles */
  </style>
  
  <script>
  /* Custom JS that starts downloading non-critical styles */
  loadCSS('/app/non-critical.css');
  </script>

  ഈ സമീപനം ഉപയോഗിച്ച്, JavaScript പ്രവർത്തിക്കുമ്പോൾ മാത്രമേ ക്രിട്ടിക്കൽ അല്ലാത്ത ശൈലികൾ ലോഡുചെയ്യാൻ തുടങ്ങുകയുള്ളൂ, ഇത് റെൻഡർ ചെയ്തതിന് ശേഷം കുറച്ച് നിമിഷങ്ങൾക്കുള്ളിൽ സംഭവിക്കാം. JS ഉപയോഗം കാത്തിരിക്കുന്നതിനുപകരം <link rel= "preload">നേരത്തെ ഡൗൺലോഡ് ചെയ്യാൻ തുടങ്ങാൻ:

  <style>
  /* Inlined critical styles */
  </style>
  
  <link rel="preload" href="/ml/app/non-critical.css" as="style" />
  
  <script>
  /* Custom JS that starts downloading non-critical styles */
  loadCSS('/app/non-critical.css');
  </script>

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

പ്രീഫെച്ചിംഗുമായി തെറ്റിദ്ധരിക്കേണ്ടതില്ല. ഉപയോഗിക്കരുത് <link rel= "preload">, പേജ് ലോഡ് ചെയ്‌തതിന് ശേഷം നിങ്ങൾക്ക് ഉറവിടം ആവശ്യമില്ലെങ്കിൽ. നിങ്ങൾക്ക് ഇത് പിന്നീട് ആവശ്യമുണ്ടെങ്കിൽ, ഉദാഹരണത്തിന് അടുത്ത പേജിനായി, തുടർന്ന് ഉപയോഗിക്കുക <link rel= "prefetch">.

വിശദാംശങ്ങൾ കാണുക

ഇതൊരു ആവശ്യമായ ടാഗാണ് മറ്റെല്ലാ ടാഗുകളിൽ നിന്നും വ്യത്യസ്തമായി ബ്രൗസർ (അത് പിന്തുണയ്ക്കുന്നുവെങ്കിൽ) നിർവ്വഹിക്കേണ്ടതാണ് പ്രീലോഡിംഗുമായി ബന്ധപ്പെട്ടിരിക്കുന്നു. ബ്രൗസർ വ്യക്തമാക്കിയിട്ടുള്ള ഉറവിടം ഡൗൺലോഡ് ചെയ്യണം <link rel="preload">. മറ്റ് സന്ദർഭങ്ങളിൽ ഇത് പ്രീലോഡിംഗ് അവഗണിക്കാം, ഉദാഹരണത്തിന് ഇത് വേഗത കുറഞ്ഞ കണക്ഷനിലാണ് പ്രവർത്തിക്കുന്നതെങ്കിൽ.

മുൻഗണനകൾ. ഏറ്റവും പ്രധാനപ്പെട്ട ഉറവിടങ്ങൾ ആദ്യം ലോഡ് ചെയ്യുന്നതിനായി ബ്രൗസറുകൾ സാധാരണയായി വ്യത്യസ്ത ഉറവിടങ്ങൾക്ക് (സ്റ്റൈലുകൾ, സ്ക്രിപ്റ്റുകൾ, ഫോണ്ടുകൾ മുതലായവ) വ്യത്യസ്ത മുൻഗണനകൾ നൽകുന്നു. ഈ സാഹചര്യത്തിൽ, ആട്രിബ്യൂട്ട് പ്രകാരം ബ്രൗസർ മുൻഗണന നിർണ്ണയിക്കുന്നു as. Chrome ബ്രൗസറിനായി നിങ്ങൾക്ക് നോക്കാം പൂർണ്ണ മുൻഗണന പട്ടിക.

പ്രീഫെച്ച്

<link rel= "prefetch"> പശ്ചാത്തലത്തിൽ ഒരു ഉറവിടം (സ്ക്രിപ്റ്റ് അല്ലെങ്കിൽ സ്റ്റൈൽ ഷീറ്റ് പോലുള്ളവ) ഡൗൺലോഡ് ചെയ്ത് കാഷെ ചെയ്യാൻ ബ്രൗസറിനോട് ആവശ്യപ്പെടുന്നു. ലോഡിംഗ് കുറഞ്ഞ മുൻ‌ഗണനയിൽ നടക്കുന്നതിനാൽ കൂടുതൽ പ്രധാനപ്പെട്ട ഉറവിടങ്ങളിൽ ഇത് ഇടപെടുന്നില്ല. അടുത്ത പേജിൽ റിസോഴ്സ് ആവശ്യമുണ്ടെങ്കിൽ, നിങ്ങൾ അത് മുൻകൂട്ടി കാഷെ ചെയ്യണമെങ്കിൽ ഇത് ഉപയോഗപ്രദമാണ്.

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

വാക്യഘടന

<link rel="prefetch" href="/ml/style.css" as="style" />

href നിങ്ങൾ ഡൗൺലോഡ് ചെയ്യാൻ ആഗ്രഹിക്കുന്ന ഉറവിടത്തിലേക്ക് പോയിന്റ് ചെയ്യുന്നു.

as ബ്രൗസറിൽ ഡൗൺലോഡ് ചെയ്യാൻ കഴിയുന്ന എന്തും ആകാം:

• style സ്റ്റൈൽ ഷീറ്റുകൾക്കായി,
• script സ്ക്രിപ്റ്റുകൾക്ക്,
• font ഫോണ്ടുകൾക്കായി,
• fetch ഉപയോഗിച്ച് ലോഡ് ചെയ്ത വിഭവങ്ങൾക്ക് fetch() അഥവാ XMLHttpRequest,
• മുഴുവൻ ലിസ്റ്റ് കാണുക MDN-ൽ.

ആട്രിബ്യൂട്ട് വ്യക്തമാക്കേണ്ടത് പ്രധാനമാണ് as - ഇത് ബ്രൗസറിനെ ശരിയായി മുൻഗണന നൽകാനും ഡൗൺലോഡുകൾ ഷെഡ്യൂൾ ചെയ്യാനും സഹായിക്കുന്നു.

എപ്പോൾ ഉപയോഗിക്കണം

മറ്റ് പേജുകളിൽ നിന്ന് ഉറവിടങ്ങൾ ലോഡ് ചെയ്യാൻ, നിങ്ങൾക്ക് മറ്റൊരു പേജിൽ നിന്ന് ഒരു ഉറവിടം ആവശ്യമുണ്ടെങ്കിൽ, ആ പേജിന്റെ റെൻഡറിംഗ് വേഗത്തിലാക്കാൻ അത് പ്രീലോഡ് ചെയ്യാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ. ഉദാഹരണത്തിന്:

• നിങ്ങൾക്ക് ഒരു ഓൺലൈൻ സ്റ്റോർ ഉണ്ട്, കൂടാതെ 40% ഉപയോക്താക്കളും ഉൽപ്പന്ന പേജിനായി ഹോം പേജ് ഉപേക്ഷിക്കുന്നു. ഉപയോഗിക്കുക <link rel= "prefetch">, ഉൽപ്പന്ന പേജുകൾ റെൻഡർ ചെയ്യുന്നതിന് CSS, JS ഫയലുകൾ ലോഡ് ചെയ്യുന്നു.
• നിങ്ങൾക്ക് ഒരൊറ്റ പേജ് ആപ്ലിക്കേഷനുണ്ട്, വ്യത്യസ്ത പേജുകൾ വ്യത്യസ്ത പാക്കേജുകൾ ലോഡ് ചെയ്യുന്നു. ഒരു ഉപയോക്താവ് ഒരു പേജ് സന്ദർശിക്കുമ്പോൾ, അത് ലിങ്ക് ചെയ്യുന്ന എല്ലാ പേജുകളുടെയും പാക്കേജുകൾ പ്രീലോഡ് ചെയ്യാൻ കഴിയും.

ഈ ടാഗ് ഒരു പരിധി വരെ സുരക്ഷിതമായി ഉപയോഗിക്കാൻ സാധ്യതയുണ്ട്.. ബ്രൗസറുകൾ സാധാരണയായി ഏറ്റവും കുറഞ്ഞ മുൻഗണനയോടെ പ്രീഫെച്ച് ഷെഡ്യൂൾ ചെയ്യുന്നു, അതിനാൽ ഇത് ആരെയും ബുദ്ധിമുട്ടിക്കുന്നില്ല. ഇത് ഉപയോക്തൃ ട്രാഫിക് ഉപയോഗിക്കുന്നുവെന്നത് ഓർക്കുക, ഇത് പണം ചിലവാകും.

അടിയന്തര അഭ്യർത്ഥനകൾക്കല്ല. ഉപയോഗിക്കരുത് <link rel= "prefetch">, കുറച്ച് നിമിഷങ്ങൾക്കുള്ളിൽ റിസോഴ്സ് ആവശ്യമുള്ളപ്പോൾ. ഈ സാഹചര്യത്തിൽ, ഉപയോഗിക്കുക <link rel= "preload">.

വിശദാംശങ്ങൾ കാണുക

ഓപ്ഷണൽ ടാഗ്. ഈ നിർദ്ദേശം പാലിക്കാൻ ബ്രൗസറിന് ആവശ്യമില്ല; അത് അവഗണിക്കാം, ഉദാഹരണത്തിന്, വേഗത കുറഞ്ഞ കണക്ഷനിൽ.

Chrome-ൽ മുൻഗണന. Chrome-ൽ <link rel= "prefetch"> സാധാരണയായി ഏറ്റവും കുറഞ്ഞ മുൻഗണനയോടെ നടപ്പിലാക്കുന്നു (കാണുക പൂർണ്ണ മുൻഗണന പട്ടിക), അതായത്, മറ്റെല്ലാം ലോഡ് ചെയ്ത ശേഷം.

മുൻകൂട്ടി ബന്ധിപ്പിക്കുക

<link rel= "preconnect"> ഭാവിയിൽ കണക്ഷൻ സജ്ജീകരണം വേഗത്തിലാക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുമ്പോൾ, ഡൊമെയ്‌നിലേക്ക് മുൻകൂട്ടി കണക്റ്റുചെയ്യാൻ ബ്രൗസറിനോട് ആവശ്യപ്പെടുന്നു.

ഒരു പുതിയ മൂന്നാം കക്ഷി ഡൊമെയ്‌നിൽ നിന്ന് എന്തെങ്കിലും ഉറവിടങ്ങൾ വീണ്ടെടുക്കുകയാണെങ്കിൽ ബ്രൗസർ ഒരു കണക്ഷൻ സ്ഥാപിക്കണം. ഉദാഹരണത്തിന്, അത് ഗൂഗിൾ ഫോണ്ടുകൾ ലോഡ് ചെയ്യുകയാണെങ്കിൽ, ഒരു CDN-ൽ നിന്ന് ഫോണ്ടുകൾ പ്രതികരിക്കുക, അല്ലെങ്കിൽ ഒരു API സെർവറിൽ നിന്ന് JSON പ്രതികരണം അഭ്യർത്ഥിക്കുക.

ഒരു പുതിയ കണക്ഷൻ സ്ഥാപിക്കുന്നതിന് സാധാരണയായി നൂറുകണക്കിന് മില്ലിസെക്കൻഡ് എടുക്കും. ഇത് ഒരിക്കൽ ചെയ്തു, പക്ഷേ ഇപ്പോഴും സമയമെടുക്കും. നിങ്ങൾ മുൻകൂട്ടി ഒരു കണക്ഷൻ സ്ഥാപിച്ചിട്ടുണ്ടെങ്കിൽ, നിങ്ങൾ സമയം ലാഭിക്കുകയും ഈ ഡൊമെയ്‌നിൽ നിന്ന് വേഗത്തിൽ വിഭവങ്ങൾ ഡൗൺലോഡ് ചെയ്യുകയും ചെയ്യും.

വാക്യഘടന

<link rel= "preconnect" href="https://api.my-app.com" />

href നിങ്ങൾ ഐപി വിലാസം നിർണ്ണയിക്കാൻ ആഗ്രഹിക്കുന്ന ഡൊമെയ്ൻ നാമം സൂചിപ്പിക്കുന്നു. ഒരു പ്രിഫിക്സ് ഉപയോഗിച്ച് വ്യക്തമാക്കാം (https://domain.com) അല്ലെങ്കിൽ അതില്ലാതെ (//domain.com).

എപ്പോൾ ഉപയോഗിക്കണം

ഉടൻ ആവശ്യമായ ഡൊമെയ്‌നുകൾക്കായി ഉപയോഗിക്കുക അവിടെ നിന്ന് ഒരു പ്രധാന ശൈലിയോ സ്ക്രിപ്റ്റോ ചിത്രമോ ഡൗൺലോഡ് ചെയ്യാൻ, എന്നാൽ നിങ്ങൾക്ക് ഇതുവരെ റിസോഴ്സ് URL അറിയില്ല. ഉദാഹരണത്തിന്:

• നിങ്ങളുടെ അപേക്ഷ ഹോസ്റ്റ് ചെയ്‌തിരിക്കുന്നു my-app.com കൂടാതെ AJAX അഭ്യർത്ഥനകൾ നടത്തുന്നു api.my-app.com: JS-ൽ നിന്ന് ചലനാത്മകമായി നിർമ്മിച്ചതിനാൽ നിർദ്ദിഷ്ട അന്വേഷണങ്ങൾ നിങ്ങൾക്ക് മുൻകൂട്ടി അറിയില്ല. ഇവിടെ ഡൊമെയ്‌നിലേക്ക് മുൻകൂട്ടി കണക്റ്റുചെയ്യുന്നതിന് ഒരു ടാഗ് ഉപയോഗിക്കുന്നത് തികച്ചും ഉചിതമാണ്.
• നിങ്ങളുടെ അപേക്ഷ ഹോസ്റ്റ് ചെയ്‌തിരിക്കുന്നു my-app.com കൂടാതെ ഗൂഗിൾ ഫോണ്ടുകൾ ഉപയോഗിക്കുന്നു. അവ രണ്ട് ഘട്ടങ്ങളിലായാണ് ഡൗൺലോഡ് ചെയ്യുന്നത്: ആദ്യം, CSS ഫയൽ ഡൊമെയ്‌നിൽ നിന്ന് ഡൗൺലോഡ് ചെയ്യുന്നു fonts.googleapis.com, തുടർന്ന് ഈ ഫയൽ ഫോണ്ടുകൾ അഭ്യർത്ഥിക്കുന്നു fonts.gstatic.com. ഏത് നിർദ്ദിഷ്ട ഫോണ്ട് ഫയലുകളിൽ നിന്നുള്ളതാണെന്ന് നിങ്ങൾക്ക് അറിയാൻ കഴിയില്ല fonts.gstatic.com നിങ്ങൾ CSS ഫയൽ ലോഡ് ചെയ്യുന്നതുവരെ നിങ്ങൾക്ക് ആവശ്യമായി വരും, അതിനാൽ ഞങ്ങൾക്ക് മുൻകൂട്ടി ഒരു പ്രാഥമിക കണക്ഷൻ മാത്രമേ ഉണ്ടാക്കാൻ കഴിയൂ.

ചില മൂന്നാം കക്ഷി സ്ക്രിപ്റ്റോ ശൈലിയോ അൽപ്പം വേഗത്തിലാക്കാൻ ഈ ടാഗ് ഉപയോഗിക്കുക മുൻകൂട്ടി സ്ഥാപിച്ച കണക്ഷൻ കാരണം.

അമിതമായി ഉപയോഗിക്കരുത്. ഒരു കണക്ഷൻ സ്ഥാപിക്കുന്നതും പരിപാലിക്കുന്നതും ക്ലയന്റിനും സെർവറിനും ചെലവേറിയ പ്രവർത്തനമാണ്. പരമാവധി 4-6 ഡൊമെയ്‌നുകൾക്കായി ഈ ടാഗ് ഉപയോഗിക്കുക.

വിശദാംശങ്ങൾ കാണുക

ഓപ്ഷണൽ ടാഗ്. ഈ നിർദ്ദേശം പാലിക്കാൻ ബ്രൗസറിന് ആവശ്യമില്ല, അത് അവഗണിക്കാം, ഉദാഹരണത്തിന്, നിരവധി കണക്ഷനുകൾ ഇതിനകം സ്ഥാപിച്ചിട്ടുണ്ടെങ്കിൽ അല്ലെങ്കിൽ മറ്റേതെങ്കിലും സാഹചര്യത്തിൽ.

കണക്ഷൻ പ്രക്രിയയിൽ എന്താണ് ഉൾപ്പെടുന്നത്?. ഓരോ സൈറ്റിലേക്കും കണക്റ്റുചെയ്യുന്നതിന്, ബ്രൗസർ ഇനിപ്പറയുന്നവ ചെയ്യണം:

• DNS റെസല്യൂഷൻ. സെർവർ IP വിലാസം കണ്ടെത്തുക (216.58.215.78) നിർദ്ദിഷ്ട ഡൊമെയ്ൻ നാമത്തിന് (google.com).
• ടിസിപി ഹസ്തദാനം. സെർവറുമായി ഒരു TCP കണക്ഷൻ ആരംഭിക്കുന്നതിന് പാക്കറ്റുകൾ (ക്ലയന്റ് → സെർവർ → ക്ലയന്റ്) കൈമാറുക.
• TLS ഹാൻഡ്‌ഷേക്ക് (HTTPS സൈറ്റുകൾ മാത്രം). സുരക്ഷിതമായ TLS സെഷൻ ആരംഭിക്കുന്നതിന് രണ്ട് റൗണ്ട് പാക്കറ്റ് എക്സ്ചേഞ്ച് (ക്ലയന്റ് → സെർവർ → ക്ലയന്റ് → സെർവർ → ക്ലയന്റ്).

ശ്രദ്ധിക്കുക: HTTP/3 ഹാൻഡ്‌ഷേക്ക് മെക്കാനിസം മെച്ചപ്പെടുത്തുകയും വേഗത്തിലാക്കുകയും ചെയ്യും, പക്ഷേ ഇത് ഇപ്പോഴും വളരെ അകലെയാണ്.

dns-prefetch

<link rel= "dns-prefetch"> നിങ്ങൾ ഉടൻ തന്നെ ഡൊമെയ്‌നിലേക്ക് കണക്റ്റുചെയ്യുകയും പ്രാരംഭ കണക്ഷൻ വേഗത്തിലാക്കാൻ ആഗ്രഹിക്കുകയും ചെയ്യുന്നുവെങ്കിൽ, ഡൊമെയ്‌നിനായുള്ള DNS റെസല്യൂഷൻ മുൻകൂട്ടി നടപ്പിലാക്കാൻ ബ്രൗസറിനോട് ആവശ്യപ്പെടുന്നു.

ഒരു പുതിയ മൂന്നാം കക്ഷി ഡൊമെയ്‌നിൽ നിന്ന് എന്തെങ്കിലും ഉറവിടങ്ങൾ വീണ്ടെടുക്കുകയാണെങ്കിൽ ഡൊമെയ്‌നിന്റെ IP വിലാസം ബ്രൗസർ നിർണ്ണയിക്കണം. ഉദാഹരണത്തിന്, ഒരു CDN-ൽ നിന്ന് Google ഫോണ്ടുകൾ, പ്രതികരണ ഫോണ്ടുകൾ ലോഡുചെയ്യുക, അല്ലെങ്കിൽ API സെർവറിൽ നിന്ന് JSON പ്രതികരണം അഭ്യർത്ഥിക്കുക.

ഓരോ പുതിയ ഡൊമെയ്‌നിനും, DNS റെക്കോർഡ് റെസലൂഷൻ സാധാരണയായി 20-120 ms എടുക്കും. തന്നിരിക്കുന്ന ഡൊമെയ്‌നിൽ നിന്നുള്ള ആദ്യ ഉറവിടം ലോഡുചെയ്യുന്നതിനെ മാത്രമേ ഇത് ബാധിക്കുകയുള്ളൂ, പക്ഷേ ഇപ്പോഴും കാലതാമസം അവതരിപ്പിക്കുന്നു. ഞങ്ങൾ DNS റെസല്യൂഷൻ മുൻകൂട്ടി നടപ്പിലാക്കുകയാണെങ്കിൽ, ഞങ്ങൾ സമയം ലാഭിക്കുകയും റിസോഴ്സ് വേഗത്തിൽ ലോഡ് ചെയ്യുകയും ചെയ്യും.

വാക്യഘടന

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href നിങ്ങൾ ഐപി വിലാസം സജ്ജീകരിക്കാൻ ആഗ്രഹിക്കുന്ന ഡൊമെയ്ൻ നാമം സൂചിപ്പിക്കുന്നു. ഒരു പ്രിഫിക്സ് ഉപയോഗിച്ച് വ്യക്തമാക്കാം (https://domain.com) അല്ലെങ്കിൽ അതില്ലാതെ (//domain.com).

എപ്പോൾ ഉപയോഗിക്കണം

ഉടൻ ആവശ്യമായ ഡൊമെയ്‌നുകൾക്കായി ഉപയോഗിക്കുക ബ്രൗസറിന് മുൻകൂട്ടി അറിയാത്ത ഉറവിടങ്ങൾ അവിടെ നിന്ന് ഡൗൺലോഡ് ചെയ്യാൻ. ഉദാഹരണത്തിന്:

• നിങ്ങളുടെ അപേക്ഷ ഹോസ്റ്റ് ചെയ്‌തിരിക്കുന്നു my-app.com കൂടാതെ AJAX അഭ്യർത്ഥനകൾ നടത്തുന്നു api.my-app.com: JS-ൽ നിന്ന് ചലനാത്മകമായി നിർമ്മിച്ചതിനാൽ നിർദ്ദിഷ്ട അന്വേഷണങ്ങൾ നിങ്ങൾക്ക് മുൻകൂട്ടി അറിയില്ല. ഇവിടെ ഡൊമെയ്‌നിലേക്ക് മുൻകൂട്ടി കണക്റ്റുചെയ്യുന്നതിന് ഒരു ടാഗ് ഉപയോഗിക്കുന്നത് തികച്ചും ഉചിതമാണ്.
• നിങ്ങളുടെ അപേക്ഷ ഹോസ്റ്റ് ചെയ്‌തിരിക്കുന്നു my-app.com, കൂടാതെ Google ഫോണ്ടുകൾ ഉപയോഗിക്കുന്നു. അവ രണ്ട് ഘട്ടങ്ങളിലായാണ് ഡൗൺലോഡ് ചെയ്യുന്നത്: ആദ്യം, CSS ഫയൽ ഡൊമെയ്‌നിൽ നിന്ന് ഡൗൺലോഡ് ചെയ്യുന്നു fonts.googleapis.com, തുടർന്ന് ഈ ഫയൽ ഫോണ്ടുകൾ അഭ്യർത്ഥിക്കുന്നു fonts.gstatic.com. ഏത് നിർദ്ദിഷ്ട ഫോണ്ട് ഫയലുകളിൽ നിന്നുള്ളതാണെന്ന് നിങ്ങൾക്ക് അറിയാൻ കഴിയില്ല fonts.gstatic.com നിങ്ങൾ CSS ഫയൽ ലോഡ് ചെയ്യുന്നതുവരെ നിങ്ങൾക്കത് ആവശ്യമായി വരും, അതിനാൽ ഞങ്ങൾക്ക് മുൻകൂട്ടി ഒരു പ്രാഥമിക കണക്ഷൻ മാത്രമേ ഉണ്ടാക്കാൻ കഴിയൂ.

ചില മൂന്നാം കക്ഷി സ്ക്രിപ്റ്റോ ശൈലിയോ അൽപ്പം വേഗത്തിലാക്കാൻ ഈ ടാഗ് ഉപയോഗിക്കുക മുൻകൂട്ടി സ്ഥാപിച്ച കണക്ഷൻ കാരണം.

സമാനമായ സവിശേഷതകൾ ദയവായി ശ്രദ്ധിക്കുക <link rel= "dns-prefetch"/> и <link rel= "preconnect">. ഒരു ഡൊമെയ്‌നിനായി അവ ഒരുമിച്ച് ഉപയോഗിക്കുന്നത് സാധാരണയായി അർത്ഥമാക്കുന്നില്ല: <link rel= "preconnect"> ഇതിനകം ഉൾപ്പെടുന്നു <link rel= "dns-prefetch"/> അതോടൊപ്പം തന്നെ കുടുതല്. ഇത് രണ്ട് കേസുകളിൽ ന്യായീകരിക്കാം:

• നിങ്ങൾക്ക് പഴയ ബ്രൗസറുകൾ പിന്തുണയ്‌ക്കണോ?. <link rel= "dns-prefetch" /> പിന്തുണയ്ക്കുന്ന IE10, Safari 5 മുതൽ. <link rel= "preconnect"> Chrome, Firefox എന്നിവയിൽ കുറച്ചുകാലത്തേക്ക് പിന്തുണച്ചു, എന്നാൽ 11.1-ലും സഫാരിയിലും മാത്രമേ ചേർത്തിട്ടുള്ളൂ IE/Edge-ൽ ഇപ്പോഴും പിന്തുണയ്ക്കുന്നില്ല. നിങ്ങൾക്ക് ഈ ബ്രൗസറുകൾ പിന്തുണയ്‌ക്കണമെങ്കിൽ, ഉപയോഗിക്കുക <link rel= "dns-prefetch" /> ഒരു ബാക്കപ്പ് ഓപ്ഷനായി <link rel= "preconnect">.
• 4-6 ഡൊമെയ്‌നുകളിൽ കൂടുതൽ കണക്ഷനുകൾ വേഗത്തിലാക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു. ടാഗ് ചെയ്യുക <link rel= "preconnect"> ഒരു കണക്ഷൻ സ്ഥാപിക്കുന്നതും പരിപാലിക്കുന്നതും ചെലവേറിയ പ്രവർത്തനമായതിനാൽ 4-6 ഡൊമെയ്‌നുകളിൽ കൂടുതൽ ഉപയോഗിക്കാൻ ശുപാർശ ചെയ്യുന്നില്ല. <link rel= "dns-prefetch" /> കുറച്ച് വിഭവങ്ങൾ ഉപയോഗിക്കുന്നു, അതിനാൽ ആവശ്യമെങ്കിൽ അത് ഉപയോഗിക്കുക.

വിശദാംശങ്ങൾ കാണുക

ഓപ്ഷണൽ ടാഗ്. ഈ നിർദ്ദേശം പാലിക്കാൻ ബ്രൗസറിന് ആവശ്യമില്ല, അതിനാൽ അത് DNS റെസല്യൂഷൻ നടപ്പിലാക്കിയേക്കില്ല, ഉദാഹരണത്തിന്, പേജിലോ മറ്റേതെങ്കിലും സാഹചര്യത്തിലോ അത്തരം നിരവധി ടാഗുകൾ ഉണ്ടെങ്കിൽ.

എന്താണ് DNS. ഇൻറർനെറ്റിലെ ഓരോ സെർവറിനും ഒരു തനതായ IP വിലാസമുണ്ട്, അത് ഇതുപോലെ കാണപ്പെടുന്നു 216.58.215.78. സൈറ്റിന്റെ പേര് സാധാരണയായി ബ്രൗസറിന്റെ വിലാസ ബാറിൽ നൽകാറുണ്ട് (ഉദാഹരണത്തിന്, google.com), DNS (ഡൊമെയ്ൻ നെയിം സിസ്റ്റം) സെർവറുകൾ സെർവറിന്റെ IP വിലാസവുമായി പൊരുത്തപ്പെടുന്നു (216.58.215.78).

ഒരു IP വിലാസം നിർണ്ണയിക്കാൻ, ബ്രൗസർ DNS സെർവറിൽ അന്വേഷിക്കണം. ഒരു പുതിയ മൂന്നാം കക്ഷി ഡൊമെയ്‌നിലേക്ക് കണക്‌റ്റ് ചെയ്യുമ്പോൾ 20−120 ms എടുക്കും.

വളരെ വിശ്വസനീയമല്ലെങ്കിലും DNS കാഷെ ചെയ്‌തിരിക്കുന്നു. ചില OS-കളും ബ്രൗസറുകളും DNS അന്വേഷണങ്ങൾ കാഷെ ചെയ്യുന്നു: ഇത് ആവർത്തിച്ചുള്ള അന്വേഷണങ്ങളിൽ സമയം ലാഭിക്കും, പക്ഷേ കാഷെ ചെയ്യുന്നതിൽ ആശ്രയിക്കാനാവില്ല. Linux-ൽ ഇത് സാധാരണയായി പ്രവർത്തിക്കില്ല. Chrome-ന് ഒരു DNS കാഷെ ഉണ്ട്, എന്നാൽ ഇത് ഒരു മിനിറ്റ് മാത്രമേ നിലനിൽക്കൂ. അഞ്ച് ദിവസത്തേക്ക് വിൻഡോസ് ഡിഎൻഎസ് പ്രതികരണങ്ങൾ കാഷെ ചെയ്യുന്നു.

പ്രീറെൻഡർ

<link rel= "prerender"> URL ഡൗൺലോഡ് ചെയ്ത് ഒരു അദൃശ്യ ടാബിൽ പ്രദർശിപ്പിക്കാൻ ബ്രൗസറിനോട് ആവശ്യപ്പെടുന്നു. ഉപയോക്താവ് ലിങ്കിൽ ക്ലിക്കുചെയ്യുമ്പോൾ, പേജ് ഉടനടി പ്രദർശിപ്പിക്കണം. ഉപയോക്താവ് ഒരു നിശ്ചിത പേജ് സന്ദർശിക്കുമെന്നും അതിന്റെ ഡിസ്പ്ലേ വേഗത്തിലാക്കാൻ ആഗ്രഹിക്കുന്നുവെന്നും നിങ്ങൾക്ക് ഉറപ്പുണ്ടെങ്കിൽ ഇത് ഉപയോഗപ്രദമാണ്.

ഈ ടാഗിന്റെ അസാധാരണമായ ഫലപ്രാപ്തി ഉണ്ടായിരുന്നിട്ടും (അല്ലെങ്കിൽ കാരണം), 2019 ൽ <link rel= "prerender"> പ്രധാന ബ്രൗസറുകളിൽ മോശമായി പിന്തുണയ്ക്കുന്നു. കൂടുതൽ വിശദാംശങ്ങൾ കാണുക. താഴെ.

വാക്യഘടന

<link rel="prerender" href="https://my-app.com/pricing" />

href നിങ്ങൾ പശ്ചാത്തലത്തിൽ റെൻഡർ ചെയ്യാൻ ആഗ്രഹിക്കുന്ന URL-ലേക്ക് പോയിന്റ് ചെയ്യുന്നു.

എപ്പോൾ ഉപയോഗിക്കണം

ഉപയോക്താവ് ഒരു നിശ്ചിത പേജിലേക്ക് പോകുമെന്ന് നിങ്ങൾക്ക് ഉറപ്പുണ്ടെങ്കിൽ. നിങ്ങൾക്ക് ഒരു "തുരങ്കം" ഉണ്ടെങ്കിൽ, അതിലൂടെ പേജ് എയിലെ 70% സന്ദർശകരും ബി പേജിലേക്ക് പോകുക <link rel= "prerender"> പേജിൽ എ പേജ് വളരെ വേഗത്തിൽ പ്രദർശിപ്പിക്കാൻ സഹായിക്കും.

അമിതമായി ഉപയോഗിക്കരുത്. ബാൻഡ്‌വിഡ്‌ത്തിന്റെയും മെമ്മറിയുടെയും കാര്യത്തിൽ പ്രീ-റെൻഡറിംഗ് വളരെ ചെലവേറിയതാണ്. ഉപയോഗിക്കരുത് <link rel= "prerender"> ഒന്നിലധികം പേജുകൾക്ക്.

വിശദാംശങ്ങൾ കാണുക

ഓപ്ഷണൽ ടാഗ്. ഈ നിർദ്ദേശം പാലിക്കാൻ ബ്രൗസറിന് ആവശ്യമില്ല, ഇത് അവഗണിക്കാം, ഉദാഹരണത്തിന്, വേഗത കുറഞ്ഞ കണക്ഷനിൽ അല്ലെങ്കിൽ മതിയായ സൗജന്യ മെമ്മറി ഇല്ലെങ്കിൽ.

മെമ്മറി സംരക്ഷിക്കാൻ Chrome പൂർണ്ണ റെൻഡറിംഗ് ചെയ്യുന്നില്ലഒപ്പം നോസ്റ്റേറ്റ് മാത്രം പ്രീലോഡ് ചെയ്യുക. ഇതിനർത്ഥം Chrome പേജും അതിന്റെ എല്ലാ ഉറവിടങ്ങളും ലോഡുചെയ്യുന്നു, പക്ഷേ JavaScript റെൻഡർ ചെയ്യുകയോ എക്സിക്യൂട്ട് ചെയ്യുകയോ ചെയ്യുന്നില്ല.

ഫയർഫോക്സും സഫാരിയും ഈ ടാഗിനെ പിന്തുണയ്ക്കുന്നില്ല. ഇത് സ്പെസിഫിക്കേഷൻ ലംഘിക്കുന്നില്ല, കാരണം ബ്രൗസറുകൾ ഈ നിർദ്ദേശം പാലിക്കേണ്ടതില്ല; എന്നാലും ദുഃഖം. നടപ്പാക്കൽ ബഗ് ഏഴ് വർഷമായി ഫയർഫോക്സ് തുറന്നിരിക്കുന്നു. സഫാരി എന്നും റിപ്പോർട്ടുകളുണ്ട് ഈ ടാഗിനെയും പിന്തുണയ്ക്കുന്നില്ല.

സംഗ്രഹം

ഉപയോഗിക്കുക:

• <link rel= "preload"> - കുറച്ച് നിമിഷങ്ങൾക്കുള്ളിൽ നിങ്ങൾക്ക് ഒരു ഉറവിടം ആവശ്യമുള്ളപ്പോൾ
• <link rel= "prefetch"> - നിങ്ങൾക്ക് അടുത്ത പേജിൽ ഉറവിടം ആവശ്യമുള്ളപ്പോൾ
• <link rel= "preconnect"> - നിങ്ങൾക്ക് ഉടൻ തന്നെ ഒരു ഉറവിടം ആവശ്യമാണെന്ന് അറിയുമ്പോൾ, എന്നാൽ അതിന്റെ പൂർണ്ണമായ URL നിങ്ങൾക്ക് ഇതുവരെ അറിയില്ല
• <link rel= "dns-prefetch"> - സമാനമായി, നിങ്ങൾക്ക് ഉടൻ തന്നെ ഒരു റിസോഴ്സ് ആവശ്യമാണെന്ന് അറിയുമ്പോൾ, എന്നാൽ അതിന്റെ പൂർണ്ണമായ URL നിങ്ങൾക്ക് ഇതുവരെ അറിയില്ല (പഴയ ബ്രൗസറുകൾക്ക്)
• <link rel= "prerender"> — ഉപയോക്താക്കൾ ഒരു നിശ്ചിത പേജിലേക്ക് പോകുമെന്ന് നിങ്ങൾക്ക് ഉറപ്പുണ്ടെങ്കിൽ, അതിന്റെ ഡിസ്പ്ലേ വേഗത്തിലാക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു

അവലംബം: www.habr.com