ມີ ຫຼາຍວິທີເພື່ອປັບປຸງການປະຕິບັດເວັບ. ຫນຶ່ງໃນນັ້ນແມ່ນ preloading ເນື້ອຫາທີ່ຕ້ອງການຕໍ່ມາ. CSS pre-processing, full page pre-rendering or domain name resolutioning. ພວກເຮົາເຮັດທຸກຢ່າງລ່ວງຫນ້າ, ແລະຫຼັງຈາກນັ້ນສະແດງຜົນທັນທີ! ສຽງເຢັນ.

ສິ່ງທີ່ເຢັນກວ່າແມ່ນວ່າມັນໄດ້ຖືກປະຕິບັດຢ່າງງ່າຍດາຍ. ຫ້າແທັກ ໃຫ້ browser ຄໍາສັ່ງເພື່ອປະຕິບັດການເບື້ອງຕົ້ນ:

<link rel="prefetch" href="/lo/style.css" as="style" />
<link rel="preload" href="/lo/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 · prerender

ໂຫລດ

<link rel= "preload"> ບອກຕົວທ່ອງເວັບໃຫ້ໂຫລດແລະ cache ຊັບພະຍາກອນ (ເຊັ່ນ: script ຫຼື stylesheet) ໄວເທົ່າທີ່ຈະເປັນໄປໄດ້. ນີ້ແມ່ນເປັນປະໂຫຍດໃນເວລາທີ່ຊັບພະຍາກອນຕ້ອງການສອງສາມວິນາທີຫຼັງຈາກຫນ້າໂຫລດ - ແລະທ່ານຕ້ອງການເລັ່ງຂະບວນການ.

ຕົວທ່ອງເວັບບໍ່ເຮັດຫຍັງກັບຊັບພະຍາກອນຫຼັງຈາກໂຫລດ. ສະຄຣິບບໍ່ໄດ້ຖືກປະຕິບັດ, ສະໄຕລ໌ຊີດບໍ່ໄດ້ຖືກນໍາໃຊ້. ຊັບພະຍາກອນແມ່ນຖືກເກັບໄວ້ໃນບ່ອນເກັບມ້ຽນແລະເຮັດທັນທີທັນໃດຕາມຄໍາຮ້ອງຂໍ.

syntax

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

href ຊີ້ໄປຫາຊັບພະຍາກອນທີ່ທ່ານຕ້ອງການດາວໂຫລດ.

as ສາມາດເປັນອັນໃດກໍໄດ້ທີ່ສາມາດດາວໂຫຼດໄດ້ໃນ browser:

• 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="/lo/app/non-critical.css" as="style" />
  
  <script>
  /* Custom JS that starts downloading non-critical styles */
  loadCSS('/app/non-critical.css');
  </script>

ຢ່າໃຊ້ການໂຫຼດລ່ວງໜ້າຫຼາຍເກີນໄປ. ຖ້າທ່ານໂຫລດທຸກຢ່າງຕິດຕໍ່ກັນ, ເວັບໄຊທ໌ຈະບໍ່ເລັ່ງໄວຂຶ້ນ, ໃນທາງກົງກັນຂ້າມ, ມັນຈະປ້ອງກັນບໍ່ໃຫ້ຕົວທ່ອງເວັບວາງແຜນການເຮັດວຽກຂອງມັນຢ່າງຖືກຕ້ອງ.

ບໍ່ຄວນສັບສົນກັບ prefetching. ຢ່າໃຊ້ <link rel= "preload">, ຖ້າທ່ານບໍ່ຕ້ອງການຊັບພະຍາກອນທັນທີຫຼັງຈາກຫນ້າໂຫລດ. ຖ້າທ່ານຕ້ອງການມັນຕໍ່ມາ, ຕົວຢ່າງສໍາລັບຫນ້າຕໍ່ໄປ, ຫຼັງຈາກນັ້ນໃຊ້ <link rel= "prefetch">.

ເບິ່ງລາຍລະອຽດ

