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

Garima Mimani

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

วัดระยะทาง

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

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

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

เว็บฟอนต์อยู่ในเชนคำขอที่สำคัญ

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

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

โหลดเว็บแบบอักษร Pacifico-Bold ไว้ล่วงหน้าและนำออกจากเชนคำขอที่สำคัญ

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

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

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