เพิ่มประสิทธิภาพการโหลดและการแสดงผล WebFont

Ilya Grigorik

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

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

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

ลักษณะการทำงานเริ่มต้น

การโหลดแบบ Lazy Loading ของแบบอักษรจะมีนัยสำคัญที่ซ่อนอยู่ซึ่งอาจทําให้ข้อความแสดงผลล่าช้า เบราว์เซอร์ต้องสร้างโครงสร้างการแสดงผลซึ่งอาศัยต้นไม้ DOM และ CSSOM เพื่อให้รู้ว่าต้องใช้ทรัพยากรแบบอักษรใดในการแสดงผลข้อความ ดังนั้น คำขอแบบอักษรจะล่าช้าหลังจากทรัพยากรที่สำคัญอื่นๆ และเบราว์เซอร์อาจถูกบล็อกไม่ให้แสดงผลข้อความจนกว่าจะมีการดึงทรัพยากร

เส้นทางการแสดงผลวิกฤติแบบอักษร

  1. เบราว์เซอร์ขอเอกสาร HTML
  2. เบราว์เซอร์จะเริ่มแยกวิเคราะห์การตอบกลับ HTML และสร้าง DOM
  3. เบราว์เซอร์จะค้นพบ CSS, JS และทรัพยากรอื่นๆ รวมทั้งส่งคำขอ
  4. เบราว์เซอร์จะสร้าง CSSOM หลังจากได้รับเนื้อหา CSS ทั้งหมดและรวมกับต้นไม้ DOM เพื่อสร้างโครงสร้างการแสดงผล
    • ระบบจะส่งคำขอแบบอักษรหลังจากโครงสร้างการแสดงผลระบุว่าต้องใช้ตัวแปรแบบอักษรใดเพื่อแสดงข้อความที่ระบุในหน้าเว็บ
  5. เบราว์เซอร์จะดำเนินการเลย์เอาต์และระบายสีเนื้อหาไปยังหน้าจอ
    • หากแบบอักษรยังไม่พร้อมใช้งาน เบราว์เซอร์อาจไม่แสดงพิกเซลข้อความใดๆ
    • หลังจากแบบอักษรพร้อมใช้งานแล้ว เบราว์เซอร์จะระบายสีพิกเซลข้อความ

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

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

โหลดทรัพยากร WebFont ล่วงหน้า

หากมีความเป็นไปได้สูงที่หน้าเว็บจะต้องใช้ WebFont ที่เฉพาะเจาะจงซึ่งโฮสต์ที่ URL ที่คุณทราบล่วงหน้า คุณใช้ประโยชน์จากการจัดลำดับความสำคัญของทรัพยากรได้ การใช้ <link rel="preload"> จะทริกเกอร์คำขอสำหรับ WebFont ก่อนในเส้นทางการแสดงผลวิกฤติ โดยไม่ต้องรอให้สร้าง CSSOM

ปรับแต่งการหน่วงเวลาการแสดงผลข้อความ

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

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

การสนับสนุนเบราว์เซอร์

  • 60
  • 79
  • 58
  • 11.1

แหล่งที่มา

เช่นเดียวกับลักษณะการหมดเวลาแบบอักษรที่มีอยู่ซึ่งบางเบราว์เซอร์ใช้ font-display จะแบ่งอายุการใช้งานของการดาวน์โหลดแบบอักษรออกเป็น 3 ช่วงเวลาหลักๆ ดังนี้

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

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

หากต้องการทำงานกับพร็อพเพอร์ตี้ font-display ให้เพิ่มพร็อพเพอร์ตี้ลงในกฎ @font-face ดังนี้

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  font-display: auto; /* or block, swap, fallback, optional */
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2'), /* will be preloaded */
       url('/fonts/awesome-l.woff') format('woff'),
       url('/fonts/awesome-l.ttf') format('truetype'),
       url('/fonts/awesome-l.eot') format('embedded-opentype');
  unicode-range: U+000-5FF; /* Latin glyphs */
}

