เว็บฟอนต์ยังคงเป็นชัยชนะด้านประสิทธิภาพที่ง่ายที่สุดในเว็บไซต์ส่วนใหญ่

รูปแบบที่พบซ้ำแล้วซ้ำอีก

หากคุณตรวจสอบเว็บไซต์ production แบบสุ่มสักสิบเว็บในวันนี้ คุณจะพบสถานการณ์เรื่องฟอนต์ที่คล้ายกันในเว็บไซต์ส่วนใหญ่:

• โหลดไฟล์ฟอนต์หกถึงสิบไฟล์บนหน้าแรก
• ทั้งหมดเป็น WOFF2 (ดี) แต่ไม่มีแผน font-display (ไม่ดี)
• มีน้ำหนักและสไตล์หลายแบบที่ไม่ได้ถูกใช้ที่ใดเลยบนหน้า
• ทั้ง stack ถูกเสิร์ฟจากโดเมนบุคคลที่สาม (มักเป็น Google Fonts) พร้อมต้นทุนด้าน DNS, TLS และความเป็นส่วนตัวทั้งหมดที่ตามมา
• ไม่มีการทำ subset ด้วย unicode-range ดังนั้นผู้เข้าชมทุกคนจึงต้องดาวน์โหลด glyph ภาษาซีริลลิกและกรีก แม้ว่าหน้านั้นจะเป็นภาษาอังกฤษก็ตาม

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

วิธีแก้ไม่ใช่เรื่องแปลกใหม่ แต่เป็นเทคนิคที่เข้าใจกันดีจำนวนไม่กี่อย่าง ซึ่งอยู่ในเบราว์เซอร์มาหลายปีแล้ว

ใช้ variable font หนึ่งไฟล์แทนฟอนต์ static หกไฟล์

หากคุณกำลังโหลด Inter Regular, Inter Medium, Inter SemiBold, Inter Bold และ ตัวเอียงของแต่ละแบบ คุณกำลังดาวน์โหลดไบต์มากกว่าที่จำเป็นราวหกเท่า ไฟล์ Inter variable font เพียงไฟล์เดียวครอบคลุมแกนน้ำหนักทั้งหมด (และแกนเอียงในบาง build) ในไฟล์เดียวที่มีขนาดใหญ่กว่าน้ำหนัก static สองแบบเพียงเล็กน้อย

เรื่องการรองรับของเบราว์เซอร์จบไปหลายปีแล้ว — variable fonts ใช้ได้ในทุกที่ที่สำคัญ ความลังเลที่เหลืออยู่ส่วนใหญ่เป็นความเคยชินตกค้างจากยุคฟอนต์ static

กฎใช้งานจริงแบบง่าย: หนึ่งไฟล์ variable font ต่อ script ต่อ family Latin หนึ่งไฟล์ Cyrillic อีกไฟล์ Greek อีกไฟล์ โหลดแบบมีเงื่อนไขด้วย unicode-range แค่นั้นเอง

ตั้งค่า font-display ให้เหมาะสม

พฤติกรรมเริ่มต้นเมื่อฟอนต์ custom ยังโหลดอยู่คือการไม่แสดง อะไรเลย — ข้อความล่องหน — นานได้ถึงสามวินาที นี่คือค่าเริ่มต้นที่แย่ที่สุด ผู้ใช้เห็นหน้าว่างและคิดว่ามีบางอย่างเสีย

เพิ่มสิ่งนี้ในทุกกฎ @font-face:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

swap แสดงฟอนต์สำรองทันที และสลับเป็นฟอนต์ custom เมื่อโหลดเสร็จ ผู้ใช้สามารถอ่านหน้าได้ตั้งแต่มิลลิวินาทีที่ศูนย์ สิ่งที่ต้องแลกคือ layout shift สั้น ๆ เมื่อเกิดการสลับ ซึ่งคุณลดผลกระทบได้ด้วยเทคนิคถัดไป

ปรับเมตริกของฟอนต์สำรองให้ตรงกัน

