แนวทางปฏิบัติแนะนำสำหรับแบบอักษร

เพิ่มประสิทธิภาพแบบอักษรบนเว็บเพื่อ Core Web Vitals

Katie Hempenius
Katie Hempenius
X
Barry Pollard

เอกสารนี้จะพูดถึงแนวทางปฏิบัติแนะนำด้านประสิทธิภาพสำหรับแบบอักษร แบบอักษรบนเว็บส่งผลต่อประสิทธิภาพได้หลายวิธี ดังนี้

  • การแสดงข้อความล่าช้า: หากแบบอักษรบนเว็บยังโหลดไม่เสร็จ โดยปกติเบราว์เซอร์จะแสดงข้อความล่าช้า ในหลายๆ กรณี การดำเนินการนี้จะทำให้ First Contentful Paint (FCP) ล่าช้า และในบางกรณีก็จะทำให้ Largest Contentful Paint (LCP) ล่าช้าด้วย
  • Layout Shift: การสลับแบบอักษรอาจทำให้เกิด Layout Shift และส่งผลต่อ Cumulative Layout Shift (CLS) Layout Shift เหล่านี้เกิดขึ้นเมื่อแบบอักษรบนเว็บและแบบอักษรสำรองใช้พื้นที่ในหน้าเว็บไม่เท่ากัน

เอกสารนี้มี 3 ส่วน ได้แก่ การโหลดแบบอักษร การแสดงแบบอักษร และ การแสดงผลแบบอักษร แต่ละส่วนจะอธิบายวิธีการทำงานของแบบอักษรในแต่ละด้านและให้แนวทางปฏิบัติแนะนำที่เกี่ยวข้อง

การโหลดแบบอักษร

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

หากไม่แน่ใจว่าระบบขอแบบอักษรของหน้าเว็บทันเวลาหรือไม่ ให้ตรวจสอบแท็บเวลา ในแผงเครือข่าย ในเครื่องมือสำหรับนักพัฒนาเว็บของ Chrome เพื่อดูข้อมูลเพิ่มเติม

แท็บช่วงเวลาในเครื่องมือสำหรับนักพัฒนาเว็บ

ทำความเข้าใจ @font-face

ก่อนที่จะเจาะลึกแนวทางปฏิบัติแนะนำสำหรับการโหลดแบบอักษร คุณควรทำความเข้าใจ วิธีการทำงานของ @font-face และวิธีที่การทำงานนี้ส่งผลต่อการโหลดแบบอักษร

การ@font-face ประกาศ เป็นส่วนสำคัญในการใช้แบบอักษรบนเว็บ โดยอย่างน้อยที่สุด การประกาศนี้จะประกาศชื่อที่ใช้เพื่ออ้างอิงแบบอักษรและระบุตำแหน่งของไฟล์แบบอักษรที่เกี่ยวข้อง

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

ความเข้าใจผิดที่พบบ่อยคือระบบจะขอแบบอักษรเมื่อพบการประกาศ @font-face ซึ่งไม่เป็นความจริง การประกาศ @font-face เพียงอย่างเดียวจะไม่ทริกเกอร์การดาวน์โหลดแบบอักษร แต่ระบบจะดาวน์โหลดแบบอักษรก็ต่อเมื่อมีการอ้างอิงแบบอักษรนั้นโดยการจัดรูปแบบที่ใช้ในหน้าเว็บ เช่น

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

h1 {
  font-family: "Open Sans"
}

ในตัวอย่างนี้ ระบบจะดาวน์โหลด Open Sans ก็ต่อเมื่อหน้าเว็บมีองค์ประกอบ <h1>

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

การประกาศแบบอักษรแบบอินไลน์

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

<head>
  <style>
    @font-face {
        font-family: "Open Sans";
        src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    }

    body {
        font-family: "Open Sans";
    }

    ...etc.

  </style>
</head>

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

เชื่อมต่อกับต้นทางของบุคคลที่สามที่สำคัญล่วงหน้า

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

<head>
  <link rel="preconnect" href="https://fonts.com">
</head>

หากต้องการเชื่อมต่อล่วงหน้ากับการเชื่อมต่อที่ใช้ดาวน์โหลดไฟล์แบบอักษร ให้เพิ่มคำแนะนำทรัพยากร preconnect แยกต่างหากที่ใช้แอตทริบิวต์ crossorigin ไฟล์แบบอักษรต้องส่งผ่านการเชื่อมต่อ CORS ซึ่งแตกต่างจากสไตล์ชีต

