ในโค้ดแล็บนี้ คุณจะใช้การเรียกข้อมูลล่วงหน้าได้ 2 วิธี ได้แก่ การใช้ <link rel="prefetch">
และการใช้ส่วนหัว HTTP Link
แอปตัวอย่างคือเว็บไซต์ที่มีหน้า Landing Page โปรโมชันพร้อมส่วนลดพิเศษสำหรับเสื้อยืดขายดีของร้านค้า เนื่องจากหน้า Landing Page ลิงก์ไปยังผลิตภัณฑ์เดียว เราจึงสามารถสันนิษฐานได้ว่าผู้ใช้ส่วนใหญ่จะไปยังหน้ารายละเอียดผลิตภัณฑ์ ด้วยเหตุนี้ หน้าผลิตภัณฑ์จึงเหมาะอย่างยิ่งที่จะใช้การเรียกข้อมูลล่วงหน้าในหน้า Landing Page
วัดประสิทธิภาพ
ขั้นแรก ให้สร้างประสิทธิภาพพื้นฐาน
- คลิกรีมิกซ์เพื่อแก้ไขเพื่อให้โปรเจ็กต์แก้ไขได้
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
- กดแป้น Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
คลิกแท็บเครือข่าย
ในรายการแบบเลื่อนลงการจำกัด ให้เลือก Fast 3G เพื่อจำลองประเภทการเชื่อมต่อที่ช้า
หากต้องการโหลดหน้าผลิตภัณฑ์ ให้คลิกซื้อเลยในแอปตัวอย่าง
หน้า product-details.html
ใช้เวลาโหลดประมาณ 600 มิลลิวินาที
โหลดหน้าผลิตภัณฑ์ล่วงหน้าด้วย <link rel="prefetch">
หากต้องการปรับปรุงการนําทาง ให้แทรกแท็ก prefetch
ในหน้า Landing Page เพื่อแสดงหน้า product-details.html
ล่วงหน้า โดยทําดังนี้
- เพิ่มองค์ประกอบ
<link>
ต่อไปนี้ในส่วนหัวของไฟล์views/index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link rel="prefetch" href="/product-details.html" as="document">
...
</head>
คุณระบุแอตทริบิวต์ as
หรือไม่ก็ได้ แต่เราขอแนะนำให้ระบุ เนื่องจากจะช่วยให้เบราว์เซอร์ตั้งค่าส่วนหัวที่ถูกต้องและระบุว่าทรัพยากรอยู่ในแคชอยู่แล้วหรือไม่ ตัวอย่างค่าสำหรับแอตทริบิวต์นี้ ได้แก่ document
, script
, style
, font
, image
และอื่นๆ
วิธียืนยันว่าการโหลดล่วงหน้าทํางานอยู่
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
- กดแป้น Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
คลิกแท็บเครือข่าย
ในรายการแบบเลื่อนลงการจำกัด ให้เลือก Fast 3G เพื่อจำลองประเภทการเชื่อมต่อที่ช้า
ล้างช่องทำเครื่องหมาย "ปิดใช้แคช"
โหลดแอปซ้ำ
ตอนนี้เมื่อหน้า Landing Page โหลด หน้า product-details.html
ก็จะโหลดด้วยเช่นกัน แต่จะมีลําดับความสําคัญต่ำสุด
ระบบจะเก็บหน้าเว็บไว้ในแคช HTTP เป็นเวลา 5 นาที หลังจากนั้นระบบจะใช้กฎ Cache-Control
ปกติสำหรับเอกสาร ในกรณีนี้ product-details.html
มีส่วนหัว cache-control
ที่มีค่าเป็น public, max-age=0
ซึ่งหมายความว่าระบบจะเก็บหน้าเว็บไว้เป็นเวลา 5 นาที
ประเมินประสิทธิภาพอีกครั้ง
- โหลดแอปซ้ำ
- หากต้องการโหลดหน้าผลิตภัณฑ์ ให้คลิกซื้อเลยในแอปตัวอย่าง
ดูที่แผงเครือข่าย การติดตามเครือข่ายครั้งแรกจะแตกต่างออกไป 2 ประการ ดังนี้
- คอลัมน์ขนาดจะแสดง "แคชที่ดึงข้อมูลล่วงหน้า" ซึ่งหมายความว่าทรัพยากรนี้ดึงมาจากแคชของเบราว์เซอร์ ไม่ใช่จากเครือข่าย
- คอลัมน์เวลาแสดงว่าตอนนี้เวลาในการโหลดเอกสารอยู่ที่ประมาณ 10 มิลลิวินาที
ซึ่งเร็วขึ้นประมาณ 98% เมื่อเทียบกับเวอร์ชันก่อนหน้าที่ใช้เวลาประมาณ 600 มิลลิวินาที
คะแนนพิเศษ: ใช้ prefetch
เป็นการเพิ่มประสิทธิภาพแบบต่อเนื่อง
การดึงข้อมูลล่วงหน้าควรนำมาใช้แบบค่อยเป็นค่อยไปสำหรับผู้ใช้ที่ท่องเว็บผ่านการเชื่อมต่อที่รวดเร็ว คุณสามารถใช้ Network Information API เพื่อตรวจสอบสภาพเครือข่ายและแทรกแท็กการเรียกข้อมูลล่วงหน้าแบบไดนามิกตามข้อมูลนั้น วิธีนี้จะช่วยประหยัดปริมาณการใช้อินเทอร์เน็ตและค่าใช้จ่ายสำหรับผู้ใช้ที่ใช้แพ็กเกจอินเทอร์เน็ตช้าหรือมีราคาแพง
หากต้องการใช้การคาดการณ์ล่วงหน้าแบบปรับอัตโนมัติ ให้นำแท็ก <link rel="prefetch">
ออกจาก views/index.html
ก่อน โดยทำดังนี้
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link rel="prefetch" href="/product-details.html" as="document">
...
</head>
จากนั้นเพิ่มโค้ดต่อไปนี้ลงใน public/script.js
เพื่อประกาศฟังก์ชันที่แทรกแท็ก prefetch
แบบไดนามิกเมื่อผู้ใช้ใช้การเชื่อมต่อที่รวดเร็ว
function injectLinkPrefetchIn4g(url) {
if (window.navigator.connection.effectiveType === '4g') {
//generate link prefetch tag
const linkTag = document.createElement('link');
linkTag.rel = 'prefetch';
linkTag.href = url;
linkTag.as = 'document';
//inject tag in the head of the document
document.head.appendChild(linkTag);
}
}
ฟังก์ชันจะทํางานดังนี้
- โดยจะตรวจสอบพร็อพเพอร์ตี้ effectiveType ของ Network Information API เพื่อระบุว่าผู้ใช้ใช้การเชื่อมต่อ 4G (หรือเร็วกว่า) หรือไม่
- หากเงื่อนไขดังกล่าวตรงตามข้อกำหนด ระบบจะสร้างแท็ก
<link>
ที่มีprefetch
เป็นประเภทของคำแนะนำ ส่ง URL ที่จะทำการดึงข้อมูลล่วงหน้าในแอตทริบิวต์href
และระบุว่าทรัพยากรเป็น HTMLdocument
ในแอตทริบิวต์as
- สุดท้าย ระบบจะแทรกสคริปต์แบบไดนามิกใน
head
ของหน้า
ถัดไป ให้เพิ่ม script.js
ลงใน views/index.html
ก่อนแท็ก </body>
ตัวปิด
<body>
...
<script src="/script.js"></script>
</body>
การขอ script.js
ที่ท้ายหน้าจะช่วยให้มั่นใจได้ว่าระบบจะโหลดและเรียกใช้ไฟล์ดังกล่าวหลังจากแยกวิเคราะห์และโหลดหน้าเว็บแล้ว
ตรวจสอบว่าการโหลดล่วงหน้าไม่รบกวนทรัพยากรสําคัญของหน้าปัจจุบันด้วยการเพิ่มข้อมูลโค้ดต่อไปนี้เพื่อเรียก injectLinkPrefetchIn4g()
ในเหตุการณ์ window.load
<body>
...
<script src="/script.js"></script>
<script>
window.addEventListener('load', () => {
injectLinkPrefetchIn4g('/product-details.html');
});
</script>
</body>
ตอนนี้หน้า Landing Page จะโหลด product-details.html
ล่วงหน้าเฉพาะในการเชื่อมต่อที่รวดเร็วเท่านั้น วิธียืนยันว่า
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
- กดแป้น Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
- คลิกแท็บเครือข่าย
- ในรายการแบบเลื่อนลงการควบคุมปริมาณ ให้เลือกออนไลน์
- โหลดแอปซ้ำ
คุณควรเห็น product-details.html
ในแผงเครือข่าย
วิธียืนยันว่าหน้าผลิตภัณฑ์ไม่ได้ทำการเตรียมข้อมูลล่วงหน้าในการเชื่อมต่อที่ช้า
- ในรายการแบบเลื่อนลง "การจำกัด" ให้เลือก 3G แบบช้า
- โหลดแอปซ้ำ
แผงเครือข่ายควรมีเฉพาะแหล่งข้อมูลสําหรับหน้า Landing Page ที่ไม่มี product-details.html
ดังนี้
โหลดสไตล์ชีตสำหรับหน้าผลิตภัณฑ์ล่วงหน้าโดยใช้ส่วนหัว HTTP Link
คุณสามารถใช้ส่วนหัว HTTP Link
เพื่อแสดงทรัพยากรประเภทเดียวกับแท็ก link
ล่วงหน้าได้ การตัดสินใจว่าจะใช้รูปแบบใดนั้นขึ้นอยู่กับความชอบของคุณเป็นส่วนใหญ่ เนื่องจากความแตกต่างของประสิทธิภาพนั้นไม่มีนัยสำคัญ ในกรณีนี้ คุณจะใช้เพื่อเตรียม CSS หลักของหน้าผลิตภัณฑ์ไว้ล่วงหน้าเพื่อปรับปรุงการแสดงผลให้ดียิ่งขึ้น
เพิ่มส่วนหัว Link
ของ HTTP สำหรับ style-product.css
ในการตอบกลับของเซิร์ฟเวอร์สำหรับหน้า Landing Page ดังนี้
- เปิดไฟล์
server.js
แล้วมองหาตัวแฮนเดิลget()
สำหรับ URL รูท:/
- เพิ่มบรรทัดต่อไปนี้ที่จุดเริ่มต้นของแฮนเดิล
app.get('/', function(request, response) {
response.set('Link', '</style-product.css>; rel=prefetch');
response.sendFile(__dirname + '/views/index.html');
});
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
- กดแป้น Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
- คลิกแท็บเครือข่าย
- โหลดแอปซ้ำ
ตอนนี้ style-product.css
จะได้รับการเรียกข้อมูลล่วงหน้าในระดับความสำคัญต่ำสุดหลังจากที่หน้า Landing Page โหลดแล้ว
คลิกซื้อเลยเพื่อไปยังหน้าผลิตภัณฑ์ ดูแผงเครือข่าย
ดึงข้อมูลไฟล์ style-product.css
จาก "แคชการเรียกข้อมูลล่วงหน้า" และใช้เวลาโหลดเพียง 12 มิลลิวินาที