ผมเลิกใช้ Google Fonts CDN แล้ว
การโหลดฟอนต์จาก Google CDN ทำให้เว็บไซต์ของคุณโหลดช้าลง
เมื่อก่อนผมใช้เพียงลิงก์เดียวใน header ซึ่งมันดูง่ายดี จนกระทั่งผมได้ลองเช็คคะแนน Lighthouse
รายงานแสดงให้เห็นถึงปัญหา เบราว์เซอร์ต้องสร้างการเชื่อมต่อเพิ่มเติมไปยังเซิร์ฟเวอร์ของ Google ต้องทำ DNS lookups และ TLS handshakes ซึ่งทำให้เกิดความล่าช้า และหากเป็นการเชื่อมต่อผ่านมือถือที่ช้า ข้อความจะมองไม่เห็นเป็นเวลานานเกินไป
ผมจึงเปลี่ยนมาใช้การ self-hosting แทน ซึ่งใช้เวลาเพียงแค่ช่วงบ่ายวันเดียว และตอนนี้ผมก็ทำแบบนี้กับทุกโปรเจกต์
นี่คือการตั้งค่าที่คุณต้องใช้:
- ใช้ฟอร์แมต WOFF2 เพราะมีขนาดเล็กกว่า WOFF ถึง 30% คุณไม่จำเป็นต้องใช้ฟอร์แมตเก่าๆ อย่าง .ttf หรือ .eot อีกต่อไปแล้ว
- แปลงไฟล์ฟอนต์ของคุณ โดยใช้ library
fonttoolsเพื่อบีบอัดไฟล์ .ttf ให้เป็น .woff2 - ใช้คุณสมบัติ
font-display: swapเพื่อแสดงข้อความสำรอง (fallback text) ทันที ซึ่งจะช่วยป้องกันไม่ให้ข้อความหายไปในขณะที่ฟอนต์กำลังโหลด - ทำ Preload สำหรับฟอนต์ที่สำคัญ โดยเพิ่มลิงก์ preload ในส่วน
<head>สำหรับฟอนต์ที่ใช้งานในส่วนบนของหน้าเว็บ (above the fold) - ใช้ attribute
crossoriginเสมอ หากคุณลืมสิ่งนี้ เบราว์เซอร์จะดาวน์โหลดฟอนต์ซ้ำสองรอบ - ทำ Subset ฟอนต์ของคุณ หากเว็บไซต์ของคุณใช้ภาษาอังกฤษ ให้ลบ glyphs ที่ไม่ได้ใช้งานออก ซึ่งสามารถลดขนาดไฟล์ลงได้ถึง 70%
- ทำ Cache ไฟล์ของคุณ โดยใช้ cache-control header ที่มีระยะเวลานาน เพื่อเก็บฟอนต์ไว้ในเบราว์เซอร์
ขั้นตอนการทำงานนั้นง่ายมาก:
แปลงเป็น WOFF2, ใช้ @font-face พร้อมกับ swap, ทำ Preload ฟอนต์หลักด้วย crossorigin และทำ Cache ไฟล์
การตั้งค่านี้จะช่วยเพิ่มความเร็วในการโหลด และช่วยลดการพึ่งพา third party ในเส้นทางการโหลดที่สำคัญ (critical path)
คุณยังใช้ Google CDN สำหรับงาน production อยู่หรือเปล่า? บอกเหตุผลของคุณในคอมเมนต์ได้เลย