<head>
  <link rel="preconnect" href="https://fonts.com">
  <link rel="preconnect" href="https://fonts.com" crossorigin>
</head>

เมื่อใช้คำแนะนำทรัพยากร preconnect โปรดทราบว่าผู้ให้บริการแบบอักษรอาจแสดงสไตล์ชีตและแบบอักษรจากต้นทางที่แยกกัน ตัวอย่างเช่น นี่คือวิธีใช้คำแนะนำทรัพยากร preconnect สำหรับ Google Fonts

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>

ระมัดระวังเมื่อใช้ preload เพื่อโหลดแบบอักษร

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

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

นอกจากนี้ คุณควรใช้ preload เป็นกลยุทธ์การโหลดแบบอักษรอย่างระมัดระวังด้วย เนื่องจากกลยุทธ์นี้จะข้ามกลยุทธ์การเจรจาเนื้อหาในตัวของเบราว์เซอร์บางอย่าง เช่น preload จะไม่สนใจการประกาศ unicode-range และหาก ใช้อย่างรอบคอบ คุณควรใช้ เพื่อโหลดแบบอักษรเพียงรูปแบบเดียว

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

การแสดงแบบอักษร

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

ใช้แบบอักษรที่โฮสต์เอง

ในทางทฤษฎี การใช้แบบอักษรที่โฮสต์เองควรให้ประสิทธิภาพที่ดีกว่า เนื่องจากไม่ต้องตั้งค่าการเชื่อมต่อกับบุคคลที่สาม แต่ในทางปฏิบัติ ความแตกต่างด้านประสิทธิภาพระหว่าง 2 ตัวเลือกนี้ไม่ชัดเจนนัก ตัวอย่างเช่น Web Almanac พบว่า เว็บไซต์ที่ใช้แบบอักษรของบุคคลที่สามมีการแสดงผลเร็วกว่าแบบอักษรที่ใช้ แบบอักษรของบุคคลที่หนึ่ง

หากกำลังพิจารณาใช้แบบอักษรที่โฮสต์เอง ให้ตรวจสอบว่าเว็บไซต์ใช้ เครือข่ายนำส่งข้อมูล (CDN) และ HTTP/2 หากไม่ได้ใช้เทคโนโลยีเหล่านี้ แบบอักษรที่โฮสต์เองมีแนวโน้มที่จะให้ประสิทธิภาพที่ดีกว่าน้อยมาก

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

ใช้ WOFF2

ในบรรดาแบบอักษรสมัยใหม่ WOFF2 เป็นแบบอักษรใหม่ล่าสุด รองรับเบราว์เซอร์ได้กว้างที่สุด และมีการบีบอัดที่ดีที่สุด เนื่องจากใช้ Brotli, WOFF2 จึงบีบอัดได้ดีกว่า WOFF ถึง 30% ทำให้ต้องดาวน์โหลดข้อมูลน้อยลงและมีประสิทธิภาพเร็วขึ้น

ผู้เชี่ยวชาญแนะนำให้ใช้เฉพาะ WOFF2 เนื่องจากเบราว์เซอร์รองรับแบบอักษรนี้ได้กว้างที่สุด

เราคิดว่าถึงเวลาแล้วที่จะประกาศว่า ให้ใช้เฉพาะ WOFF2 และลืมแบบอักษรอื่นๆ ไปได้เลย

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

Bram Stein จาก Web Almanac ปี 2022

แบ่งส่วนแบบอักษร

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

ตัวอธิบาย unicode-range ในการประกาศ @font-face จะแจ้งให้เบราว์เซอร์ทราบว่าอักขระใด ใช้กับแบบอักษรใดได้

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    unicode-range: U+0025-00FF;
}

ระบบจะดาวน์โหลดไฟล์แบบอักษรหากหน้าเว็บมีอักขระอย่างน้อย 1 ตัวที่ตรงกับช่วง Unicode โดยทั่วไปจะใช้ unicode-range เพื่อแสดงไฟล์แบบอักษรต่างๆ ขึ้นอยู่กับภาษาที่เนื้อหาในหน้าเว็บใช้