ນີ້ແມ່ນແທັກທີ່ຕ້ອງການ ຈະຖືກປະຕິບັດໂດຍຕົວທ່ອງເວັບ (ຖ້າມັນສະຫນັບສະຫນູນ), ບໍ່ເຫມືອນກັບ tags ອື່ນໆທັງຫມົດ ກ່ຽວຂ້ອງກັບການໂຫຼດລ່ວງໜ້າ. ຕົວທ່ອງເວັບຕ້ອງດາວໂຫລດຊັບພະຍາກອນທີ່ລະບຸໄວ້ໃນ <link rel="preload">. ໃນກໍລະນີອື່ນໆ, ມັນອາດຈະບໍ່ສົນໃຈການໂຫຼດລ່ວງໜ້າ, ຕົວຢ່າງ: ຖ້າມັນແລ່ນຢູ່ໃນການເຊື່ອມຕໍ່ຊ້າ.

ບູລິມະສິດ. ຕົວທ່ອງເວັບມັກຈະກໍານົດຄວາມສໍາຄັນທີ່ແຕກຕ່າງກັນກັບຊັບພະຍາກອນທີ່ແຕກຕ່າງກັນ (ຮູບແບບ, ຕົວອັກສອນ, ຕົວອັກສອນ, ແລະອື່ນໆ) ເພື່ອໂຫລດຊັບພະຍາກອນທີ່ສໍາຄັນທີ່ສຸດກ່ອນ. ໃນກໍລະນີນີ້, ຕົວທ່ອງເວັບກໍານົດຄວາມສໍາຄັນໂດຍຄຸນລັກສະນະ as. ສໍາລັບຕົວທ່ອງເວັບຂອງ Chrome ທ່ານສາມາດເບິ່ງໄດ້ ຕາຕະລາງບູລິມະສິດເຕັມ.

ເອີ້ນລ່ວງ ໜ້າ

<link rel= "prefetch"> ຂໍໃຫ້ຕົວທ່ອງເວັບດາວໂຫລດແລະແຄດຊັບພະຍາກອນ (ເຊັ່ນ: script ຫຼືແຜ່ນຮູບແບບ) ໃນພື້ນຫລັງ. ການໂຫຼດເກີດຂຶ້ນຢູ່ໃນບູລິມະສິດຕໍ່າເພື່ອບໍ່ໃຫ້ແຊກແຊງກັບຊັບພະຍາກອນທີ່ສໍາຄັນກວ່າ. ນີ້ແມ່ນເປັນປະໂຫຍດຖ້າຊັບພະຍາກອນທີ່ຈໍາເປັນຢູ່ໃນຫນ້າຕໍ່ໄປແລະທ່ານຕ້ອງການ cache ມັນລ່ວງຫນ້າ.

ທີ່ນີ້, ເຊັ່ນດຽວກັນ, ຕົວທ່ອງເວັບບໍ່ໄດ້ເຮັດຫຍັງກັບຊັບພະຍາກອນຫຼັງຈາກການໂຫຼດ. ສະຄຣິບບໍ່ໄດ້ຖືກປະຕິບັດ, ສະໄຕລ໌ຊີດບໍ່ໄດ້ຖືກນໍາໃຊ້. ຊັບພະຍາກອນແມ່ນຖືກເກັບໄວ້ໃນບ່ອນເກັບມ້ຽນແລະເຮັດທັນທີທັນໃດຕາມຄໍາຮ້ອງຂໍ.

syntax

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

href ຊີ້ໄປຫາຊັບພະຍາກອນທີ່ທ່ານຕ້ອງການດາວໂຫລດ.

as ສາມາດເປັນອັນໃດກໍໄດ້ທີ່ສາມາດດາວໂຫຼດໄດ້ໃນ browser:

• style ສໍາລັບແຜ່ນສະໄຕລ໌,
• script ສໍາ​ລັບ​ຕົວ​ອັກ​ສອນ​,
• font ສໍາ​ລັບ​ຕົວ​ອັກ​ສອນ​,
• fetch ສໍາລັບຊັບພະຍາກອນທີ່ໂຫລດໂດຍໃຊ້ fetch() ຫຼື XMLHttpRequest,
• ເບິ່ງບັນຊີລາຍຊື່ເຕັມ ໃນ MDN.

