เพิ่มประสิทธิภาพการทำงานของ Google Fonts

มันยุติธรรมที่จะบอกว่า Google Fonts เป็นที่นิยม ในขณะที่เขียน มีผู้เข้าชมมากกว่า 29 ล้านล้านครั้งทั่วทั้งเว็บ และเข้าใจได้ง่ายว่าทำไม คอลเลกชันนี้ให้คุณเข้าถึงแบบอักษรที่สวยงามกว่า 900 แบบที่คุณสามารถใช้ได้บนเว็บไซต์ของคุณได้ฟรี หากไม่มี Google Fonts คุณจะจำกัด "แบบอักษรของระบบ" จำนวนหนึ่งที่ติดตั้งบนอุปกรณ์ของผู้ใช้

แบบอักษรของระบบหรือ 'แบบอักษรที่ปลอดภัยสำหรับเว็บ' เป็นแบบอักษรที่ติดตั้งไว้ล่วงหน้าในระบบปฏิบัติการต่างๆ ตัวอย่างเช่น Arial และ Georgia มาพร้อมกับ Windows, macOS และ Linux distribution

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

Google Fonts ได้รับการปรับให้เหมาะสมแล้ว

Google Fonts API ไม่เพียงแต่มอบไฟล์ฟอนต์ให้กับเบราว์เซอร์เท่านั้น แต่ยังทำการตรวจสอบอย่างชาญฉลาดเพื่อดูว่าสามารถส่งไฟล์ในรูปแบบที่ปรับให้เหมาะสมที่สุดได้อย่างไร

มาดู Roboto กัน GitHub บอกเราว่ารุ่นปกติมีน้ำหนัก 168kb

อย่างไรก็ตาม หากฉันขอรูปแบบแบบอักษรเดียวกันจาก API ฉันก็จะได้รับไฟล์นี้ ซึ่งมีเพียง 11kb เท่านั้น เป็นไปได้อย่างไร?

เมื่อเบราว์เซอร์ส่งคำขอไปยัง API อันดับแรก Google จะตรวจสอบประเภทไฟล์ที่เบราว์เซอร์รองรับ ฉันใช้ Chrome เวอร์ชันล่าสุด ซึ่งเหมือนกับเบราว์เซอร์ส่วนใหญ่ที่รองรับ WOFF2 ดังนั้นฉันจึงใช้แบบอักษรนี้ในรูปแบบที่มีการบีบอัดสูง

ถ้าฉันเปลี่ยน user-agent เป็น Internet Explorer 11 ฉันจะใช้แบบอักษรในรูปแบบ WOFF แทน

สุดท้าย ถ้าฉันเปลี่ยนตัวแทนผู้ใช้ของฉันเป็น IE8 ฉันจะได้รับแบบอักษรในรูปแบบ EOT (Embedded OpenType)

Google Fonts รักษารูปแบบที่ปรับให้เหมาะสมกว่า 30 แบบสำหรับแต่ละแบบอักษร และตรวจจับโดยอัตโนมัติและนำเสนอรูปแบบที่เหมาะสมที่สุดสำหรับแต่ละแพลตฟอร์มและเบราว์เซอร์

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

นี่เป็นคุณสมบัติที่ยอดเยี่ยมของ Google Fonts โดยการตรวจสอบ user-agent พวกเขาสามารถให้บริการรูปแบบที่มีประสิทธิภาพมากที่สุดไปยังเบราว์เซอร์ที่สนับสนุนรูปแบบเหล่านั้น ในขณะที่ยังคงแสดงแบบอักษรอย่างสม่ำเสมอในเบราว์เซอร์รุ่นเก่า

การแคชเบราว์เซอร์

การเพิ่มประสิทธิภาพ Google Fonts ในตัวอีกอย่างหนึ่งคือการแคชของเบราว์เซอร์

เนื่องจากลักษณะทั่วไปของ Google Fonts มีอยู่ทั่วไป เบราว์เซอร์จึงไม่จำเป็นต้องดาวน์โหลดไฟล์แบบอักษรแบบเต็มเสมอไป ตัวอย่างเช่น SmashingMagazine ใช้ฟอนต์ชื่อ 'Mija' หากนี่เป็นครั้งแรกที่เบราว์เซอร์ของคุณเห็นฟอนต์นั้น จะต้องดาวน์โหลดให้สมบูรณ์ก่อนที่ข้อความจะแสดง แต่ครั้งต่อไปที่คุณเยี่ยมชมเว็บไซต์โดยใช้ฟอนต์นั้น เบราว์เซอร์จะใช้เวอร์ชันแคช

