ในโมดูลที่ผ่านมา คุณได้เรียนรู้วิธีเพิ่มประสิทธิภาพทรัพยากรสื่อ HTML, CSS, JavaScript และสื่อ ในโมดูลนี้ คุณจะได้ดูวิธีเพิ่มประสิทธิภาพแบบอักษรเว็บ
แบบอักษรของเว็บสามารถส่งผลต่อประสิทธิภาพของหน้าเว็บทั้งเวลาที่ใช้ในการโหลดและเวลาในการแสดงผล
ไฟล์แบบอักษรขนาดใหญ่อาจใช้เวลาสักครู่ในการดาวน์โหลดและส่งผลเสียต่อ First
Contentful Paint (FCP) ในขณะที่ค่า font-display ที่ไม่ถูกต้องอาจทำให้เกิดการเปลี่ยนแปลงของเลย์เอาต์ที่ไม่พึงประสงค์ซึ่งส่งผลต่อ Cumulative Layout Shift
(CLS) ของหน้าเว็บ
ก่อนจะทำการเพิ่มประสิทธิภาพสำหรับแบบอักษรของเว็บ การทราบว่าเบราว์เซอร์ค้นพบแบบอักษรนี้ได้อย่างไร เพื่อจะได้เข้าใจวิธีที่ CSS ป้องกันการดึงข้อมูลแบบอักษรบนเว็บที่ไม่จำเป็นในบางสถานการณ์
Discovery
ระบบจะกำหนดแบบอักษรสำหรับเว็บของหน้าเว็บไว้ในสไตล์ชีตโดยใช้การประกาศ @font-face ดังนี้
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
ข้อมูลโค้ดที่อยู่ก่อนหน้าจะกำหนด font-family ที่ชื่อว่า "Open Sans" และบอกเบราว์เซอร์ว่าจะค้นหาทรัพยากรแบบอักษรบนเว็บที่เกี่ยวข้องได้จากที่ใด เพื่อประหยัดแบนด์วิดท์ เบราว์เซอร์จะไม่ดาวน์โหลดแบบอักษรของเว็บจนกว่าจะระบุว่าเลย์เอาต์ของหน้าปัจจุบันจำเป็นต้องใช้
h1 {
font-family: "Open Sans";
}
ในข้อมูลโค้ด CSS ก่อนหน้านี้ เบราว์เซอร์จะดาวน์โหลดไฟล์แบบอักษร "Open Sans" เมื่อมีการแยกวิเคราะห์องค์ประกอบ <h1> ใน HTML ของหน้าเว็บ
preload
หากการประกาศ @font-face ของคุณกำหนดไว้ในสไตล์ชีตภายนอก เบราว์เซอร์จะเริ่มดาวน์โหลดได้หลังจากดาวน์โหลดสไตล์ชีตแล้วเท่านั้น
สิ่งนี้ทำให้แบบอักษรบนเว็บมีการค้นพบล่าช้า แต่ก็มีหลายวิธีที่จะช่วยให้เบราว์เซอร์ค้นพบแบบอักษรของเว็บได้เร็วขึ้น
คุณเริ่มคำขอทรัพยากรแบบอักษรของเว็บล่วงหน้าได้โดยใช้คำสั่ง preload คำสั่ง preload ทำให้ค้นพบแบบอักษรเว็บได้ตั้งแต่เนิ่นๆ ระหว่างที่หน้าเว็บโหลด และเบราว์เซอร์จะเริ่มดาวน์โหลดทันทีโดยไม่ต้องรอให้สไตล์ชีตดาวน์โหลดและแยกวิเคราะห์เสร็จ คำสั่ง preload จะไม่รอจนกว่าต้องใช้แบบอักษรในหน้า
<!-- The `crossorigin` attribute is required for fonts—even
self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>
การประกาศ @font-face ในหน้า
คุณทำให้แบบอักษรค้นพบได้ก่อนหน้านี้ระหว่างการโหลดหน้าเว็บโดยแทรก CSS ที่บล็อกการแสดงผลไว้ ซึ่งรวมถึงการประกาศ @font-face ใน <head> ของ HTML โดยใช้องค์ประกอบ <style> ในกรณีนี้ เบราว์เซอร์จะค้นพบแบบอักษรของเว็บในการโหลดหน้าเว็บล่วงหน้า เนื่องจากไม่จำเป็นต้องรอให้ชีตรูปแบบภายนอกดาวน์โหลด
ในหน้าการประกาศ @font-face จะมีข้อดีมากกว่าการใช้คำแนะนำ preload เนื่องจากเบราว์เซอร์จะดาวน์โหลดเฉพาะแบบอักษรที่จำเป็นต่อการแสดงผลหน้าปัจจุบันเท่านั้น ซึ่งจะช่วยลดความเสี่ยงในการดาวน์โหลดแบบอักษรที่ไม่ได้ใช้
ดาวน์โหลด
หลังจากค้นพบแบบอักษรของเว็บและตรวจสอบว่าจำเป็นต้องใช้เลย์เอาต์ของหน้าปัจจุบันแล้ว เบราว์เซอร์ก็จะดาวน์โหลดแบบอักษรเหล่านั้นได้ จำนวนแบบอักษรสำหรับเว็บ การเข้ารหัส และขนาดไฟล์ของแบบอักษรนั้นอาจมีผลกระทบอย่างมากต่อความเร็วในการดาวน์โหลดและแสดงผลแบบอักษรของเว็บ
โฮสต์แบบอักษรบนเว็บด้วยตนเอง
แบบอักษรของเว็บจะแสดงผ่านบริการของบุคคลที่สาม เช่น Google Fonts หรือโฮสต์ด้วยตนเองในต้นทางได้ เมื่อใช้บริการของบุคคลที่สาม หน้าเว็บของคุณต้องเปิดการเชื่อมต่อกับโดเมนของผู้ให้บริการก่อนที่จะเริ่มดาวน์โหลดแบบอักษรสำหรับเว็บที่จำเป็นได้ ซึ่งอาจทำให้การค้นพบและ การดาวน์โหลดแบบอักษรบนเว็บล่าช้าออกไปได้
ลดค่าใช้จ่ายส่วนนี้ได้โดยใช้คำแนะนำแหล่งข้อมูล preconnect เมื่อใช้ preconnect คุณจะบอกให้เบราว์เซอร์เปิดการเชื่อมต่อกับข้ามต้นทางเร็วกว่าที่เบราว์เซอร์โดยปกติจะทำได้ดังนี้
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
ข้อมูลโค้ด HTML ก่อนหน้านี้เป็นการชี้แนะให้เบราว์เซอร์สร้างการเชื่อมต่อกับ fonts.googleapis.com และการเชื่อมต่อ CORS กับ fonts.gstatic.com ผู้ให้บริการแบบอักษรบางราย เช่น Google Fonts จะให้บริการทรัพยากร CSS และแบบอักษรจากต้นทางที่แตกต่างกัน
คุณจึงไม่จำเป็นต้องเชื่อมต่อกับบุคคลที่สามด้วยการโฮสต์แบบอักษรในเว็บด้วยตัวเอง ในกรณีส่วนใหญ่ แบบอักษรสำหรับเว็บแบบโฮสติ้งของตัวเองจะเร็วกว่าการดาวน์โหลดจากแบบข้ามต้นทาง หากคุณวางแผนที่จะใช้แบบอักษรสำหรับเว็บแบบโฮสต์ตัวเอง ให้ตรวจสอบว่าเว็บไซต์ใช้ Content Delivery Network (CDN), HTTP/2 หรือ HTTP/3 และตั้งค่าส่วนหัวการแคชที่ถูกต้องสำหรับแบบอักษรเว็บที่จำเป็นสำหรับเว็บไซต์
ใช้ WOFF2 และ WOFF2 เท่านั้น
WOFF2 ใช้การรองรับเบราว์เซอร์แบบกว้างและการบีบอัดที่ดีที่สุด ซึ่งดีกว่า WOFF ถึง 30% ไฟล์ที่ลดขนาดจะช่วยให้ดาวน์โหลดได้เร็วขึ้น รูปแบบไฟล์ WOFF2 มักเป็นเพียงรูปแบบเดียวที่จำเป็นสำหรับความเข้ากันได้อย่างสมบูรณ์ในเบราว์เซอร์ใหม่ๆ
ตั้งค่าแบบอักษรเว็บ
โดยทั่วไปแบบอักษรบนเว็บจะมีรูปอักขระต่างๆ อยู่มากมาย ซึ่งจำเป็นต้องมีเพื่อแสดงถึงอักขระอันหลากหลายที่ใช้ในภาษาต่างๆ หากหน้าเว็บแสดงเนื้อหาในภาษาเดียวหรือใช้ตัวอักษรเพียงตัวเดียว คุณจะลดขนาดแบบอักษรของเว็บผ่านการตั้งค่าย่อยได้ ซึ่งมักจะทำโดยการระบุตัวเลขหรือช่วงของจุดของโค้ด Unicode
ส่วนย่อยคือชุดอักขระที่ลดลงซึ่งรวมอยู่ในไฟล์แบบอักษรของเว็บต้นฉบับ เช่น แทนที่จะแสดงรูปอักขระทั้งหมด หน้าเว็บอาจแสดงชุดย่อยที่เจาะจงสำหรับอักขระละติน การนำรูปอักขระออกอาจลดขนาดไฟล์แบบอักษรลงอย่างมาก ทั้งนี้ขึ้นอยู่กับชุดย่อยที่ต้องการ
ผู้ให้บริการแบบอักษรสำหรับเว็บบางราย เช่น Google Fonts จะเสนอส่วนย่อยโดยอัตโนมัติผ่านการใช้พารามิเตอร์สตริงคำค้นหา ตัวอย่างเช่น URL https://fonts.googleapis.com/css?family=Roboto&subset=latin จะแสดงสไตล์ชีตที่มีแบบอักษรสำหรับเว็บ Roboto ซึ่งใช้เฉพาะตัวอักษรละติน
หากคุณตัดสินใจที่จะโฮสต์แบบอักษรของเว็บด้วยตนเอง ขั้นตอนถัดไปคือการสร้างและโฮสต์ชุดย่อยเหล่านั้นด้วยตนเองโดยใช้เครื่องมือ เช่น glyphanger หรือ subfont
อย่างไรก็ตาม หากโฮสต์แบบอักษรบนเว็บของคุณเองไม่ได้ คุณอาจตั้งค่าแบบอักษรเว็บที่ Google Fonts ให้ไว้ให้โดยการระบุพารามิเตอร์สตริงคำค้นหา text เพิ่มเติมที่มีเฉพาะจุดโค้ด Unicode ที่จำเป็นสำหรับเว็บไซต์เท่านั้น ตัวอย่างเช่น หากคุณมีแบบอักษรของเว็บที่แสดงบนเว็บไซต์ซึ่งต้องใช้อักขระเพียงไม่กี่ตัวเท่านั้นสำหรับวลี "ยินดีต้อนรับ" คุณขอชุดย่อยดังกล่าวผ่าน Google Fonts ได้ผ่าน URL ต่อไปนี้
https://fonts.googleapis.com/css?family=Monoton&text=Welcome วิธีนี้จะช่วยลดปริมาณข้อมูลแบบอักษรของเว็บที่ต้องใช้สำหรับแบบอักษรเดี่ยวในเว็บไซต์ได้อย่างมาก หากการตั้งค่าย่อยดังกล่าวมีประโยชน์ในเว็บไซต์ของคุณ
การแสดงแบบอักษร
หลังจากค้นพบและดาวน์โหลดแบบอักษรเว็บแล้ว ก็จะแสดงผลได้ โดยค่าเริ่มต้น เบราว์เซอร์จะบล็อกการแสดงผลของข้อความที่ใช้แบบอักษรเว็บจนกว่าจะมีการดาวน์โหลด คุณสามารถปรับลักษณะการแสดงข้อความของเบราว์เซอร์และกำหนดค่าข้อความที่ควรแสดงหรือไม่แสดงได้จนกว่าเว็บฟอนต์จะโหลดอย่างสมบูรณ์โดยใช้พร็อพเพอร์ตี้ CSS font-display
block
ค่าเริ่มต้นสำหรับ font-display คือ block เมื่อใช้ block เบราว์เซอร์จะบล็อกการแสดงผลข้อความที่ใช้แบบอักษรเว็บที่ระบุ เบราว์เซอร์ที่ต่างกัน
จะมีลักษณะการทำงานที่ต่างกันเล็กน้อย Chromium และ Firefox
บล็อกการแสดงผลสูงสุด 3 วินาทีก่อนใช้โฆษณาสำรอง Safari จะบล็อกไปเรื่อยๆ
จนกว่าแบบอักษรของเว็บจะโหลด
swap
swap คือค่า font-display ที่ใช้กันอย่างแพร่หลายมากที่สุด swap จะไม่บล็อกการแสดงผล และแสดงข้อความทันทีในโฆษณาสำรองก่อนที่จะสลับในแบบอักษรของเว็บที่ระบุ วิธีนี้ช่วยให้คุณสามารถแสดงเนื้อหาได้ทันทีโดยไม่ต้องรอให้ดาวน์โหลดแบบอักษรของเว็บ
อย่างไรก็ตาม ข้อเสียของ swap คือทำให้เกิดการเปลี่ยนเลย์เอาต์หากแบบอักษรของเว็บสำรองและแบบอักษรของเว็บที่ระบุใน CSS แตกต่างกันอย่างมากในแง่ของความสูงของบรรทัด การจัดช่องไฟ และเมตริกแบบอักษรอื่นๆ การดําเนินการนี้อาจส่งผลต่อ CLS ของเว็บไซต์หากคุณไม่ใช้คําแนะนํา preload เพื่อโหลดทรัพยากรแบบอักษรของเว็บโดยเร็วที่สุดหรือไม่พิจารณาค่า font-display อื่นๆ
fallback
ค่า fallback สำหรับ font-display เป็นจำนวนที่ใกล้เคียงกันระหว่าง block กับ swap เบราว์เซอร์จะบล็อกการแสดงแบบอักษรซึ่งต่างจาก swap แต่จะสลับข้อความสำรองในระยะเวลาสั้นๆ เท่านั้น แต่ต่างจาก block ตรงที่ระยะเวลาการบล็อกสั้นมาก
การใช้ค่า fallback จะทำงานได้ดีในเครือข่ายที่เร็ว ซึ่งหากแบบอักษรของเว็บดาวน์โหลดได้อย่างรวดเร็ว แบบอักษรของเว็บจะเป็นแบบอักษรที่ใช้ทันทีในการแสดงผลครั้งแรกของหน้าเว็บ อย่างไรก็ตาม หากเครือข่ายช้า ข้อความสำรองจะแสดงขึ้นก่อนหลังจากผ่านช่วงการบล็อกไปแล้ว จากนั้นจะสลับออกเมื่อแบบอักษรของเว็บมาถึง
optional
optional เป็นค่า font-display ที่เข้มงวดที่สุดและใช้ทรัพยากรแบบอักษรบนเว็บเฉพาะในกรณีที่ดาวน์โหลดภายใน 100 มิลลิวินาที หากเว็บฟอนต์ใช้เวลาโหลดนานกว่า ระบบจะไม่ใช้แบบอักษรดังกล่าวในหน้าเว็บ และเบราว์เซอร์จะใช้แบบอักษรสำรองสำหรับการนำทางปัจจุบันเมื่อมีการดาวน์โหลดแบบอักษรของเว็บในพื้นหลังและวางไว้ในแคชของเบราว์เซอร์
ดังนั้น การนำทางหน้าเว็บในลำดับต่อๆ ไปจึงสามารถใช้แบบอักษรของเว็บได้ทันที เนื่องจากมีการดาวน์โหลดไว้แล้ว font-display: optional หลีกเลี่ยงการเปลี่ยนแปลงเลย์เอาต์ที่เห็นใน swap แต่ผู้ใช้บางรายจะไม่เห็นแบบอักษรของเว็บหากมาถึงช้าเกินไปในการนำทางหน้าเว็บเริ่มต้น
การสาธิตแบบอักษร
ทดสอบความรู้ของคุณ
เบราว์เซอร์จะดาวน์โหลดทรัพยากรแบบอักษรสำหรับเว็บได้เมื่อใด (ในกรณีที่ไม่ได้ดึงข้อมูลด้วยคำสั่ง preload)
รูปแบบใดคือรูปแบบเดียว (และมีประสิทธิภาพมากที่สุด) ที่จำเป็นต่อการแสดงแบบอักษรเว็บในเบราว์เซอร์สมัยใหม่ทั้งหมด
ถัดไป: JavaScript ที่แยกโค้ด
เมื่อมีความเข้าใจเกี่ยวกับการเพิ่มประสิทธิภาพแบบอักษรแล้ว คุณก็สามารถไปยังโมดูลถัดไปซึ่งครอบคลุมหัวข้อที่มีศักยภาพสูงในการปรับปรุงความเร็วในการโหลดหน้าเว็บเริ่มต้นสำหรับผู้ใช้ และเพื่อเลื่อนการโหลด JavaScript ผ่านการแยกโค้ด วิธีนี้จะทำให้คุณควบคุมแบนด์วิดท์และการช่วงชิง CPU ให้น้อยที่สุดในช่วงเริ่มต้นของหน้าเว็บซึ่งเป็นระยะเวลาที่ผู้ใช้มีแนวโน้มที่จะโต้ตอบกับหน้านั้น