ในโมดูล 2 รายการที่ผ่านมา คุณได้ค้นพบแนวคิดต่างๆ เช่น การเลื่อนเวลาโหลด JavaScript และรูปภาพการโหลดแบบ Lazy Loading และองค์ประกอบ <iframe>
การชะลอการโหลดทรัพยากรจะลดการใช้งานเครือข่ายและ CPU ในระหว่างการโหลดหน้าเว็บครั้งแรกด้วยการดาวน์โหลดทรัพยากร ณ จุดที่ต้องการ แทนที่จะโหลดขึ้นมาแต่แรก ซึ่งอาจไม่มีการใช้งาน
วิธีนี้ช่วยปรับปรุงเวลาในการโหลดหน้าเว็บครั้งแรก แต่การโต้ตอบครั้งต่อๆ ไปอาจเกิดขึ้นล่าช้าหากทรัพยากรที่จำเป็นต่อการเพิ่มประสิทธิภาพยังไม่ได้โหลดในขณะที่เกิดขึ้น
ตัวอย่างเช่น หากหน้าเว็บมีเครื่องมือเลือกวันที่ที่กำหนดเอง คุณจะเลื่อนทรัพยากรของเครื่องมือเลือกวันที่ออกไปได้จนกว่าผู้ใช้จะโต้ตอบกับองค์ประกอบ อย่างไรก็ตาม การโหลดทรัพยากรของเครื่องมือเลือกวันที่แบบออนดีมานด์อาจส่งผลให้เกิดความล่าช้า ซึ่งอาจเกิดขึ้นเล็กน้อยแต่ก็อาจไม่เกิดขึ้น ขึ้นอยู่กับการเชื่อมต่อเครือข่ายของผู้ใช้ ความสามารถของอุปกรณ์ หรือทั้ง 2 อย่าง จนกว่าจะมีการดาวน์โหลดทรัพยากร แยกวิเคราะห์ และพร้อมสำหรับการดำเนินการ
การรักษาสมดุลที่ยุ่งยากเล็กน้อย คุณไม่ควรสิ้นเปลืองแบนด์วิดท์ด้วยการโหลดทรัพยากรที่อาจไม่ได้ใช้ แต่การถ่วงเวลาการโต้ตอบและการโหลดหน้าเว็บในครั้งต่อๆ ไปก็อาจไม่ใช่วิธีที่ดีที่สุดเช่นกัน โชคดีที่มีเครื่องมือหลายอย่างที่คุณใช้เพื่อสร้างความสมดุลระหว่างค่าสูงสุดและ 2 จุดได้ และโมดูลนี้ครอบคลุมเทคนิคบางอย่างที่คุณสามารถใช้เพื่อไปยังจุดนั้น เช่น การดึงข้อมูลทรัพยากรล่วงหน้า การแสดงผลหน้าเว็บล่วงหน้า และการแคชทรัพยากรล่วงหน้าโดยใช้ Service Worker
โหลดทรัพยากรที่จำเป็นในอนาคตอันใกล้นี้ล่วงหน้าเมื่อมีลำดับความสำคัญต่ำ
คุณจะดึงทรัพยากรล่วงหน้า เช่น รูปภาพ สไตล์ชีต หรือทรัพยากร JavaScript ได้โดยใช้คำแนะนำทรัพยากร <link rel="prefetch">
คำแนะนำ prefetch
จะแจ้งให้เบราว์เซอร์ทราบว่าจำเป็นต้องใช้ทรัพยากรในอนาคตอันใกล้นี้
เมื่อมีการระบุคำแนะนำ prefetch
เบราว์เซอร์อาจเริ่มคำขอสำหรับทรัพยากรนั้นในลำดับความสำคัญต่ำสุดเพื่อหลีกเลี่ยงการแข่งขันกับทรัพยากรที่จำเป็นสำหรับหน้าปัจจุบัน
การดึงข้อมูลทรัพยากรล่วงหน้าจะช่วยปรับปรุงประสบการณ์ของผู้ใช้ เนื่องจากผู้ใช้ไม่จำเป็นต้องรอให้มีการดาวน์โหลดทรัพยากรที่จำเป็นในอนาคตอันใกล้ เนื่องจากทรัพยากรเหล่านี้สามารถดึงข้อมูลจากดิสก์แคชได้ทันทีเมื่อต้องการ
<head>
<!-- ... -->
<link rel="prefetch" as="script" href="/date-picker.js">
<link rel="prefetch" as="style" href="/date-picker.css">
<!-- ... -->
</head>
ข้อมูลโค้ด HTML ก่อนหน้าแจ้งให้เบราว์เซอร์ทราบว่าสามารถดึงข้อมูล date-picker.js
และ date-picker.css
ล่วงหน้าได้เมื่อไม่มีการใช้งาน นอกจากนี้ยังสามารถดึงข้อมูลทรัพยากรล่วงหน้าแบบไดนามิกขณะที่ผู้ใช้โต้ตอบกับหน้าเว็บใน JavaScript ได้ด้วย
prefetch
ได้รับการสนับสนุนในเบราว์เซอร์รุ่นใหม่ทั้งหมดยกเว้น Safari ซึ่งจะแสดงอยู่หลังธง หากคุณมีความจำเป็นอย่างยิ่งที่จะต้องโหลดทรัพยากรสำหรับเว็บไซต์ล่วงหน้าด้วยวิธีที่ใช้งานได้ในเบราว์เซอร์ทั้งหมด และคุณกำลังใช้ Service Worker ให้อ่านส่วนหลังของโมดูลนี้เกี่ยวกับการแคชทรัพยากรโดยใช้โปรแกรมทำงานของบริการ
ดึงหน้าเว็บล่วงหน้าเพื่อให้การนำทางในอนาคตเร็วขึ้น
นอกจากนี้ คุณยังดึงข้อมูลหน้าเว็บและทรัพยากรย่อยทั้งหมดของหน้านั้นล่วงหน้าได้ด้วยการระบุแอตทริบิวต์ as="document"
เมื่อชี้ไปที่เอกสาร HTML ดังนี้
<link rel="prefetch" href="/page" as="document">
เมื่อไม่มีการใช้งานเบราว์เซอร์ เบราว์เซอร์อาจเริ่มคำขอที่มีลำดับความสำคัญต่ำสำหรับ /page
ในเบราว์เซอร์แบบ Chromium คุณจะดึงข้อมูลเอกสารล่วงหน้าได้โดยใช้ Speculation Rules API กฎการคาดเดาจะกำหนดเป็นออบเจ็กต์ JSON ที่รวมอยู่ใน HTML ของหน้าเว็บ หรือเพิ่มแบบไดนามิกผ่าน JavaScript ดังนี้
<script type="speculationrules">
{
"prefetch": [{
"source": "list",
"urls": ["/page-a", "/page-b"]
}]
}
</script>
ออบเจ็กต์ JSON อธิบายการดำเนินการอย่างน้อย 1 รายการ ซึ่งปัจจุบันรองรับเฉพาะ prefetch
และ prerender
เท่านั้น รวมถึงรายการ URL ที่เชื่อมโยงกับการดำเนินการดังกล่าวด้วย ในข้อมูลโค้ด HTML ก่อนหน้านี้ เบราว์เซอร์จะได้รับคำสั่งให้ดึงข้อมูล /page-a
และ /page-b
ล่วงหน้า เช่นเดียวกับ <link rel="prefetch">
กฎการคาดเดาเป็นคำแนะนำที่เบราว์เซอร์อาจละเว้นในสถานการณ์บางอย่าง
ไลบรารี เช่น Quicklink ช่วยปรับปรุงการนําทางหน้าเว็บโดยการดึงข้อมูลล่วงหน้าแบบไดนามิกหรือการแสดงลิงก์ล่วงหน้าไปยังหน้าเว็บเมื่อหน้าเหล่านั้นปรากฏขึ้นภายในวิวพอร์ตของผู้ใช้ ซึ่งจะเพิ่มความเป็นไปได้ที่ท้ายที่สุดแล้วผู้ใช้จะไปยังหน้านั้น เมื่อเทียบกับการดึงข้อมูลลิงก์ทั้งหมดในหน้าเว็บล่วงหน้า
หน้าแสดงผลล่วงหน้า
นอกจากการดึงข้อมูลทรัพยากรล่วงหน้าแล้ว คุณยังอาจบอกใบ้ให้เบราว์เซอร์แสดงผลหน้าเว็บล่วงหน้าก่อนที่ผู้ใช้จะไปยังหน้านั้นได้ด้วย ซึ่งจะทำให้โหลดหน้าเว็บได้แทบจะในทันที เนื่องจากมีการดึงข้อมูลหน้าเว็บและทรัพยากรของหน้าอยู่เบื้องหลัง เมื่อผู้ใช้ไปยังหน้านั้น หน้าเว็บจะอยู่ในส่วนพื้นหน้า
การแสดงผลล่วงหน้าได้รับการสนับสนุนผ่าน Speculation Rules API ดังนี้
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["/page-a", "page-b"]
}
]
}
</script>
การสาธิตการดึงข้อมูลล่วงหน้าและการแสดงผลล่วงหน้า
การแคชโปรแกรมทำงานของบริการล่วงหน้า
นอกจากนี้ยังสามารถดึงข้อมูลทรัพยากรล่วงหน้าโดยใช้โปรแกรมทำงานของบริการได้ด้วย
การแคชโปรแกรมทำงานล่วงหน้าจะดึงข้อมูลและบันทึกทรัพยากรโดยใช้ API ของ Cache
ทำให้เบราว์เซอร์ให้บริการคำขอโดยใช้ Cache
API ได้โดยไม่ต้องไปที่เครือข่าย การแคชโปรแกรมทำงานของบริการล่วงหน้าใช้กลยุทธ์การแคชโปรแกรมทำงานของบริการที่มีประสิทธิภาพมาก ซึ่งเรียกว่ากลยุทธ์สำหรับแคชเท่านั้น รูปแบบนี้มีประสิทธิภาพสูงเพราะเมื่อมีการวางทรัพยากรลงในแคชของ Service Worker ระบบจะดึงข้อมูลทรัพยากรเหล่านั้นทันทีตามคำขอ
![แสดงขั้นตอนการแคช Service Worker จากหน้า ไปยัง Service Worker ไปจนถึงแคช](https://web.dev/static/learn/performance/prefetching-prerendering-precaching/image/fig-1.png?authuser=6&hl=th)
หากต้องการแคชทรัพยากรล่วงหน้าโดยใช้ Service Worker คุณก็ใช้พื้นที่ทำงานได้ แต่หากต้องการ คุณสามารถเขียนโค้ดของคุณเองเพื่อแคชชุดไฟล์ที่กำหนดไว้ล่วงหน้า ไม่ว่าคุณจะตัดสินใจใช้ Service Worker เพื่อแคชทรัพยากรล่วงหน้าด้วยวิธีใด สิ่งสำคัญคือต้องทราบว่าการแคชล่วงหน้าจะเกิดขึ้นเมื่อติดตั้งโปรแกรมทำงานของบริการ หลังจากติดตั้งแล้ว ทรัพยากรที่จัดเก็บในแคชล่วงหน้าจะพร้อมสำหรับดึงข้อมูลในหน้าทั้งหมดที่โปรแกรมทำงานของบริการควบคุมในเว็บไซต์ของคุณ
Workbox ใช้ไฟล์ Manifest สำหรับ Precache เพื่อระบุทรัพยากรที่ควรเก็บล่วงหน้า ไฟล์ Manifest สำหรับแคชล่วงหน้าคือรายการไฟล์และข้อมูลการกำหนดเวอร์ชันซึ่งทำหน้าที่เป็น "แหล่งข้อมูลที่เชื่อถือได้" สำหรับทรัพยากรที่จัดเก็บในแคชล่วงหน้า
[{
url: 'script.ffaa4455.js',
revision: null
}, {
url: '/index.html',
revision: '518747aa'
}]
โค้ดก่อนหน้าเป็นตัวอย่างไฟล์ Manifest ที่มี 2 ไฟล์ ได้แก่ script.ffaa4455.js
และ /index.html
หากทรัพยากรมีข้อมูลเวอร์ชันอยู่ในไฟล์นั้นๆ (หรือที่เรียกว่าแฮชของไฟล์) คุณจะปล่อยพร็อพเพอร์ตี้ revision
ไว้เป็น null
ได้ เนื่องจากไฟล์มีเวอร์ชันอยู่แล้ว (เช่น ffaa4455
สำหรับทรัพยากร script.ffaa4455.js
ในโค้ดก่อนหน้า) สำหรับทรัพยากรที่ไม่มีเวอร์ชัน คุณจะทำการแก้ไขสำหรับทรัพยากรดังกล่าว ณ เวลาบิลด์ได้
เมื่อตั้งค่าแล้ว โปรแกรมทำงานของบริการสามารถใช้เพื่อแคชหน้าเว็บแบบคงที่หรือทรัพยากรย่อยไว้ล่วงหน้าเพื่อเร่งการนำทางหน้าถัดไป
workbox.precaching.precacheAndRoute([
'/styles/product-page.ac29.css',
'/styles/product-page.39a1.js',
]);
ตัวอย่างเช่น ในหน้าข้อมูลผลิตภัณฑ์อีคอมเมิร์ซ คุณสามารถใช้โปรแกรมทำงานของบริการเพื่อแคช CSS และ JavaScript ที่จำเป็นล่วงหน้าสำหรับการแสดงผลหน้ารายละเอียดผลิตภัณฑ์ ทำให้การนำทางไปยังหน้ารายละเอียดผลิตภัณฑ์ทำงานได้เร็วขึ้นมาก ในตัวอย่างก่อนหน้านี้ product-page.ac29.css
และ product-page.39a1.js
ได้รับการแคชล่วงหน้า เมธอด precacheAndRoute
ที่มีอยู่ใน workbox-precaching
จะลงทะเบียนตัวจัดการที่จำเป็นโดยอัตโนมัติเพื่อให้แน่ใจว่ามีการเรียกทรัพยากรที่จัดเก็บในแคชล่วงหน้าจาก API โปรแกรมทำงานของบริการเมื่อจำเป็น
เนื่องจากโปรแกรมทำงานของบริการได้รับการรองรับอย่างแพร่หลาย คุณสามารถใช้การแคชโปรแกรมทำงานของบริการไว้ล่วงหน้าในเบราว์เซอร์สมัยใหม่ใดก็ได้ที่สถานการณ์ต้องการ
ทดสอบความรู้ของคุณ
คำแนะนำ prefetch
จะเกิดขึ้นที่ลำดับความสำคัญใด
การดึงข้อมูลล่วงหน้าและการแสดงผลหน้าเว็บล่วงหน้าแตกต่างกันอย่างไร
แคชของ Service Worker และแคช HTTP เหมือนกัน
ถัดไป: ภาพรวมของ Web Worker
ตอนนี้เมื่อคุณรู้แล้วว่าการดึงข้อมูลล่วงหน้า การแสดงผลล่วงหน้า และการแคชล่วงหน้าของโปรแกรมทำงานจะเป็นประโยชน์ต่อการเร่งการนำทางไปยังหน้าอื่นๆ ในอนาคต คุณก็อยู่ในฐานะที่จะทำการตัดสินใจอย่างมีข้อมูลว่าการดำเนินการนี้จะมีประโยชน์กับเว็บไซต์และผู้ใช้อย่างไร
ถัดไป เราจะดูภาพรวมของ Web Worker และวิธีที่พวกเขาสามารถลดค่าจ้างที่ทำงานจากเทรดหลัก และทำให้เทรดหลักมีพื้นที่เหลือมากขึ้นสำหรับการโต้ตอบของผู้ใช้ คุณเคยสงสัยไหมว่าทำอะไรได้บ้างเพื่อให้เทรดหลักมีที่ว่างมากขึ้น โมดูลทั้ง 2 โมดูลถัดไปจะคุ้มค่ากับเวลาของคุณ