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

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

สาเหตุที่การตรวจสอบการแสดงแบบอักษรของ Lighthouse ไม่ผ่าน

Lighthouse จะแจ้ง URL ของแบบอักษรที่อาจแสดงข้อความที่มองไม่เห็น

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

วิธีหลีกเลี่ยงการแสดงข้อความที่มองไม่เห็น

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

  • swap
  • optional
  • fallback

ตัวอย่าง CSS

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}

ตัวอย่าง Google Fonts

เพิ่มพารามิเตอร์ &display=swap/&display=optional/&display=fallback ต่อท้าย URL ของ Google Fonts

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

วิธีหลีกเลี่ยงการเลื่อนเลย์เอาต์ที่เกิดจากแบบอักษรที่เลื่อน

การแสดงแบบอักษรของระบบชั่วคราวจะแทนที่ FOIT ด้วยข้อความที่ไม่มีการจัดรูปแบบ (FOUT) ที่ปรากฏขึ้นอย่างรวดเร็ว ซึ่งจะปรับปรุง FCP และ LCP โดยการทำให้เนื้อหาแสดงผลเร็วขึ้น แต่ทั้ง FOIT และ FOUT จะมีผลต่อ CLS เหมือนกันเมื่อแบบอักษรที่กำหนดเองเข้ามาแทนที่แบบอักษรของระบบชั่วคราว

คุณลดผลกระทบของ CLS จากการโหลดแบบอักษรได้โดยใช้การโหลดล่วงหน้าร่วมกับ font-display: optional อย่างไรก็ตาม การใช้การโหลดล่วงหน้ามากเกินไปอาจส่งผลเสียต่อเมตริกการโหลด เราขอแนะนำให้ทำการทดสอบ A/B เพื่อให้มั่นใจว่าการโหลดแบบล่วงหน้าของแบบอักษรจะไม่ทําให้ประสิทธิภาพลดลง

คำแนะนำเฉพาะสแต็ก

Drupal

ระบุ @font-display เมื่อกำหนดแบบอักษรที่กำหนดเองในธีม

Magento

ระบุ @font-display เมื่อกำหนดแบบอักษรที่กำหนดเอง

แหล่งข้อมูล