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

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

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

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

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

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

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

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

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

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

บทสรุป

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