ลดขนาดแบบอักษรของเว็บ

Ilya Grigorik
Jeremy Wagner

ตัวอักษรเป็นพื้นฐานของการออกแบบที่ดี การสร้างแบรนด์ การอ่านออกง่าย และการช่วยเหลือพิเศษ เว็บฟอนต์ช่วยให้เกิดสิ่งเหล่านี้และอีกมากมาย: ข้อความสามารถเลือก ค้นหา ซูมได้ และใช้งาน 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 ที่ระบุ

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

  1. เบราว์เซอร์จะดำเนินการเลย์เอาต์หน้าเว็บและกำหนดว่าต้องใช้แบบอักษรใดเพื่อแสดงข้อความที่ระบุในหน้าเว็บ เบราว์เซอร์จะไม่ดาวน์โหลดแบบอักษรที่ไม่ได้เป็นส่วนหนึ่งของ CSS Object Model (CSSOM) ของหน้าเว็บ เนื่องจากไม่จำเป็นต้องใช้
  2. สำหรับแบบอักษรแต่ละรายการที่ต้องระบุ เบราว์เซอร์จะตรวจสอบว่าแบบอักษรดังกล่าวพร้อมใช้งานในเครื่องหรือไม่
  3. หากแบบอักษรนั้นไม่พร้อมใช้งานในเครื่อง เบราว์เซอร์จะทำซ้ำตามคําจํากัดความภายนอก ดังนี้
    • หากมีคำแนะนำรูปแบบอยู่ เบราว์เซอร์จะตรวจสอบว่าคำแนะนำนั้นสนับสนุนรูปแบบหรือไม่ก่อนที่จะเริ่มการดาวน์โหลด หากเบราว์เซอร์ไม่รองรับคำแนะนำ เบราว์เซอร์จะไปยังส่วนถัดไป
    • หากไม่มีคำแนะนำรูปแบบ เบราว์เซอร์จะดาวน์โหลดทรัพยากร

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

การตั้งค่าย่อยช่วง 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 คุณอาจต้องเปลี่ยนไปใช้ "การตั้งค่าย่อยด้วยตนเอง" เพื่อให้เข้ากันได้กับเบราว์เซอร์รุ่นเก่า ในกรณีนี้ คุณต้องกลับไปใช้ทรัพยากรแบบอักษรเดียวที่มีชุดย่อยที่จำเป็นทั้งหมดและซ่อนส่วนที่เหลือจากเบราว์เซอร์ เช่น หากหน้าเว็บใช้แต่อักขระละติน คุณสามารถตัดรูปอักขระอื่นๆ ออกและแสดงชุดย่อยดังกล่าวเป็นทรัพยากรแบบสแตนด์อโลนได้

  1. พิจารณาว่าต้องใช้ชุดย่อยใด ดังนี้
    • หากเบราว์เซอร์รองรับการตั้งค่าย่อยช่วง Unicode ก็จะเลือกชุดย่อยที่ถูกต้องโดยอัตโนมัติ หน้าเว็บเพียงแค่ต้องระบุไฟล์ย่อยและระบุช่วง Unicode ที่เหมาะสมในกฎ @font-face
    • หากเบราว์เซอร์ไม่รองรับการตั้งค่าย่อยช่วง Unicode หน้าเว็บจะต้องซ่อนชุดย่อยที่ไม่จำเป็นทั้งหมด กล่าวคือ นักพัฒนาซอฟต์แวร์ต้องระบุชุดย่อยที่จำเป็น
  2. สร้างชุดย่อยแบบอักษร:
    • ใช้เครื่องมือ 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