8 กลยุทธ์การโหลดแบบอักษรเพื่อปรับปรุง Core Web Vitals ของคุณ (2022)

เผยแพร่ครั้งแรกในเดือนตุลาคม พ.ศ. 2564 และได้รับการอัปเดตเพื่อความครอบคลุมในเดือนตุลาคม พ.ศ. 2565

เมื่อเราพูดถึงประสิทธิภาพเว็บและโดยเฉพาะอย่างยิ่ง Core Web Vitals (CWV) ดูเหมือนว่าเทคนิคการเพิ่มประสิทธิภาพรูปภาพและ JavaScript เกือบจะขโมยสปอตไลท์

อย่างไรก็ตาม มีผู้เล่นอื่นที่ไม่ควรมองข้าม - แบบอักษรเว็บ

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

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

ในบรรทัดต่อไปนี้ เราจะเห็นว่าฟอนต์ส่งผลต่อ Core Web Vitals ของคุณอย่างไร และคุณจะเพิ่มประสิทธิภาพการโหลดได้อย่างไร

เอาล่ะ!

สิ่งที่คุณควรรู้เกี่ยวกับการโหลดแบบอักษร (โดยสังเขป)

ไม่มีเทคนิคการเพิ่มประสิทธิภาพแบบอักษรเดียวที่สามารถแก้ปัญหาทั้งหมดของคุณได้

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

เป็นเวลานานทีเดียว ถ้าคุณต้องการให้บริการแบบอักษรบนเว็บ คุณต้องเลือกระหว่าง:

• Flash of Invisible Text (FOIT) ที่ข้อความถูกซ่อนไว้จนกว่าจะดาวน์โหลดแบบอักษร

หรือ

• Flash of Unstyled Text (FOUT) ใช้แบบอักษรของระบบทางเลือกในขั้นต้น แล้วอัปเกรดเป็นแบบอักษรของเว็บเมื่อดาวน์โหลด

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

ทั้งสองเป็นโซลูชันที่ยอมรับไม่ได้ในโลกของ Core Web Vitals ในปัจจุบัน

โดยทั่วไป สถานการณ์การโหลดฟอนต์คือ:

จากนั้นจึงประกาศคุณสมบัติ การแสดงแบบอักษร

font-display บอกเบราว์เซอร์ว่าควรดำเนินการกับการแสดงข้อความอย่างไรเมื่อไม่ได้โหลดแบบอักษรเว็บที่เกี่ยวข้อง มันถูกกำหนดไว้ต่อ font-face

เบราว์เซอร์มีพฤติกรรมการโหลดแบบอักษรเริ่มต้นเมื่อแสดงข้อความที่ใช้ ตระกูลแบบอักษร ที่ยังไม่พร้อมใช้งาน:

ที่มา: web.dev

กระบวนการดาวน์โหลดฟอนต์แบ่งออกเป็นสามช่วงเวลาหลัก:

• ช่วงแรกคือช่วง บล็อกแบบอักษร หากไม่ได้โหลด หน้าฟอนต์ ในช่วงเวลานี้ องค์ประกอบใดๆ ที่พยายามใช้จะต้องแสดงผลด้วยฟอนต์ทางเลือกที่มองไม่เห็น (FOIT) แทน หาก ฟอนต์หน้า โหลดได้สำเร็จในช่วงแรก จะใช้ฟอนต์นั้นตามปกติ
• ระยะเวลา สลับฟอนต์ เกิดขึ้นทันทีหลังจากช่วงบล็อกฟอนต์ หากไม่ได้โหลด font-face ในช่วงเวลานี้ องค์ประกอบใด ๆ ที่พยายามใช้จะต้องแสดงผลด้วยแบบอักษร fallback (system) (FOUT) ถ้าฟอนต์หน้าโหลดสำเร็จในช่วงเวลานี้ ฟอนต์จะถูกใช้ตามปกติ
• ระยะเวลา ความล้มเหลวของแบบอักษร เกิดขึ้นทันทีหลังจากระยะเวลาการสลับแบบอักษร ถ้าฟอนต์ยังไม่โหลดเมื่อเริ่มช่วงเวลานี้ แสดงว่าฟอนต์นั้นโหลดไม่สำเร็จ ทำให้เกิดการย้อนกลับของฟอนต์ปกติ

