WebFont "แบบสมบูรณ์" ที่มีรูปแบบต่างๆ ทั้งหมด ซึ่งคุณอาจไม่ต้องการ รวมถึงอักขระทั้งหมดซึ่งอาจไม่ได้ใช้ อาจส่งผลให้การดาวน์โหลดมีขนาดใหญ่หลายเมกะไบต์ ในโพสต์นี้ คุณจะเห็นวิธีเพิ่มประสิทธิภาพการโหลด WebFont เพื่อให้ผู้เข้าชมดาวน์โหลดเฉพาะสิ่งที่จะใช้
กฎ @font-face CSS ได้รับการออกแบบมาโดยเฉพาะเพื่อแก้ปัญหาไฟล์ขนาดใหญ่ที่มีรูปแบบทั้งหมด ซึ่งจะช่วยให้คุณแยกแบบอักษรเป็นคอลเล็กชันทรัพยากรได้ เช่น ยูนิโค้ดชุดย่อย และรูปแบบย่อยที่แตกต่างกัน
เมื่อมีการประกาศเหล่านี้ เบราว์เซอร์จะหาชุดย่อยและตัวแปรที่จำเป็น รวมถึงดาวน์โหลดชุดขั้นต่ำที่จำเป็นในการแสดงผลข้อความ ซึ่งสะดวกมาก อย่างไรก็ตาม หากไม่ระมัดระวัง การดำเนินการนี้อาจทำให้เกิดปัญหาคอขวดด้านประสิทธิภาพในเส้นทางการแสดงผลที่สำคัญและทำให้การแสดงผลข้อความล่าช้า
ลักษณะการทำงานเริ่มต้น
การโหลดแบบ Lazy Loading ของแบบอักษรมีข้อบ่งชี้ที่สำคัญที่ซ่อนอยู่ซึ่งอาจทำให้การแสดงผลข้อความล่าช้า เบราว์เซอร์ต้องสร้างต้นไม้การแสดงผล ซึ่งขึ้นอยู่กับต้นไม้ DOM และ CSSOM ก่อนจึงจะทราบว่าต้องใช้ทรัพยากรแบบอักษรใดในการแสดงผลข้อความ ด้วยเหตุนี้ คําขอแบบอักษรจึงล่าช้ากว่าทรัพยากรสําคัญอื่นๆ มาก และเบราว์เซอร์อาจถูกบล็อกไม่ให้แสดงผลข้อความจนกว่าจะดึงข้อมูลทรัพยากร