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

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

Katie Hempenius
Katie Hempenius
X
Barry Pollard

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

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

บทความนี้แบ่งออกเป็น 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 และหากตั้งใจจะใช้เพื่อโหลดแบบอักษรรูปแบบเดียว

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

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

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

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

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

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

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

ใช้ WOFF2

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

เบราว์เซอร์รองรับการใช้ WOFF2 โดยตอนนี้ผู้เชี่ยวชาญแนะนำให้ใช้เท่านั้น

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

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

Bram Stein, จาก Web Almanac ปี 2022

แบบอักษรของเซ็ตย่อย

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

โดยข้อบ่งชี้ 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 มักจะใช้ร่วมกับเทคนิคของการตั้งค่าย่อย แบบอักษรชุดย่อยประกอบด้วยรูปอักขระที่เล็กกว่าซึ่งมีอยู่ในไฟล์แบบอักษรต้นฉบับ ตัวอย่างเช่น แทนที่จะแสดงอักขระทั้งหมดต่อผู้ใช้ทั้งหมด เว็บไซต์อาจสร้างแบบอักษรชุดย่อยแยกต่างหากสำหรับอักขระละตินและอักขระซีริลลิก จำนวนรูปอักขระต่อแบบอักษรจะแตกต่างกันมาก โดยแบบอักษรละตินมักจะมีขนาดตั้งแต่ 100 ถึง 1,000 รูปต่อแบบอักษร ส่วนแบบอักษร CJK มีความยาวได้มากกว่า 10,000 อักขระ การนำรูปอักขระที่ไม่ได้ใช้ออกจะช่วยลดขนาดไฟล์ของแบบอักษรได้อย่างมาก

ผู้ให้บริการแบบอักษรบางรายอาจให้ไฟล์แบบอักษรในเวอร์ชันต่างๆ ที่มีกลุ่มย่อยที่แตกต่างกันโดยอัตโนมัติ ตัวอย่างเช่น 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: system-ui

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

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

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

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

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

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

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

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

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

ค่าที่เป็นไปได้สำหรับ font-display มีอยู่ 5 ค่า ได้แก่

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

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

สำหรับเว็บไซต์ส่วนใหญ่ กลยุทธ์ 3 ข้อต่อไปนี้แล้วจะช่วยได้ดีที่สุด

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

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

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

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

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

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

บทสรุป

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