ඇත වෙබ් කාර්ය සාධනය වැඩි දියුණු කිරීමට බොහෝ ක්රම. ඒවායින් එකක් වන්නේ පසුව අවශ්‍ය වන අන්තර්ගතය පූර්ව පූරණය කිරීමයි. CSS පෙර-සැකසුම, සම්පූර්ණ පිටු පෙර-විදැහුම්කරණය හෝ වසම් නාම විභේදනය. අපි සෑම දෙයක්ම කල්තියා කරන්නෙමු, පසුව ක්ෂණිකව ප්රතිඵලය ප්රදර්ශනය කරන්න! සිසිල් හඬක්.

ඊටත් වඩා සිසිල් වන්නේ එය ඉතා සරලව ක්රියාත්මක කිරීමයි. ටැග් පහක් බ්‍රවුසරයට මූලික ක්‍රියා කිරීමට විධානයක් දෙන්න:

<link rel="prefetch" href="/si/style.css" as="style" />
<link rel="preload" href="/si/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="/si/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="/si/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="/si/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"> ඔබට අනාගතයේදී සම්බන්ධතා පිහිටුවීම වේගවත් කිරීමට අවශ්‍ය වූ විට කලින් වසම වෙත සම්බන්ධ වීමට බ්‍රවුසරයෙන් අසයි.

නව තෙවන පාර්ශ්ව වසමකින් කිසියම් සම්පත් ලබා ගන්නේ නම් බ්‍රවුසරය සම්බන්ධතාවයක් ස්ථාපිත කළ යුතුය. උදාහරණයක් ලෙස, එය Google Fonts පූරණය කරන්නේ නම්, CDN වෙතින් අකුරු ප්‍රතික්‍රියා කරන්නේ නම් හෝ API සේවාදායකයකින් JSON ප්‍රතිචාරයක් ඉල්ලන්නේ නම්.

නව සම්බන්ධතාවයක් ස්ථාපිත කිරීම සඳහා සාමාන්‍යයෙන් මිලි තත්පර සිය ගණනක් ගතවේ. එය වරක් සිදු කරනු ලැබේ, නමුත් තවමත් කාලය ගත වේ. ඔබ කල්තියා සම්බන්ධතාවයක් ස්ථාපිත කර ඇත්නම්, ඔබ කාලය ඉතිරි කර ගැනීම සහ මෙම වසම වෙතින් සම්පත් බාගත කිරීම වේගවත් කරයි.

කාරක රීති

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