การทำความเข้าใจช่วงเวลาเหล่านี้จะช่วยให้คุณใช้ค่าการ แสดงแบบอักษร ได้อย่างมีประสิทธิภาพมากขึ้น:

• การแสดงแบบอักษร: อัตโนมัติ ใช้กลยุทธ์การแสดงแบบอักษรที่ตัวแทนผู้ใช้ใช้
• font-display: block ให้ฟอนต์มีระยะเวลาบล็อกสั้น 3 วินาที (ในกรณีส่วนใหญ่) และระยะเวลาสลับไม่สิ้นสุด กล่าวอีกนัยหนึ่ง มันจะสลับในแบบอักษรของเว็บเสมอเมื่อโหลด ใช้ค่านี้เมื่อแบบอักษรมีความสำคัญสำหรับหน้า
• font-display: swap แสดงฟอนต์ทันทีที่โหลด เช่นเดียวกับการบล็อก ค่านี้ควรใช้เฉพาะเมื่อการแสดงข้อความในแบบอักษรเฉพาะเป็นสิ่งสำคัญสำหรับหน้า
• font-display: fallback ซ่อนข้อความสูงสุด 100ms จากนั้นสลับเฉพาะในแบบอักษรของเว็บหากโหลดภายในสามวินาที หากไม่มีการโหลดแบบอักษรระหว่างช่วงเวลาสลับสามวินาที ทางเลือกจะใช้ตลอดอายุที่เหลือของหน้า
• การแสดงแบบอักษร: ตัวเลือก ช่วยให้หน้าแบบอักษรมีระยะเวลาบล็อกน้อยที่สุดที่ 100 มิลลิวินาที จากนั้น หากฟอนต์นั้นยังไม่พร้อมใช้งาน ฟอนต์นั้นจะคงอยู่กับฟอนต์สำรองและไม่มีการสลับเปลี่ยน โดยทั่วไป ค่าทางเลือกจะปล่อยให้เบราว์เซอร์ตัดสินใจว่าจะเริ่มการดาวน์โหลดฟอนต์หรือไม่

ที่มา: วิธีหลีกเลี่ยงการเปลี่ยนเลย์เอาต์ที่เกิดจากแบบอักษรของเว็บ

เมื่อตัดสินใจว่าจะใช้ค่าการแสดงผลแบบอักษรใดสำหรับไซต์ของคุณ หลักเกณฑ์ที่ดีคือคำแนะนำของ Google:

• หากประสิทธิภาพมีความสำคัญสูงสุด : ใช้ font-display: optional นี่เป็นแนวทางที่ "มีประสิทธิภาพ" ที่สุด: การเรนเดอร์ข้อความล่าช้าไม่เกิน 100 มิลลิวินาที และมีการประกันว่าจะไม่มีการเลื่อนเลย์เอาต์ที่เกี่ยวข้องกับการสลับฟอนต์
• หากการแสดงข้อความในแบบอักษรของเว็บมีความสำคัญสูงสุด : ใช้การแสดงแบบอักษร: สลับ แต่ต้องส่งแบบอักษรให้เร็วพอที่จะไม่ทำให้เกิดการเปลี่ยนเค้าโครง”

ดังที่ฉันได้กล่าวไว้ก่อนหน้านี้ ยังไม่มีวิธีแก้ไขปัญหาที่สมบูรณ์ที่จะแก้ไขปัญหาแบบอักษรที่เป็นไปได้ทั้งหมดเกี่ยวกับการโหลดแบบอักษร แม้ว่า Google จะแนะนำขั้นตอนเหล่านี้เอง แต่ก็ไม่ได้หมายความว่าไม่มีความเสี่ยง

อันที่จริง ค่า การแสดงแบบอักษร บางค่าอาจทำให้ Core Web Vitals ของคุณแย่ลงได้

แบบอักษรส่งผลกระทบต่อ Core Web Vitals (CLS & LCP) อย่างไร