เนื่องจาก Google Fonts API ถูกใช้อย่างแพร่หลายมากขึ้น ผู้เยี่ยมชมไซต์หรือหน้าเว็บของคุณน่าจะมีแบบอักษร Google ใดๆ ที่ใช้ในการออกแบบของคุณในแคชของเบราว์เซอร์

— คำถามที่พบบ่อย Google Fonts

แคชของเบราว์เซอร์ Google Fonts ถูกตั้งค่าให้หมดอายุหลังจากหนึ่งปี เว้นแต่แคชจะถูกล้างเร็วกว่านี้

หมายเหตุ: Mija ไม่ใช่ Google Font แต่หลักการของการแคชไม่ใช่เฉพาะผู้ขาย

การเพิ่มประสิทธิภาพเพิ่มเติมเป็นไปได้

แม้ว่า Google จะใช้ความพยายามอย่างมากในการเพิ่มประสิทธิภาพการส่งไฟล์ฟอนต์ แต่ก็ยังมีการปรับให้เหมาะสมในการใช้งานเพื่อลดผลกระทบต่อเวลาในการโหลดหน้าเว็บ

1. จำกัดตระกูลแบบอักษร

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

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

2. ไม่รวมตัวแปร

เนื่องจากมาตรฐานคุณภาพสูงของ Google Fonts ตระกูลแบบอักษรจำนวนมากจึงมีช่วงน้ำหนักแบบอักษรทั้งหมดที่มีอยู่:

• บาง (100)
• ตัวเอียงบาง (100i)
• ไลท์ (300)
• ตัวเอียงเบา (300i)
• ปกติ (400)
• ตัวเอียงปกติ (400i)
• ปานกลาง (600)
• ตัวเอียงปานกลาง (600i)
• ตัวหนา (700)
• ตัวเอียงหนา (700i)
• สีดำ (800)
• ตัวเอียงสีดำ (800i)

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

ตัวอย่างเช่น ฟอนต์ตระกูล Roboto มีน้ำหนัก ~144kb อย่างไรก็ตาม หากคุณใช้เฉพาะตัวแปร Regular, Regular Italic และ Bold ตัวเลขนั้นจะลดลงเหลือ ~36kb ประหยัด 75%!

รหัสเริ่มต้นสำหรับการติดตั้ง Google Fonts มีลักษณะดังนี้:

 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

หากคุณทำเช่นนั้น ระบบจะโหลดเฉพาะตัวแปร '400 ปกติ' ซึ่งหมายความว่าข้อความที่เบา ตัวหนา และตัวเอียงทั้งหมดจะไม่แสดงอย่างถูกต้อง

ในการโหลดฟอนต์รูปแบบต่างๆ แทน เราต้องระบุน้ำหนักใน URL ดังนี้:

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

หายากที่เว็บไซต์จะใช้แบบอักษรทุกรูปแบบตั้งแต่แบบบาง (100) ถึงสีดำ (900) กลยุทธ์ที่เหมาะสมที่สุดคือการระบุเฉพาะน้ำหนักที่คุณวางแผนจะใช้:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,600" rel="stylesheet">

นี่เป็นสิ่งสำคัญอย่างยิ่งเมื่อใช้ฟอนต์หลายตระกูล ตัวอย่างเช่น หากคุณใช้ Lato สำหรับส่วนหัว คุณควรขอเฉพาะตัวแปรตัวหนา (และตัวเอียงตัวหนาก็ได้):

 <link href="https://fonts.googleapis.com/css?family=Lato:700,700i" rel="stylesheet">

3. รวมคำขอ

ข้อมูลโค้ดที่เราทำงานด้วยข้างต้นเป็นการเรียกไปยังเซิร์ฟเวอร์ของ Google ( fonts.googleapis.com ) ซึ่งเรียกว่าคำขอ HTTP โดยทั่วไป ยิ่งมีการร้องขอ HTTP ให้หน้าเว็บของคุณทำมากเท่าใด การโหลดก็จะใช้เวลานานขึ้นเท่านั้น

