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

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

แหล่งข้อมูล