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

โค้ดแล็บนี้จะแสดงวิธีโหลดแบบอักษรเว็บล่วงหน้าโดยใช้ 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 โหลดไว้ล่วงหน้าแล้ว

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