ມັນເປັນສິ່ງສໍາຄັນທີ່ຈະລະບຸຄຸນລັກສະນະ as - ນີ້ຊ່ວຍໃຫ້ຕົວທ່ອງເວັບຈັດລໍາດັບຄວາມສໍາຄັນແລະກໍານົດເວລາການດາວໂຫຼດຢ່າງຖືກຕ້ອງ.

ເວລາທີ່ຈະໃຊ້

ເພື່ອໂຫລດຊັບພະຍາກອນຈາກຫນ້າອື່ນໆ, ຖ້າທ່ານຕ້ອງການຊັບພະຍາກອນຈາກຫນ້າອື່ນ, ແລະທ່ານຕ້ອງການ preload ມັນກັບຫຼັງຈາກນັ້ນເລັ່ງການ rendering ຂອງຫນ້ານັ້ນ. ຍົກ​ຕົວ​ຢ່າງ:

• ທ່ານມີຮ້ານອອນໄລນ໌, ແລະ 40% ຂອງຜູ້ໃຊ້ອອກຈາກຫນ້າທໍາອິດສໍາລັບຫນ້າຜະລິດຕະພັນ. ໃຊ້ <link rel= "prefetch">, ການໂຫຼດໄຟລ໌ CSS ແລະ JS ເພື່ອສະແດງຫນ້າຜະລິດຕະພັນ.
• ທ່ານມີຄໍາຮ້ອງສະຫມັກຫນ້າດຽວ, ແລະຫນ້າທີ່ແຕກຕ່າງກັນໂຫຼດຊຸດທີ່ແຕກຕ່າງກັນ. ເມື່ອຜູ້ໃຊ້ເຂົ້າເບິ່ງໜ້າໃດໜຶ່ງ, ແພັກເກັດສຳລັບທຸກໜ້າທີ່ມັນເຊື່ອມຕໍ່ກັບສາມາດໂຫຼດໄດ້ລ່ວງໜ້າ.

ມັນເປັນໄປໄດ້ວ່າແທັກນີ້ສາມາດຖືກນໍາໃຊ້ຢ່າງປອດໄພໃນຂອບເຂດໃດກໍ່ຕາມ.. ປົກກະຕິແລ້ວຕົວທ່ອງເວັບກໍານົດເວລາ prefetch ທີ່ມີບູລິມະສິດຕ່ໍາສຸດ, ສະນັ້ນມັນບໍ່ລົບກວນໃຜ. ພຽງແຕ່ຈື່ໄວ້ວ່າມັນບໍລິໂພກການຈະລາຈອນຂອງຜູ້ໃຊ້, ເຊິ່ງສາມາດຈ່າຍເງິນໄດ້.

ບໍ່ແມ່ນສໍາລັບການຮ້ອງຂໍດ່ວນ. ຢ່າໃຊ້ <link rel= "prefetch">, ໃນເວລາທີ່ຊັບພະຍາກອນທີ່ຈໍາເປັນໃນສອງສາມວິນາທີ. ໃນກໍລະນີດັ່ງກ່າວນີ້, ການນໍາໃຊ້ <link rel= "preload">.

ເບິ່ງລາຍລະອຽດ

ແທັກທາງເລືອກ. ຕົວທ່ອງເວັບບໍ່ຈໍາເປັນຕ້ອງປະຕິບັດຕາມຄໍາແນະນໍານີ້; ມັນອາດຈະບໍ່ສົນໃຈມັນ, ສໍາລັບຕົວຢ່າງ, ໃນການເຊື່ອມຕໍ່ຊ້າ.

ບູລິມະສິດໃນ Chrome. ໃນ Chrome <link rel= "prefetch"> ປົກກະຕິແລ້ວແມ່ນປະຕິບັດດ້ວຍບູລິມະສິດຕໍາ່ສຸດທີ່ (ເບິ່ງ ຕາຕະລາງບູລິມະສິດເຕັມ), ນັ້ນແມ່ນ, ຫຼັງຈາກໂຫຼດທຸກສິ່ງທຸກຢ່າງອື່ນ.

