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

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

Demián Renzulli
Jeremy Wagner

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

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

ปรับปรุงการนําทางด้วย rel=prefetch

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

<link rel="prefetch" href="/articles/" as="document">

แผนภาพที่แสดงวิธีการทำงานของการโหลดลิงก์ล่วงหน้า

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

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

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

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

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

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

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

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

<head>
  ...
  <link rel="prefetch" href="/articles/" as="document">
  ...
</head>

แอตทริบิวต์ as ช่วยให้เบราว์เซอร์ตั้งค่าส่วนหัวที่ถูกต้องและระบุได้ว่าทรัพยากรอยู่ในแคชอยู่แล้วหรือไม่ ตัวอย่างค่าสำหรับแอตทริบิวต์นี้ ได้แก่ document, script, style, font, image และอื่นๆ

นอกจากนี้ คุณยังเริ่มการจําล่วงหน้าผ่านส่วนหัว 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" as="script" href="1.bundle.js">

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

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

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

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

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

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

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

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

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

ระบบจะจัดเก็บไฟล์ที่ดึงข้อมูลไว้ล่วงหน้าไว้ในแคช HTTP หรือแคชหน่วยความจำ (ขึ้นอยู่กับว่าทรัพยากรแคชได้หรือไม่) เป็นระยะเวลาที่ขึ้นอยู่กับเบราว์เซอร์ เช่น ใน Chrome ระบบจะเก็บทรัพยากรไว้ประมาณ 5 นาที หลังจากนั้นระบบจะใช้กฎ Cache-Control ปกติสำหรับทรัพยากร

บทสรุป

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