หลีกเลี่ยงข้อความที่มองไม่เห็นระหว่างการโหลดแบบอักษร

Katie Hempenius
Katie Hempenius
X
Barry Pollard

สาเหตุที่ไม่ควรพลาดผลิตภัณฑ์นี้

แบบอักษรมักเป็นไฟล์ขนาดใหญ่ที่ใช้เวลาโหลดนาน ในการจัดการกับปัญหานี้ เบราว์เซอร์บางประเภทจะซ่อนข้อความจนกว่าแบบอักษรจะโหลด ("Flash ของข้อความที่มองไม่เห็น")

การแสดงผลเนื้อหาขนาดใหญ่ที่สุด (LCP) อาจล่าช้าเมื่อรอให้ข้อความแสดงผล ถ้าต้องการเพิ่มประสิทธิภาพ คุณควรหลีกเลี่ยง "รูปแบบข้อความที่มองไม่เห็น" (FOIT) และแสดงเนื้อหาต่อผู้ใช้ทันทีโดยใช้แบบอักษรของระบบ ซึ่งจะสร้าง "รูปแบบของข้อความที่ไม่ได้จัดรูปแบบ" (FOUT)

ค่าเริ่มต้นของเบราว์เซอร์ในการแสดงแบบอักษร

ต่อไปนี้เป็นลักษณะการทำงานเริ่มต้นของการโหลดแบบอักษรสำหรับเบราว์เซอร์ทั่วไป

เบราว์เซอร์ ลักษณะการทำงานเริ่มต้นหากแบบอักษรไม่พร้อมใช้งาน...
Chrome และ Edge ระบบจะซ่อนข้อความไว้สูงสุด 3 วินาที หากข้อความยังไม่พร้อมใช้งาน ระบบจะใช้แบบอักษรของระบบจนกว่าแบบอักษรจะพร้อมใช้งาน จากนั้นเปลี่ยนไปใช้แบบอักษรอื่น
Firefox ระบบจะซ่อนข้อความไว้สูงสุด 3 วินาที หากข้อความยังไม่พร้อมใช้งาน ระบบจะใช้แบบอักษรของระบบจนกว่าแบบอักษรจะพร้อมใช้งาน จากนั้นเปลี่ยนไปใช้แบบอักษรอื่น
Safari ซ่อนข้อความจนกว่าแบบอักษรจะพร้อมใช้งาน

แสดงข้อความทันที

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

ตัวเลือกที่ 1: ใช้ font-display

การรองรับเบราว์เซอร์

  • 60
  • 79
  • 58
  • 11.1

แหล่งที่มา

font-display คือ API สำหรับการระบุกลยุทธ์การแสดงแบบอักษร swap จะบอกเบราว์เซอร์ว่าข้อความที่ใช้แบบอักษรนี้ควรจะแสดงทันทีโดยใช้แบบอักษรของระบบ เมื่อแบบอักษรที่กำหนดเองพร้อมใช้งานแล้ว แบบอักษรของระบบจะถูกสลับออก

/* Before */
@font-face {
  font-family: Helvetica;
}

/* After */
@font-face {
  font-family: Helvetica;
  font-display: swap;
}

หากเบราว์เซอร์ไม่รองรับ font-display แต่เบราว์เซอร์รุ่นใหม่ทั้งหมดรองรับ เบราว์เซอร์จะยังคงทำงานตามค่าเริ่มต้นในการโหลดแบบอักษรต่อไป

ตัวเลือกที่ 2: รอให้ใช้แบบอักษรที่กำหนดเองเสร็จก่อน

การรองรับเบราว์เซอร์

  • 35
  • 79
  • 41
  • 10

แหล่งที่มา

หากทำงานมากขึ้นเล็กน้อย ระบบก็อาจใช้แนวทางที่กำหนดเองมากขึ้น

ซึ่งวิธีการดังกล่าวประกอบด้วย 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 เพื่อแสดงข้อความ

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

ยืนยันว่าตรวจสอบว่าข้อความยังคงมองเห็นได้ในระหว่างการโหลดเว็บฟอนต์