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

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

Katie Hempenius
Katie Hempenius
X
Barry Pollard

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

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

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

กำลังโหลดแบบอักษร

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

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

ภาพหน้าจอของแท็บระยะเวลาในเครื่องมือสำหรับนักพัฒนาเว็บ

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

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

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

ใช้ WOFF2

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

เนื่องจากมีการรองรับเบราว์เซอร์ ผู้เชี่ยวชาญจึงแนะนำให้ใช้ WOFF2 เท่านั้น:

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

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

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

สำหรับเว็บไซต์ส่วนใหญ่ กลยุทธ์สามแบบที่ใช้ได้มากที่สุดมีดังนี้

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

บทสรุป

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