WebFont แบบ "สมบูรณ์" ที่มีตัวแปรด้านสไตล์ทั้งหมดซึ่งคุณอาจไม่จำเป็นต้องใช้ บวกกับรูปอักขระทั้งหมดที่อาจไม่มีการใช้งาน ทำให้มีการดาวน์โหลดขนาดหลายเมกะไบต์ได้โดยง่าย ในโพสต์นี้ คุณจะได้ทราบวิธีเพิ่มประสิทธิภาพการโหลด WebFonts เพื่อให้ผู้เข้าชมดาวน์โหลดเฉพาะสิ่งที่จะใช้เท่านั้น
เพื่อแก้ปัญหาของไฟล์ขนาดใหญ่ที่มีตัวแปรทั้งหมด
กฎ CSS @font-face
ออกแบบมาโดยเฉพาะเพื่อช่วยให้คุณแยกชุดแบบอักษรออกเป็นคอลเล็กชันทรัพยากรได้ เช่น ชุดย่อย Unicode และตัวแปรของรูปแบบที่แตกต่างกัน
ด้วยการประกาศเหล่านี้ เบราว์เซอร์จะรู้ชุดย่อยและตัวแปรที่จำเป็น รวมถึงดาวน์โหลดชุดขั้นต่ำที่จำเป็นเพื่อแสดงผลข้อความ ซึ่งเป็นวิธีที่สะดวกมาก อย่างไรก็ตาม หากคุณไม่ระมัดระวัง ก็อาจทำให้เกิดจุดคอขวดของประสิทธิภาพในเส้นทางการแสดงผลวิกฤติและหน่วงเวลาการแสดงผลข้อความได้เช่นกัน
ลักษณะการทำงานเริ่มต้น
การโหลดแบบ 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
ได้ในโพสต์ต่อไปนี้
- หลีกเลี่ยงข้อความที่มองไม่เห็นระหว่างการโหลดแบบอักษร
- การควบคุมประสิทธิภาพของแบบอักษรโดยใช้การแสดงแบบอักษร
- ป้องกันการเปลี่ยนเลย์เอาต์และการกะพริบของข้อความที่ไม่มองไม่เห็น (FOIT) โดยการโหลดแบบอักษรที่ไม่บังคับล่วงหน้า
API การโหลดแบบอักษร
เมื่อใช้ร่วมกัน <link rel="preload">
และ CSS font-display
จะช่วยให้คุณควบคุมการโหลดและการแสดงผลแบบอักษรได้อย่างดีเยี่ยมโดยไม่ต้องเพิ่มค่าใช้จ่ายในการดำเนินการมากนัก
แต่หากคุณต้องการการปรับแต่งเพิ่มเติม
และต้องการลดค่าใช้จ่ายที่เกิดจากการเรียกใช้ JavaScript คุณก็มีอีกตัวเลือกหนึ่ง
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 แบบมีเงื่อนไขและนโยบายการควบคุมแคชที่ดีที่สุดสำหรับทรัพยากรแบบอักษรทั้งหมด
หากเว็บแอปพลิเคชันของคุณใช้โปรแกรมทำงานของบริการ การแสดงทรัพยากรแบบอักษรด้วยกลยุทธ์แบบเน้นแคชจะเหมาะสำหรับกรณีการใช้งานส่วนใหญ่
คุณไม่ควรจัดเก็บแบบอักษรโดยใช้ localStorage
หรือ IndexedDB เนื่องจากแต่ละแบบอักษรมีชุดปัญหาด้านประสิทธิภาพที่แตกต่างกัน
แคช HTTP ของเบราว์เซอร์มีกลไกที่ดีและมีประสิทธิภาพที่สุดในการส่งทรัพยากรแบบอักษรไปยังเบราว์เซอร์
รายการตรวจสอบการโหลด WebFont
- ปรับแต่งการโหลดและการแสดงผลแบบอักษรโดยใช้
<link rel="preload">
,font-display
หรือ API การโหลดแบบอักษร: ลักษณะการทำงานเริ่มต้นของ Lazy Loading อาจทำให้การแสดงผลข้อความล่าช้า ฟีเจอร์ของแพลตฟอร์มเว็บเหล่านี้ช่วยให้คุณลบล้างลักษณะการทำงานนี้สำหรับแบบอักษรหนึ่งๆ รวมถึงระบุกลยุทธ์การแสดงผลที่กำหนดเองและระยะหมดเวลาสำหรับเนื้อหาต่างๆ ในหน้าเว็บได้ - กำหนดนโยบายการตรวจสอบความถูกต้องอีกครั้งและการแคชที่เหมาะสม: แบบอักษรเป็นทรัพยากรแบบคงที่ที่มีการอัปเดตไม่บ่อยนัก ตรวจสอบว่าเซิร์ฟเวอร์ให้การประทับเวลาอายุสูงสุดและโทเค็นการตรวจสอบความถูกต้องอีกครั้งเพื่อให้นำแบบอักษรกลับมาใช้ซ้ำระหว่างหน้าต่างๆ ได้อย่างมีประสิทธิภาพ หากใช้โปรแกรมทำงานของบริการ กลยุทธ์ที่เน้นแคชเป็นอันดับแรกก็เหมาะสม
การทดสอบอัตโนมัติสำหรับลักษณะการโหลด WebFont ด้วย Lighthouse
Lighthouse ช่วยให้กระบวนการทำงานโดยอัตโนมัติช่วยให้คุณทำตามแนวทางปฏิบัติแนะนำในการเพิ่มประสิทธิภาพแบบอักษรเว็บได้
การตรวจสอบต่อไปนี้จะช่วยให้คุณมั่นใจได้ว่าหน้าเว็บของคุณเป็นไปตามแนวทางปฏิบัติแนะนำในการเพิ่มประสิทธิภาพแบบอักษรเว็บเมื่อเวลาผ่านไป