มี หลายวิธีในการปรับปรุงประสิทธิภาพของเว็บ. หนึ่งในนั้นคือการโหลดเนื้อหาล่วงหน้าซึ่งจำเป็นในภายหลัง การประมวลผลล่วงหน้า CSS, การแสดงผลล่วงหน้าแบบเต็มหน้า หรือการแก้ไขชื่อโดเมน เราทำทุกอย่างล่วงหน้าแล้วจึงแสดงผลทันที! ฟังดูดีนะ.

สิ่งที่เจ๋งกว่านั้นก็คือมันใช้งานได้ง่ายมาก ห้าแท็ก ให้คำสั่งแก่เบราว์เซอร์เพื่อดำเนินการเบื้องต้น:

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

เรามาอธิบายสั้นๆ ว่าพวกเขาทำอะไรและควรใช้เมื่อใด

Перейтик: Preload · prefetch · เชื่อมต่อล่วงหน้า · DNS-ดึงข้อมูลล่วงหน้า · การแสดงล่วงหน้า

Preload

<link rel= "preload"> บอกให้เบราว์เซอร์โหลดและแคชทรัพยากร (เช่น สคริปต์หรือสไตล์ชีท) โดยเร็วที่สุด สิ่งนี้มีประโยชน์เมื่อจำเป็นต้องใช้ทรัพยากรไม่กี่วินาทีหลังจากโหลดเพจ - และคุณต้องการเร่งกระบวนการให้เร็วขึ้น

เบราว์เซอร์ไม่ได้ทำอะไรกับทรัพยากรหลังจากโหลด ไม่มีการดำเนินการสคริปต์ ไม่ได้ใช้สไตล์ชีต ทรัพยากรจะถูกแคชและพร้อมใช้งานทันทีเมื่อมีการร้องขอ

วากยสัมพันธ์

<link rel="preload" href="/th/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="/th/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 คุณสามารถดูได้ ตารางลำดับความสำคัญเต็ม.

prefetch

<link rel= "prefetch"> ขอให้เบราว์เซอร์ดาวน์โหลดและแคชทรัพยากร (เช่น สคริปต์หรือสไตล์ชีท) ในเบื้องหลัง การโหลดเกิดขึ้นที่ลำดับความสำคัญต่ำ จึงไม่รบกวนทรัพยากรที่สำคัญกว่า สิ่งนี้มีประโยชน์หากจำเป็นต้องใช้ทรัพยากรในหน้าถัดไป และคุณต้องการแคชไว้ล่วงหน้า

ที่นี่เช่นกัน เบราว์เซอร์ไม่ได้ทำอะไรกับทรัพยากรหลังจากโหลดแล้ว ไม่มีการดำเนินการสคริปต์ ไม่ได้ใช้สไตล์ชีท ทรัพยากรจะถูกแคชและพร้อมใช้งานทันทีเมื่อมีการร้องขอ

วากยสัมพันธ์

<link rel="prefetch" href="/th/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. ในโครม <link rel= "prefetch"> มักจะดำเนินการโดยมีลำดับความสำคัญขั้นต่ำ (ดู ตารางลำดับความสำคัญเต็ม) นั่นคือหลังจากโหลดอย่างอื่นทั้งหมดแล้ว

เชื่อมต่อล่วงหน้า

<link rel= "preconnect"> ขอให้เบราว์เซอร์เชื่อมต่อกับโดเมนล่วงหน้าเมื่อคุณต้องการเพิ่มความเร็วในการตั้งค่าการเชื่อมต่อในอนาคต

เบราว์เซอร์จะต้องสร้างการเชื่อมต่อหากดึงทรัพยากรใดๆ จากโดเมนบุคคลที่สามใหม่ ตัวอย่างเช่น หากโหลด Google Fonts, React แบบอักษรจาก CDN หรือขอการตอบสนอง JSON จากเซิร์ฟเวอร์ API

การสร้างการเชื่อมต่อใหม่มักจะใช้เวลาสองสามร้อยมิลลิวินาที ทำได้ครั้งเดียวแต่ยังต้องใช้เวลา หากคุณได้สร้างการเชื่อมต่อไว้ล่วงหน้า คุณจะประหยัดเวลาและดาวน์โหลดทรัพยากรจากโดเมนนี้ได้เร็วขึ้น

วากยสัมพันธ์

<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-ดึงข้อมูลล่วงหน้า

<link rel= "dns-prefetch"> ขอให้เบราว์เซอร์ดำเนินการแก้ไข DNS สำหรับโดเมนล่วงหน้าหากคุณจะเชื่อมต่อกับโดเมนเร็วๆ นี้ และต้องการเพิ่มความเร็วในการเชื่อมต่อครั้งแรก

เบราว์เซอร์จะต้องกำหนดที่อยู่ IP ของโดเมนว่าจะดึงทรัพยากรใด ๆ จากโดเมนบุคคลที่สามใหม่หรือไม่ ตัวอย่างเช่น การโหลด Google Fonts, React แบบอักษรจาก CDN หรือการขอการตอบสนอง JSON จากเซิร์ฟเวอร์ API

สำหรับโดเมนใหม่แต่ละโดเมน โดยทั่วไปการแก้ไขบันทึก DNS จะใช้เวลาประมาณ 20-120 มิลลิวินาที สิ่งนี้ส่งผลต่อการโหลดทรัพยากรแรกจากโดเมนที่กำหนดเท่านั้น แต่ยังคงทำให้เกิดความล่าช้า หากเราดำเนินการแก้ไข 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"> ได้รับการสนับสนุนมาระยะหนึ่งแล้วใน 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) จะจับคู่กับที่อยู่ IP ของเซิร์ฟเวอร์ (216.58.215.78).

ในการระบุที่อยู่ IP เบราว์เซอร์จะต้องสอบถามเซิร์ฟเวอร์ DNS ใช้เวลา 20−120 มิลลิวินาทีเมื่อเชื่อมต่อกับโดเมนบุคคลที่สามใหม่

DNS ถูกแคชไว้ แม้ว่าจะไม่น่าเชื่อถือมากนักก็ตาม. ระบบปฏิบัติการและเบราว์เซอร์บางระบบแคชการสืบค้น 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 ที่คุณต้องการเริ่มแสดงผลในพื้นหลัง

ควรใช้เมื่อไร

เมื่อคุณมั่นใจจริงๆว่าผู้ใช้จะไปที่หน้าใดหน้าหนึ่ง. หากคุณมี "อุโมงค์" ซึ่ง 70% ของผู้เยี่ยมชมหน้า A ไปที่หน้า 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"> — เมื่อคุณแน่ใจว่าผู้ใช้จะไปที่หน้าใดหน้าหนึ่ง และคุณต้องการเพิ่มความเร็วในการแสดงผล

ที่มา: will.com