โหลดแบบอักษรเว็บไว้ล่วงหน้าเพื่อปรับปรุงความเร็วในการโหลด

Garima Mimani

หากต้องการทำตาม Codelab นี้ ให้เปิด Glitch นี้ในแท็บที่ 2

หมายเหตุ: Codelab นี้ใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ดาวน์โหลด Chrome หากยังไม่มี

Codelab นี้แสดงวิธีโหลดแบบอักษรเว็บล่วงหน้าโดยใช้ rel="preload" เพื่อนำ Flash of Unstyled Text (FOUT) ออก

วัดผล

ก่อนอื่น ให้วัดประสิทธิภาพของเว็บไซต์ก่อนที่จะเพิ่มประสิทธิภาพใดๆ

1. หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
2. กด `Control+Shift+J` (หรือ `Command+Option+J` บน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
3. คลิกแท็บ Lighthouse
4. ตรวจสอบว่าได้เลือกช่องทำเครื่องหมายประสิทธิภาพในรายการหมวดหมู่แล้ว
5. คลิกปุ่มสร้างรายงาน

รายงาน 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 ล่วงหน้าไม่มีความสำคัญเนื่องจากเป็นแบบอักษรที่จัดรูปแบบข้อความที่อยู่ครึ่งหน้าล่าง

โหลดแอปพลิเคชันซ้ำและเรียกใช้ Lighthouse อีกครั้ง ตรวจสอบส่วนเวลาในการตอบสนองสูงสุดของเส้นทางที่สำคัญ

สังเกตว่าระบบนำ Pacifico-Bold.woff2 ออกจากเชนคำขอที่สำคัญอย่างไร ระบบจะดึงข้อมูลก่อนหน้านี้ในแอปพลิเคชัน

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