การใช้แบบอักษรแพร่หลายในหน้าเว็บส่วนใหญ่และมักมีข้อผิดพลาดด้วย ข้อผิดพลาดเหล่านี้จำนวนมากส่งผลเสียต่องบประมาณประสิทธิภาพของเว็บ บทความนี้มีวัตถุประสงค์เพื่อให้ข้อมูลเกี่ยวกับการใช้แบบอักษรของเว็บและช่วยปรับปรุงประสิทธิภาพเว็บของคุณ
ดังที่แสดงในลำดับชั้นที่ใช้เมื่อแสดงผลหน้าเว็บใดๆ องค์ประกอบแบบอักษรสามารถชะลอการแสดงผลองค์ประกอบอื่นๆ จนกว่าจะโหลดได้ การจัดการความล่าช้านี้อย่างเหมาะสมเป็นสิ่งสำคัญสำหรับทั้ง Cumulative Layout Shift (CLS) และการรับรู้ของผู้ใช้
ปัญหาเกี่ยวกับการโหลดแบบอักษร
จนกว่าแบบอักษรของหน้าจะโหลด การมองเห็นแบบอักษรในระหว่างกระบวนการแสดงผล HTML และ CSS จะแตกต่างกันไปในแต่ละเบราว์เซอร์ ต่อไปนี้เป็นข้อมูลสรุปว่าเบราว์เซอร์ต่างๆ จัดการกับสถานการณ์นี้อย่างไร:
| เบราว์เซอร์ | ลักษณะการทำงานเริ่มต้นหากแบบอักษรไม่พร้อม... |
|---|---|
| ขอบ | ใช้แบบอักษรของระบบจนกว่าแบบอักษรจะพร้อม สลับแบบอักษร |
| Chrome | จะซ่อนข้อความนานถึง 3 วินาที หากข้อความยังไม่พร้อม ให้ใช้แบบอักษรของระบบจนกว่าแบบอักษรจะพร้อม สลับแบบอักษร |
| Firefox | จะซ่อนข้อความนานถึง 3 วินาที หากข้อความยังไม่พร้อม ให้ใช้แบบอักษรของระบบจนกว่าแบบอักษรจะพร้อม สลับแบบอักษร |
| Safari | ซ่อนข้อความจนกว่าแบบอักษรจะพร้อม |
เพื่อแก้ไขปัญหานี้โดยไม่ต้องพึ่ง เกี่ยวกับพฤติกรรมของเบราว์เซอร์มีการแนะนำพารามิเตอร์การแสดงผลแบบอักษร ปัจจุบัน 92% ของเบราว์เซอร์รองรับพารามิเตอร์การแสดงแบบอักษร
Font-Display ทำหน้าที่อะไร?
ในระหว่างกระบวนการโหลดหน้า ลักษณะของแบบอักษรอาจแตกต่างกันไปจนกว่าจะโหลดเต็ม ขึ้นอยู่กับเบราว์เซอร์ ตัวอย่างเช่น เบราเซอร์ Safari บางเวอร์ชันจะซ่อนข้อความจนกว่าจะโหลดแบบอักษร ที่ การแสดงแบบอักษร: สลับ พารามิเตอร์ CSS ทำให้พฤติกรรมนี้เป็นมาตรฐานโดยการแสดงข้อความโดยใช้แบบอักษรของระบบจนกว่าไฟล์แบบอักษรจะถูกโหลด เมื่อโหลดแบบอักษรแล้ว แบบอักษรของระบบจะถูกสลับเป็นแบบอักษรที่ต้องการ นี่คือตัวอย่างการใช้งาน:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}กำลังโหลดแบบอักษรล่วงหน้า
โดยใช้ เพื่อโหลดฟอนต์ก่อนที่พาธการเรนเดอร์วิกฤติจะสามารถป้องกันช่องว่างในขณะที่กำลังโหลดฟอนต์
โบนัส: แนวทางอุตสาหกรรมในการใช้แบบอักษร
จากข้อมูลของ SameTech เรามาดูแนวโน้มที่สำคัญและภาพรวมของโลกอินเทอร์เน็ตกันดีกว่า กราฟแรกด้านล่างแสดงการใช้แบบอักษร บนหน้าเว็บ 10,000 อันดับแรก และกราฟที่สองแสดงการใช้แบบอักษรบนไซต์ 100,000 อันดับแรก- เรามาตรวจสอบกราฟเหล่านี้กันก่อน:
มีความแตกต่าง 5% ในการใช้งาน Google Font และ Font Awesome ระหว่างไซต์ 10,000 อันดับแรกและไซต์ 100,000 อันดับแรก- สิ่งนี้บอกเราว่าไซต์ 10,000 อันดับแรกได้ปรับการใช้แบบอักษรให้เหมาะสม เราขอแนะนำให้ตรวจสอบเรื่องนี้เป็นหัวข้อที่น่าสังเกต พิจารณาว่าคุณสามารถใช้แบบอักษรบนเว็บด้วยโซลูชันของคุณเองได้อย่างไร
โบนัส 2: สถิติการใช้งาน Google Font และ Font Awesome
อ้างถึงโบนัสแรก เราขอแนะนำให้ตรวจสอบกราฟทั้งสองที่แสดงขอบเขตตัวเลขของไลบรารีแบบอักษรที่ใช้มากที่สุด จำนวนโดเมนที่ไม่ซ้ำที่นี่เกินล้าน และคนนับล้านเหล่านี้เป็นตัวแทนของคู่แข่ง SEO ของคุณ- การใช้ไลบรารีเหล่านี้ให้ดีขึ้นและเหมาะสมกว่าไลบรารีอื่นๆ สามารถช่วยให้คุณโดดเด่นได้
เมื่อปฏิบัติตามเคล็ดลับเหล่านี้และปรับการใช้แบบอักษรให้เหมาะสม คุณสามารถปรับปรุงประสิทธิภาพเว็บและประสบการณ์ผู้ใช้ของคุณได้อย่างมาก
