Contact
Line : comsiam
ฟอนต์เว็บที่โหลดช้าอาจทำให้ข้อความปรากฏช้า หรือทำให้ตัวอักษรเปลี่ยนรูปแบบหลังหน้าเว็บเริ่มแสดงผล วิธีปรับให้เร็วขึ้นคือโหลดเฉพาะฟอนต์ที่จำเป็น ลดขนาดไฟล์ และตรวจว่าฟอนต์สำรองยังอ่านง่ายและไม่ทำให้หน้าเว็บขยับมากเกินไป
ใน WordPress ฟอนต์อาจมาจากธีม ตัวแก้ไขเว็บไซต์ ปลั๊กอิน หรือบริการภายนอก จึงควรตรวจแหล่งที่มาก่อนปรับ แนวทางของ ComSiam คือเริ่มจากฟอนต์ที่ใช้ในส่วนแรกของหน้า แล้วทดสอบทั้งความเร็ว ความอ่านง่าย และการจัดวาง
❶ ตรวจว่าหน้าเว็บโหลดฟอนต์จากที่ใด
เปิดหน้าที่ต้องการตรวจ แล้วดูรายการไฟล์ที่โหลดในเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ ฟอนต์มักเป็นไฟล์เฉพาะที่มาจากโดเมนของเว็บไซต์หรือบริการภายนอก
① ตรวจว่ามีหลายชุดหรือไม่
ดูว่าธีมหรือปลั๊กอินเรียกใช้ฟอนต์หลายตระกูล หลายน้ำหนัก หรือหลายรูปแบบโดยไม่จำเป็นหรือเปล่า
② ตรวจว่าฟอนต์โหลดในหน้าใดบ้าง
ฟอนต์บางชุดอาจถูกเรียกทั่วทั้งเว็บไซต์ ทั้งที่ใช้เฉพาะบางหน้า หากระบบรองรับ ให้จำกัดการโหลดไว้เฉพาะหน้าที่ต้องใช้
③ สังเกตข้อความระหว่างโหลด
หากข้อความหายไปชั่วคราว หรือเปลี่ยนรูปแบบหลังฟอนต์โหลด ให้ตรวจการตั้งค่าการแสดงผลฟอนต์และฟอนต์สำรอง
❷ ลดจำนวนฟอนต์และน้ำหนักที่ใช้งาน
ยิ่งเว็บไซต์เรียกฟอนต์หลายชุด ก็ยิ่งมีไฟล์ให้ดาวน์โหลดและประมวลผลมากขึ้น ทบทวนการใช้งานจริง แล้วเก็บเฉพาะรูปแบบที่จำเป็นต่อการอ่านและการจัดลำดับเนื้อหา
① ใช้ฟอนต์ตระกูลหลักให้น้อยลง
เลือกฟอนต์หลักที่อ่านง่ายและใช้ได้กับเนื้อหาส่วนใหญ่ ลดการสลับฟอนต์หลายแบบในหน้าเดียว
② ตัดน้ำหนักที่ไม่ได้ใช้
หากเว็บไซต์ใช้เพียงตัวปกติและตัวหนา ไม่จำเป็นต้องโหลดน้ำหนักทุกระดับที่ผู้ให้บริการมีให้
③ ตรวจฟอนต์บนมือถือด้วย
บางธีมหรือบางหน้าอาจใช้ขนาดและน้ำหนักต่างจากเดสก์ท็อป ตรวจว่าการลดฟอนต์ไม่ทำให้หัวข้อ เนื้อหา หรือเมนูอ่านยาก
❸ เลือกรูปแบบไฟล์และลดขนาดฟอนต์
หากผู้ให้บริการฟอนต์หรือธีมรองรับ ให้เลือกไฟล์ที่เหมาะกับเว็บและมีขนาดไม่ใหญ่เกินจำเป็น โดยตรวจว่าฟอนต์ยังแสดงภาษาไทย สระ วรรณยุกต์ และตัวอักษรพิเศษได้ครบ
① ใช้ไฟล์ฟอนต์สำหรับเว็บที่เหมาะสม
ตรวจรูปแบบไฟล์ที่ธีม โฮสติ้ง หรือบริการฟอนต์รองรับ และเลือกแบบที่ลดขนาดได้ดีโดยยังแสดงผลถูกต้อง
② เลือกชุดตัวอักษรให้ตรงกับภาษา
หากใช้ไฟล์ฟอนต์เฉพาะชุดตัวอักษร ให้ตรวจว่าครอบคลุมภาษาไทยและอักขระที่เว็บไซต์ใช้ทั้งหมด ไม่เช่นนั้นข้อความบางส่วนอาจกลับไปใช้ฟอนต์อื่น
③ เปรียบเทียบคุณภาพหลังลดขนาด
ดูรูปทรงตัวอักษร น้ำหนัก และความชัดบนหน้าจอจริง โดยเฉพาะข้อความขนาดเล็กและเครื่องหมายภาษาไทย
❹ ตั้งค่าให้ข้อความแสดงผลระหว่างโหลดฟอนต์
การตั้งค่าการแสดงผลฟอนต์ช่วยกำหนดว่าเบราว์เซอร์ควรแสดงข้อความอย่างไรระหว่างรอไฟล์ฟอนต์ โดยอาจแสดงฟอนต์สำรองก่อน แล้วเปลี่ยนเป็นฟอนต์เว็บเมื่อโหลดเสร็จ
วิธีนี้ช่วยหลีกเลี่ยงช่วงที่ข้อความมองไม่เห็น แต่ฟอนต์สำรองที่มีขนาดหรือความกว้างต่างกันมากอาจทำให้บรรทัดตัดใหม่และหน้าเว็บขยับ ควรเลือกฟอนต์สำรองที่รูปลักษณ์และมิติใกล้เคียงกับฟอนต์หลัก แล้วทดสอบบนมือถือและคอมพิวเตอร์
❺ โหลดเฉพาะฟอนต์สำคัญก่อน
หากหัวเรื่องหรือข้อความส่วนแรกของหน้าใช้ฟอนต์เว็บ ควรให้ไฟล์ที่จำเป็นต่อการแสดงผลส่วนนั้นเริ่มโหลดได้เร็ว อย่างไรก็ตาม การตั้งให้โหลดฟอนต์หลายชุดล่วงหน้าอาจแย่งทรัพยากรจากภาพหรือไฟล์สำคัญอื่น
① เลือกไฟล์ที่ใช้ในส่วนแรกของหน้า
ระบุฟอนต์ที่ใช้กับเนื้อหาหลักก่อน ไม่ควรโหลดทุกน้ำหนักและทุกชุดภาษาไว้ล่วงหน้า
② ตรวจว่าไฟล์ตรงกับการใช้งานจริง
หากตั้งให้โหลดฟอนต์หนึ่งล่วงหน้า แต่หน้าเว็บใช้คนละไฟล์ เบราว์เซอร์อาจดาวน์โหลดซ้ำโดยไม่จำเป็น
③ ทดสอบผลหลังเปลี่ยน
ตรวจเวลาที่ข้อความปรากฏและดูว่าหน้าเว็บขยับหรือไม่ หากมีอาการใหม่ ให้ยกเลิกการตั้งค่าล่าสุดและตรวจไฟล์ที่เลือก
❻ พิจารณาโหลดฟอนต์จากเว็บไซต์หรือบริการภายนอก
การใช้บริการภายนอกช่วยจัดการฟอนต์ได้สะดวก แต่เพิ่มการเชื่อมต่อไปยังอีกโดเมนหนึ่ง หากใช้หลายบริการหรือมีไฟล์หลายชุด อาจเพิ่มเวลารอ
① ลดจำนวนการเชื่อมต่อ
ตรวจว่ามีบริการฟอนต์มากกว่าหนึ่งแห่งหรือมีการเรียกฟอนต์ซ้ำจากธีมและปลั๊กอินหรือไม่
② พิจารณาเก็บไฟล์บนเว็บไซต์เมื่อเหมาะสม
การจัดเก็บฟอนต์บนเซิร์ฟเวอร์ของเว็บไซต์อาจลดการเชื่อมต่อภายนอก แต่ต้องตรวจสิทธิ์การใช้งานไฟล์ วิธีอัปเดต และการตั้งค่าแคช
③ ตรวจข้อกำหนดของผู้ให้บริการ
หากใช้ฟอนต์จากบริการภายนอก ให้อ่านเงื่อนไขการนำไปใช้และตรวจว่าสามารถดาวน์โหลดหรือโฮสต์เองได้หรือไม่
❼ ตั้งค่าใน WordPress โดยไม่ทำให้เว็บเพี้ยน
ตำแหน่งตั้งค่าขึ้นอยู่กับธีมและปลั๊กอินที่ใช้ อาจอยู่ในตัวปรับแต่งธีม ตัวแก้ไขเว็บไซต์ หรือหน้าตั้งค่ารูปแบบตัวอักษรของปลั๊กอิน
① เปลี่ยนฟอนต์ผ่านตัวเลือกของธีมก่อน
เลือกฟอนต์และน้ำหนักที่ต้องการจากหน้าตั้งค่าที่ธีมเตรียมไว้ แล้วตรวจหน้าเว็บจริง
② ตรวจปลั๊กอินที่จัดการฟอนต์
หากมีปลั๊กอินเพิ่มฟอนต์ ให้ตรวจว่าธีมไม่ได้โหลดฟอนต์ชุดเดียวกันซ้ำ
③ สำรองค่าก่อนแก้การตั้งค่าขั้นสูง
หากต้องแก้ไฟล์หรือการตั้งค่าที่มีผลกับทั้งเว็บ ให้สำรองข้อมูลหรือทดลองบนเว็บไซต์สำรอง และหลีกเลี่ยงการแก้ระบบโดยไม่เข้าใจผลที่จะเกิดขึ้น
ComSiam แนะนำให้ปรับฟอนต์ทีละชุด แล้วตรวจข้อความภาษาไทย หัวข้อ เมนู และแบบฟอร์มหลังเปลี่ยน เพื่อให้ความเร็วดีขึ้นโดยยังอ่านได้ชัด
❽ วิธีทดสอบหลังปรับฟอนต์
① เปิดหน้าสำคัญบนมือถือและคอมพิวเตอร์
ตรวจหน้าแรก บทความ หน้าบริการ และหน้าที่ใช้ฟอนต์แตกต่างกัน
② ตรวจข้อความระหว่างฟอนต์กำลังโหลด
ดูว่าข้อความปรากฏทันทีหรือหายไปชั่วคราว และหลังฟอนต์จริงโหลดแล้วหน้าเว็บขยับมากหรือไม่
③ ตรวจภาษาไทยและอักขระพิเศษ
ทดสอบสระ วรรณยุกต์ ตัวเลข และเครื่องหมายที่ใช้ในเว็บไซต์
④ ล้างแคชแล้วตรวจซ้ำ
หลังเปลี่ยนฟอนต์หรือการตั้งค่า ให้ล้างแคชที่เกี่ยวข้องและเปิดหน้าใหม่ในหน้าต่างส่วนตัว
❾ ข้อผิดพลาดที่ควรหลีกเลี่ยง
① โหลดทุกน้ำหนักของฟอนต์
ไฟล์ที่ไม่ได้ใช้เพิ่มข้อมูลดาวน์โหลดโดยไม่จำเป็น
② ตั้งโหลดฟอนต์หลายชุดล่วงหน้า
อาจทำให้ไฟล์สำคัญอื่นเริ่มโหลดช้าลง
③ ใช้ฟอนต์สำรองที่ต่างจากฟอนต์หลักมาก
ข้อความอาจเปลี่ยนความกว้างและทำให้หน้าเว็บขยับหลังฟอนต์โหลดเสร็จ
④ ลดชุดตัวอักษรโดยไม่ตรวจภาษาไทย
อาจทำให้บางคำหรือเครื่องหมายแสดงด้วยฟอนต์อื่น
สรุป: โหลดเฉพาะฟอนต์ที่ใช้และตรวจการแสดงผลจริง
การโหลดฟอนต์ WordPress ให้เร็วขึ้นเริ่มจากตรวจแหล่งที่มา ลดจำนวนตระกูลและน้ำหนัก เลือกไฟล์ขนาดเหมาะสม และตั้งให้ข้อความยังมองเห็นระหว่างโหลด หากโหลดฟอนต์สำคัญล่วงหน้า ให้เลือกเฉพาะไฟล์ที่ใช้จริงในส่วนแรกของหน้า
หลังปรับ ให้ตรวจภาษาไทย ความอ่านง่าย และการขยับของหน้าเว็บบนมือถือกับคอมพิวเตอร์ การทดสอบทีละจุดช่วยให้ ComSiam ลดเวลารอฟอนต์โดยไม่ทำให้ข้อความหรือการจัดวางเสีย
