ในโมดูลที่ผ่านมา คุณได้เรียนรู้วิธีเพิ่มประสิทธิภาพ HTML, CSS, JavaScript และทรัพยากรสื่อ ในโมดูลนี้ คุณจะได้เรียนรู้วิธีเพิ่มประสิทธิภาพแบบอักษรบนเว็บ
แบบอักษรบนเว็บอาจส่งผลต่อประสิทธิภาพของหน้าเว็บทั้งในเวลาโหลดและเวลาในการแสดงผล
ไฟล์แบบอักษรขนาดใหญ่อาจใช้เวลาในการดาวน์โหลดนานและส่งผลเสียต่อFirst
Contentful Paint (FCP) ในขณะที่ค่า font-display ที่ไม่ถูกต้องอาจทำให้เกิด
การเปลี่ยนเลย์เอาต์ที่ไม่พึงประสงค์ซึ่งส่งผลต่อการเปลี่ยนเลย์เอาต์สะสม
(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 และทรัพยากรแบบอักษรจากต้นทางที่แตกต่างกัน
คุณไม่จำเป็นต้องเชื่อมต่อกับบุคคลที่สามโดยการโฮสต์แบบ อักษรเว็บด้วยตนเอง ในกรณีส่วนใหญ่ การโฮสต์แบบ Self-Hosting สำหรับแบบอักษรบนเว็บจะเร็วกว่าการดาวน์โหลดจากโดเมนที่ต่างกัน หากวางแผนที่จะโฮสต์แบบอักษรบนเว็บด้วยตนเอง ให้ตรวจสอบว่าเว็บไซต์ใช้เครือข่ายนำส่งข้อมูล (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 ซึ่งจะช่วยลดปริมาณข้อมูลแบบอักษรบนเว็บที่จำเป็นสำหรับแบบอักษรเดียวในเว็บไซต์ได้อย่างมาก หากการแบ่งชุดย่อยที่มากเช่นนี้มีประโยชน์ในเว็บไซต์
การแสดงผลแบบอักษร
หลังจากที่เบราว์เซอร์ค้นพบและดาวน์โหลดแบบอักษรบนเว็บแล้ว ก็จะแสดงผลได้
โดยค่าเริ่มต้น เบราว์เซอร์จะบล็อกการแสดงผลข้อความที่ใช้
แบบอักษรบนเว็บจนกว่าจะดาวน์โหลดเสร็จ คุณสามารถปรับลักษณะการแสดงข้อความของเบราว์เซอร์
และกำหนดค่าข้อความที่ควรแสดงหรือไม่แสดงจนกว่าเว็บ
ฟอนต์จะโหลดเสร็จสมบูรณ์ได้โดยใช้font-displayพร็อพเพอร์ตี้ CSS
block
ค่าเริ่มต้นของ font-display คือ block เมื่อใช้ block เบราว์เซอร์
จะบล็อกการแสดงผลข้อความที่ใช้แบบอักษรบนเว็บที่ระบุ เบราว์เซอร์แต่ละโปรแกรม
จะทำงานแตกต่างกันเล็กน้อย Chromium และ Firefox จะบล็อกการแสดงผลเป็นเวลาสูงสุด 3 วินาทีก่อนที่จะใช้แบบอักษรสำรอง Safari จะบล็อกอย่างไม่มีกำหนด
จนกว่าจะโหลดแบบอักษรเว็บ
swap
swap คือค่า font-display ที่ใช้กันอย่างแพร่หลายมากที่สุด swap does not block
rendering, and shows the text immediately in a fallback before swapping in the
specified web font. ซึ่งช่วยให้คุณแสดงเนื้อหาได้ทันทีโดยไม่ต้องรอให้ระบบดาวน์โหลดแบบอักษรบนเว็บ
อย่างไรก็ตาม ข้อเสียของ 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 ให้เหลือน้อยที่สุดได้ในระหว่างระยะเริ่มต้นของหน้าเว็บ ซึ่งเป็นช่วงเวลาที่ ผู้ใช้มีแนวโน้มที่จะโต้ตอบกับหน้าเว็บ