เพิ่มประสิทธิภาพแบบอักษรสำหรับเว็บ

ในโมดูลก่อนหน้านี้ คุณได้เรียนรู้วิธีเพิ่มประสิทธิภาพ 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) หรือไม่

เมื่อสร้าง CSSOM ของหน้าเว็บและระบุแบบอักษรของเว็บคือ ที่จำเป็นสำหรับการออกแบบปัจจุบัน
ทันทีที่พบการอ้างอิงในสไตล์ชีต

รูปแบบใดเท่านั้น (และมีประสิทธิภาพมากที่สุด) ที่จำเป็นต่อการแสดงหน้าเว็บ กับเบราว์เซอร์รุ่นใหม่ทั้งหมด

TTF
WOFF
WOFF2
เวลาก่อนเวลา

ถัดไป: JavaScript แบบแยกโค้ด

เมื่อมีความเข้าใจเกี่ยวกับการเพิ่มประสิทธิภาพแบบอักษร คุณก็จะสามารถ ซึ่งครอบคลุมถึงหัวข้อที่มีโอกาสสูงที่จะปรับปรุง ความเร็วในการโหลดหน้าเว็บเริ่มต้นสำหรับผู้ใช้ของคุณ กล่าวคือชะลอการโหลด JavaScript ผ่านการแยกโค้ด วิธีการนี้จะช่วยให้คุณสามารถรักษาแบนด์วิดท์และ CPU ให้น้อยที่สุดเท่าที่จะเป็นไปได้ในช่วงเริ่มต้นของหน้าเว็บ คือ ที่ผู้ใช้มีแนวโน้มที่จะโต้ตอบกับแอป