ເຊື່ອມຕໍ່ລ່ວງໜ້າ

<link rel= "preconnect"> ຂໍໃຫ້ຕົວທ່ອງເວັບເຊື່ອມຕໍ່ກັບໂດເມນລ່ວງຫນ້າເມື່ອທ່ານຕ້ອງການເລັ່ງການຕັ້ງຄ່າການເຊື່ອມຕໍ່ໃນອະນາຄົດ.

ຕົວທ່ອງເວັບຕ້ອງສ້າງການເຊື່ອມຕໍ່ຖ້າມັນດຶງຊັບພະຍາກອນໃດໆຈາກໂດເມນຂອງພາກສ່ວນທີສາມໃຫມ່. ຕົວຢ່າງ, ຖ້າມັນໂຫຼດ Google Fonts, React fonts ຈາກ CDN, ຫຼືຮ້ອງຂໍການຕອບສະຫນອງ JSON ຈາກເຄື່ອງແມ່ຂ່າຍ API.

ການສ້າງການເຊື່ອມຕໍ່ໃຫມ່ປົກກະຕິແລ້ວໃຊ້ເວລາສອງສາມຮ້ອຍ milliseconds. ມັນເຮັດຄັ້ງດຽວ, ແຕ່ຍັງໃຊ້ເວລາ. ຖ້າທ່ານໄດ້ສ້າງຕັ້ງການເຊື່ອມຕໍ່ລ່ວງຫນ້າ, ທ່ານຈະປະຫຍັດເວລາແລະຊັບພະຍາກອນດາວໂຫຼດຈາກໂດເມນນີ້ໄວຂຶ້ນ.

syntax

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

