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

Ilya Grigorik
Jeremy Wagner

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

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

กฎ @font-face CSS ช่วยให้คุณกำหนดตำแหน่งของทรัพยากรแบบอักษรที่เฉพาะเจาะจง ลักษณะแบบอักษร และจุดโค้ด Unicode ที่ควรใช้ คุณสามารถใช้การประกาศ @font-face หลายรายการร่วมกันเพื่อสร้าง "ชุดแบบอักษร" ซึ่งเบราว์เซอร์จะใช้เพื่อประเมินว่าต้องดาวน์โหลดและใช้ทรัพยากรแบบอักษรใดในหน้าเว็บปัจจุบัน

พิจารณาแบบอักษรที่ปรับแต่งได้

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

ตอนนี้เบราว์เซอร์ที่ทันสมัยทั้งหมดรองรับแบบอักษรที่ปรับแต่งได้แล้ว ดูข้อมูลเพิ่มเติมได้ใน บทนำเกี่ยวกับแบบอักษรที่ปรับแต่งได้บนเว็บ

เลือกรูปแบบที่เหมาะสม

การประกาศ @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');
}

ก่อนอื่น โปรดทราบว่าตัวอย่างข้างต้นกำหนดชุดแบบอักษร Awesome Font ชุดเดียวที่มี 2 สไตล์ (ปกติและ ตัวเอียง) ซึ่งแต่ละสไตล์จะชี้ไปยังชุดทรัพยากรแบบอักษรที่แตกต่างกัน ในทางกลับกัน ตัวอธิบาย src แต่ละรายการจะมีรายการรูปแบบทรัพยากรที่จัดลำดับความสำคัญและคั่นด้วยคอมมา ดังนี้

  • คำสั่ง local() ช่วยให้คุณอ้างอิง โหลด และใช้แบบอักษรที่ติดตั้งไว้ในเครื่อง หากผู้ใช้ติดตั้งแบบอักษรไว้ในระบบแล้ว ระบบจะข้ามเครือข่ายไปทั้งหมด ซึ่งเป็นวิธีที่เร็วที่สุด
  • คำสั่ง url() ช่วยให้คุณโหลดแบบอักษรภายนอกได้ และสามารถมีคำแนะนำ format() ที่ไม่บังคับซึ่งระบุรูปแบบของแบบอักษรที่อ้างอิงโดย URL ที่ระบุ

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

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

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

การแบ่งย่อยช่วง Unicode

นอกเหนือจากคุณสมบัติแบบอักษร เช่น สไตล์ ความหนา และความกว้าง กฎ @font-face ยังช่วยให้คุณกำหนดชุดจุดโค้ด Unicode ที่ทรัพยากรแต่ละรายการรองรับได้ด้วย ซึ่งช่วยให้คุณแยกแบบอักษร Unicode ขนาดใหญ่ออกเป็นชุดย่อยที่เล็กลง (เช่น ชุดย่อยละติน ซีริลลิก และกรีก) และดาวน์โหลดเฉพาะรูปอักขระที่จำเป็นในการแสดงข้อความในหน้าเว็บที่เฉพาะเจาะจง

ตัวอธิบาย unicode-range ช่วยให้คุณระบุรายการค่าช่วงที่คั่นด้วยคอมมา ซึ่งแต่ละค่าอาจอยู่ในรูปแบบใดรูปแบบหนึ่งจาก 3 รูปแบบต่อไปนี้

  • จุดโค้ดเดียว (เช่น 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 font matching algorithm

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