หากคุณต้องการโหลดฟอนต์สองแบบ คุณอาจทำสิ่งนี้:

 <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

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

 <link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400,400i,600" rel="stylesheet">

ไม่มีการจำกัดจำนวนแบบอักษรและรูปแบบต่างๆ ที่คำขอเดียวสามารถเก็บได้

4. คำแนะนำทรัพยากร

คำแนะนำทรัพยากรเป็นคุณลักษณะที่ได้รับการสนับสนุนโดยเบราว์เซอร์สมัยใหม่ซึ่งสามารถเพิ่มประสิทธิภาพเว็บไซต์ได้ เราจะมาดูคำแนะนำทรัพยากรสองประเภท: 'DNS Prefetching' และ 'Preconnect'

หมายเหตุ: หากเบราว์เซอร์ไม่รองรับคุณลักษณะที่ทันสมัย ​​เบราว์เซอร์ก็จะเพิกเฉย ดังนั้นหน้าเว็บของคุณจะยังโหลดได้ตามปกติ

การดึงข้อมูล DNS ล่วงหน้า

การดึงข้อมูล DNS ล่วงหน้าทำให้เบราว์เซอร์สามารถเริ่มการเชื่อมต่อกับ Fonts API ของ Google ( fonts.googleapis.com ) ได้ทันทีที่หน้าเริ่มโหลด ซึ่งหมายความว่าเมื่อถึงเวลาที่เบราว์เซอร์พร้อมที่จะส่งคำขอ งานบางอย่างก็เสร็จเรียบร้อยแล้ว

ในการใช้ DNS prefetching สำหรับ Google Fonts คุณเพียงแค่เพิ่ม one-liner นี้ในหน้าเว็บของคุณ <head> :

 <link rel="dns-prefetch" href="//fonts.googleapis.com">

เชื่อมต่อล่วงหน้า

หากคุณดูที่โค้ดฝังตัวของ Google Fonts ดูเหมือนว่าเป็นคำขอ HTTP เดียว:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">

อย่างไรก็ตาม หากเราไปที่ URL นั้น เราจะเห็นว่ามีคำขออีกสามคำขอไปยัง URL อื่น https://fonts.gstatic.com คำขอเพิ่มเติมหนึ่งรายการสำหรับแบบอักษรแต่ละแบบ

ปัญหาของคำขอเพิ่มเติมเหล่านี้คือเบราว์เซอร์จะไม่เริ่มดำเนินการจนกว่าคำขอแรกที่ https://fonts.googleapis.com/css จะเสร็จสมบูรณ์ นี่คือที่มาของการเชื่อมต่อล่วงหน้า

การเชื่อมต่อล่วงหน้าสามารถอธิบายได้ว่าเป็นเวอร์ชันขั้นสูงของการดึงข้อมูลล่วงหน้า มันถูกตั้งค่าบน URL เฉพาะที่เบราว์เซอร์จะโหลด แทนที่จะดำเนินการค้นหา DNS เพียงอย่างเดียว ยังทำให้การเจรจา TLS และ TCP handshake เสร็จสมบูรณ์ด้วย

เช่นเดียวกับ DNS Prefetching มันสามารถนำไปใช้กับโค้ดหนึ่งบรรทัด:

 <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

การเพิ่มโค้ดบรรทัดนี้สามารถลดเวลาในการโหลดหน้าเว็บได้ถึง 100 มิลลิวินาที สิ่งนี้เกิดขึ้นได้โดยเริ่มต้นการเชื่อมต่อควบคู่ไปกับคำขอเริ่มต้น แทนที่จะรอให้เสร็จก่อน

5. โฮสต์ฟอนต์ในเครื่อง

Google Fonts ได้รับอนุญาตภายใต้ใบอนุญาต "Libre" หรือ "ซอฟต์แวร์ฟรี" ซึ่งให้อิสระแก่คุณในการใช้ เปลี่ยนแปลง และแจกจ่ายแบบอักษรโดยไม่ต้องขออนุญาต นั่นหมายความว่าคุณไม่จำเป็นต้องใช้โฮสติ้งของ Google หากคุณไม่ต้องการ — คุณสามารถโฮสต์ฟอนต์เองได้!

