หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Ilya Grigorik

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

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

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

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

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

เบราว์เซอร์ขอเอกสาร HTML
เบราว์เซอร์จะเริ่มแยกวิเคราะห์การตอบกลับ HTML และสร้าง DOM
จากนั้นเบราว์เซอร์จะค้นหา CSS, JS และทรัพยากรอื่นๆ รวมถึงส่งคําขอ
เบราว์เซอร์จะสร้าง CSSOM หลังจากที่ได้รับเนื้อหา CSS ทั้งหมดแล้ว และรวมเข้ากับต้นไม้ DOM เพื่อสร้างต้นไม้การแสดงผล
- ระบบจะส่งคําขอแบบอักษรหลังจากที่ต้นไม้แสดงผลระบุรูปแบบแบบอักษรที่จําเป็นต่อการแสดงผลข้อความที่ระบุในหน้าเว็บ
เบราว์เซอร์จะจัดวางและแสดงเนื้อหาบนหน้าจอ
- หากแบบอักษรยังไม่พร้อมใช้งานเบราว์เซอร์อาจไม่แสดงผลพิกเซลข้อความ
- หลังจากมีแบบอักษรแล้ว เบราว์เซอร์จะวาดพิกเซลข้อความ

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

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

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

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

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

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

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

การรองรับเบราว์เซอร์

แหล่งที่มา

font-displayแบ่งอายุการใช้งานของการดาวน์โหลดแบบอักษรออกเป็น 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 ได้ที่โพสต์ต่อไปนี้

Font Loading API

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

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

การรองรับเบราว์เซอร์

แหล่งที่มา

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 จึงเหมาะสําหรับการหมดอายุของ max-age ที่นาน โปรดตรวจสอบว่าคุณได้ระบุทั้งส่วนหัว ETag แบบมีเงื่อนไขและนโยบาย Cache-Control ที่ดีที่สุดสําหรับทรัพยากรแบบฟอนต์ทั้งหมด

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

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

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

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

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

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

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