ในโมดูลก่อนหน้านี้ คุณได้เรียนรู้วิธีเพิ่มประสิทธิภาพ HTML, CSS, JavaScript และแหล่งข้อมูลสื่อ ในโมดูลนี้ คุณจะได้พบวิธีการบางอย่างในการเพิ่มประสิทธิภาพเว็บ แบบอักษร
แบบอักษรเว็บอาจส่งผลต่อประสิทธิภาพของหน้าทั้งในเรื่องเวลาที่ใช้ในการโหลดและเวลาที่ใช้ในการแสดงผล
ไฟล์แบบอักษรขนาดใหญ่อาจใช้เวลาสักครู่ในการดาวน์โหลดและส่งผลเสียต่อก่อน
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 และแบบอักษรจากแหล่งที่มา
คุณสามารถขจัดความจำเป็นในการสร้างเครือข่ายให้กับบุคคลที่สามได้ด้วยการโฮสต์ แบบอักษรเว็บ ในกรณีส่วนใหญ่ แบบอักษรของเว็บแบบโฮสต์ด้วยตนเองจะเร็วกว่าการดาวน์โหลดแบบอักษร จากข้ามต้นทาง หากคุณวางแผนที่จะใช้แบบอักษรเว็บแบบโฮสต์ด้วยตนเอง ให้ตรวจสอบว่า ใช้เครือข่ายนำส่งข้อมูล (CDN), HTTP/2 หรือ HTTP/3 และตั้งค่า ส่วนหัวของแคชสำหรับแบบอักษรของเว็บที่คุณต้องการสำหรับเว็บไซต์ได้อย่างถูกต้อง
ใช้ WOFF2 และ WOFF2 เท่านั้น
WOFF2 เพลิดเพลินกับการรองรับเบราว์เซอร์แบบกว้างและการบีบอัดที่ดีที่สุด ซึ่งดีขึ้นถึง 30% WOFF. ขนาดไฟล์ที่ลดลงจะช่วยให้ดาวน์โหลดได้เร็วขึ้น WOFF2 มักเป็นรูปแบบโฆษณาเดียวที่จำเป็น เพื่อให้สามารถใช้งานร่วมกันได้อย่างสมบูรณ์ เบราว์เซอร์
ตั้งค่าแบบอักษรสำหรับเว็บ
แบบอักษรสำหรับเว็บมักมีรูปอักขระต่างๆ มากมาย ซึ่งจำเป็นต้องใช้ เพื่อแทนอักขระที่หลากหลายซึ่งใช้ในภาษาต่างๆ หาก จะแสดงเนื้อหาในภาษาเดียว หรือใช้ตัวอักษรเดียว คุณสามารถ ลดขนาดของแบบอักษรเว็บผ่านการตั้งค่าย่อย ซึ่งมักจะดำเนินการโดย การระบุตัวเลขหรือช่วงของ Unicode Code Point
เซ็ตย่อยคือชุดอักขระที่ลดลงซึ่งรวมอยู่ในเว็บต้นฉบับ ไฟล์แบบอักษร ตัวอย่างเช่น แทนที่จะแสดงรูปอักขระทั้งหมด หน้าเว็บของคุณอาจแสดง ส่วนย่อยที่เจาะจงของอักขระละติน ขึ้นอยู่กับชุดย่อยที่จำเป็น รูปอักขระอาจลดขนาดของไฟล์แบบอักษรลงได้อย่างมาก
ผู้ให้บริการแบบอักษรของเว็บบางราย เช่น 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 ให้น้อยที่สุดเท่าที่จะเป็นไปได้ในช่วงเริ่มต้นของหน้าเว็บ คือ ที่ผู้ใช้มีแนวโน้มที่จะโต้ตอบกับแอป