href ඔබට IP ලිපිනය තීරණය කිරීමට අවශ්‍ය වසම් නාමය දක්වයි. උපසර්ගයක් සමඟ සඳහන් කළ හැක (https://domain.com) හෝ එය නොමැතිව (//domain.com).

භාවිතා කළ යුත්තේ කවදාද?

ඉක්මනින් අවශ්‍ය වන වසම් සඳහා භාවිත කරන්න එතනින් වැදගත් විලාසයක්, පිටපතක් හෝ රූපයක් බාගැනීමට, නමුත් ඔබ තවමත් සම්පත් URL එක දන්නේ නැත. උදාහරණ වශයෙන්:

• ඔබගේ අයදුම්පත සත්කාරක කර ඇත my-app.com සහ AJAX ඉල්ලීම් කරයි api.my-app.com: නිශ්චිත විමසුම් JS වෙතින් ගතිකව සාදා ඇති නිසා ඔබ ඒවා කල්තියා නොදනී. වසම වෙත පූර්ව සම්බන්ධ වීමට ටැගයක් භාවිතා කිරීම මෙහිදී ඉතා සුදුසුය.
• ඔබගේ අයදුම්පත සත්කාරක කර ඇත my-app.com සහ Google Fonts භාවිතා කරයි. ඒවා පියවර දෙකකින් බාගත කර ඇත: පළමුව, CSS ගොනුව වසමෙන් බාගත කර ඇත fonts.googleapis.com, එවිට මෙම ගොනුව සමඟ අකුරු ඉල්ලයි fonts.gstatic.com. ඔබට නිශ්චිත අකුරු ගොනු මොනවාදැයි දැනගත නොහැක fonts.gstatic.com ඔබ CSS ගොනුව පූරණය කරන තෙක් ඔබට අවශ්‍ය වනු ඇත, එබැවින් අපට කලින් කළ හැක්කේ මූලික සම්බන්ධතාවයක් පමණි.

තෙවන පාර්ශවීය ස්ක්‍රිප්ට් හෝ විලාසය ටිකක් වේගවත් කිරීමට මෙම ටැගය භාවිතා කරන්න පෙර ස්ථාපිත සම්බන්ධතාවය හේතුවෙන්.

අධික ලෙස භාවිතා නොකරන්න. සම්බන්ධතාවයක් ස්ථාපනය කිරීම සහ නඩත්තු කිරීම සේවාදායකයා සහ සේවාදායකයා යන දෙකටම මිල අධික මෙහෙයුමකි. උපරිම වසම් 4-6ක් සඳහා මෙම ටැගය භාවිතා කරන්න.

විස්තරностей

විකල්ප ටැගය. බ්‍රවුසරයට මෙම උපදෙස් අනුගමනය කිරීමට අවශ්‍ය නොවන අතර එය නොසලකා හැරිය හැක, උදාහරණයක් ලෙස, බොහෝ සම්බන්ධතා දැනටමත් ස්ථාපිත කර ඇත්නම් හෝ වෙනත් අවස්ථාවක.

සම්බන්ධතා ක්‍රියාවලියට ඇතුළත් වන්නේ කුමක්ද?. එක් එක් වෙබ් අඩවියට සම්බන්ධ වීමට, බ්‍රවුසරය පහත දේ කළ යුතුය:

• DNS විභේදනය. සේවාදායක IP ලිපිනය සොයන්න (216.58.215.78) නිශ්චිත වසම් නාමය සඳහා (google.com).
• TCP අතට අත දීම. සේවාදායකය සමඟ TCP සම්බන්ධතාවයක් ආරම්භ කිරීමට පැකට් (සේවාදායක → සේවාදායකය → සේවාලාභියා) හුවමාරු කරන්න.
• TLS අතට අත දීම (HTTPS අඩවි පමණි). ආරක්ෂිත TLS සැසියක් ආරම්භ කිරීම සඳහා පැකට් හුවමාරු වට දෙකක් (සේවාදායකයා → සේවාදායකය → සේවාදායක → සේවාදායකය → සේවාදායකයා)

සටහන: HTTP/3 අතට අත දීමේ යාන්ත්‍රණය වැඩිදියුණු කර වේගවත් කරනු ඇත, නමුත් එය තවමත් බොහෝ දුරයි.

dns-prefetch

<link rel= "dns-prefetch"> ඔබ ඉක්මනින් එයට සම්බන්ධ වන්නේ නම් සහ මූලික සම්බන්ධතාවය වේගවත් කිරීමට අවශ්‍ය නම්, වසම සඳහා DNS විභේදනය කල්තියා සිදු කරන ලෙස බ්‍රව්සරයෙන් ඉල්ලා සිටී.

බ්‍රවුසරය නව තෙවන පාර්ශ්ව වසමකින් කිසියම් සම්පත් ලබා ගන්නේ නම් වසමේ IP ලිපිනය තීරණය කළ යුතුය. උදාහරණයක් ලෙස, Google Fonts පූරණය කිරීම, CDN එකකින් ප්‍රතික්‍රියා අකුරු, හෝ API සේවාදායකයකින් JSON ප්‍රතිචාරයක් ඉල්ලා සිටීම.

සෑම නව වසමක් සඳහාම, DNS වාර්තා විභේදනය සාමාන්‍යයෙන් 20-120 ms පමණ ගත වේ. මෙය දෙන ලද වසමකින් පළමු සම්පත පැටවීමට පමණක් බලපාන නමුත්, තවමත් ප්‍රමාදයක් හඳුන්වා දෙයි. අපි DNS විභේදනය කල්තියා සිදු කරන්නේ නම්, අපි කාලය ඉතිරි කර සම්පත් වේගයෙන් පූරණය කරමු.

කාරක රීති

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

href ඔබට IP ලිපිනය සැකසීමට අවශ්‍ය වසම් නාමය දක්වයි. උපසර්ගයක් සමඟ සඳහන් කළ හැක (https://domain.com) හෝ එය නොමැතිව (//domain.com).

භාවිතා කළ යුත්තේ කවදාද?

ඉක්මනින් අවශ්‍ය වන වසම් සඳහා භාවිත කරන්න බ්‍රවුසරය කලින් නොදන්නා සම්පත් එතැනින් බාගත කිරීමට. උදාහරණ වශයෙන්:

• ඔබගේ අයදුම්පත සත්කාරක කර ඇත my-app.com සහ AJAX ඉල්ලීම් කරයි api.my-app.com: නිශ්චිත විමසුම් JS වෙතින් ගතිකව සාදා ඇති නිසා ඔබ ඒවා කල්තියා නොදනී. වසම වෙත පූර්ව සම්බන්ධ වීමට ටැගයක් භාවිතා කිරීම මෙහිදී ඉතා සුදුසුය.
• ඔබගේ අයදුම්පත සත්කාරක කර ඇත my-app.com, සහ Google Fonts භාවිතා කරයි. ඒවා පියවර දෙකකින් බාගත කර ඇත: පළමුව, 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"> ක්‍රෝම් සහ ෆයර්ෆොක්ස් හි යම් කාලයක් සඳහා සහය දක්වන ලදී, නමුත් 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 හැඹිලියක් ඇත, නමුත් එය පවතින්නේ විනාඩියකට පමණි. Windows DNS ප්‍රතිචාර දින පහක් සඳහා හැඹිලිගත කරයි.

පෙර ඉදිරිපත් කිරීම

<link rel= "prerender"> බ්‍රවුසරයෙන් URL එක බාගත කර නොපෙනෙන ටැබ් එකක ප්‍රදර්ශනය කරන ලෙස ඉල්ලා සිටී. පරිශීලකයා සබැඳිය ක්ලික් කළ විට, පිටුව වහාම දර්ශනය විය යුතුය. පරිශීලකයා යම් පිටුවකට පැමිණෙන බව ඔබට විශ්වාස නම් සහ එහි දර්ශනය වේගවත් කිරීමට අවශ්‍ය නම් මෙය ප්‍රයෝජනවත් වේ.

2019 දී මෙම ටැගයේ සුවිශේෂී සඵලතාවය තිබියදීත් (හෝ ඒ නිසා). <link rel= "prerender"> ප්‍රධාන බ්‍රව්සර්වල දුර්වල ලෙස සහාය දක්වයි. වැඩි විස්තර බලන්න. පහත දැක්වේ.

කාරක රීති

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

href ඔබට පසුබිමේ විදැහුම්කරණය ආරම්භ කිරීමට අවශ්‍ය URL වෙත යොමු කරයි.

භාවිතා කළ යුත්තේ කවදාද?

පරිශීලකයා නිශ්චිත පිටුවකට යන බව ඔබට සැබවින්ම විශ්වාසයි. A පිටුවට පැමිණෙන අමුත්තන්ගෙන් 70% ක් B පිටුවට යන “උමගක්” ඔබට තිබේ නම්, එසේ නම් <link rel= "prerender"> A පිටුවේ ඉතා ඉක්මනින් B පිටුව පෙන්වීමට උපකාරී වනු ඇත.

අධික ලෙස භාවිතා නොකරන්න. කලාප පළල සහ මතකය අනුව පූර්ව විදැහුම්කරණය අතිශයින් මිල අධික වේ. පාවිච්චි කරන්න එපා <link rel= "prerender"> එක් පිටුවකට වඩා වැඩි ගණනක් සඳහා.

විස්තරностей

විකල්ප ටැගය. බ්‍රවුසරයට මෙම උපදෙස් අනුගමනය කිරීමට අවශ්‍ය නොවන අතර එය නොසලකා හැරිය හැක, උදාහරණයක් ලෙස, මන්දගාමී සම්බන්ධතාවයකදී හෝ ප්‍රමාණවත් නිදහස් මතකයක් නොමැති විට.

මතකය සුරැකීමට Chrome සම්පූර්ණ විදැහුම්කරණය සිදු නොකරයිහා NoState පමණක් පූර්ව පූරණය කරන්න. මෙයින් අදහස් කරන්නේ Chrome විසින් පිටුව සහ එහි සියලු සම්පත් පූරණය කරන නමුත් JavaScript විදැහුම්කරණය හෝ ක්‍රියාත්මක නොකරන බවයි.

Firefox සහ Safari මෙම ටැගය කිසිසේත්ම සහාය නොදක්වයි. බ්‍රව්සර් මෙම උපදෙස් අනුගමනය කිරීමට අවශ්‍ය නොවන බැවින් මෙය පිරිවිතර උල්ලංඝනය නොකරයි; ඒත් තාම දුකයි. ක්රියාත්මක කිරීමේ දෝෂය Firefox වසර හතක් තිස්සේ විවෘතව පවතී. සෆාරි කියලත් ආරංචියි මෙම ටැගයට සහය නොදක්වයි.

සාරාංශය

භාවිත:

• <link rel= "preload"> - ඔබට තත්පර කිහිපයකින් සම්පතක් අවශ්‍ය වූ විට
• <link rel= "prefetch"> - ඔබට ඊළඟ පිටුවේ සම්පත් අවශ්‍ය වූ විට
• <link rel= "preconnect"> - ඔබට ඉක්මනින් සම්පතක් අවශ්‍ය බව ඔබ දන්නා නමුත් එහි සම්පූර්ණ URL එක ඔබ තවමත් නොදනී
• <link rel= "dns-prefetch"> - ඒ හා සමානව, ඔබට ඉක්මනින් සම්පතක් අවශ්‍ය බව ඔබ දන්නා විට, නමුත් ඔබ තවමත් එහි සම්පූර්ණ URL එක දන්නේ නැත (පැරණි බ්‍රව්සර් සඳහා)
• <link rel= "prerender"> — පරිශීලකයන් යම් පිටුවකට යන බව ඔබට විශ්වාසයි, සහ ඔබට එහි දර්ශනය වේගවත් කිරීමට අවශ්‍ය වේ

මූලාශ්රය: www.habr.com