หากคุณคุ้นเคยกับ Core Web Vitals คุณอาจรู้ว่าวิธีการโหลดแบบอักษรบางวิธีสามารถทำร้ายได้

ตัวอย่างเช่น หากยังไม่ได้โหลดแบบอักษร (FOIT) เบราว์เซอร์มักจะชะลอการแสดงข้อความ ( font-display: block ) ในบางกรณี การทำเช่นนี้จะทำให้ First Contentful Paint (FCP) และ Largest Contentful Paint (LCP) ล่าช้า

ในทางกลับกัน แนวทางปฏิบัติในการสลับฟอนต์นั้นเป็นที่รู้จักกันดีว่าทำให้เกิดการเปลี่ยนเลย์เอาต์ที่ไม่คาดคิด ซึ่งเกี่ยวข้องโดยตรงกับเมตริก Cumulative Layout Shift (CLS)

ตอนนี้ มาดูแนวทางปฏิบัติที่ดีที่สุดในการโหลดแบบอักษรเพื่อให้เมตริก CWV ของคุณอยู่ในการตรวจสอบ

หลีกเลี่ยงการเปลี่ยนเค้าโครงเมื่อโหลดแบบอักษร (CLS)

Cumulative Layout Shift วัดความสำคัญของการเปลี่ยนแปลงเค้าโครงที่ไม่คาดคิดบนหน้า การเปลี่ยนเลย์เอาต์ที่ไม่คาดคิดเกิดขึ้นเมื่อเนื้อหาบนเพจเลื่อนไปมาโดยที่ผู้ใช้ไม่ต้องป้อนข้อมูลหรือการแจ้งเตือนล่วงหน้า:

สองสิ่งสามารถทำให้เกิดการเปลี่ยนแปลงรูปแบบในกระบวนการดึงข้อมูลและการแสดงผล:

• ฟอนต์สำรองถูกสลับด้วยฟอนต์ใหม่ (FOUT);
• ข้อความ "ล่องหน" จะแสดงจนกว่าแบบอักษรจะแสดงผล (FOIT)

ในการโจมตีปัญหาเหล่านี้ คุณสามารถใช้แนวทางปฏิบัติที่ดีที่สุดดังต่อไปนี้:

1) รวม ลิงค์ rel=preload และ font-display: optional

ตัวเลือกในการรวม link rel=preload เข้ากับ font-display: optional มีให้ใช้งานตั้งแต่ Chrome 83 และได้รับการกล่าวขานว่าเป็นวิธีที่ปลอดภัยในการหลีกเลี่ยงการเปลี่ยนเลย์เอาต์

ตามที่กล่าวไว้ก่อนหน้านี้ เมื่อฟอนต์ใช้การ แสดงฟอนต์: ค่าทางเลือก ฟอนต์ นั้นจะต้องดาวน์โหลดและดำเนินการ 100ms ก่อนที่เบราว์เซอร์จะกลับไปใช้ทางเลือกสำรอง

ในกรณีที่ดาวน์โหลดแบบอักษรก่อนเครื่องหมาย 100ms แบบอักษรที่กำหนดเองจะถูกใช้บนหน้า

นั่นทำให้เบราว์เซอร์แสดงผลหน้าเว็บซ้ำ ซึ่งจะทำให้ข้อความที่มองไม่เห็นสั่นไหวเล็กน้อย

ใน Chrome 83 รอบการแสดงผลแรกจะถูกลบออกสำหรับแบบอักษรทางเลือกที่ใช้ ลิงก์ rel=preload และจะถูกแทนที่ด้วยช่วงการบล็อก (100ms) จนกว่าแบบอักษรที่กำหนดเองจะโหลดหรือสิ้นสุดระยะเวลา

ตอนนี้กระบวนการโหลดฟอนต์จะมีลักษณะดังนี้เมื่อฟอนต์โหลดไว้ล่วงหน้าและดาวน์โหลดหลังจากช่วงบล็อก 100ms:

และเช่นนี้เมื่อฟอนต์โหลดไว้ล่วงหน้าและดาวน์โหลดก่อนเครื่องหมาย 100ms:

