ดึงทรัพยากรล่วงหน้าเพื่อให้การนำทางในอนาคตรวดเร็วขึ้น

ดูข้อมูลเกี่ยวกับคำแนะนำทรัพยากร rel=prefetch และวิธีใช้

Demián Renzulli
Jeremy Wagner
Jeremy Wagner
GitHub LinkedIn

เผยแพร่: 12 ก.ย. 2019 อัปเดตล่าสุด: 8 ก.พ. 2025

การวิจัยแสดงให้เห็นว่าเวลาในการโหลดที่เร็วขึ้นทําให้อัตรา Conversion สูงขึ้นและผู้ใช้ได้รับประสบการณ์การใช้งานที่ดีขึ้น หากมีข้อมูลเชิงลึกเกี่ยวกับวิธีที่ผู้ใช้ไปยังส่วนต่างๆ ของเว็บไซต์และหน้าเว็บที่ผู้ใช้มีแนวโน้มจะเข้าชมในลำดับถัดไป คุณสามารถปรับปรุงเวลาในการโหลดของการไปยังส่วนต่างๆ ในอนาคตได้โดยดาวน์โหลดทรัพยากรสําหรับหน้าเหล่านั้นล่วงหน้า

คู่มือนี้จะอธิบายวิธีดำเนินการดังกล่าวด้วย <link rel=prefetch> ซึ่งช่วยให้คุณใช้การจําล่วงหน้าได้อย่างมีประสิทธิภาพ

ปรับปรุงประสิทธิภาพของเว็บไซต์ด้วย rel=prefetch

การเพิ่ม <link rel=prefetch> ลงในหน้าเว็บจะบอกให้เบราว์เซอร์ดาวน์โหลดทรัพยากรบางอย่าง (เช่น สคริปต์หรือไฟล์ CSS) ที่ผู้ใช้อาจต้องใช้ในอนาคต

<link rel="prefetch" href="/css/styles.css">

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

กรณีการใช้งาน

การเรียกข้อมูลล่วงหน้ามีกรณีการใช้งานหลายกรณีเพื่อเร่งความเร็วหน้าเว็บด้วยการดาวน์โหลดทรัพยากรล่วงหน้า

โหลดหน้าเว็บถัดไปล่วงหน้า

โหลดเอกสาร HTML ล่วงหน้าเมื่อคาดการณ์หน้าเว็บต่อๆ ไปได้ เพื่อที่เมื่อมีการคลิกลิงก์ หน้าเว็บจะโหลดทันที

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

แม้ว่าการโหลดทรัพยากรล่วงหน้าจะใช้แบนด์วิดท์เพิ่มเติม แต่ก็ช่วยปรับปรุงเมตริกประสิทธิภาพส่วนใหญ่ได้ เวลาในการตอบสนองครั้งแรก (TTFB) มักจะต่ำกว่ามาก เนื่องจากคำขอเอกสารส่งผลให้มีการตีข้อมูลแคช เนื่องจาก TTFB จะต่ำลง เมตริกตามเวลาที่ตามมามักจะต่ำลงด้วยเช่นกัน ซึ่งรวมถึง Largest Contentful Paint (LCP) และ First Contentful Paint (FCP)

โหลดชิ้นงานแบบคงที่ล่วงหน้า

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

ตัวอย่างเช่น Netflix ใช้ช่วงเวลาที่ผู้ใช้อยู่ในหน้าเว็บที่ออกจากระบบเพื่อเตรียม React ล่วงหน้า ซึ่งจะใช้เมื่อผู้ใช้ลงชื่อเข้าใช้ ด้วยเหตุนี้ แบรนด์จึงลดเวลาในการตอบสนองลง 30% สำหรับการนําทางในอนาคต

ผลของการโหลดล่วงหน้าชิ้นงานแบบคงที่ต่อเมตริกประสิทธิภาพจะขึ้นอยู่กับทรัพยากรที่โหลดล่วงหน้า ดังนี้

  • การโหลดรูปภาพล่วงหน้าสามารถลดเวลา LCP ขององค์ประกอบรูปภาพ LCP ได้อย่างมีนัยสำคัญ
  • การเรียกข้อมูลสไตล์ชีตล่วงหน้าจะช่วยปรับปรุงทั้ง FCP และ LCP เนื่องจากจะช่วยลดเวลาในการดาวน์โหลดสไตล์ชีตจากเครือข่าย เนื่องจากสไตล์ชีตเป็นบล็อกการแสดงผล จึงอาจลด LCP เมื่อมีการเรียกข้อมูลล่วงหน้า ในกรณีที่องค์ประกอบ LCP ของหน้าถัดไปเป็นรูปภาพพื้นหลัง CSS ที่ขอโดยใช้พร็อพเพอร์ตี้ background-image ระบบจะโหลดรูปภาพล่วงหน้าเป็นทรัพยากรที่เกี่ยวข้องของสไตลชีตที่โหลดล่วงหน้าด้วย
  • การเรียกข้อมูล JavaScript ล่วงหน้าจะช่วยให้การประมวลผลสคริปต์ที่เรียกข้อมูลล่วงหน้าเกิดขึ้นได้เร็วกว่ามากในกรณีที่เครือข่ายต้องดึงข้อมูลสคริปต์นั้นก่อนระหว่างการไปยังส่วนต่างๆ ซึ่งอาจส่งผลต่อ Interaction to Next Paint (INP) ของหน้าเว็บ ในกรณีที่มีการแสดงผลมาร์กอัปในไคลเอ็นต์โดยใช้ JavaScript คุณจะปรับปรุง LCP ได้ด้วยการลดความล่าช้าในการโหลดทรัพยากร และการแสดงผลมาร์กอัปฝั่งไคลเอ็นต์ที่มีองค์ประกอบ LCP ของหน้าเว็บจะเร็วขึ้น
  • การเรียกข้อมูลแบบล่วงหน้าสำหรับแบบอักษรเว็บที่หน้าปัจจุบันยังไม่ได้ใช้จะช่วยขจัดการเปลี่ยนแปลงเลย์เอาต์ ในกรณีที่ใช้ font-display: swap; ระบบจะตัดระยะเวลาการแลกเปลี่ยนแบบอักษรออก ซึ่งส่งผลให้การแสดงผลข้อความเร็วขึ้นและไม่มีการเปลี่ยนแปลงเลย์เอาต์ หากหน้าเว็บในอนาคตใช้แบบอักษรที่โหลดล่วงหน้าและเอลิเมนต์ LCP ของหน้าเว็บคือบล็อกข้อความที่ใช้แบบอักษรเว็บ LCP ขององค์ประกอบนั้นก็จะเร็วขึ้นด้วย

