ตัวอักษรเป็นพื้นฐานของการออกแบบที่ดี การสร้างแบรนด์ การอ่านออกง่าย และการช่วยเหลือพิเศษ เว็บฟอนต์ช่วยให้เกิดสิ่งเหล่านี้และอีกมากมาย: ข้อความสามารถเลือก ค้นหา ซูมได้ และใช้งาน DPI สูง ให้การแสดงผลข้อความที่สม่ำเสมอและคมชัดไม่ว่าหน้าจอจะมีขนาดและความละเอียดเท่าใด WebFonts มีความสำคัญต่อการออกแบบ, UX และประสิทธิภาพที่ดี
การเพิ่มประสิทธิภาพเว็บฟอนต์เป็นส่วนสำคัญของกลยุทธ์ด้านประสิทธิภาพโดยรวม แบบอักษรแต่ละแบบเป็นทรัพยากรเพิ่มเติม และแบบอักษรบางตัวอาจบล็อกการแสดงผลข้อความ แต่การที่หน้าเว็บใช้ WebFonts ไม่ได้หมายความว่าหน้าเว็บจะต้องแสดงผลช้าลง ในทางตรงกันข้าม แบบอักษรที่เพิ่มประสิทธิภาพ รวมกับกลยุทธ์วิธีโหลดและนำไปใช้ในหน้าเว็บที่เหมาะสม จะช่วยลดขนาดหน้าเว็บโดยรวมและปรับปรุงเวลาในการแสดงผลหน้าเว็บได้
โครงสร้างของแบบอักษรเว็บ
แบบอักษรของเว็บคือชุดของรูปอักขระ และรูปอักขระเวกเตอร์ที่ใช้อธิบายตัวอักษรหรือสัญลักษณ์ ผลที่ได้คือตัวแปรง่ายๆ 2 ตัวที่กำหนดขนาดของไฟล์แบบอักษรแต่ละไฟล์ ได้แก่ ความซับซ้อนของเส้นทางเวกเตอร์ของแต่ละรูปอักขระและจำนวนรูปอักขระในแบบอักษรหนึ่งๆ ตัวอย่างเช่น Open Sans ซึ่งเป็น WebFonts ที่ได้รับความนิยมมากที่สุด แบบอักษร 897 อักขระ ซึ่งประกอบด้วยอักขระละติน กรีก และซิริลลิก
เมื่อเลือกแบบอักษร สิ่งสำคัญคือต้องพิจารณาว่าสนับสนุนชุดอักขระใดบ้าง หากคุณต้องการแปลเนื้อหาของหน้าเว็บเป็นหลายภาษา คุณควรใช้แบบอักษรที่สามารถนำเสนอรูปลักษณ์และประสบการณ์ที่สอดคล้องกันแก่ผู้ใช้ของคุณ ตัวอย่างเช่น ชุดแบบอักษร Noto ของ Google มีไว้เพื่อรองรับทุกภาษาทั่วโลก อย่างไรก็ตาม โปรดทราบว่าขนาดรวมของ Noto ซึ่งรวมทุกภาษาไว้ในไฟล์ ZIP มากกว่า 1.1 GB
ในโพสต์นี้คุณจะได้เรียนรู้วิธีลดขนาดไฟล์ที่ส่งของแบบอักษรบนเว็บ
รูปแบบเว็บฟอนต์
ปัจจุบันมีคอนเทนเนอร์แบบอักษรที่แนะนำให้ใช้บนเว็บ 2 รูปแบบ ดังนี้
WOFF และ WOFF 2.0 มีการสนับสนุนอย่างกว้างขวางและได้รับการสนับสนุนในเบราว์เซอร์รุ่นใหม่ทั้งหมด
- แสดงตัวแปร WOFF 2.0 สำหรับเบราว์เซอร์ที่ทันสมัย
- ในกรณีที่จำเป็นอย่างยิ่ง เช่น ในกรณีที่คุณยังต้องรองรับ Internet Explorer 11 อยู่ ให้ใช้ WOFF เป็นค่าสำรอง
- หรือพิจารณาไม่ใช้แบบอักษรเว็บสำหรับเบราว์เซอร์เดิมและกลับไปใช้แบบอักษรของระบบ ซึ่งอาจมีประสิทธิภาพมากกว่าสำหรับอุปกรณ์รุ่นเก่าที่มีการจำกัดมากกว่าด้วย
- เนื่องจาก WOFF และ WOFF 2.0 ครอบคลุมเวอร์ชันพื้นฐานทั้งหมดสำหรับเบราว์เซอร์สมัยใหม่และเดิมที่ยังใช้งานอยู่ การใช้ EOT และ TTF จึงไม่จําเป็นอีกต่อไปและอาจส่งผลให้ใช้เวลาดาวน์โหลดแบบอักษรบนเว็บนานขึ้น
แบบอักษรและการบีบอัดของเว็บ
ทั้ง WOFF และ WOFF 2.0 มีการบีบอัดในตัว การบีบอัดภายในของ WOFF 2.0 ใช้ Brotli และให้การบีบอัดดีกว่า WOFF ถึง 30% สำหรับข้อมูลเพิ่มเติม โปรดดูรายงานการประเมิน WOFF 2.0
สุดท้าย โปรดสังเกตว่ารูปแบบฟอนต์บางรูปแบบมีข้อมูลเมตาเพิ่มเติม เช่น คำแนะนำแบบอักษรและข้อมูลการจัดช่องไฟ ที่อาจไม่จำเป็นในบางแพลตฟอร์ม ซึ่งทำให้เพิ่มประสิทธิภาพขนาดไฟล์ได้มากยิ่งขึ้น ตัวอย่างเช่น Google Fonts มีตัวแปรที่เพิ่มประสิทธิภาพมากกว่า 30 แบบสำหรับแต่ละแบบอักษร รวมถึงตรวจหาและนำส่งตัวแปรที่เหมาะสมที่สุดสำหรับแต่ละแพลตฟอร์มและเบราว์เซอร์โดยอัตโนมัติ
กำหนดชุดแบบอักษรด้วย @font-face
กฎหลักของ CSS ของ @font-face
ช่วยให้คุณระบุตำแหน่งของทรัพยากรแบบอักษรที่เฉพาะเจาะจง ลักษณะของรูปแบบ และจุดโค้ด Unicode ที่ควรใช้ ชุดค่าผสมของการประกาศ @font-face
ดังกล่าวสามารถใช้เพื่อสร้าง "ชุดแบบอักษร" ซึ่งเบราว์เซอร์จะใช้เพื่อประเมินว่าทรัพยากรแบบอักษรใดที่ต้องดาวน์โหลดและนำไปใช้กับหน้าปัจจุบัน
พิจารณาแบบอักษรตัวแปร
แบบอักษรที่เปลี่ยนแปลงได้อาจลดขนาดไฟล์ของแบบอักษรลงอย่างมากในกรณีที่คุณต้องใช้แบบอักษรหลายแบบ คุณโหลดไฟล์เดียวที่มีข้อมูลทั้งหมดได้โดยไม่ต้องโหลดรูปแบบปกติและตัวหนารวมถึงเวอร์ชันตัวเอียง อย่างไรก็ตาม ไฟล์แบบอักษรตัวแปรจะมีขนาดใหญ่กว่าแบบอักษรแต่ละรูปแบบ แต่ขนาดเล็กกว่าการผสมผสานของตัวแปรจำนวนมาก คุณควรแสดงแบบอักษรที่สำคัญก่อน ส่วนแบบอักษรอื่นๆ จะดาวน์โหลดทีหลัง แทนที่จะใช้แบบอักษรขนาดใหญ่ตัวแปรเดียว 1 แบบอักษร
ขณะนี้เบราว์เซอร์ที่ทันสมัยทั้งหมดรองรับแบบอักษรที่เปลี่ยนแปลงได้ ดูข้อมูลเพิ่มเติมในข้อมูลเบื้องต้นเกี่ยวกับแบบอักษรตัวแปรบนเว็บ
เลือกรูปแบบที่ถูกต้อง
การประกาศ @font-face
แต่ละรายการจะระบุชื่อของชุดแบบอักษรซึ่งทำหน้าที่เป็นกลุ่มเชิงตรรกะของการประกาศหลายรายการ คุณสมบัติของแบบอักษร เช่น รูปแบบ น้ำหนัก และการยืด และ ข้อบ่งชี้src ซึ่งระบุรายการตำแหน่งตามลำดับความสำคัญสำหรับทรัพยากรแบบอักษร
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome.woff2') format('woff2'),
/* Only serve WOFF if necessary. Otherwise,
WOFF 2.0 is fine by itself. */
url('/fonts/awesome.woff') format('woff');
}
@font-face {
font-family: 'Awesome Font';
font-style: italic;
font-weight: 400;
src: local('Awesome Font Italic'),
url('/fonts/awesome-i.woff2') format('woff2'),
url('/fonts/awesome-i.woff') format('woff');
}
ก่อนอื่น โปรดทราบว่าตัวอย่างข้างต้นกำหนดชุดแบบอักษรสุดเจ๋งที่มี 2 รูปแบบ (ปกติและตัวเอียง) ซึ่งแต่ละรูปแบบจะชี้ไปยังชุดทรัพยากรแบบอักษรที่แตกต่างกัน ส่วนข้อบ่งชี้ src
แต่ละรายการจะมีรายการตัวแปรของทรัพยากรที่เรียงตามลำดับความสำคัญและคั่นด้วยคอมมา ดังนี้
- คำสั่ง
local()
ช่วยให้คุณอ้างอิง โหลด และใช้แบบอักษรที่ติดตั้งอยู่ในเครื่องได้ หากผู้ใช้ติดตั้งแบบอักษรไว้ในระบบแล้ว จะเป็นการข้ามเครือข่ายทั้งหมดและเป็นวิธีที่เร็วที่สุด - คำสั่ง
url()
ให้คุณโหลดแบบอักษรภายนอก และสามารถมีคำแนะนำformat()
ที่ไม่บังคับซึ่งระบุรูปแบบของแบบอักษรที่อ้างอิงโดย URL ที่ระบุ
เมื่อเบราว์เซอร์พิจารณาว่าจำเป็นต้องใช้แบบอักษรดังกล่าว เบราว์เซอร์จะทำซ้ำผ่านรายการทรัพยากรที่มีให้ตามลำดับที่ระบุ และพยายามโหลดทรัพยากรที่เหมาะสม ตัวอย่างเช่น ตามตัวอย่างข้างต้น
- เบราว์เซอร์จะดำเนินการเลย์เอาต์หน้าเว็บและกำหนดว่าต้องใช้แบบอักษรใดเพื่อแสดงข้อความที่ระบุในหน้าเว็บ เบราว์เซอร์จะไม่ดาวน์โหลดแบบอักษรที่ไม่ได้เป็นส่วนหนึ่งของ CSS Object Model (CSSOM) ของหน้าเว็บ เนื่องจากไม่จำเป็นต้องใช้
- สำหรับแบบอักษรแต่ละรายการที่ต้องระบุ เบราว์เซอร์จะตรวจสอบว่าแบบอักษรดังกล่าวพร้อมใช้งานในเครื่องหรือไม่
- หากแบบอักษรนั้นไม่พร้อมใช้งานในเครื่อง เบราว์เซอร์จะทำซ้ำตามคําจํากัดความภายนอก ดังนี้
- หากมีคำแนะนำรูปแบบอยู่ เบราว์เซอร์จะตรวจสอบว่าคำแนะนำนั้นสนับสนุนรูปแบบหรือไม่ก่อนที่จะเริ่มการดาวน์โหลด หากเบราว์เซอร์ไม่รองรับคำแนะนำ เบราว์เซอร์จะไปยังส่วนถัดไป
- หากไม่มีคำแนะนำรูปแบบ เบราว์เซอร์จะดาวน์โหลดทรัพยากร
การใช้คำสั่งภายในและภายนอกร่วมกับคำแนะนำรูปแบบที่เหมาะสมจะช่วยให้คุณระบุรูปแบบแบบอักษรที่ใช้ได้ทั้งหมด และให้เบราว์เซอร์จัดการส่วนที่เหลือได้ เบราว์เซอร์จะกำหนดว่าต้องใช้ทรัพยากรใดและเลือกรูปแบบที่เหมาะสมที่สุด
การตั้งค่าย่อยช่วง Unicode
นอกจากคุณสมบัติของแบบอักษร เช่น รูปแบบ น้ำหนัก และการขยาย กฎ @font-face
ยังให้คุณกำหนดชุดโค้ดของ Unicode ที่ทรัพยากรแต่ละรายการรองรับได้ด้วย วิธีนี้ช่วยให้คุณแบ่งแบบอักษร Unicode ขนาดใหญ่ออกเป็นชุดย่อยๆ ได้ (เช่น ชุดย่อยละติน ซิริลลิก และกรีก) และดาวน์โหลดเฉพาะรูปอักขระที่ต้องใช้ในการแสดงผลข้อความบนหน้าเว็บหนึ่งๆ เท่านั้น
ข้อบ่งชี้ unicode-range
ช่วยให้คุณระบุรายการค่าของช่วงโดยคั่นด้วยคอมมา โดยแต่ละค่าอาจอยู่ในรูปแบบใดรูปแบบหนึ่งจาก 3 รูปแบบ ดังนี้
- Codepoint เดียว (เช่น
U+416
) - ช่วงของช่วง (เช่น
U+400-4ff
): ระบุจุดโค้ดเริ่มต้นและสิ้นสุดของช่วง - ช่วงไวลด์การ์ด (เช่น
U+4??
): อักขระ?
ตัวแสดงถึงเลขฐานสิบหก
ตัวอย่างเช่น คุณสามารถแบ่งชุดแบบอักษร Awesome Font ออกเป็นกลุ่มย่อยละตินและญี่ปุ่น โดยแต่ละชุดเบราว์เซอร์จะดาวน์โหลดตามความต้องการได้ดังนี้
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome-l.woff2') format('woff2');
/* Latin glyphs */
unicode-range: U+000-5FF;
}
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome-jp.woff2') format('woff2');
/* Japanese glyphs */
unicode-range: U+3000-9FFF, U+ff??;
}
การใช้ชุดย่อยของช่วง Unicode และไฟล์แยกต่างหากสำหรับแบบอักษรแต่ละรูปแบบของแบบอักษรจะช่วยให้คุณกำหนดชุดแบบอักษรผสมซึ่งดาวน์โหลดได้รวดเร็วและมีประสิทธิภาพมากยิ่งขึ้น ผู้เข้าชมจะดาวน์โหลดเฉพาะรูปแบบและชุดย่อยที่ต้องการเท่านั้น โดยไม่ได้ต้องดาวน์โหลดชุดย่อยที่อาจไม่เคยเห็นหรือใช้ในหน้าเว็บ
เบราว์เซอร์เกือบทั้งหมดรองรับ unicode-range
คุณอาจต้องเปลี่ยนไปใช้ "การตั้งค่าย่อยด้วยตนเอง" เพื่อให้เข้ากันได้กับเบราว์เซอร์รุ่นเก่า ในกรณีนี้ คุณต้องกลับไปใช้ทรัพยากรแบบอักษรเดียวที่มีชุดย่อยที่จำเป็นทั้งหมดและซ่อนส่วนที่เหลือจากเบราว์เซอร์ เช่น หากหน้าเว็บใช้แต่อักขระละติน คุณสามารถตัดรูปอักขระอื่นๆ ออกและแสดงชุดย่อยดังกล่าวเป็นทรัพยากรแบบสแตนด์อโลนได้
- พิจารณาว่าต้องใช้ชุดย่อยใด ดังนี้
- หากเบราว์เซอร์รองรับการตั้งค่าย่อยช่วง Unicode ก็จะเลือกชุดย่อยที่ถูกต้องโดยอัตโนมัติ หน้าเว็บเพียงแค่ต้องระบุไฟล์ย่อยและระบุช่วง Unicode ที่เหมาะสมในกฎ
@font-face
- หากเบราว์เซอร์ไม่รองรับการตั้งค่าย่อยช่วง Unicode หน้าเว็บจะต้องซ่อนชุดย่อยที่ไม่จำเป็นทั้งหมด กล่าวคือ นักพัฒนาซอฟต์แวร์ต้องระบุชุดย่อยที่จำเป็น
- หากเบราว์เซอร์รองรับการตั้งค่าย่อยช่วง Unicode ก็จะเลือกชุดย่อยที่ถูกต้องโดยอัตโนมัติ หน้าเว็บเพียงแค่ต้องระบุไฟล์ย่อยและระบุช่วง Unicode ที่เหมาะสมในกฎ
- สร้างชุดย่อยแบบอักษร:
- ใช้เครื่องมือ pyftsubset แบบโอเพนซอร์สเพื่อแยกย่อยและเพิ่มประสิทธิภาพแบบอักษร
- เซิร์ฟเวอร์แบบอักษรบางอย่าง เช่น Google Font จะแยกส่วนโดยอัตโนมัติโดยค่าเริ่มต้น
- บริการแบบอักษรบางบริการอนุญาตการตั้งค่าย่อยด้วยตนเองผ่านพารามิเตอร์การค้นหาที่กำหนดเอง ซึ่งคุณเลือกใช้เพื่อระบุชุดย่อยที่จำเป็นสำหรับหน้าเว็บด้วยตนเองได้ ดูเอกสารจากผู้ให้บริการแบบอักษร
การเลือกและสังเคราะห์แบบอักษร
ชุดแบบอักษรแต่ละชุดอาจประกอบด้วยรูปแบบต่างๆ ของสไตล์ที่หลากหลาย (ปกติ ตัวหนา ตัวเอียง) และน้ำหนักหลายระดับสำหรับแต่ละรูปแบบ ซึ่งแต่ละรูปแบบอาจมีรูปร่างรูปอักขระแตกต่างกันมาก เช่น ระยะห่าง ขนาด หรือรูปร่างต่างกัน
แผนภาพด้านบนแสดงแบบอักษรที่มีน้ำหนักหนา 3 ระดับดังนี้
- 400 (ปกติ)
- 700 (ตัวหนา)
- 900 (ตัวหนาเพิ่มเติม)
ส่วนตัวแปรอื่นๆ ทั้งหมดที่อยู่ระหว่างตัวแปร (แสดงเป็นสีเทา) จะแมปกับตัวแปรที่ใกล้เคียงที่สุดโดยเบราว์เซอร์โดยอัตโนมัติ
เมื่อมีการระบุน้ำหนักเมื่อไม่มีใบหน้า ระบบจะใช้ใบหน้าที่มีน้ำหนักใกล้เคียง โดยทั่วไป น้ำหนักตัวหนาจะจับคู่กับใบหน้าต่างๆ ที่มีน้ำหนักมากกว่า และน้ำหนักเบาจะจับคู่ใบหน้าที่มีน้ำหนักน้อยกว่า
อัลกอริทึมการจับคู่แบบอักษร CSS
ตรรกะที่คล้ายกันใช้กับตัวแปรตัวเอียง เครื่องมือออกแบบแบบอักษรจะควบคุมว่าจะสร้างรูปแบบใด และคุณเป็นผู้ควบคุมตัวแปรที่จะใช้ในหน้าเว็บ เนื่องจากแต่ละรูปแบบเป็นการดาวน์โหลดแยกกัน คุณจึงควรที่จะจำกัดจำนวนตัวแปรไว้ ตัวอย่างเช่น คุณกำหนดรูปแบบตัวหนาได้ 2 รูปแบบสำหรับกลุ่มแบบอักษรสุดเจ๋ง ดังนี้
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome-l.woff2') format('woff2');
/* Latin glyphs */
unicode-range: U+000-5FF;
}
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 700;
src: local('Awesome Font'),
url('/fonts/awesome-l-700.woff2') format('woff2');
/* Latin glyphs */
unicode-range: U+000-5FF;
}
ตัวอย่างข้างต้นเป็นตระกูล Awesome Font ที่ประกอบด้วยทรัพยากร 2 รายการที่ครอบคลุมพื้นที่ตัวอักษรละตินชุดเดียวกัน (U+000-5FF
) แต่มี "น้ำหนัก" 2 แบบ ได้แก่ ปกติ (400) และตัวหนา (700) อย่างไรก็ตาม จะเกิดอะไรขึ้นหากกฎ CSS ข้อใดข้อหนึ่งระบุน้ำหนักแบบอักษรที่ต่างกัน หรือตั้งค่าพร็อพเพอร์ตี้ font-style
เป็น italic
- หากไม่มีการจับคู่แบบอักษรที่ตรงกันทั้งหมด เบราว์เซอร์จะแทนที่การจับคู่ที่ใกล้เคียงที่สุด
- หากไม่พบการจับคู่สไตล์การเขียน (เช่น ไม่มีการประกาศรูปแบบตัวเอียงในตัวอย่างด้านบน) เบราว์เซอร์จะสรุปรูปแบบแบบอักษรของตัวเอง
ตัวอย่างด้านบนแสดงความแตกต่างระหว่างผลลัพธ์แบบอักษรจริงกับแบบสังเคราะห์สำหรับ Open Sans ผลิตภัณฑ์ย่อยที่สังเคราะห์ทั้งหมดสร้างขึ้นจากแบบอักษรที่มีน้ำหนัก 400 เพียงแบบเดียว จะเห็นได้ว่าผลลัพธ์มีความแตกต่างอย่างเห็นได้ชัด ไม่มีการระบุรายละเอียดของวิธีสร้างตัวแปรตัวหนาและเอียง ดังนั้น ผลลัพธ์จึงแตกต่างกันไปตามเบราว์เซอร์ และจะขึ้นอยู่กับแบบอักษรเป็นหลัก
รายการตรวจสอบการเพิ่มประสิทธิภาพขนาดแบบอักษรบนเว็บ
- ตรวจสอบและติดตามดูการใช้งานฟอนต์: อย่าใช้ฟอนต์หลายรายการเกินไปในหน้าเว็บ และให้ลดจำนวนรูปแบบที่ใช้ให้มากที่สุดในฟอนต์แต่ละรายการ วิธีนี้จะช่วยให้ผู้ใช้ได้รับประสบการณ์ที่สอดคล้องกันและรวดเร็วยิ่งขึ้น
- หลีกเลี่ยงการใช้รูปแบบเดิมหากทำได้: รูปแบบ EOT, TTF และ WOFF มีขนาดใหญ่กว่า WOFF 2.0 EOT และ TTF เป็นรูปแบบที่ไม่จำเป็นอย่างยิ่ง ซึ่ง WOFF อาจยอมรับได้หากคุณต้องการรองรับ Internet Explorer 11 หากคุณกำหนดเป้าหมายเฉพาะเบราว์เซอร์ที่ทันสมัย การใช้ WOFF 2.0 เท่านั้นคือตัวเลือกที่ง่ายและมีประสิทธิภาพมากที่สุด
- จัดทรัพยากรแบบอักษรเป็นกลุ่มย่อย: ฟอนต์หลายรายการสามารถอยู่ในกลุ่มย่อย หรือแยกเป็นช่วง Unicode หลายๆ ช่วงเพื่อให้ส่งเฉพาะอักษรที่หน้าเว็บนั้นๆ ต้องใช้ ซึ่งจะลดขนาดไฟล์และปรับปรุงความเร็วในการดาวน์โหลดทรัพยากร อย่างไรก็ตาม โปรดเพิ่มประสิทธิภาพสำหรับการนำแบบอักษรกลับมาใช้ใหม่อย่างรอบคอบเมื่อกำหนดกลุ่มย่อย ตัวอย่างเช่น อย่าดาวน์โหลดชุดอักขระที่แตกต่างแต่ทับซ้อนกันในแต่ละหน้า แนวทางปฏิบัติที่ดีคือให้ย่อยตามสคริปต์ เช่น ละติน และซีริลลิก
- ให้ความสำคัญกับ
local()
ในรายการsrc
: การแสดงlocal('Font Name')
เป็นอันดับแรกในรายการsrc
ช่วยให้มั่นใจได้ว่าจะไม่มีคำขอ HTTP สำหรับแบบอักษรที่ติดตั้งไว้แล้ว - ใช้ Lighthouse เพื่อทดสอบการบีบอัดข้อความ
ผลกระทบต่อ Largest Contentful Paint (LCP) และ Cumulative Layout Shift (CLS)
โหนดข้อความอาจเป็นตัวเลือกสำหรับ Largest Contentful Paint (LCP) โดยขึ้นอยู่กับเนื้อหาของหน้าเว็บ ดังนั้นคุณจึงควรตรวจสอบว่าแบบอักษรสำหรับเว็บมีขนาดเล็กที่สุดเท่าที่จะเป็นไปได้ โดยทำตามคำแนะนำในบทความนี้เพื่อให้ผู้ใช้เห็นข้อความบนหน้าเว็บของคุณโดยเร็วที่สุดเท่าที่จะเป็นไปได้
หากคุณกังวลว่าแม้ว่าคุณจะพยายามเพิ่มประสิทธิภาพ แต่ข้อความในหน้าเว็บก็อาจใช้เวลานานเกินไปในการปรากฏขึ้นเนื่องจากทรัพยากรแบบอักษรของเว็บขนาดใหญ่ แต่พร็อพเพอร์ตี้ font-display
มีการตั้งค่ามากมายที่จะช่วยให้คุณหลีกเลี่ยงข้อความที่มองไม่เห็นขณะที่กำลังดาวน์โหลดแบบอักษร แต่การใช้ค่า swap
อาจทำให้เลย์เอาต์เปลี่ยนแปลงอย่างมากซึ่งส่งผลต่อ Cumulative Layout Shift (CLS) ของเว็บไซต์ หากเป็นไปได้ ให้พิจารณาใช้ค่า optional
หรือ fallback
หากแบบอักษรบนเว็บมีความสำคัญต่อการสร้างแบรนด์ และประสบการณ์การใช้งานของผู้ใช้ ให้พิจารณาการโหลดแบบอักษรล่วงหน้าเพื่อให้เบราว์เซอร์สามารถขอแบบอักษรได้ตั้งแต่เนิ่นๆ ซึ่งจะลดทั้งระยะเวลาการสลับเมื่อใช้ font-display: swap
หรือระยะเวลาการบล็อกหากคุณไม่ได้ใช้ font-display