href ຊີ້ບອກຊື່ໂດເມນທີ່ທ່ານຕ້ອງການກໍານົດທີ່ຢູ່ IP. ສາມາດລະບຸໄດ້ດ້ວຍຄຳນຳໜ້າ (https://domain.com) ຫຼື​ບໍ່​ມີ​ມັນ (//domain.com).

ເວລາທີ່ຈະໃຊ້

ໃຊ້ສໍາລັບໂດເມນທີ່ຈະຕ້ອງການໃນໄວໆນີ້ ເພື່ອດາວໂຫລດຮູບແບບ, script ຫຼືຮູບພາບທີ່ສໍາຄັນຈາກບ່ອນນັ້ນ, ແຕ່ທ່ານຍັງບໍ່ຮູ້ URL ຊັບພະຍາກອນເທື່ອ. ຍົກ​ຕົວ​ຢ່າງ:

• ແອັບພລິເຄຊັນຂອງທ່ານຖືກໂຮດຢູ່ໃນ my-app.com ແລະເຮັດໃຫ້ການຮ້ອງຂໍ AJAX ກັບ api.my-app.com: ທ່ານບໍ່ຮູ້ການສອບຖາມສະເພາະລ່ວງໜ້າເພາະວ່າພວກມັນຖືກສ້າງແບບເຄື່ອນໄຫວຈາກ JS. ໃນທີ່ນີ້ມັນຂ້ອນຂ້າງເຫມາະສົມທີ່ຈະໃຊ້ແທັກເພື່ອທາງສ່ວນຫນ້າຂອງການເຊື່ອມຕໍ່ກັບໂດເມນ.
• ແອັບພລິເຄຊັນຂອງທ່ານຖືກໂຮດຢູ່ໃນ my-app.com ແລະໃຊ້ Google Fonts. ພວກມັນຖືກດາວໂຫລດໃນສອງຂັ້ນຕອນ: ທໍາອິດ, ໄຟລ໌ CSS ຖືກດາວໂຫລດຈາກໂດເມນ fonts.googleapis.com, ຫຼັງຈາກນັ້ນໄຟລ໌ນີ້ຮ້ອງຂໍ fonts ກັບ 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, React fonts ຈາກ CDN, ຫຼືການຮ້ອງຂໍການຕອບສະຫນອງ JSON ຈາກເຄື່ອງແມ່ຂ່າຍ API.

ສໍາລັບແຕ່ລະໂດເມນໃຫມ່, ການແກ້ໄຂບັນທຶກ DNS ໂດຍປົກກະຕິໃຊ້ເວລາປະມານ 20-120 ms. ນີ້ມີຜົນກະທົບພຽງແຕ່ການໂຫຼດຂອງຊັບພະຍາກອນທໍາອິດຈາກໂດເມນທີ່ໃຫ້, ແຕ່ຍັງແນະນໍາການຊັກຊ້າ. ຖ້າພວກເຮົາປະຕິບັດການແກ້ໄຂ DNS ລ່ວງຫນ້າ, ພວກເຮົາຈະປະຫຍັດເວລາແລະການໂຫຼດຊັບພະຍາກອນໄວຂຶ້ນ.

syntax

<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 ກັບ 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​, ແຕ່​ໄດ້​ຖືກ​ເພີ່ມ​ພຽງ​ແຕ່ Safari ໃນ 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 (Domain Name System) servers match it with the server's address (216.58.215.78).

ເພື່ອກໍານົດທີ່ຢູ່ IP, ຕົວທ່ອງເວັບຕ້ອງສອບຖາມເຄື່ອງແມ່ຂ່າຍ DNS. ມັນໃຊ້ເວລາ 20-120 ms ເມື່ອເຊື່ອມຕໍ່ກັບໂດເມນພາກສ່ວນທີສາມໃຫມ່.

DNS ຖືກເກັບໄວ້, ເຖິງແມ່ນວ່າບໍ່ມີຄວາມຫນ້າເຊື່ອຖືຫຼາຍ. ບາງ OS ແລະຕົວທ່ອງເວັບ cache DNS queries: ນີ້ຈະຊ່ວຍປະຫຍັດເວລາໃນການສອບຖາມຊ້ໍາກັນ, ແຕ່ cache ບໍ່ສາມາດອີງໃສ່. ໃນ Linux ມັນມັກຈະບໍ່ເຮັດວຽກເລີຍ. Chrome ມີ DNS cache, ແຕ່ມັນໃຊ້ເວລາພຽງແຕ່ນາທີ. Windows cache ຄໍາຕອບ DNS ສໍາລັບຫ້າມື້.

prerender

<link rel= "prerender"> ຂໍໃຫ້ຕົວທ່ອງເວັບດາວໂຫລດ URL ແລະສະແດງມັນຢູ່ໃນແຖບທີ່ເບິ່ງບໍ່ເຫັນ. ເມື່ອຜູ້ໃຊ້ຄລິກໃສ່ການເຊື່ອມຕໍ່, ຫນ້າຄວນຈະຖືກສະແດງທັນທີ. ນີ້ແມ່ນເປັນປະໂຫຍດຖ້າທ່ານແນ່ໃຈວ່າຜູ້ໃຊ້ຈະໄປຢ້ຽມຢາມຫນ້າທີ່ແນ່ນອນແລະຕ້ອງການເລັ່ງການສະແດງຂອງມັນ.

ເຖິງວ່າຈະມີ (ຫຼືຍ້ອນ) ປະສິດທິພາບພິເສດຂອງແທັກນີ້, ໃນປີ 2019 <link rel= "prerender"> ສະຫນັບສະຫນູນບໍ່ດີໃນຕົວທ່ອງເວັບທີ່ສໍາຄັນ. ເບິ່ງລາຍລະອຽດເພີ່ມເຕີມ. ຂ້າງລຸ່ມນີ້.

syntax

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

href ຊີ້ໄປທີ່ URL ທີ່ທ່ານຕ້ອງການເພື່ອເລີ່ມການສະແດງຜົນໃນພື້ນຫຼັງ.

ເວລາທີ່ຈະໃຊ້

ເມື່ອທ່ານແນ່ໃຈວ່າຜູ້ໃຊ້ຈະໄປຫາຫນ້າທີ່ແນ່ນອນ. ຖ້າທ່ານມີ "ອຸໂມງ" ໂດຍຜ່ານທີ່ 70% ຂອງຜູ້ມາຢ້ຽມຢາມຫນ້າ A ໄປຫາຫນ້າ B, ຫຼັງຈາກນັ້ນ <link rel= "prerender"> ໃນຫນ້າ A ຈະຊ່ວຍໃຫ້ສະແດງຫນ້າ B ຢ່າງໄວວາ.

ຢ່າໃຊ້ເກີນ. ການສະແດງຜົນລ່ວງໜ້າແມ່ນມີລາຄາແພງຫຼາຍໃນແງ່ຂອງແບນວິດ ແລະຄວາມຈຳ. ຢ່າໃຊ້ <link rel= "prerender"> ສໍາລັບຫຼາຍກວ່າຫນຶ່ງຫນ້າ.

ເບິ່ງລາຍລະອຽດ

ແທັກທາງເລືອກ. ຕົວທ່ອງເວັບບໍ່ຈໍາເປັນຕ້ອງປະຕິບັດຕາມຄໍາແນະນໍານີ້ແລະອາດຈະບໍ່ສົນໃຈມັນ, ຕົວຢ່າງ, ໃນການເຊື່ອມຕໍ່ຊ້າຫຼືເມື່ອມີຫນ່ວຍຄວາມຈໍາຫວ່າງບໍ່ພຽງພໍ.

ເພື່ອຊ່ວຍປະຢັດຄວາມຊົງຈໍາ Chrome ບໍ່ໄດ້ສະແດງຜົນເຕັມແລະ ພຽງແຕ່ preload NoState. ນີ້ຫມາຍຄວາມວ່າ Chrome ໂຫລດຫນ້າແລະຊັບພະຍາກອນທັງຫມົດຂອງມັນ, ແຕ່ບໍ່ສະແດງຫຼືປະຕິບັດ JavaScript.

Firefox ແລະ Safari ບໍ່ຮອງຮັບແທັກນີ້ເລີຍ. ນີ້ບໍ່ໄດ້ລະເມີດຂໍ້ກໍານົດ, ເພາະວ່າຕົວທ່ອງເວັບບໍ່ຈໍາເປັນຕ້ອງປະຕິບັດຕາມຄໍາແນະນໍານີ້; ແຕ່ຍັງໂສກເສົ້າ. ແມງໄມ້ການຈັດຕັ້ງປະຕິບັດ Firefox ໄດ້ເປີດມາເປັນເວລາເຈັດປີແລ້ວ. ມີລາຍງານວ່າ Safari ບໍ່ຮອງຮັບແທັກນີ້ຄືກັນ.

Summary

ໃຊ້:

• <link rel= "preload"> - ເມື່ອທ່ານຕ້ອງການຊັບພະຍາກອນໃນສອງສາມວິນາທີ
• <link rel= "prefetch"> - ເມື່ອທ່ານຕ້ອງການຊັບພະຍາກອນໃນຫນ້າຕໍ່ໄປ
• <link rel= "preconnect"> - ເມື່ອທ່ານຮູ້ວ່າທ່ານຈະຕ້ອງການຊັບພະຍາກອນໃນໄວໆນີ້, ແຕ່ທ່ານຍັງບໍ່ຮູ້ URL ເຕັມຂອງມັນ
• <link rel= "dns-prefetch"> - ເຊັ່ນດຽວກັນ, ເມື່ອທ່ານຮູ້ວ່າທ່ານຈະຕ້ອງການຊັບພະຍາກອນໃນໄວໆນີ້, ແຕ່ທ່ານຍັງບໍ່ຮູ້ URL ເຕັມຂອງມັນ (ສໍາລັບຕົວທ່ອງເວັບທີ່ເກົ່າກວ່າ)
• <link rel= "prerender"> — ເມື່ອ​ທ່ານ​ແນ່​ໃຈ​ວ່າ​ຜູ້​ໃຊ້​ຈະ​ໄປ​ຫາ​ຫນ້າ​ໃດ​ຫນຶ່ງ​, ແລະ​ທ່ານ​ຕ້ອງ​ການ​ທີ່​ຈະ​ເລັ່ງ​ການ​ສະ​ແດງ​ຂອງ​ຕົນ​

ແຫຼ່ງຂໍ້ມູນ: www.habr.com