แบบอักษรมักเป็นไฟล์ขนาดใหญ่ที่โหลดช้า บางเบราว์เซอร์จะซ่อนข้อความไว้จนกว่าแบบอักษรจะโหลดขึ้นมา ทำให้เกิด Flash ของข้อความที่มองไม่เห็น (FOIT)
วิธีที่การตรวจสอบการแสดงแบบอักษรของ Lighthouse ล้มเหลว
Lighthouse จะแจ้ง URL แบบอักษรที่อาจกะพริบกับข้อความที่มองไม่เห็น
![ภาพหน้าจอของข้อความ Lighthouseมั่นใจได้ว่าจะยังมองเห็นได้ในระหว่างการตรวจสอบการโหลดเว็บฟอนต์](https://developer.chrome.com/static/docs/lighthouse/performance/font-display/image/a-screenshot-the-lightho-15d52429afc09.png?authuser=6&hl=th)
วิธีการหลีกเลี่ยงการแสดงข้อความที่มองไม่เห็น
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
เมื่อ กำหนดแบบอักษรที่กำหนดเอง
แหล่งข้อมูล
- ซอร์สโค้ดสำหรับการตรวจสอบให้แน่ใจว่าข้อความจะยังมองเห็นได้ในระหว่างการโหลดเว็บฟอนต์
- หลีกเลี่ยงข้อความที่มองไม่เห็นระหว่างการโหลด
- การควบคุมประสิทธิภาพของแบบอักษรด้วยการแสดงแบบอักษร
- โหลดแบบอักษรสำหรับเว็บไว้ล่วงหน้าเพื่อปรับปรุงความเร็วในการโหลด (codelab)
- ป้องกันการเปลี่ยนเลย์เอาต์และการกะพริบของข้อความที่ไม่แสดง (FOIT) โดยการโหลดแบบอักษรที่ไม่บังคับล่วงหน้า