ตั้งแต่ Chrome 83 เป็นต้นไป คุณสามารถรวม link rel="preload" กับ font-display: optional เพื่อกำจัดปัญหาการกระตุกของเลย์เอาต์ได้อย่างสมบูรณ์
Chrome 83 กำจัดปัญหาการเปลี่ยนเลย์เอาต์เมื่อโหลดแบบอักษรที่ไม่บังคับล่วงหน้าด้วยการเพิ่มประสิทธิภาพรอบการแสดงผล
การรวม <link rel="preload"> กับ font-display: optional เป็นวิธีที่มีประสิทธิภาพมากที่สุดในการ
รับประกันว่าจะไม่มีปัญหาการกระตุกของเลย์เอาต์เมื่อแสดงผลแบบอักษรที่กำหนดเอง
ความเข้ากันได้กับเบราว์เซอร์
ดูข้อมูลการรองรับข้ามเบราว์เซอร์ล่าสุดได้ที่ข้อมูลของ MDN ดังนี้
การแสดงผลแบบอักษร
การเปลี่ยนเลย์เอาต์หรือการจัดเลย์เอาต์ใหม่จะเกิดขึ้นเมื่อทรัพยากรในหน้าเว็บมีการเปลี่ยนแปลงแบบไดนามิก ซึ่งส่งผลให้เนื้อหา "เปลี่ยน" ไป การดึงและแสดงผลแบบอักษรบนเว็บอาจทำให้เกิดการเปลี่ยนเลย์เอาต์โดยตรงได้ 2 วิธีดังนี้
- ระบบจะสลับแบบอักษรสำรองกับแบบอักษรใหม่ ("การแสดงข้อความที่ไม่มีสไตล์")
- ระบบจะแสดงข้อความที่ "มองไม่เห็น" จนกว่าจะแสดงผลแบบอักษรใหม่ในหน้า ("การแสดงข้อความที่มองไม่เห็น")
พร็อพเพอร์ตี้ CSS font-display ช่วยให้คุณปรับเปลี่ยนลักษณะการทำงานของการแสดงผลแบบอักษรที่กำหนดเองได้ผ่านค่าต่างๆ ที่รองรับ (auto, block,
swap, fallback, และ optional) การเลือกค่าที่จะใช้ขึ้นอยู่กับลักษณะการทำงานที่ต้องการ
สำหรับแบบอักษรที่โหลดแบบไม่พร้อมกัน อย่างไรก็ตาม ค่าที่รองรับเหล่านี้ทุกค่าอาจทำให้เกิดการจัดเลย์เอาต์ใหม่ได้ 1 ใน 2 วิธีที่ระบุไว้ข้างต้น จนถึงตอนนี้
แบบอักษรที่ไม่บังคับ
พร็อพเพอร์ตี้ font-display ใช้ไทม์ไลน์ 3 ช่วงเพื่อจัดการแบบอักษรที่ต้องดาวน์โหลดก่อนจึงจะแสดงผลได้ ดังนี้
- Block: แสดงข้อความที่ "มองไม่เห็น" แต่จะเปลี่ยนไปใช้แบบอักษรบนเว็บทันทีที่โหลดเสร็จ
- Swap: แสดงข้อความโดยใช้แบบอักษรของระบบสำรอง แต่จะเปลี่ยนไปใช้แบบอักษรบนเว็บทันทีที่โหลดเสร็จ
- Fail: แสดงข้อความโดยใช้แบบอักษรของระบบสำรอง
ก่อนหน้านี้ แบบอักษรที่กำหนดด้วย font-display: optional มีช่วงบล็อก 100 มิลลิวินาทีและไม่มีช่วงสลับ ซึ่งหมายความว่าระบบจะแสดงข้อความที่ "มองไม่เห็น" ในระยะเวลาสั้นๆ มากก่อนที่จะเปลี่ยนไปใช้แบบอักษรสำรอง หากดาวน์โหลดแบบอักษรไม่เสร็จภายใน 100 มิลลิวินาที ระบบจะใช้แบบอักษรสำรองและไม่มีการสลับ
font-display: optional ใน Chrome เมื่อดาวน์โหลดแบบอักษร หลังจาก ช่วงบล็อก 100 มิลลิวินาทีอย่างไรก็ตาม ในกรณีที่ดาวน์โหลดแบบอักษรเสร็จก่อนช่วงบล็อก 100 มิลลิวินาที แบบอักษรที่กำหนดเองจะแสดงผลและใช้ในหน้า
font-display: optional ใน Chrome เมื่อดาวน์โหลดแบบอักษร ก่อน ช่วงบล็อก 100 มิลลิวินาทีChrome จะแสดงผลหน้าซ้ำ 2 ครั้ง ในทั้ง 2 กรณี ไม่ว่าระบบจะใช้แบบอักษรสำรองหรือไม่ก็ตาม หรือแบบอักษรที่กำหนดเองจะโหลดเสร็จทันเวลาหรือไม่ก็ตาม ซึ่งจะทำให้เกิดการกะพริบเล็กน้อยของข้อความที่มองไม่เห็น และในกรณีที่แสดงผลแบบอักษรใหม่ จะเกิดปัญหาการกระตุกของเลย์เอาต์ที่ทำให้เนื้อหาบางส่วนของหน้าเคลื่อนที่ ปัญหานี้จะเกิดขึ้นแม้ว่าแบบอักษรจะจัดเก็บไว้ในแคชดิสก์ของเบราว์เซอร์และโหลดได้ดีก่อนที่ช่วงบล็อกจะเสร็จสมบูรณ์
เราได้เพิ่มการเพิ่มประสิทธิภาพใน Chrome 83 เพื่อนำรอบการแสดงผลแรกสำหรับแบบอักษรที่ไม่บังคับ
ซึ่งโหลดล่วงหน้าด้วย <link rel="preload'> ออกทั้งหมด
แต่ระบบจะบล็อกการแสดงผลจนกว่าแบบอักษรที่กำหนดเองจะโหลดเสร็จหรือผ่านไประยะเวลาหนึ่ง ปัจจุบันระยะหมดเวลาตั้งไว้ที่ 100 มิลลิวินาที แต่อาจมีการเปลี่ยนแปลงในอนาคตอันใกล้นี้เพื่อเพิ่มประสิทธิภาพ
font-display: optional ใน Chrome เมื่อโหลดแบบอักษรล่วงหน้าและดาวน์โหลดแบบอักษรหลังจาก ช่วงบล็อก 100 มิลลิวินาที (ไม่มีการแสดงข้อความที่มองไม่เห็น)
font-display: optional ใน Chrome เมื่อโหลดแบบอักษรล่วงหน้าและดาวน์โหลดแบบอักษรก่อน ช่วงบล็อก 100 มิลลิวินาที (ไม่มีการแสดงข้อความที่มองไม่เห็น)การโหลดแบบอักษรที่ไม่บังคับล่วงหน้าใน Chrome จะช่วยลดโอกาสที่จะเกิดปัญหาการกระตุกของเลย์เอาต์และการแสดงข้อความที่ไม่มีสไตล์ ซึ่งตรงกับลักษณะการทำงานที่กำหนดไว้ใน CSS Fonts Module Level 4 ที่แบบอักษรที่ไม่บังคับไม่ควรทำให้เกิดการจัดเลย์เอาต์ใหม่ และ User Agent สามารถเลื่อนการแสดงผลออกไปเป็นระยะเวลาที่เหมาะสม แทนได้
แม้ว่าจะไม่จำเป็นต้องโหลดแบบอักษรที่ไม่บังคับล่วงหน้า แต่การดำเนินการดังกล่าวจะช่วยเพิ่มโอกาสที่แบบอักษรจะโหลดก่อนรอบการแสดงผลแรกได้อย่างมาก โดยเฉพาะอย่างยิ่งหากยังไม่ได้จัดเก็บไว้ในแคชของเบราว์เซอร์
บทสรุป
ทีม Chrome ยินดีรับฟังประสบการณ์ของคุณในการโหลดแบบอักษรที่ไม่บังคับล่วงหน้าด้วยการเพิ่มประสิทธิภาพใหม่เหล่านี้ โปรดรายงานปัญหาหากพบ ปัญหาหรือต้องการแนะนำฟีเจอร์