เทคนิคนี้ค่อนข้างแก้ปัญหาด้วยการเลื่อนเลย์เอาต์ที่ไม่คาดคิดและการกะพริบของข้อความที่ไม่ได้จัดสไตล์

2) ใช้ขนาด-adjust

ปัญหาอีกประการหนึ่งของการสลับฟอนต์คือบางครั้งเมื่อโหลดฟอนต์ของเว็บ มันจะเลื่อนทั้งหน้าไปรอบๆ เนื่องจากมีการนำเสนอในขนาดความสูงของกล่องที่แตกต่างกันเล็กน้อย

การวางตัวอธิบาย การปรับขนาด ในกฎของแบบอักษรจะทำให้เกิดการเปลี่ยนแปลงทางภาพเพียงเล็กน้อยและการสลับที่เกือบจะราบรื่น

ดูคำแนะนำของ Google เกี่ยวกับการปรับขนาด CSS สำหรับ @font-face เพื่อเรียนรู้วิธีใช้งาน

3) ทำให้แบบอักษรทางเลือกของคุณตรงกับแบบอักษรของเว็บ

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

แอพ Font Style Matcher โดย Monica Dinculescu เป็นเครื่องมือที่รู้จักกันดีสำหรับการจับคู่แบบอักษร

ช่วยให้คุณสามารถซ้อนทับข้อความเดียวกันในแบบอักษรสองแบบเพื่อดูว่าแตกต่างกันอย่างไร หลังจากนั้น คุณสามารถปรับการตั้งค่าแบบอักษรเพื่อให้สอดคล้องกันมากขึ้น

โชคไม่ดีที่มันมีความเสี่ยงและอุปสรรค เช่นเดียวกับเทคนิคการโหลดฟอนต์อื่นๆ

ปัญหาของการจับคู่รูปแบบฟอนต์คือคุณไม่สามารถให้สไตล์ CSS เหล่านี้ใช้ได้กับฟอนต์ทางเลือกเท่านั้น ดังนั้นคุณต้องใช้ JavaScript และ FontFace.load API เพื่อใช้ความแตกต่างของสไตล์เหล่านี้เมื่อโหลดฟอนต์ของเว็บ

ในการบรรยายของเขาในปี 2018 Zach Leatherman อธิบายเทคนิคนี้ในรายละเอียดเพิ่มเติม:

ตรวจสอบให้แน่ใจว่าฟอนต์ของคุณโหลดได้เร็วที่สุด (LCP & FCP)

เมื่อพูดถึงการโหลดฟอนต์และการปรับปรุงตัววัด Largest Contentful Paint เทคนิคที่เราจะพูดถึงนั้นค่อนข้างกว้างกว่าเล็กน้อย

LCP วัดเวลาที่ใช้ในการโหลดองค์ประกอบเนื้อหาครึ่งหน้าบนที่ใหญ่ที่สุด (เช่น ข้อความ รูปภาพ) ทุกอย่างที่ต่ำกว่า 2.5 วินาทีถือเป็นเวลา LCP ที่ดี:

เมตริกอื่นที่ไม่ได้เป็นส่วนหนึ่งของ CWV แต่ยังได้รับผลกระทบจากการโหลดไฟล์ฟอนต์จำนวนมากคือ First Contentful Paint (FCP)

FCP วัดเวลาที่เบราว์เซอร์จะแสดงเนื้อหา DOM ชิ้นแรก (เช่น บล็อกข้อความ รูปภาพ SVG องค์ประกอบแคนวาสที่ไม่ว่างเปล่า) บนหน้า

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

หากพวกเขาจ้องไปที่หน้าจอว่างเปล่าชั่วขณะหนึ่ง (FCP) นั่นจะไม่ใช่ประสบการณ์ที่ยอดเยี่ยมสำหรับผู้ใช้ เช่นเดียวกันกับการรอนานเกินไปสำหรับองค์ประกอบที่ใหญ่ที่สุด/ฮีโร่ (LCP) ของคุณเพื่อแสดงผล

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

ต่อไปนี้คือเทคนิคสองสามข้อที่คุณอาจต้องการลองใช้:

1) บีบอัดแบบอักษรของคุณ

