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

ดูข้อมูลเกี่ยวกับคำแนะนำด้านทรัพยากร 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

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

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

การดึงข้อมูลหน้าที่ตามมาล่วงหน้า

ดึงข้อมูลเอกสาร HTML ล่วงหน้าเมื่อสามารถคาดคะเนหน้าเว็บที่ตามมาได้ ดังนั้นเมื่อคลิกลิงก์ หน้าเว็บจึงโหลดได้ทันที

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

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

การโหลดเนื้อหาแบบคงที่ล่วงหน้า

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

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

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

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

การดึงข้อมูลกลุ่ม JavaScript แบบออนดีมานด์ล่วงหน้า

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

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

วิธีใช้ 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 ล่วงหน้าด้วยความคิดเห็นที่น่ามหัศจรรย์ของ Webpack

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

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

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 และ Guess.js จะใช้ Network Information API เพื่อหลีกเลี่ยงการดึงข้อมูลล่วงหน้าหากผู้ใช้อยู่ในเครือข่ายที่ช้าหรือเปิด Save-Data ไว้

การดึงข้อมูลล่วงหน้า

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

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

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

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

บทสรุป

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