มักใช้ unicode-range ร่วมกับเทคนิคการแบ่งส่วน แบบอักษรที่แบ่งส่วนจะมี Glyph บางส่วนที่น้อยกว่า Glyph ที่อยู่ในไฟล์แบบอักษรต้นฉบับ ตัวอย่างเช่น เว็บไซต์อาจสร้างแบบอักษรที่แบ่งส่วนแยกกันสำหรับอักขระละตินและอักขระซีริลลิก แทนที่จะแสดงอักขระทั้งหมดแก่ผู้ใช้ทุกคน

จำนวน Glyph ต่อแบบอักษรจะแตกต่างกันอย่างมาก ดังนี้

  • แบบอักษรละตินมักจะมี Glyph ประมาณ 100-1,000 Glyph ต่อแบบอักษร
  • CJK อาจมีอักขระมากกว่า 10,000 ตัว

การนำ Glyph ที่ไม่ได้ใช้ออกจะช่วยลดขนาดไฟล์ของแบบอักษรได้อย่างมาก

ผู้ให้บริการแบบอักษรบางรายอาจมีไฟล์แบบอักษรเวอร์ชันต่างๆ ที่มีส่วนย่อยต่างๆ โดยอัตโนมัติ เช่น Google Fonts จะทำเช่นนี้โดยค่าเริ่มต้น

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

คุณสามารถแบ่งส่วนแบบอักษรด้วยตนเองได้หากผู้ให้บริการแบบอักษรอนุญาตให้ทำได้ ไม่ว่าจะใช้ API (Google Fonts รองรับการดำเนินการนี้โดยมีtextพารามิเตอร์) หรือแก้ไขไฟล์แบบอักษรด้วยตนเองแล้วโฮสต์เอง เครื่องมือสำหรับการ สร้างส่วนย่อยของแบบอักษร ได้แก่ subfont และ glyphanger

ตรวจสอบใบอนุญาตแบบอักษรเสมอเพื่อให้แน่ใจว่าอนุญาตให้แบ่งส่วน และโฮสต์เองได้

ใช้แบบอักษรบนเว็บน้อยลง

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

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

หากต้องการใช้แบบอักษรของระบบใน CSS ให้ระบุ system-ui เป็น font-family ดังนี้

font-family: system-ui

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

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

การแสดงผลแบบอักษร

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

เบราว์เซอร์ต่างๆ จัดการกับสถานการณ์นี้แตกต่างกัน โดยค่าเริ่มต้น เบราว์เซอร์ที่ใช้ Chromium และ Firefox จะบล็อกการแสดงข้อความนานสูงสุด 3 วินาทีหากแบบอักษรบนเว็บที่เกี่ยวข้องยังโหลดไม่เสร็จ ส่วน Safari จะบล็อกการแสดงข้อความอย่างไม่มีกำหนด

คุณสามารถกำหนดค่าลักษณะการทำงานนี้ได้โดยใช้แอตทริบิวต์ font-display การเลือกนี้อาจส่งผลอย่างมาก โดย font-display อาจส่งผลต่อ LCP, FCP และความเสถียรของเลย์เอาต์

เลือกกลยุทธ์ font-display ที่เหมาะสม

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

@font-face {
  font-family: Roboto, Sans-Serif
  src: url(/fonts/roboto.woff) format('woff'),
  font-display: swap;
}

font-display มีค่าที่เป็นไปได้ 5 ค่า ดังนี้

ค่า ระยะเวลาบล็อก ระยะเวลาสลับ
อัตโนมัติ แตกต่างกันไปตามเบราว์เซอร์ แตกต่างกันไปตามเบราว์เซอร์
บล็อก 2-3 วินาที ไม่สิ้นสุด
สลับ 0 มิลลิวินาที ไม่สิ้นสุด
สำรอง 100 มิลลิวินาที 3 วินาที
ไม่บังคับ 100 มิลลิวินาที ไม่มี
  • ระยะเวลาบล็อก: ระยะเวลาบล็อกจะเริ่มต้นเมื่อเบราว์เซอร์ขอแบบอักษรบนเว็บ ในระหว่างระยะเวลาบล็อก หากแบบอักษรบนเว็บไม่พร้อมใช้งาน ระบบจะแสดงแบบอักษรในแบบอักษรสำรองที่ มองไม่เห็น ดังนั้นผู้ใช้จึงมองไม่เห็นข้อความ หากแบบอักษรไม่พร้อมใช้งานเมื่อสิ้นสุดระยะเวลาบล็อก ระบบจะแสดงแบบอักษรในแบบอักษรสำรอง
  • ระยะเวลาสลับ: ระยะเวลาสลับจะเกิดขึ้นหลังจากระยะเวลาบล็อก หากแบบอักษรบนเว็บพร้อมใช้งานในระหว่างระยะเวลาสลับ ระบบจะ "สลับ" แบบอักษรบนเว็บเข้ามา

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