เพื่อให้เข้าใจว่าการบีบอัดฟอนต์ทำงานอย่างไร คุณจำเป็นต้องรู้กายวิภาคของฟอนต์บนเว็บ

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

เพื่อให้สามารถใช้การบีบอัดที่ถูกต้อง คุณจำเป็นต้องรู้รูปแบบฟอนต์ต่างๆ ก่อน:

• Embedded OpenType (EOT) - สามารถใช้กับเบราว์เซอร์ IE รุ่นเก่า (ต่ำกว่า I9) ไม่บีบอัดโดยค่าเริ่มต้น คุณสามารถใช้การบีบอัด GZIP กับแบบอักษรนี้ได้
• TrueType (TTF) - สามารถให้บริการกับเบราว์เซอร์ Android รุ่นเก่า (ต่ำกว่า 4.4) ไม่บีบอัดโดยค่าเริ่มต้น คุณสามารถใช้การบีบอัด GZIP กับแบบอักษรนี้ได้
• รูปแบบแบบอักษรเปิดเว็บ (WOFF) - ใช้ได้กับเบราว์เซอร์ส่วนใหญ่ มีการบีบอัดข้อมูลในตัว
• Web Open Font Format 2 (WOFF 2) - สามารถให้บริการกับเบราว์เซอร์ที่รองรับ ใช้อัลกอริธึมการบีบอัดแบบกำหนดเองเพื่อลดขนาดไฟล์ประมาณ 30% เมื่อเทียบกับรูปแบบอื่น

จากนั้น คุณสามารถใช้การบีบอัด GZIP (หากจำเป็น) โดยใช้เครื่องมือออนไลน์หรือกำหนดค่าเซิร์ฟเวอร์บางอย่าง

2) แบบอักษรอินไลน์

โดยทั่วไป ฟอนต์จะถูกเก็บไว้ในสไตล์ชีต CSS ภายนอก ในการใช้สไตล์ชีต ลิงก์จะถูกวางไว้ในแท็กส่วน หัว ของมาร์กอัป HTML ดังนี้:

อย่างไรก็ตาม การเรียกใช้ไฟล์ CSS ภายนอกนั้นใช้เวลานานกว่า เนื่องจากเบราว์เซอร์ต้องค้นหาตำแหน่งก่อนแล้วจึงดาวน์โหลดไฟล์

ในการเร่งกระบวนการโหลดฟอนต์ คุณสามารถประกาศฟอนต์แบบอินไลน์และการกำหนดสไตล์ที่สำคัญอื่นๆ ในแท็ก head ของเอกสารหลัก แทนที่จะเก็บไว้ในสไตล์ชีตภายนอก:

วิธีนี้จะช่วยให้เบราว์เซอร์ค้นหาและเริ่มแสดงแบบอักษรได้เร็วขึ้น เนื่องจากไม่ต้องรอให้ดาวน์โหลดสไตล์ชีตภายนอก

3) ตรวจสอบให้แน่ใจว่าแบบอักษรของคุณดาวน์โหลดได้อย่างรวดเร็ว

ดูเหมือนว่าจะเป็นการโต้เถียงที่ไม่สิ้นสุดเมื่อต้องเลือกระหว่างแบบอักษรที่โฮสต์เองหรือพึ่งพาบุคคลที่สาม

แม้ว่าแบบอักษรของเว็บจะเป็นตัวเลือกที่ดีในการโฮสต์ตัวเอง เนื่องจากเป็นทรัพยากรแบบคงที่ที่ไม่ได้รับการอัปเดตเป็นประจำ การพึ่งพาทรัพยากรของบุคคลที่สามก็ไม่ใช่ตัวเลือกที่ไม่ดีเช่นกัน

อันที่จริง Web Almanac พบว่าบางไซต์ที่ใช้แบบอักษรของบุคคลที่สามมีการแสดงผลที่เร็วกว่าไซต์ที่ใช้แบบอักษรของบุคคลที่หนึ่ง:

ที่มา: HTTP Archive