การกะพริบของข้อความที่ยังไม่ถูกจัดสไตล์จะรู้สึกสะดุดก็ต่อเมื่อฟอนต์สำรองและฟอนต์ custom มีเมตริกต่างกันมาก CSS สมัยใหม่แก้เรื่องนี้ด้วย size-adjust, ascent-override และตัวอื่น ๆ:

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

เมื่อปรับเมตริกของฟอนต์สำรองแล้ว การสลับแทบสังเกตไม่เห็น — คำต่าง ๆ ใช้พื้นที่แนวนอนเท่าเดิมทั้งก่อนและหลังฟอนต์ custom มาถึง

งาน --allow-fallback-font-metrics ของ Google ตอนนี้อยู่ในระดับ baseline browser support แล้ว และมี tooling pipeline (ไลบรารี fontaine และเครื่องมือคล้ายกัน) ที่คำนวณค่าที่ถูกต้องให้คุณได้ในไม่กี่วินาที

โฮสต์เอง

Google Fonts สะดวก ฟรี และมาพร้อมต้นทุนจริงสองอย่าง:

1. TLS handshake ครั้งที่สอง แม้จะมี HTTP/3 และ connection coalescing แล้ว origin เพิ่มอีกหนึ่งแห่งก็แทบไม่เคยฟรี
2. คำถามด้านความเป็นส่วนตัวและ compliance ศาลยุโรปหลายแห่งตัดสินว่าการโหลด Google Fonts จาก fonts.gstatic.com ถือเป็นการส่งข้อมูลส่วนบุคคล (ที่อยู่ IP) ไปยังบุคคลที่สาม การโฮสต์เองตัดคำถามนี้ออกไปทั้งหมด

pipeline สำหรับดาวน์โหลดและโฮสต์คือ:

1. รับไฟล์ WOFF2 (variable build หากมี)
2. ทำ subset ให้เหลือเฉพาะ script ที่ผู้ชมของคุณใช้จริง
3. เสิร์ฟจาก origin เดียวกับส่วนที่เหลือของเว็บไซต์ พร้อม Cache-Control: max-age=31536000, immutable ที่ยาว
4. preload น้ำหนักที่สำคัญที่สุด: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

นั่นคือ pipeline ทั้งหมด สำหรับเว็บไซต์ที่มีอยู่แล้วใช้เวลาหนึ่งช่วงบ่าย และคุณแทบจะไม่ย้อนกลับไปใช้แบบเดิมอีก

เมื่อใดควรข้ามฟอนต์ custom ไปเลย

ควรพูดให้ชัด: ไม่ใช่ทุกเว็บไซต์ที่ต้องมีฟอนต์ custom ตอนนี้ system font stack สวยจริงบนทุกระบบปฏิบัติการ:

font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;

น้ำหนักถูกต้อง เมตริกถูกต้อง การเรนเดอร์ถูกปรับให้เหมาะกับอุปกรณ์ และต้นทุน bytes-on-the-wire เท่ากับศูนย์พอดี สำหรับเว็บเครื่องมือ แอปภายใน portfolio ที่ให้ความสำคัญกับเนื้อหา หรืออะไรก็ตามที่มุ่งไปยังผู้ใช้บนเครือข่ายช้า system stack คือคำตอบที่ถูกต้อง

<!-- tool-cta:start -->

💡 ลองทำสิ่งนี้: แปลงไฟล์ TTF หรือ OTF ของคุณเป็น WOFF2 สมัยใหม่พร้อม CSS ที่พร้อมใช้งาน โดยใช้ Webfont Generator ซึ่งเป็นการเปลี่ยนรูปแบบที่โพสต์แนะนำ

<!-- tool-cta:end -->

สรุปแบบตรงไปตรงมา

สำหรับเว็บไซต์ขนาดเล็กทั่วไป สี่ขั้นตอนก็ครอบคลุมเรื่องประสิทธิภาพของเว็บฟอนต์ทั้งหมดแล้ว:

1. หนึ่ง variable font ต่อ family ต่อ script
2. font-display: swap พร้อม เมตริกฟอนต์สำรองที่ปรับให้ตรงกัน
3. โฮสต์เอง พร้อม cache headers ที่ยาว และ preload สำหรับน้ำหนักสำคัญ
4. หรือข้ามฟอนต์ไปเลย แล้วใช้ system stack

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