ในโมดูลก่อนหน้า คุณได้เรียนรู้วิธีเพิ่มประสิทธิภาพทรัพยากร HTML, CSS, JavaScript และสื่อ ในโมดูลนี้ คุณจะได้เรียนรู้เกี่ยวกับวิธีการเพิ่มประสิทธิภาพแบบอักษรบนเว็บ
แบบอักษรบนเว็บอาจส่งผลต่อประสิทธิภาพของหน้าเว็บทั้งในด้านเวลาที่ใช้ในการโหลดและเวลาในการแสดงผล
ไฟล์แบบอักษรขนาดใหญ่อาจใช้เวลาดาวน์โหลดนานและส่งผลเสียต่อ First
Contentful Paint (FCP) ขณะที่ค่า font-display ที่ไม่ถูกต้อง อาจทำให้เกิด
การเปลี่ยนแปลงการแสดงผลภาพที่ไม่พึงประสงค์
ก่อนที่จะพูดถึงการเพิ่มประสิทธิภาพแบบอักษรบนเว็บ การทราบวิธีที่เบราว์เซอร์ค้นพบแบบอักษรบนเว็บอาจเป็นประโยชน์ เพื่อให้คุณเข้าใจวิธีที่ 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 และแบบอักษรจากต้นทางที่แตกต่างกัน
คุณสามารถขจัดความจำเป็นในการเชื่อมต่อกับบุคคลที่สามได้โดยการโฮสต์แบบอักษรบนเว็บด้วยตนเอง ในกรณีส่วนใหญ่ การโฮสต์แบบอักษรบนเว็บด้วยตนเองจะเร็วกว่าการดาวน์โหลดจากต้นทางข้ามโดเมน หากวางแผนที่จะโฮสต์แบบอักษรบนเว็บด้วยตนเอง ให้ตรวจสอบว่าเว็บไซต์ของคุณใช้ เครือข่ายนำส่งข้อมูล (CDN), HTTP/2 หรือ HTTP/3 และตั้งค่าส่วนหัวการแคชที่ถูกต้องสำหรับแบบอักษรบนเว็บที่เว็บไซต์ของคุณต้องการ
ใช้ 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 ที่จำเป็นสำหรับเว็บไซต์ของคุณ ตัวอย่างเช่น หากคุณมีแบบอักษรบนเว็บที่แสดงในเว็บไซต์ซึ่งจำเป็นต้องใช้เพียงอักขระจำนวนเล็กน้อยสำหรับวลี "Welcome" คุณสามารถขอชุดย่อยดังกล่าวผ่าน 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 ของคุณมีความแตกต่างกันอย่างมากในด้านความสูงของบรรทัด การจัดระยะห่างระหว่างตัวอักษร และเมตริกแบบอักษรอื่นๆ
โดยปกติแล้ววิธีนี้จะไม่ทำให้ Cumulative Layout Shift (CLS) แย่ลงกว่า
block (เนื่องจาก block ต้องจัดวางหน้าเว็บโดยใช้แบบอักษรสำรอง
แม้ว่าจะไม่แสดงข้อความเองก็ตาม ดังนั้นทั้ง 2 วิธีจึงอาจทำให้เนื้อหา
เปลี่ยนแปลง) แต่ก็อาจทำให้เกิดการเปลี่ยนแปลงที่เห็นได้ชัดเจนมากขึ้น
fallback
ค่า fallback ของ font-display เป็นค่าที่ประนีประนอมระหว่าง block กับ swap เบราว์เซอร์จะบล็อกการแสดงผลแบบอักษร แต่จะเปลี่ยนไปใช้ข้อความสำรองเพียงช่วงเวลาสั้นๆ เท่านั้น ซึ่งแตกต่างจาก swap อย่างไรก็ตาม ระยะเวลาการบล็อกจะสั้นมาก ซึ่งแตกต่างจาก block
การใช้ค่า fallback อาจเหมาะกับเครือข่ายที่รวดเร็ว ซึ่งหากแบบอักษรบนเว็บดาวน์โหลดได้อย่างรวดเร็ว แบบอักษรบนเว็บจะเป็นแบบอักษรที่ใช้ทันทีในการแสดงผลครั้งแรกของหน้าเว็บ อย่างไรก็ตาม หากเครือข่ายช้า ผู้ใช้จะเห็นข้อความสำรองก่อนหลังจากระยะเวลาการบล็อกผ่านไป แล้วข้อความสำรองจะถูกแทนที่เมื่อแบบอักษรบนเว็บมาถึง
optional
optional เป็นค่า font-display ที่เข้มงวดที่สุด และจะใช้ทรัพยากรแบบอักษรบนเว็บก็ต่อเมื่อดาวน์โหลดภายใน 100 มิลลิวินาทีเท่านั้น หากแบบอักษรบนเว็บใช้เวลาโหลดนานกว่านั้น ระบบจะไม่ใช้แบบอักษรบนเว็บในหน้าเว็บ และเบราว์เซอร์จะใช้แบบตัวพิมพ์สำรองสำหรับการนำทางปัจจุบันขณะที่ดาวน์โหลดแบบอักษรบนเว็บในเบื้องหลังและวางไว้ในแคชของเบราว์เซอร์
ด้วยเหตุนี้ การนำทางหน้าเว็บในภายหลังจึงใช้แบบอักษรบนเว็บได้ทันที เนื่องจากดาวน์โหลดแล้ว font-display: optional จะหลีกเลี่ยงการเปลี่ยนแปลงที่มองเห็นได้ซึ่งพบใน swap แต่ผู้ใช้บางรายจะไม่เห็นแบบอักษรบนเว็บหากแบบอักษรบนเว็บมาถึงช้าเกินไปในการนำทางหน้าเว็บครั้งแรก
ตัวอย่างแบบอักษร
ทดสอบความรู้ของคุณ
เบราว์เซอร์จะดาวน์โหลดทรัพยากรแบบอักษรบนเว็บเมื่อใด (สมมติว่าไม่ได้
ดึงข้อมูลด้วยคําสั่ง preload)
รูปแบบเดียว (และมีประสิทธิภาพมากที่สุด) ที่จำเป็นในการแสดงแบบอักษรบนเว็บ ในเบราว์เซอร์สมัยใหม่ทั้งหมดคือรูปแบบใด
รายการถัดไป: การแยกโค้ด JavaScript
เมื่อเข้าใจการเพิ่มประสิทธิภาพแบบอักษรแล้ว ตอนนี้คุณก็พร้อมที่จะไปยังโมดูลถัดไป ซึ่งจะครอบคลุมหัวข้อที่มีศักยภาพสูงในการปรับปรุง ความเร็วในการโหลดหน้าเว็บครั้งแรกสำหรับผู้ใช้ นั่นคือการเลื่อนการโหลด JavaScript ผ่านการแยกโค้ด การทำเช่นนี้จะช่วยให้คุณรักษาแบนด์วิดท์และการแย่งชิง CPU ให้น้อยที่สุดในช่วงเริ่มต้นของหน้าเว็บ ซึ่งเป็นช่วงเวลาที่ผู้ใช้มีแนวโน้มที่จะโต้ตอบกับหน้าเว็บ