ในโมดูลที่ผ่านมา คุณได้เรียนรู้วิธีเพิ่มประสิทธิภาพ 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 และทรัพยากรแบบอักษรจากต้นทางที่แตกต่างกัน
คุณไม่จำเป็นต้องเชื่อมต่อกับบุคคลที่สามโดยการโฮสต์แบบอักษรบนเว็บด้วยตนเอง ในกรณีส่วนใหญ่ การโฮสต์แบบ Self-Hosting สำหรับแบบอักษรบนเว็บจะเร็วกว่าการดาวน์โหลดจากโดเมนแบบข้ามต้นทาง หากวางแผนที่จะโฮสต์แบบอักษรบนเว็บด้วยตนเอง ให้ตรวจสอบว่าเว็บไซต์ใช้เครือข่ายนำส่งข้อมูล (CDN), HTTP/2 หรือ HTTP/3 และตั้งค่าส่วนหัวการแคชที่ถูกต้องสำหรับแบบอักษรบนเว็บที่ต้องการใช้ในเว็บไซต์
ใช้ WOFF2 เท่านั้น
WOFF2 รองรับเบราว์เซอร์ได้หลากหลายและมีการบีบอัดที่ดีที่สุด ซึ่งดีกว่า WOFF ถึง 30% ไฟล์มีขนาดเล็กลงจึงดาวน์โหลดได้เร็วขึ้น โดยปกติแล้ว รูปแบบ WOFF2 มักเป็นรูปแบบเดียวที่จำเป็นสำหรับการใช้งานร่วมกันได้อย่างเต็มที่ในเบราว์เซอร์สมัยใหม่
สร้างชุดย่อยของแบบอักษรเว็บ
โดยปกติแล้วแบบอักษรบนเว็บจะมีสัญลักษณ์ที่หลากหลาย ซึ่งจำเป็นต่อการแสดงอักขระที่หลากหลายซึ่งใช้ในภาษาต่างๆ หากหน้าเว็บแสดงเนื้อหาในภาษาเดียวหรือใช้อักขระชุดเดียว คุณจะลดขนาดแบบอักษรบนเว็บได้โดยใช้การสร้างชุดย่อย ซึ่งมักทำโดยการระบุหมายเลขหรือช่วงของจุดรหัส Unicode
ชุดย่อยคือชุดรูปอักขระที่ลดลงซึ่งรวมอยู่ในไฟล์แบบอักษรเว็บต้นฉบับ ตัวอย่างเช่น แทนที่จะแสดงรูปอักขระทั้งหมด หน้าเว็บอาจแสดงชุดย่อยที่เฉพาะเจาะจงสำหรับอักขระละติน การนำรูปอักขระออกจะช่วยลดขนาดไฟล์แบบอักษรได้อย่างมาก ทั้งนี้ขึ้นอยู่กับชุดย่อยที่จำเป็น
ผู้ให้บริการแบบอักษรบนเว็บบางราย เช่น Google Fonts จะเสนอชุดย่อยโดยอัตโนมัติผ่าน
การใช้พารามิเตอร์สตริงการค้นหา ตัวอย่างเช่น URL https://fonts.googleapis.com/css?family=Roboto&subset=latin จะแสดงสไตล์ชีตที่มีแบบอักษร Roboto บนเว็บซึ่งใช้เฉพาะตัวอักษรละติน
หากตัดสินใจที่จะโฮสต์แบบ Self-Host สำหรับแบบอักษรบนเว็บ ขั้นตอนถัดไปคือการสร้างและ โฮสต์ชุดย่อยเหล่านั้นด้วยตนเองโดยใช้เครื่องมือต่างๆ เช่น 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 มีความแตกต่างกันมากใน
แง่ของความสูงของบรรทัด การเหลื่อมตัวอักษร และเมตริกแบบอักษรอื่นๆ
โดยปกติแล้วการดำเนินการนี้จะไม่ทำให้ 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 ให้น้อยที่สุดได้ในระหว่างระยะเริ่มต้นของหน้าเว็บ ซึ่งเป็นช่วงเวลาที่ผู้ใช้มีแนวโน้มที่จะโต้ตอบกับหน้าเว็บ