ในตอนท้ายของวัน สิ่งที่สำคัญที่สุดคือ - ฟอนต์ของคุณถูกดาวน์โหลดและแสดงผลได้เร็วแค่ไหน? และโดยส่วนใหญ่ คำตอบไม่ได้ขึ้นอยู่กับวิธีการโฮสต์ของคุณ แต่ขึ้นอยู่กับว่าคุณมีสามสิ่งนี้พร้อมใช้หรือไม่:

• เครือข่ายการจัดส่งเนื้อหา (CDN)
• HTTP/2
• นโยบายการแคชเว็บ

ดังนั้นแทนที่จะเสียเวลากับคำถามเช่น "ฉันควรโฮสต์แบบอักษรเว็บของฉันเองหรือไม่" ตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่าองค์ประกอบที่สำคัญกว่าไว้แล้ว

4) เชื่อมต่อกับแหล่งข้อมูลบุคคลที่สามล่วงหน้า

อีกเทคนิคหนึ่งที่จะช่วยให้โหลดฟอนต์ของคุณได้อย่างรวดเร็วคือการใช้ link rel=preconnect

ใช้ ลิงค์ rel=preconnect คำแนะนำทรัพยากร เพื่อสร้างการเชื่อมต่อล่วงหน้ากับต้นทางของบุคคลที่สาม

การเพิ่ม ลิงก์ rel=preconnect เป็นการแจ้งให้เบราว์เซอร์ทราบถึงความตั้งใจของหน้าเว็บของคุณในการสร้างการเชื่อมต่อกับโดเมนอื่น และคุณต้องการให้กระบวนการเริ่มต้นโดยเร็วที่สุด ทรัพยากรจะโหลดเร็วขึ้นเนื่องจากขั้นตอนการตั้งค่าเสร็จสมบูรณ์แล้วเมื่อถึงเวลาที่เบราว์เซอร์ร้องขอ

คำแนะนำทรัพยากรควรอยู่ในแท็กส่วน หัว ของเอกสาร

5) เซ็ตย่อยฟอนต์ของคุณ

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

แต่…

เบราว์เซอร์ยังคงต้องดาวน์โหลด ซึ่งอาจทำให้เวลาในการโหลดช้าลง!

ป้อนการตั้งค่าย่อยแบบอักษร

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

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

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

NitroPack สามารถเพิ่มประสิทธิภาพการโหลดแบบอักษรและ Core Web Vitals ของคุณได้อย่างไร

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

ตัวอย่างเช่น NitroPack มีฟีเจอร์ต่าง ๆ มากมายที่จะช่วยคุณประหยัดเวลาได้มากเมื่อปรับแต่งฟอนต์:

• Global CDN
• การบีบอัด GZIP และ Brotli
• ความเข้ากันได้ของ HTTP/2
• การโหลดแบบอักษรที่เลื่อนออกไป
• CSS ที่สำคัญ

นอกจากนี้ NitroPack ยังให้คุณกำหนดค่าพฤติกรรมการแสดงแบบอักษรเริ่มต้นได้

สำหรับผู้ใช้โหมดกำหนดเอง จะมีตัวเลือกในการแทนที่การทำงานนี้จาก "การตั้งค่าขั้นสูง":

นอกจากนี้ ใน “การตั้งค่าขั้นสูง” คุณจะพบตัวเลือกในการเพิ่มประสิทธิภาพการส่ง CSS ของคุณ:

เรายังทำการทดสอบการกำหนดค่าแบบอักษรต่างๆ อย่างต่อเนื่องเพื่อดูผลกระทบที่มีต่อ Core Web Vitals และในที่สุดก็พบทางออกที่ดีที่สุด อันที่จริง กระบวนการทดลองที่ไม่หยุดนิ่งนี้ ร่วมกับความช่วยเหลือจาก Speed ​​Insiders ของเรา คือสิ่งที่ช่วยให้เราสามารถนำเสนอผลลัพธ์ CWV ที่เหมาะสมที่สุดให้กับลูกค้าของเรา:

และหากคุณตัดสินใจที่จะเป็นส่วนหนึ่งของชุมชน NitroPack คุณควรรู้ว่าจะใช้เวลาไม่เกิน 5 นาทีในการตั้งค่า และคุณสามารถทดลองใช้บริการของเราด้วยแผนฟรี (ไม่ต้องใช้ CC)