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

แบบอักษรมักเป็นไฟล์ขนาดใหญ่ที่โหลดช้า บางเบราว์เซอร์จะซ่อนข้อความจนกว่าแบบอักษรจะโหลด ทำให้เกิดข้อความมองไม่เห็น (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

เพิ่มพารามิเตอร์ &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 เมื่อกำหนดแบบอักษรที่กำหนดเอง

แหล่งข้อมูล