สาเหตุที่ไม่ควรพลาดผลิตภัณฑ์นี้
แบบอักษรมักเป็นไฟล์ขนาดใหญ่ที่ใช้เวลาโหลดนาน ในการจัดการปัญหานี้ เบราว์เซอร์บางประเภทจะซ่อนข้อความจนกว่าแบบอักษรจะโหลด ("Flash ของข้อความที่มองไม่เห็น")
การแสดงผลเนื้อหาขนาดใหญ่ที่สุด (LCP) อาจล่าช้าเมื่อรอให้ข้อความแสดงผล ถ้าคุณกำลังเพิ่มประสิทธิภาพการทำงาน คุณจะต้องหลีกเลี่ยง "แฟลชของข้อความที่มองไม่เห็น" (FOIT) และแสดงเนื้อหาต่อผู้ใช้ทันทีโดยใช้แบบอักษรของระบบ ซึ่งจะสร้าง "ข้อความที่ไม่ได้จัดรูปแบบ" ขึ้น (FOUT)
ค่าเริ่มต้นของเบราว์เซอร์ในการแสดงแบบอักษร
ต่อไปนี้เป็นลักษณะการทำงานเริ่มต้นของการโหลดแบบอักษรสำหรับเบราว์เซอร์ทั่วไป
เบราว์เซอร์ | ลักษณะการทำงานเริ่มต้นหากแบบอักษรไม่พร้อมใช้งาน... |
---|---|
Chrome และ Edge | ระบบจะซ่อนข้อความไว้สูงสุด 3 วินาที หากข้อความยังไม่พร้อม ใช้แบบอักษรของระบบจนกว่าแบบอักษรจะพร้อม จากนั้นจึงเปลี่ยนไปใช้แบบอักษรอื่น |
Firefox | ระบบจะซ่อนข้อความไว้สูงสุด 3 วินาที หากข้อความยังไม่พร้อม ใช้แบบอักษรของระบบจนกว่าแบบอักษรจะพร้อม จากนั้นจึงเปลี่ยนไปใช้แบบอักษรอื่น |
Safari | ซ่อนข้อความจนกว่าแบบอักษรจะพร้อมใช้งาน |
แสดงข้อความทันที
คู่มือนี้สรุป 2 วิธีในการแสดงข้อความโดยเร็วที่สุด วิธีแรกคือวิธีง่ายๆ และมีการรองรับเบราว์เซอร์ที่ดี วิธีที่ 2 เป็นวิธีการเชิงลึก แต่อาจมอบตัวเลือกเพิ่มเติมให้คุณ ตัวเลือกที่ดีที่สุดสำหรับเว็บไซต์ของคุณขึ้นอยู่กับข้อกำหนดของคุณ
ตัวเลือกที่ 1: ใช้ font-display
font-display
คือ API สำหรับการระบุกลยุทธ์การแสดงแบบอักษร swap
จะบอกเบราว์เซอร์ว่าข้อความที่ใช้แบบอักษรนี้ควรจะแสดงทันทีโดยใช้แบบอักษรของระบบ เมื่อแบบอักษรที่กำหนดเองพร้อมใช้งานแล้ว แบบอักษรของระบบจะถูกสลับออก
/* Before */
@font-face {
font-family: Helvetica;
}
/* After */
@font-face {
font-family: Helvetica;
font-display: swap;
}
หากเบราว์เซอร์ไม่รองรับ font-display
แต่เบราว์เซอร์รุ่นใหม่ทั้งหมดรองรับ เบราว์เซอร์จะยังคงทำงานตามค่าเริ่มต้นในการโหลดแบบอักษรต่อไป
ตัวเลือกที่ 2: รอให้ใช้แบบอักษรที่กำหนดเองเสร็จก่อน
หากทำงานมากขึ้นเล็กน้อย ระบบก็อาจใช้แนวทางที่กำหนดเองมากขึ้น
ซึ่งวิธีการดังกล่าวประกอบด้วย 3 ส่วนดังนี้
- อย่าใช้แบบอักษรที่กำหนดเองในการโหลดหน้าเริ่มต้นโดยการเปลี่ยนโครงสร้างภายในโค้ด CSS เพื่อไม่ให้ใช้แบบอักษรที่กำหนดเองในตอนแรก วิธีนี้ช่วยให้มั่นใจได้ว่าเบราว์เซอร์จะแสดงข้อความทันทีโดยใช้แบบอักษรของระบบ
- ตรวจจับเมื่อมีการโหลดแบบอักษรที่กำหนดเองโดยใช้ CSS Font Loading API
- อัปเดตการจัดหน้าเพื่อใช้แบบอักษรที่กำหนดเอง
// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");
// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);
// Load the font
font.load();
// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
// Update the CSS to use the fonts
});
หรือจะใช้ไลบรารี FontFaceObserver ก็ได้เช่นกัน ซึ่ง API บางตัวจะใช้ API ได้ง่ายขึ้น
ซึ่งทำให้มีข้อควรพิจารณาเพิ่มเติมหลายประการขณะโหลดแบบอักษร เช่น สามารถโหลดแบบอักษรทั้งหมดได้พร้อมกัน โดยไม่ต้องเสียการจัดวางหลายรูปแบบเมื่อโหลดแบบอักษรแต่ละแบบ หรือเว็บไซต์สามารถเลือกที่จะไม่โหลดแบบอักษรสำหรับผู้ใช้ในการเชื่อมต่อที่ช้ากว่า หรือสำหรับผู้ใช้ที่ใช้ตัวเลือกบันทึกข้อมูล
ยืนยัน
เรียกใช้ Lighthouse เพื่อยืนยันว่าเว็บไซต์ใช้ font-display: swap
เพื่อแสดงข้อความ
- กด Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกแท็บ Lighthouse
- ตรวจสอบว่าได้เลือกช่องทำเครื่องหมายประสิทธิภาพในรายการหมวดหมู่แล้ว
- คลิกปุ่มสร้างรายงาน
ยืนยันว่าตรวจสอบว่าข้อความยังคงมองเห็นได้ในระหว่างการโหลดเว็บฟอนต์