การแสดงแบบอักษรที่รวดเร็วนั้นสำคัญอย่างยิ่ง เพราะการแสดงแบบอักษรที่เร็วขึ้นไม่เพียงหมายความว่าผู้ใช้จะเห็นข้อความได้เร็วขึ้นเท่านั้น แต่ยังมีผลอย่างมากว่าแบบอักษรนั้นทำให้เกิดการเปลี่ยนแปลงเลย์เอาต์ด้วยหรือไม่ หากส่งแบบอักษรไม่ได้ก่อนที่จะต้องใช้ ก็จะมีการเปลี่ยนเลย์เอาต์เมื่อมีการสลับแบบอักษร ขนาดของการเปลี่ยนเลย์เอาต์นี้อาจแตกต่างกันไป โดยขึ้นอยู่กับว่าแบบอักษรสำรองตรงกับแบบอักษรของเว็บมากน้อยเพียงใด ในการดูการทำงานของปรากฏการณ์นี้ ให้ดูการสาธิตและเปรียบเทียบการเปลี่ยนแปลงของเลย์เอาต์ที่เกิดขึ้นในการเชื่อมต่อที่รวดเร็วกับการเชื่อมต่อที่ช้า
ตัวอย่างด้านล่างรวมเทคนิคด้านประสิทธิภาพ 2 แบบเพื่อให้โหลดแบบอักษรของบุคคลที่สามโดยเร็วที่สุด ได้แก่ การใช้การประกาศแบบอักษรในบรรทัดและการใช้ preconnect
คำแนะนำเกี่ยวกับทรัพยากร แม้ว่าข้อมูลโค้ดนี้จะแสดงวิธีโหลดแบบอักษรจาก Google Fonts แต่เทคนิคเหล่านี้ยังใช้กับผู้ให้บริการแบบอักษรบุคคลที่สามรายอื่นๆ ด้วย
การประกาศแบบอักษรในบรรทัด: การประกาศ
font-familyในบรรทัดในเอกสารหลัก แทนที่จะรวมข้อมูลนี้ในสไตล์ชีตภายนอกจะช่วยให้เบราว์เซอร์ระบุได้ว่าจะใช้ไฟล์แบบอักษรใดในหน้าเว็บโดยไม่ต้องรอดาวน์โหลดไฟล์สไตล์ชีตแยกต่างหาก ซึ่งเป็นสิ่งสำคัญเนื่องจากโดยทั่วไปเบราว์เซอร์จะไม่ดาวน์โหลดไฟล์แบบอักษรจนกว่าจะทราบว่ามีการใช้งานไฟล์นั้นๆ ในหน้าเว็บ ในกรณีส่วนใหญ่ การประกาศแบบอักษรในบรรทัด แนะนำให้ใช้preloadเพื่อโหลดแบบอักษรเชื่อมต่อล่วงหน้า: วิธีที่แนะนำในการโหลด Google Fonts คือการใช้แท็ก
<link>ร่วมกับคำแนะนำด้านทรัพยากรpreconnectรายการ คำแนะนำทรัพยากรpreconnectจะสร้างการเชื่อมต่อกับต้นทางของบุคคลที่สามตั้งแต่เนิ่นๆ ในข้อมูลโค้ดด้านล่าง คำแนะนำทรัพยากรข้อแรกจะสร้างการเชื่อมต่อสำหรับการดาวน์โหลดสไตล์ชีตแบบอักษร คำแนะนำทรัพยากรข้อที่ 2 จะสร้างการเชื่อมต่อสำหรับการดาวน์โหลดไฟล์แบบอักษร
ตัวอย่าง
HTML
<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>