สำหรับเว็บไซต์ส่วนใหญ่ กลยุทธ์ที่ใช้ได้มากที่สุด 3 กลยุทธ์มีดังนี้ โดยพิจารณาจากสิ่งที่สำคัญที่สุด

  • ประสิทธิภาพ: ใช้ font-display: optional ซึ่งเป็นแนวทางที่ "มีประสิทธิภาพ" มากที่สุด โดยการแสดงข้อความจะล่าช้าไม่เกิน 100 มิลลิวินาที และรับประกันได้ว่าจะไม่มี Layout Shift ที่เกี่ยวข้องกับการสลับแบบอักษร ข้อเสียคือระบบจะไม่ใช้แบบอักษรบนเว็บหากมาถึงช้า

  • แสดงข้อความอย่างรวดเร็วและยังคงใช้แบบอักษรบนเว็บ: ใช้ font-display: swap แต่ตรวจสอบว่าได้แสดงแบบอักษรเร็วพอที่จะไม่ทำให้เกิด Layout Shift ข้อเสียของตัวเลือกนี้คือการเปลี่ยนแปลงที่ไม่ราบรื่นเมื่อแบบอักษรมาถึงช้า

  • แสดงข้อความในแบบอักษรบนเว็บ: ใช้ font-display: block แต่ตรวจสอบว่า ได้แสดงแบบอักษรเร็วพอที่จะลดความล่าช้าของข้อความ การแสดงข้อความครั้งแรกจะล่าช้า แม้จะมีความล่าช้านี้ แต่ก็ยังอาจทำให้เกิด Layout Shift ได้ เนื่องจากระบบจะวาดข้อความแบบมองไม่เห็น และใช้พื้นที่ของแบบอักษรสำรองเพื่อจองพื้นที่ เมื่อแบบอักษรบนเว็บโหลดแล้ว แบบอักษรนี้อาจต้องใช้พื้นที่แตกต่างกัน จึงทำให้เกิดการเปลี่ยนแปลง การเปลี่ยนแปลงนี้อาจราบรื่นกว่า font-display: swap เนื่องจากข้อความเองจะดูไม่เปลี่ยนแปลง

นอกจากนี้ โปรดทราบว่าคุณสามารถรวม 2 วิธีนี้เข้าด้วยกันได้ เช่น ใช้ font-display: swap สำหรับการสร้างแบรนด์และองค์ประกอบหน้าเว็บอื่นๆ ที่โดดเด่นด้านภาพ และใช้ font-display: optional สำหรับแบบอักษรที่ใช้ในข้อความเนื้อหา

แบบอักษรไอคอน

กลยุทธ์ font-display ที่เหมาะกับแบบอักษรบนเว็บทั่วไปอาจไม่เหมาะกับแบบอักษรไอคอน แบบอักษรสำรองสำหรับแบบอักษรไอคอนมักจะมีลักษณะแตกต่างจากแบบอักษรไอคอนอย่างมาก และอักขระของแบบอักษรสำรองอาจสื่อความหมายที่แตกต่างออกไปโดยสิ้นเชิง ดังนั้น แบบอักษรไอคอนจึงมีแนวโน้มที่จะทำให้เกิด Layout Shift อย่างมาก

นอกจากนี้ การใช้แบบอักษรสำรองอาจไม่สะดวก ให้แทนที่แบบอักษรไอคอนด้วย SVG เมื่อเป็นไปได้ ซึ่งยังดีกว่าในด้านการช่วยเหลือพิเศษด้วย แบบอักษรไอคอนยอดนิยมเวอร์ชันใหม่ๆ มักจะรองรับ SVG ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนไปใช้ SVG ได้ที่ หน้า SVG Sprites ของ Font Awesome และ คู่มือ Material Icons

ลดการเปลี่ยนแปลงระหว่างแบบอักษรสำรองกับแบบอักษรบนเว็บ

คุณสามารถใช้แอตทริบิวต์ size-adjust เพื่อลดผลกระทบของ CLS ได้

บทสรุป

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