โค้ดแล็บนี้จะแสดงวิธีโหลดแบบอักษรเว็บล่วงหน้าโดยใช้ rel="preload"
เพื่อนำข้อความที่ไม่มีการจัดรูปแบบ (FOUT) ที่กะพริบออก
วัดระยะทาง
ก่อนอื่น ให้วัดประสิทธิภาพของเว็บไซต์ก่อนเพิ่มการเพิ่มประสิทธิภาพใดๆ
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
- กดแป้น Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
- คลิกแท็บ Lighthouse
- ตรวจสอบว่าได้เลือกช่องทําเครื่องหมายประสิทธิภาพในรายการหมวดหมู่
- คลิกปุ่มสร้างรายงาน
รายงาน Lighthouse ที่สร้างขึ้นจะแสดงลำดับการดึงข้อมูลของทรัพยากรในส่วนเวลาในการตอบสนองของเส้นทางวิกฤติสูงสุด
ในการตรวจสอบข้างต้น เว็บฟอนต์เป็นส่วนหนึ่งของเชนคำขอที่สำคัญและดึงข้อมูลเป็นลำดับสุดท้าย ห่วงโซ่คำขอที่สำคัญจะแสดงลำดับของทรัพยากรที่เบราว์เซอร์จัดลำดับความสำคัญและดึงมา ในแอปพลิเคชันนี้ แบบอักษรเว็บ (Pacfico และ Pacifico-Bold) ได้รับการกําหนดโดยใช้กฎ @font-face และเป็นทรัพยากรสุดท้ายที่เบราว์เซอร์ดึงข้อมูลในเชนคําขอที่สําคัญ โดยทั่วไปแล้ว เว็บฟอนต์จะโหลดแบบ Lazy ซึ่งหมายความว่าจะไม่โหลดจนกว่าจะมีการดาวน์โหลดทรัพยากรที่สำคัญ (CSS, JS)
ลำดับของทรัพยากรที่ดึงข้อมูลในแอปพลิเคชันมีดังนี้
การโหลดแบบอักษรเว็บล่วงหน้า
เพื่อหลีกเลี่ยง FOUT คุณสามารถโหลดแบบอักษรเว็บที่จำเป็นล่วงหน้าได้ทันที เพิ่มองค์ประกอบ Link
สําหรับการสมัครนี้ที่ส่วนหัวของเอกสาร
<head>
<!-- ... -->
<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>
แอตทริบิวต์ as="font" type="font/woff2"
จะบอกให้เบราว์เซอร์ดาวน์โหลดทรัพยากรนี้เป็นแบบอักษรและช่วยจัดลําดับความสําคัญของคิวทรัพยากร
แอตทริบิวต์ crossorigin
ระบุว่าควรดึงข้อมูลทรัพยากรด้วยคำขอ CORS หรือไม่ เนื่องจากแบบอักษรอาจมาจากโดเมนอื่น หากไม่มีแอตทริบิวต์นี้ เบราว์เซอร์จะไม่สนใจแบบอักษรที่โหลดไว้ล่วงหน้า
เนื่องจากมีการใช้ Pacifico-Bold ในส่วนหัวของหน้า เราจึงเพิ่มแท็กที่โหลดล่วงหน้าเพื่อให้ดึงข้อมูลได้เร็วขึ้น การโหลดแบบอักษร Pacifico.woff2 ล่วงหน้านั้นไม่สำคัญเนื่องจากการกำหนดรูปแบบให้กับข้อความที่อยู่ครึ่งหน้าล่าง
โหลดแอปพลิเคชันอีกครั้งและเรียกใช้ Lighthouse อีกครั้ง ตรวจสอบส่วนเวลาในการตอบสนองสูงสุดของเส้นทางที่สำคัญ
โปรดสังเกตว่าระบบนำ Pacifico-Bold.woff2
ออกจากเชนคำขอที่สำคัญอย่างไร ระบบดึงข้อมูลไว้ก่อนหน้านี้ในแอปพลิเคชัน
เมื่อใช้การโหลดล่วงหน้า เบราว์เซอร์จะทราบว่าต้องดาวน์โหลดไฟล์นี้ให้เร็วขึ้น โปรดทราบว่าหากมีการใช้งานอย่างไม่ถูกต้อง การโหลดล่วงหน้าอาจส่งผลเสียต่อประสิทธิภาพการทำงานด้วยการส่งคำขอที่ไม่จำเป็นสำหรับทรัพยากรที่ไม่ได้ใช้งาน