Codelab นี้จะแสดงวิธีโหลดแบบอักษรของเว็บไว้ล่วงหน้าโดยใช้ rel="preload" เพื่อนำข้อความที่ไม่มีการจัดรูปแบบ (FOUT) ออก
วัดระยะทาง
ก่อนอื่นให้วัดประสิทธิภาพของเว็บไซต์ก่อนที่จะเพิ่มการเพิ่มประสิทธิภาพ
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
- กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกแท็บ Lighthouse
- ตรวจสอบว่าได้เลือกช่องทำเครื่องหมายประสิทธิภาพในรายการหมวดหมู่
- คลิกปุ่มสร้างรายงาน
รายงาน Lighthouse ที่สร้างขึ้นจะแสดงลำดับการดึงข้อมูลทรัพยากรในส่วนเวลาในการตอบสนองของเส้นทางวิกฤติสูงสุด
ในการตรวจสอบข้างต้น แบบอักษรของเว็บเป็นส่วนหนึ่งของห่วงโซ่คำขอที่สำคัญ และมีการดึงข้อมูลครั้งล่าสุด เชนคำขอที่สำคัญจะแสดงลำดับของทรัพยากรที่เบราว์เซอร์จัดลำดับความสำคัญและดึงข้อมูล ในแอปพลิเคชันนี้ แบบอักษรของเว็บ (Pacfico และ Pacifico-Bold) จะกำหนดโดยใช้กฎ @font-face และเป็นทรัพยากรสุดท้ายที่เบราว์เซอร์ดึงมาในห่วงโซ่คำขอที่สำคัญ โดยปกติแล้วเว็บฟอนต์จะโหลดแบบ Lazy Loading ซึ่งหมายความว่าระบบจะไม่โหลดเว็บฟอนต์จนกว่าจะมีการดาวน์โหลดทรัพยากรที่สำคัญ (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 ล่วงหน้าเพราะเป็นการจัดรูปแบบข้อความที่อยู่ครึ่งหน้าล่าง
โหลดแอปพลิเคชันซ้ำและเรียกใช้ประภาคารอีกครั้ง ตรวจสอบส่วนเวลาในการตอบสนองของเส้นทางวิกฤติสูงสุด
สังเกตการนำ Pacifico-Bold.woff2 ออกจากห่วงโซ่คำขอที่สำคัญ โดยจะมีการดึงข้อมูลก่อนหน้านี้ในแอปพลิเคชัน
เมื่อใช้การโหลดล่วงหน้า เบราว์เซอร์จะรู้ว่าต้องดาวน์โหลดไฟล์นี้ก่อน โปรดทราบว่าหากไม่มีการใช้งานอย่างถูกต้อง การโหลดล่วงหน้าอาจส่งผลเสียต่อประสิทธิภาพโดยการส่งคำขอทรัพยากรที่ไม่ได้ใช้งาน