แบบอักษรของบุคคลที่สาม

การแสดงแบบอักษรที่รวดเร็วนั้นสำคัญอย่างยิ่ง เพราะการแสดงแบบอักษรที่เร็วขึ้นไม่เพียงหมายความว่าผู้ใช้จะเห็นข้อความได้เร็วขึ้นเท่านั้น แต่ยังมีผลอย่างมากว่าแบบอักษรนั้นทำให้เกิดการเปลี่ยนแปลงเลย์เอาต์ด้วยหรือไม่ หากส่งแบบอักษรไม่ได้ก่อนที่จะต้องใช้ ก็จะมีการเปลี่ยนเลย์เอาต์เมื่อมีการสลับแบบอักษร ขนาดของการเปลี่ยนเลย์เอาต์นี้อาจแตกต่างกันไป โดยขึ้นอยู่กับว่าแบบอักษรสำรองตรงกับแบบอักษรของเว็บมากน้อยเพียงใด ในการดูการทำงานของปรากฏการณ์นี้ ให้ดูการสาธิตและเปรียบเทียบการเปลี่ยนแปลงของเลย์เอาต์ที่เกิดขึ้นในการเชื่อมต่อที่รวดเร็วกับการเชื่อมต่อที่ช้า

ตัวอย่างด้านล่างรวมเทคนิคด้านประสิทธิภาพ 2 แบบเพื่อให้โหลดแบบอักษรของบุคคลที่สามโดยเร็วที่สุด ได้แก่ การใช้การประกาศแบบอักษรในบรรทัดและการใช้ preconnect คำแนะนำเกี่ยวกับทรัพยากร แม้ว่าข้อมูลโค้ดนี้จะแสดงวิธีโหลดแบบอักษรจาก Google Fonts แต่เทคนิคเหล่านี้ยังใช้กับผู้ให้บริการแบบอักษรบุคคลที่สามรายอื่นๆ ด้วย

  • การประกาศแบบอักษรในบรรทัด: การประกาศ font-family ในบรรทัดในเอกสารหลัก แทนที่จะรวมข้อมูลนี้ในสไตล์ชีตภายนอกจะช่วยให้เบราว์เซอร์ระบุได้ว่าจะใช้ไฟล์แบบอักษรใดในหน้าเว็บโดยไม่ต้องรอดาวน์โหลดไฟล์สไตล์ชีตแยกต่างหาก ซึ่งเป็นสิ่งสำคัญเนื่องจากโดยทั่วไปเบราว์เซอร์จะไม่ดาวน์โหลดไฟล์แบบอักษรจนกว่าจะทราบว่ามีการใช้งานไฟล์นั้นๆ ในหน้าเว็บ ในกรณีส่วนใหญ่ การประกาศแบบอักษรในบรรทัด แนะนำให้ใช้ preload เพื่อโหลดแบบอักษร

  • เชื่อมต่อล่วงหน้า: วิธีที่แนะนำในการโหลด Google Fonts คือการใช้แท็ก <link> ร่วมกับคำแนะนำด้านทรัพยากร preconnect รายการ คำแนะนำทรัพยากร preconnect จะสร้างการเชื่อมต่อกับต้นทางของบุคคลที่สามตั้งแต่เนิ่นๆ ในข้อมูลโค้ดด้านล่าง คำแนะนำทรัพยากรข้อแรกจะสร้างการเชื่อมต่อสำหรับการดาวน์โหลดสไตล์ชีตแบบอักษร คำแนะนำทรัพยากรข้อที่ 2 จะสร้างการเชื่อมต่อสำหรับการดาวน์โหลดไฟล์แบบอักษร

ตัวอย่าง

<head>
   
<link rel="preconnect" href="https://fonts.googleapis.com">
   
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   
<link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
   
<style>
        body
{
           
font-family: system-ui;
           
font-size: 1em;
       
}
        h1
{
           
font-family: 'Zen Tokyo Zoo', sans-serif;
           
font-size: 3em;
       
}
   
</style>
</head>