ปัจจุบัน font-display รองรับช่วงค่าต่อไปนี้

  • auto
  • block
  • swap
  • fallback
  • optional

ดูข้อมูลเพิ่มเติมเกี่ยวกับการโหลดแบบอักษรล่วงหน้าและพร็อพเพอร์ตี้ font-display ได้ในโพสต์ต่อไปนี้

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

เมื่อใช้ร่วมกัน <link rel="preload"> และ CSS font-display จะช่วยให้คุณควบคุมการโหลดและการแสดงผลแบบอักษรได้อย่างดีเยี่ยมโดยไม่ต้องเพิ่มค่าใช้จ่ายในการดำเนินการมากนัก แต่หากคุณต้องการการปรับแต่งเพิ่มเติม และต้องการลดค่าใช้จ่ายที่เกิดจากการเรียกใช้ JavaScript คุณก็มีอีกตัวเลือกหนึ่ง

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

การสนับสนุนเบราว์เซอร์

  • 35
  • 79
  • 41
  • 10

แหล่งที่มา

var font = new FontFace("Awesome Font", "url(/fonts/awesome.woff2)", {
  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});

// don't wait for the render tree, initiate an immediate fetch!
font.load().then(function() {
  // apply the font (which may re-render text and cause a page reflow)
  // after the font has finished downloading
  document.fonts.add(font);
  document.body.style.fontFamily = "Awesome Font, serif";

  // OR... by default the content is hidden,
  // and it's rendered after the font is available
  var content = document.getElementById("content");
  content.style.visibility = "visible";

  // OR... apply your own render strategy here...
});

นอกจากนี้ เนื่องจากคุณตรวจสอบสถานะแบบอักษร (ผ่านเมธอด check()) และติดตามความคืบหน้าในการดาวน์โหลดได้ คุณจึงกำหนดกลยุทธ์ที่กำหนดเองสำหรับการแสดงผลข้อความในหน้าเว็บได้ด้วย โดยทำดังนี้

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

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

การแคชที่เหมาะสมเป็นสิ่งสำคัญ

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

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

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

รายการตรวจสอบการโหลด WebFont

  • ปรับแต่งการโหลดและการแสดงผลแบบอักษรโดยใช้ <link rel="preload">, font-display หรือ API การโหลดแบบอักษร: ลักษณะการทำงานเริ่มต้นของ Lazy Loading อาจทำให้การแสดงผลข้อความล่าช้า ฟีเจอร์ของแพลตฟอร์มเว็บเหล่านี้ช่วยให้คุณลบล้างลักษณะการทำงานนี้สำหรับแบบอักษรหนึ่งๆ รวมถึงระบุกลยุทธ์การแสดงผลที่กำหนดเองและระยะหมดเวลาสำหรับเนื้อหาต่างๆ ในหน้าเว็บได้
  • กำหนดนโยบายการตรวจสอบความถูกต้องอีกครั้งและการแคชที่เหมาะสม: แบบอักษรเป็นทรัพยากรแบบคงที่ที่มีการอัปเดตไม่บ่อยนัก ตรวจสอบว่าเซิร์ฟเวอร์ให้การประทับเวลาอายุสูงสุดและโทเค็นการตรวจสอบความถูกต้องอีกครั้งเพื่อให้นำแบบอักษรกลับมาใช้ซ้ำระหว่างหน้าต่างๆ ได้อย่างมีประสิทธิภาพ หากใช้โปรแกรมทำงานของบริการ กลยุทธ์ที่เน้นแคชเป็นอันดับแรกก็เหมาะสม

การทดสอบอัตโนมัติสำหรับลักษณะการโหลด WebFont ด้วย Lighthouse

Lighthouse ช่วยให้กระบวนการทำงานโดยอัตโนมัติช่วยให้คุณทำตามแนวทางปฏิบัติแนะนำในการเพิ่มประสิทธิภาพแบบอักษรเว็บได้

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