เคยไหม? เว็บออกแบบสวยมาก แต่พอเปิดบนมือถือกลับเห็นตัวหนังสือช้า หรือข้อความเด้งเปลี่ยนตำแหน่งหลังหน้าเว็บโหลดไปแล้ว ปัญหานี้อาจมาจาก Web Font ได้โดยตรง Web Font ทำให้เว็บช้าลงได้ หากโหลดไฟล์ใหญ่ หลายฟอนต์ หลายน้ำหนัก หรือกำหนดวิธีโหลดไม่เหมาะสม แต่ถ้าเลือกไฟล์ให้ถูก ใช้เฉพาะที่จำเป็น และตั้งค่าโหลดอย่างเหมาะสม คุณสามารถใช้ฟอนต์สวยโดยไม่ต้องแลกกับเว็บที่ช้าได้
Web Font คืออะไร และทำไมถึงทำให้เว็บช้าได้?
Web Font คือไฟล์ฟอนต์ที่เว็บไซต์ต้องดาวน์โหลดเพิ่มจากเซิร์ฟเวอร์ แทนที่จะใช้ฟอนต์ที่มีอยู่ในเครื่องของผู้ใช้ เช่น Arial หรือฟอนต์ระบบของ Windows, macOS, Android และ iOS
เวลาคุณเปิดหน้าเว็บ เบราว์เซอร์ไม่ได้โหลดแค่ HTML แต่ยังต้องดึง CSS, JavaScript, รูปภาพ และฟอนต์ เมื่อไฟล์ฟอนต์ถูกพบช้า หรือมีขนาดใหญ่ ผู้ใช้อาจต้องรอก่อนเห็นข้อความในรูปแบบที่เว็บไซต์กำหนด
ตามแนวทางของ web.dev เรื่องการปรับแต่ง Web Font ฟอนต์สามารถกระทบทั้งการแสดงข้อความครั้งแรกและการขยับของ Layout ซึ่งเกี่ยวข้องกับ FCP, LCP และ CLS ได้โดยตรง
ประเด็นสำคัญจึงไม่ใช่แค่คำถามว่า “ใช้ Web Font ดีไหม” แต่คือ คุณกำลังโหลดฟอนต์อย่างมีประสิทธิภาพหรือเปล่า
Web Font กระทบ Core Web Vitals อย่างไร?
ฟอนต์ทำให้ LCP ช้าลงได้ไหม?
ได้ โดยเฉพาะหน้าเว็บที่ข้อความขนาดใหญ่เป็นองค์ประกอบหลักด้านบนของหน้า หากเบราว์เซอร์ต้องรอไฟล์ฟอนต์ก่อนแสดงข้อความ ผู้ใช้อาจเห็นเนื้อหาหลักช้ากว่าที่ควร
นึกภาพ Landing Page ที่มี Hero Section พร้อมหัวข้อใหญ่ แต่หัวข้อนั้นใช้ฟอนต์พิเศษขนาดใหญ่ซึ่งถูกเรียกผ่าน CSS อีกทอดหนึ่ง หากไฟล์ CSS และฟอนต์ถูกค้นพบช้า ข้อความสำคัญที่สุดของหน้าเว็บก็อาจแสดงช้าตามไปด้วย
ทำไมโหลดฟอนต์แล้วหน้าเว็บถึงกระโดด?
อาการนี้มักเกิดจากเบราว์เซอร์แสดงข้อความด้วยฟอนต์สำรองก่อน จากนั้นจึงเปลี่ยนเป็น Web Font เมื่อโหลดเสร็จ ถ้าฟอนต์สองชุดมีความกว้าง ความสูง หรือระยะบรรทัดต่างกัน ข้อความและองค์ประกอบรอบข้างจะขยับตาม
นี่เป็นหนึ่งในสาเหตุของ CLS หรือ Cumulative Layout Shift ซึ่งใช้วัดความเสถียรของ Layout ระหว่างการโหลดหน้าเว็บ การเลือก fallback font ที่มีสัดส่วนใกล้กับฟอนต์จริงจึงสำคัญกว่าที่หลายคนคิด
ถ้าคุณกำลังปรับเว็บครั้งใหญ่พร้อมเปลี่ยน Typography ควรวางแผนเรื่องนี้ไปพร้อมกับโครงสร้าง URL และ SEO ซึ่งอ่านต่อได้ในบทความ Redesign เว็บใหม่ยังไงไม่ให้อันดับ SEO และลูกค้าหาย
เลือกไฟล์ฟอนต์แบบไหนให้เว็บเร็ว?
ใช้ WOFF2 เป็นตัวเลือกหลัก
สำหรับเว็บไซต์สมัยใหม่ WOFF2 เป็นรูปแบบที่เหมาะกับ Web Font เพราะถูกออกแบบมาสำหรับการส่งผ่านบนเว็บและมีการบีบอัดที่มีประสิทธิภาพ MDN และ web.dev แนะนำ WOFF2 เป็นตัวเลือกหลักสำหรับเว็บสมัยใหม่
ถ้าคุณอัปโหลดไฟล์ TTF หรือ OTF ขนาดใหญ่เข้า WordPress แล้วเรียกใช้โดยตรง นั่นเป็นจุดแรกที่ผมจะแนะนำให้ตรวจ เพราะหลายเว็บไซต์สามารถลดข้อมูลที่ต้องดาวน์โหลดได้เพียงแค่เตรียมไฟล์สำหรับเว็บให้ถูกต้อง
อย่าโหลดทุกน้ำหนักเพราะ “เผื่อไว้ก่อน”
ปัญหาที่เจอบ่อยคือเว็บไซต์ใช้ Font Family เดียว แต่โหลด Regular, Medium, SemiBold, Bold, ExtraBold และ Italic ทั้งหมด ทั้งที่หน้าเว็บจริงใช้เพียง Regular กับ Bold
หลักที่ทำตามได้ง่ายคือ:
- Body text ใช้ Regular หรือ 400
- หัวข้อและข้อความเน้นใช้ Bold หรือ 700
- เพิ่มน้ำหนักอื่นต่อเมื่อมีการใช้งานจริง
- อย่าโหลด Italic ถ้าเว็บไซต์แทบไม่มีตัวเอียง
สมมติหนึ่งไฟล์มีขนาด 80 KB การโหลด 6 น้ำหนักอาจกลายเป็นข้อมูลหลายร้อย KB ทั้งที่ผู้ใช้แทบมองไม่เห็นความแตกต่างทางธุรกิจ การตัดไฟล์ที่ไม่จำเป็นจึงเป็น Optimization ที่ทำง่ายและเห็นผลจริง
Variable Font ดีกว่าหลายไฟล์เสมอไหม?
ไม่เสมอไป Variable Font สามารถรวมหลาย Weight หรือ Style ไว้ในไฟล์เดียว ทำให้จัดการง่ายและยืดหยุ่น แต่ไฟล์เดียวอาจมีขนาดใหญ่กว่าฟอนต์ Regular เพียงน้ำหนักเดียว
ถ้าเว็บไซต์ใช้ตั้งแต่ 300 ถึง 800 หลายน้ำหนัก Variable Font น่าสนใจ แต่ถ้าเว็บใช้แค่ 400 และ 700 การเปรียบเทียบขนาดไฟล์จริงก่อนตัดสินใจจะดีกว่าการเลือกจากคำว่า “Variable” อย่างเดียว
ฟอนต์ภาษาไทยต้องระวังอะไรเป็นพิเศษ?
เว็บไซต์ภาษาไทยควรตรวจชุดตัวอักษรหรือ Glyph ที่อยู่ในไฟล์ด้วย ฟอนต์ที่รองรับหลายภาษาอาจมีข้อมูลจำนวนมากกว่าที่หน้าเว็บต้องใช้จริง การทำ font subsetting คือการสร้างไฟล์ที่เก็บเฉพาะชุดอักขระที่จำเป็น ซึ่งสามารถช่วยลดขนาดไฟล์ได้
แต่ต้องระวังอย่าตัดภาษาไทย เครื่องหมายวรรณยุกต์ ตัวเลข หรือสัญลักษณ์ที่เว็บไซต์ใช้ออก เพราะผลลัพธ์อาจกลายเป็นตัวอักษรหายหรือ fallback เป็นฟอนต์อื่นเฉพาะบางคำ
แนวทางที่ปลอดภัยคือทดสอบทั้งหน้า Blog, Product, Form, Search, Checkout และข้อความที่สร้างแบบ Dynamic ก่อนนำ subset ขึ้น Production เพราะบางตัวอักษรอาจไม่ได้ปรากฏบนหน้าแรกเลย
ตั้ง font-display แบบไหนดีที่สุด?
font-display เป็นคำสั่งที่กำหนดว่าเบราว์เซอร์ควรจัดการข้อความอย่างไรในช่วงที่ Web Font ยังโหลดไม่เสร็จ
ตัวเลือกที่ใช้บ่อยคือ font-display: swap ซึ่งอนุญาตให้เบราว์เซอร์แสดง fallback font ก่อน แล้วค่อยเปลี่ยนเป็น Web Font เมื่อไฟล์พร้อม วิธีนี้ช่วยไม่ให้ข้อความหายระหว่างรอฟอนต์ แต่หากฟอนต์สองชุดมี Metrics ต่างกันมากก็อาจเกิด Layout Shift ได้ MDN ระบุว่า `font-display` ใช้ควบคุมช่วง block, swap และ failure ของการโหลดฟอนต์โดยตรง
อีกตัวเลือกคือ font-display: optional ซึ่งเน้น Performance มากขึ้น ถ้าฟอนต์มาไม่ทัน Browser สามารถใช้ fallback ต่อไปโดยไม่ต้องเปลี่ยนทีหลัง เหมาะกับเว็บที่ความเร็วสำคัญกว่าการบังคับให้ทุก Page View เห็นฟอนต์แบรนด์แบบเดียวกันทุกครั้ง
ในการทำเว็บธุรกิจ ผมมักไม่เลือกค่าจากสูตรสำเร็จ แต่ดูว่าฟอนต์นั้นอยู่ตรงไหน ถ้าเป็น Body Text จำนวนมาก ความเร็วและความอ่านง่ายสำคัญมาก แต่ถ้าเป็นหัวข้อแบรนด์บางตำแหน่ง การให้ Priority สูงขึ้นอาจคุ้มกว่า
ควร Preload Web Font หรือไม่?
Preload คือการบอกเบราว์เซอร์ล่วงหน้าว่า “ไฟล์นี้สำคัญ ให้เริ่มโหลดเร็ว” เหมาะกับฟอนต์ที่ใช้กับข้อความสำคัญเหนือ Fold เช่น Hero Heading หรือข้อความหลักที่ผู้ใช้เห็นทันที
ตัวอย่างโครงสร้างคือ <link rel=”preload” href=”/fonts/main-font.woff2″ as=”font” type=”font/woff2″ crossorigin>
แต่ อย่า preload ฟอนต์ทุกไฟล์ เพราะ Resource ที่ preload จะเข้ามาแย่ง Bandwidth จาก CSS, รูป Hero หรือ Resource สำคัญอื่น web.dev แนะนำให้ใช้ preload อย่างระมัดระวัง และเน้นเฉพาะฟอนต์ที่สำคัญจริง
ตัวอย่างเช่น เว็บหนึ่งมีฟอนต์ 400, 500, 600, 700 และ Italic แต่ส่วน Hero ใช้แค่ 700 การ preload เฉพาะไฟล์ 700 มักสมเหตุสมผลกว่าการสั่ง preload ทั้งครอบครัว
โหลด Google Fonts หรือ Self-host แบบไหนเร็วกว่า?
หลายคนคิดว่า Self-host ต้องเร็วกว่า Google Fonts เสมอ แต่ความจริงขึ้นอยู่กับ Server, CDN, Cache และการตั้งค่าของเว็บไซต์ด้วย การเก็บฟอนต์ไว้ในเว็บไซต์ช่วยลดการเชื่อมต่อไปยัง Third-party แต่ถ้า Hosting ของคุณช้าหรือไม่ได้ใช้ CDN ผลลัพธ์อาจไม่ได้ดีกว่าเสมอไป
ถ้าใช้ฟอนต์จากภายนอก เช่น Google Fonts ควรตรวจเรื่อง preconnect เพื่อให้เบราว์เซอร์เริ่มสร้าง Connection ไปยังต้นทางที่ให้บริการ CSS และไฟล์ฟอนต์เร็วขึ้น web.dev ยกตัวอย่างการเชื่อมต่อไปยัง fonts.googleapis.com และ fonts.gstatic.com พร้อม `crossorigin` สำหรับไฟล์ฟอนต์
ส่วนเว็บ WordPress ที่ต้องการควบคุม Performance และ Privacy มากขึ้น การ Self-host ฟอนต์เป็นทางเลือกที่น่าสนใจ โดยเฉพาะเมื่อมี CDN และระบบ Cache ที่ตั้งค่าดีอยู่แล้ว
วิธีปรับ Web Font บน WordPress แบบทำตามได้จริง
ถ้าผมได้รับเว็บ WordPress ที่เปิดช้า ขั้นตอนตรวจฟอนต์จะไม่เริ่มจากการติดปลั๊กอินเพิ่มทันที แต่เริ่มจากดู Network Request ก่อนว่าหนึ่งหน้ากำลังโหลดฟอนต์กี่ไฟล์และมาจากที่ไหน
- ขั้นที่ 1: เปิด Chrome DevTools แล้วดู Network จากนั้นกรอง Resource ประเภท Font
- ขั้นที่ 2: จดจำนวนไฟล์ ขนาด Transfer และ Weight ที่ถูกโหลด
- ขั้นที่ 3: ตรวจว่า Theme และ Page Builder เรียก Google Fonts ซ้ำกันหรือไม่
- ขั้นที่ 4: ตัด Weight และ Font Family ที่ไม่มีการใช้งานจริง
- ขั้นที่ 5: เปลี่ยนไฟล์หลักเป็น WOFF2 หากเงื่อนไขของฟอนต์และ Browser ที่รองรับเหมาะสม
- ขั้นที่ 6: ตั้ง font-display ให้เหมาะกับ Typography แต่ละส่วน
- ขั้นที่ 7: Preload เฉพาะฟอนต์ที่จำเป็นต่อ Above-the-fold Content
- ขั้นที่ 8: ทดสอบใหม่ด้วย PageSpeed Insights, Lighthouse และข้อมูล Core Web Vitals จริง
อย่าดูแค่คะแนน Performance ก่อนและหลัง ให้สังเกต Network Waterfall ด้วย เพราะมันบอกได้ว่า Browser เริ่มโหลด Font ตอนไหน และไฟล์ไหนกลายเป็นคอขวด
อีกเรื่องที่เจอคู่กันบ่อยคือ WordPress ติด Plugin หลายตัวแล้วแต่ละตัวเพิ่ม CSS หรือ Font ของตัวเอง ถ้าเว็บคุณอยู่ในสถานการณ์นี้ อ่านต่อได้ที่ ปลั๊กอินเยอะทำเว็บ WordPress ช้าหรือไม่ เพราะบางครั้งปัญหาไม่ได้อยู่ที่ฟอนต์เพียงอย่างเดียว แต่เกิดจาก Critical Request Chain ทั้งชุด
ใช้ System Font จะเร็วที่สุดหรือไม่?
ในแง่การดาวน์โหลด System Font ได้เปรียบมาก เพราะ Browser สามารถใช้ฟอนต์ที่ติดตั้งอยู่ในอุปกรณ์ได้โดยไม่ต้องดาวน์โหลด Web Font เพิ่ม
เหมาะกับ Dashboard, ระบบหลังบ้าน, เว็บ SaaS หรือเว็บไซต์ที่ให้ความสำคัญกับความเร็วมากกว่าการใช้ Typography เฉพาะแบรนด์
แต่เว็บไซต์แบรนด์ไม่จำเป็นต้องเลือกสุดทาง คุณสามารถใช้ Web Font เฉพาะ Heading แล้วใช้ System Font สำหรับ Body ได้ เช่นนี้ยังรักษาบุคลิกของแบรนด์ไว้ แต่ลดจำนวนไฟล์และปริมาณข้อมูลที่ต้องดาวน์โหลด
Web Font ช้าส่งผลต่อ SEO และยอดขายอย่างไร?
ฟอนต์ไม่ได้ทำให้อันดับ SEO ลดเพราะ Google “ไม่ชอบฟอนต์สวย” แต่การตั้งค่าฟอนต์ที่ไม่ดีสามารถทำให้หน้าเว็บช้า เนื้อหาแสดงช้า หรือ Layout ขยับ ซึ่งกระทบประสบการณ์ผู้ใช้และ Core Web Vitals ได้
ในมุมธุรกิจ ผลกระทบเห็นภาพง่ายกว่า สมมติคุณซื้อโฆษณาเพื่อส่งคนเข้า Landing Page แต่ผู้ใช้เปิดบน 4G แล้วต้องรอหัวข้อหรือปุ่ม CTA แสดงครบ ความเร็วที่เสียไปคือ Traffic ที่คุณจ่ายเงินซื้อมาแล้วแต่ไม่ได้ใช้เต็มประสิทธิภาพ
ดังนั้นเป้าหมายไม่ใช่ทำคะแนน Lighthouse ให้ได้ 100 เพียงเพื่อเอาตัวเลขสวย แต่คือทำให้ ข้อความสำคัญปรากฏเร็ว หน้าไม่กระโดด และผู้ใช้กดสิ่งที่ต้องการได้ทันที นั่นคือจุดที่ Web Performance เชื่อมกับ Conversion จริง
Checklist ก่อนใช้ Web Font บนเว็บจริง
- ใช้ Font Family เท่าที่จำเป็น
- โหลดเฉพาะ Weight และ Style ที่มีการใช้งานจริง
- เลือก WOFF2 สำหรับ Browser สมัยใหม่เมื่อเหมาะสม
- ตรวจขนาดไฟล์ฟอนต์ทุกไฟล์
- พิจารณา Subset โดยเฉพาะเว็บหลายภาษา
- กำหนด font-display ให้เหมาะกับแต่ละกรณี
- เลือก fallback font ที่มีสัดส่วนใกล้ Web Font
- Preload เฉพาะฟอนต์ Critical
- ตรวจว่ามี Font Request ซ้ำจาก Theme หรือ Plugin หรือไม่
- ทดสอบบนมือถือและ Network ที่ช้ากว่า Wi-Fi ของออฟฟิศ
ถ้าจะเริ่มปรับวันนี้ ให้เปิด DevTools แล้วนับก่อนว่าหน้าแรกของคุณโหลดไฟล์ฟอนต์กี่ไฟล์ จากนั้นถามตัวเองทีละไฟล์ว่า “ผู้ใช้จำเป็นต้องดาวน์โหลดไฟล์นี้จริงหรือไม่?” แค่ลดสิ่งที่ไม่จำเป็นให้ได้ก่อน คุณมักจะได้เว็บที่เบาขึ้นโดยไม่ต้องเปลี่ยนดีไซน์ทั้งเว็บ
คำถามที่พบบ่อย
Web Font ทำให้เว็บช้าทุกเว็บไหม?
ไม่เสมอไป Web Font ที่เตรียมไฟล์ดี โหลดเฉพาะ Weight ที่จำเป็น ใช้ WOFF2 และตั้งค่าการแสดงผลเหมาะสมสามารถใช้งานได้โดยมีผลต่อความเร็วค่อนข้างต่ำ ปัญหามักเกิดจากการโหลดมากเกินจำเป็นหรือโหลดผิดวิธีมากกว่าแค่การมี Web Font
ควรใช้ Google Fonts หรือดาวน์โหลดมาเก็บใน WordPress?
ทั้งสองแบบทำให้เร็วได้ Self-host ช่วยลดการเชื่อมต่อ Third-party และควบคุม Cache ได้มากขึ้น แต่ต้องมี Hosting และ CDN ที่เหมาะสม ส่วนการโหลดจากผู้ให้บริการภายนอกควรตั้ง preconnect และตรวจ Network Request จริงก่อนตัดสินใจ
ใช้ font-display: swap แล้วเว็บจะเร็วขึ้นไหม?
swap ช่วยให้ข้อความสามารถแสดงด้วย fallback font ระหว่างรอ Web Font จึงลดปัญหาข้อความมองไม่เห็น แต่ไม่ได้ทำให้ไฟล์ฟอนต์มีขนาดเล็กลง และอาจเกิด Layout Shift หาก fallback กับ Web Font มีขนาดต่างกันมาก จึงควรปรับทั้งการโหลดและ fallback font ควบคู่กัน