เตรียมความพร้อมล่วงหน้าสำหรับกลุ่ม JavaScript แบบออนดีมานด์

การแยกโค้ดกลุ่ม JavaScript ช่วยให้คุณโหลดเฉพาะบางส่วนของแอปในตอนแรกและโหลดส่วนที่เหลือแบบ Lazy Load ได้ หากใช้เทคนิคนี้ คุณจะสามารถใช้การเรียกข้อมูลล่วงหน้ากับเส้นทางหรือคอมโพเนนต์ที่ไม่จําเป็นในทันที แต่มีแนวโน้มว่าจะได้รับคําขอในเร็วๆ นี้

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

วิธีติดตั้งใช้งาน rel=prefetch

วิธีที่ง่ายที่สุดในการใช้ prefetch คือการเพิ่มแท็ก <link> ลงใน <head> ของเอกสาร ดังนี้

<head>
  ...
  <link rel="prefetch" href="//css/styles.css">
  ...
</head>

นอกจากนี้ คุณยังเริ่มการจําล่วงหน้าได้ด้วยส่วนหัว HTTP ของ Link ดังนี้

Link: </css/style.css>; rel=prefetch

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

โหลดโมดูล JavaScript ล่วงหน้าด้วยความคิดเห็น Magic ของ webpack

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

ข้อมูลโค้ดต่อไปนี้จะโหลดฟังก์ชันการจัดเรียงจากไลบรารี lodash แบบ Lazy เพื่อจัดเรียงกลุ่มตัวเลขที่จะส่งผ่านแบบฟอร์ม

form.addEventListener("submit", e => {
  e.preventDefault()
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

คุณสามารถโหลดทรัพยากรนี้ล่วงหน้าเพื่อเพิ่มโอกาสที่ทรัพยากรจะพร้อมใช้งานในแคชเมื่อผู้ใช้ส่งแบบฟอร์มแทนที่จะรอให้เหตุการณ์ "ส่ง" เกิดขึ้น webpack อนุญาตการดำเนินการนี้โดยใช้ความคิดเห็นแบบมายากลภายใน import() ดังนี้

form.addEventListener("submit", e => {
   e.preventDefault()
   import(/* webpackPrefetch: true */ 'lodash.sortby')
         .then(module => module.default)
         .then(sortInput())
         .catch(err => { alert(err) });
});

บรรทัดนี้บอก webpack ให้แทรกแท็ก <link rel="prefetch"> ลงในเอกสาร HTML

<link rel="prefetch" href="1.bundle.js">

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

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

นอกจากนี้ คุณยังใช้การโหลดล่วงหน้าที่ชาญฉลาดยิ่งขึ้นกับไลบรารีที่ใช้ prefetch อยู่เบื้องหลังได้ด้วย

  • quicklink ใช้ Intersection Observer API เพื่อตรวจหาเมื่อลิงก์ปรากฏในวิวพอร์ตและจะโหลดทรัพยากรที่ลิงก์ไว้ล่วงหน้าในช่วงไม่มีการใช้งาน พิเศษ: ลิงก์ด่วนมีน้ำหนักน้อยกว่า 1 KB
  • Guess.js ใช้รายงานข้อมูลวิเคราะห์เพื่อสร้างโมเดลการคาดการณ์ที่ใช้โหลดล่วงหน้าอย่างชาญฉลาดเฉพาะสิ่งที่ผู้ใช้มีแนวโน้มที่จะต้องการ

ทั้ง Quicklink และ Guess.js ใช้ Network Information API เพื่อหลีกเลี่ยงการโหลดล่วงหน้าหากผู้ใช้ใช้เครือข่ายที่ช้าหรือเปิด Save-Data ไว้

การทำงานของการเรียกข้อมูลล่วงหน้า

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

คุณใช้การอ่านล่วงหน้าหลายครั้งในหน้าเดียวกันได้ เบราว์เซอร์จะจัดคิวคำแนะนำทั้งหมดและขอทรัพยากรแต่ละรายการเมื่อไม่มีการใช้งาน ใน Chrome หากการโหลดล่วงหน้ายังไม่เสร็จสิ้นและผู้ใช้ไปยังทรัพยากรการโหลดล่วงหน้าที่กำหนดไว้ เบราว์เซอร์จะเลือกการโหลดระหว่างการนําทาง (ผู้ให้บริการเบราว์เซอร์รายอื่นอาจใช้วิธีนี้แตกต่างกัน)

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

ระบบจะจัดเก็บไฟล์ที่ดึงข้อมูลล่วงหน้าไว้ในแคช HTTP หากทรัพยากรแคชได้ มิเช่นนั้นระบบจะทิ้งไฟล์นั้นและไม่ได้ใช้

บทสรุป

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