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

Garima Mimani

Codelab นี้จะแสดงวิธีโหลดแบบอักษรบนเว็บล่วงหน้าโดยใช้ rel="preload" เพื่อนำออก ข้อความที่ไม่มีการจัดรูปแบบ (FOUT) ใดๆ

วัดระยะทาง

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

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

รายงาน Lighthouse ที่สร้างขึ้นจะแสดงลำดับการดึงข้อมูลของทรัพยากรในส่วนเวลาในการตอบสนองของเส้นทางวิกฤติสูงสุด

เว็บฟอนต์จะปรากฏในสายคำขอที่สำคัญ

ในการตรวจสอบข้างต้น แบบอักษรของเว็บเป็นส่วนหนึ่งของห่วงโซ่คำขอที่สำคัญและมีการดึงข้อมูลครั้งล่าสุด ห่วงโซ่คำขอที่สำคัญจะแสดงลำดับของทรัพยากรที่เบราว์เซอร์จัดลำดับความสำคัญและดึงมา ในแอปพลิเคชันนี้ แบบอักษรของเว็บ (Pacfico และ Pacifico-Bold) ได้รับการกำหนดโดยใช้กฎ @font-face และเป็นทรัพยากรล่าสุดที่เบราว์เซอร์ดึงข้อมูลโดยเบราว์เซอร์ในห่วงโซ่คำขอที่สำคัญ โดยทั่วไปเว็บฟอนต์จะมีการโหลดแบบ Lazy Loading ซึ่งหมายความว่าเว็บฟอนต์จะไม่โหลดจนกว่าจะดาวน์โหลดทรัพยากรที่สำคัญ (CSS, JS)

ลำดับของทรัพยากรที่ดึงในแอปพลิเคชันมีดังนี้

เว็บฟอนต์มีการโหลดแบบ Lazy Loading

กำลังโหลดแบบอักษรเว็บไว้ล่วงหน้า

เพื่อหลีกเลี่ยง 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 จะได้รับการโหลดล่วงหน้าและนำออกจากห่วงโซ่คำขอที่สำคัญ

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

เว็บฟอนต์ Pacifico-Bold โหลดไว้ล่วงหน้าแล้ว

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