ไฟล์ฟอนต์ทั้งหมดมีอยู่ใน Github ไฟล์ zip ที่มีแบบอักษรทั้งหมดก็มีให้เช่นกัน (387MB)

สุดท้าย มีบริการตัวช่วยที่ให้คุณเลือกฟอนต์ที่คุณต้องการใช้ จากนั้นให้ไฟล์และ CSS ที่จำเป็นในการทำเช่นนั้น

มีข้อเสียในการโฮสต์ฟอนต์ในเครื่อง เมื่อคุณดาวน์โหลดแบบอักษร แสดงว่าคุณกำลังบันทึกแบบอักษรดังกล่าวในขณะนั้น หากมีการปรับปรุงหรืออัปเดต คุณจะไม่ได้รับการเปลี่ยนแปลงเหล่านั้น ในการเปรียบเทียบ เมื่อขอแบบอักษรจาก Google Fonts API คุณจะได้รับบริการเวอร์ชันล่าสุดเสมอ

สังเกตพารามิเตอร์ lastModified ใน API แบบอักษรมีการปรับเปลี่ยนและปรับปรุงอย่างสม่ำเสมอ

6. การแสดงแบบอักษร

เรารู้ว่าเบราว์เซอร์ต้องใช้เวลาในการดาวน์โหลด Google Fonts แต่จะเกิดอะไรขึ้นกับข้อความก่อนที่จะพร้อม เป็นเวลานาน เบราว์เซอร์จะแสดงช่องว่างที่ข้อความควรเป็น หรือที่เรียกว่า "FOIT" (Flash of Invisible Text)

การอ่านที่แนะนำ : “FOUT, FOIT, FOFT” โดย Chris Coyier

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

โดยเพิ่ม font-display: swap; ในการประกาศ @ font-face เราบอกให้เบราว์เซอร์แสดงแบบอักษรสำรองจนกว่า Google Font จะพร้อมใช้งาน

 @font-face { font-family: 'Roboto'; src: local('Roboto Thin Italic'), url(https://fonts.gstatic.com/s/roboto/v19/KFOiCnqEu92Fr1Mu51QrEz0dL-vwnYh2eg.woff2) format('woff2'); font-display: swap; }

ในปี 2019 Google ประกาศว่าจะเพิ่มการรองรับการแสดงแบบอักษร: swap คุณสามารถเริ่มดำเนินการได้ทันทีโดยเพิ่มพารามิเตอร์พิเศษให้กับ URL แบบอักษร:

 https://fonts.googleapis.com/css?family=Roboto&display=swap

7. ใช้พารามิเตอร์ Text

คุณลักษณะที่รู้จักกันน้อยของ Google Fonts API คือพารามิเตอร์ text พารามิเตอร์ที่ไม่ค่อยได้ใช้นี้อนุญาตให้คุณโหลดเฉพาะอักขระที่คุณต้องการเท่านั้น

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

มันทำงานเช่นนี้:

 https://fonts.googleapis.com/css?family=Roboto&text=CompanyName

เห็นได้ชัดว่าเทคนิคนี้มีความเฉพาะเจาะจงมากและมีการใช้งานจริงเพียงไม่กี่อย่างเท่านั้น อย่างไรก็ตาม หากคุณสามารถใช้ได้ ก็สามารถลดน้ำหนักของฟอนต์ได้มากถึง 90%

หมายเหตุ: เมื่อใช้พารามิเตอร์ text ระบบจะโหลดเฉพาะน้ำหนักแบบอักษร "ปกติ" ตามค่าเริ่มต้น หากต้องการใช้น้ำหนักอื่น คุณต้องระบุให้ชัดเจนใน URL

 https://fonts.googleapis.com/css?family=Roboto:700&text=CompanyName

ห่อ

ด้วยประมาณ 53% ของเว็บไซต์ 1 ล้านอันดับแรกที่ใช้ Google Fonts การใช้การเพิ่มประสิทธิภาพเหล่านี้สามารถส่งผลกระทบอย่างมาก

คุณลองมากี่ข้อแล้ว? แจ้งให้เราทราบในส่วนความคิดเห็น