สาเหตุที่ไม่ควรพลาดผลิตภัณฑ์นี้
แบบอักษรมักเป็นไฟล์ขนาดใหญ่ที่ใช้เวลาโหลดนาน เพื่อรับมือกับปัญหานี้ บางเบราว์เซอร์จะซ่อนข้อความไว้จนกว่าแบบอักษรจะโหลด ("Flash ของข้อความที่มองไม่เห็น")
Largest Contentful Paint (LCP) อาจล่าช้าขณะที่รอให้ข้อความแสดงผล หากคุณกำลังเพิ่มประสิทธิภาพ คุณจะต้องหลีกเลี่ยง "Flash ของข้อความที่มองไม่เห็น" (FOIT) และแสดงให้ผู้ใช้เห็นทันทีโดยใช้แบบอักษรของระบบ ซึ่งจะสร้าง "Flash ของข้อความที่ไม่มีการจัดรูปแบบ" (FOUT)
ค่าเริ่มต้นของเบราว์เซอร์สำหรับการแสดงแบบอักษร
ลักษณะการทำงานเริ่มต้นของการโหลดแบบอักษรสำหรับเบราว์เซอร์ทั่วไปมีดังนี้
| เบราว์เซอร์ | ลักษณะการทำงานเริ่มต้นหากแบบอักษรไม่พร้อมใช้งาน... |
|---|---|
| Chrome และ Edge | จะซ่อนข้อความสูงสุด 3 วินาที หากข้อความยังไม่พร้อมใช้งาน ระบบจะใช้แบบอักษรของระบบจนกว่าแบบอักษรจะพร้อม จากนั้นจึงเปลี่ยนไปใช้แบบอักษร |
| Firefox | จะซ่อนข้อความสูงสุด 3 วินาที หากข้อความยังไม่พร้อมใช้งาน ระบบจะใช้แบบอักษรของระบบจนกว่าแบบอักษรจะพร้อม จากนั้นจึงเปลี่ยนไปใช้แบบอักษร |
| Safari | ซ่อนข้อความจนกว่าแบบอักษรจะพร้อม |
แสดงข้อความทันที
คู่มือนี้สรุป 2 วิธีในการแสดงข้อความโดยเร็วที่สุดคือ วิธีแรกนั้นง่ายและมีการรองรับเบราว์เซอร์ที่ดี วิธีที่ 2 เป็นการเจาะลึก แต่อาจมีตัวเลือกให้คุณมากกว่า ตัวเลือกที่ดีที่สุดสำหรับเว็บไซต์จะขึ้นอยู่กับข้อกำหนดของคุณ
ตัวเลือกที่ 1: ใช้ font-display
font-display คือ API สำหรับการระบุกลยุทธ์การแสดงแบบอักษร swap บอกเบราว์เซอร์ว่าข้อความที่ใช้แบบอักษรนี้ควรปรากฏทันทีโดยใช้แบบอักษรของระบบ เมื่อแบบอักษรที่กำหนดเองพร้อมใช้งานแล้ว แบบอักษรของระบบจะถูกสลับออก
/* Before */
@font-face {
font-family: Helvetica;
}
/* After */
@font-face {
font-family: Helvetica;
font-display: swap;
}
หากเบราว์เซอร์ไม่รองรับ font-display แม้ว่าเบราว์เซอร์ที่ทันสมัยทั้งหมดรองรับ เบราว์เซอร์ก็ยังคงเป็นไปตามลักษณะการทำงานเริ่มต้นในการโหลดแบบอักษร
ตัวเลือกที่ 2: รอใช้แบบอักษรที่กำหนดเองจนกว่าจะโหลด
เมื่อมีการปรับปรุงอีกเล็กน้อย คุณก็จะสามารถใช้แนวทางที่กำหนดเองได้มากขึ้น
วิธีการนี้มี 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 ง่ายกว่า
ซึ่งทำให้มีข้อควรพิจารณาเพิ่มเติมเมื่อโหลดแบบอักษร เช่น โหลดแบบอักษรทั้งหมดได้พร้อมกัน เพื่อหลีกเลี่ยงการมีหลายเลย์เอาต์เมื่อแบบอักษรแต่ละแบบโหลด หรือเว็บไซต์อาจเลือกที่จะไม่โหลดแบบอักษรสำหรับผู้ใช้ที่มีการเชื่อมต่อที่ช้า หรือผู้ที่ใช้ตัวเลือกบันทึกข้อมูล
ยืนยัน
เรียกใช้ Lighthouse เพื่อยืนยันว่าเว็บไซต์ใช้ font-display: swap เพื่อแสดงข้อความ:
- กด Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกแท็บ Lighthouse
- ตรวจสอบว่าได้เลือกช่องทำเครื่องหมายประสิทธิภาพในรายการหมวดหมู่
- คลิกปุ่มสร้างรายงาน
ยืนยันว่าการตรวจสอบตรวจสอบให้แน่ใจว่าข้อความจะยังมองเห็นได้ในระหว่างการโหลดเว็บฟอนต์