การเพิ่มประสิทธิภาพแบบอักษรของ Google
เผยแพร่แล้ว: 2020-03-28การออกแบบเว็บไซต์ที่ดีนั้นมาพร้อมกับรูปภาพและแบบอักษรที่สวยงาม น่าเสียดายที่องค์ประกอบเว็บทั้งสองนี้มีสาเหตุอย่างมากที่ทำให้เว็บไซต์จำนวนมากแสดงเวลาแฝงที่น่ารำคาญ แน่นอน เฉพาะแบบอักษรของเว็บเท่านั้นที่สามารถมอบสิ่งที่สดชื่น ไม่คาดคิด และใหม่ได้
อย่างไรก็ตาม มีหลายวิธีที่จะระงับปรากฏการณ์ที่น่าสยดสยองนี้ได้ SVG กำลังช่วยนักพัฒนาในการจัดการความท้าทายบางประการของการแสดงภาพ และสำหรับ Google Fonts ซึ่งเป็นแบบอักษรบนเว็บที่นิยมใช้กันมากที่สุด การปรับปรุงเวลาในการแสดงผลของหน้าเว็บเป็นเพียงการนำกลอุบายต่างๆ ที่มีอยู่มาใช้เพื่อเพิ่มประสิทธิภาพการทำงานของ Google Fonts
แบบอักษรของ Google คืออะไร
ฟอนต์ของ Google เป็นคอลเล็กชั่นร่ายมนตร์ที่ปรับแต่งมาเป็นพิเศษซึ่งประกอบเป็นฟอนต์สำหรับใช้บนเว็บไซต์ พวกมันได้รับการออกแบบมาโดยเฉพาะเพื่อใช้บนอินเทอร์เน็ต จึงเป็นที่มาของชื่อฟอนต์เว็บ
กายวิภาคของฟอนต์เว็บอธิบายได้ดีที่สุดว่าเป็นชุดของรูปร่างเวกเตอร์ (ร่ายมนตร์) ที่จัดเรียงเป็นพิเศษเพื่อสร้างสัญลักษณ์หรือจดหมายสำหรับเขียน
Google Fonts เปิดตัวเป็น Google Web Fonts ในปี 2010 โดยมีแบบอักษรประมาณ 30 แบบ ปัจจุบัน Google Fonts มีแบบอักษรประมาณ 17 พันล้านแบบอักษร และปัจจุบันมีกำลังไฟประมาณ 57% ของเว็บไซต์ทั้งหมด Google Fonts ซึ่งให้บริการฟรีโดยสมบูรณ์ บันทึกการดูประมาณ 500,000 ครั้งทุกวินาที ณ เวลาที่เขียนบทความนี้ และได้สะสมมากกว่า 37 ล้านล้านการดูตั้งแต่ปี 2010
การใช้แบบอักษร Google บนเว็บไซต์ของคุณทำให้คุณสามารถแยกความแตกต่างจากการจำกัดแบบอักษรของระบบหรือ "แบบอักษรที่ปลอดภัยสำหรับเว็บ" เช่น Arial และ Georgia ซึ่งส่วนใหญ่จะติดตั้งไว้ล่วงหน้าในระบบปฏิบัติการทั้งหมด
วิธีติดตั้งแบบอักษร Google
การใช้ Google Fonts บนเว็บไซต์ทำได้โดยใช้อินเทอร์เฟซการเขียนโปรแกรมแอปพลิเคชัน (API) ซึ่งอ้างอิงถึงตัวเลือกแบบอักษรของผู้ใช้ API นี้ที่ Google เสนอให้สามารถฝังลงในเอกสาร HTML ของคุณโดยใช้แท็กลิงก์ CSS มาตรฐานหรือไวยากรณ์สำหรับการนำเข้า ด้านล่างนี้คือตัวอย่างของ API สำหรับการนำ Baloo Chettan 2 ไปใช้งาน
การใช้แท็กลิงก์ CSS มาตรฐาน
การใช้ไวยากรณ์การนำเข้า
<style>
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap');
</style>
ด้วย API ใด ๆ ข้างต้นในเอกสาร HTML ของคุณ คุณสามารถใช้ตระกูลฟอนต์ในเอกสาร CSS ของคุณโดยอ้างอิงตามที่เห็นในตัวอย่างด้านล่าง
ตระกูลแบบอักษร : 'Baloo Chettan 2', ตัวเขียน;
ความสำคัญของการเพิ่มประสิทธิภาพการทำงานของ Google Font
การใช้งานและการใช้ Google Fonts เช่นเดียวกับแบบอักษรเว็บอื่นๆ ไม่ใช่เรื่องใหญ่แต่เป็นการส่งมอบแบบอักษรให้กับผู้เยี่ยมชมเว็บไซต์ของคุณ โปรดจำไว้ว่า ผู้ใช้ไม่มีแบบอักษรเหล่านี้ในอุปกรณ์ของตน กล่าวคือ เบราว์เซอร์ของพวกเขาต้องดาวน์โหลดก่อนจึงจะสามารถเห็นเนื้อหาเว็บไซต์ของคุณได้
น้ำหนักตัวอักษร
แบบอักษรแต่ละแบบมีน้ำหนักซึ่งส่งผลเสียต่อเวลาในการตอบสนองของเว็บไซต์ของคุณ ตัวอย่างเช่น แบบอักษร Baloo Chettan 2 ของ Google มีขนาดรวม 720 KB ซึ่งหมายความว่าคุณจำเป็นต้องคำนึงถึงการโหลดเว็บไซต์ของคุณประมาณ 9MB หากคุณต้องใช้ฟอนต์ตระกูล Baloo ทั้งหมด (19) พร้อมภาษาและรูปแบบต่างๆ ที่มีอยู่บนเว็บไซต์ของคุณ แน่นอนว่าไม่เหมาะและไม่ใกล้เคียงกับการปรับแต่งแบบอักษรของเว็บ อย่างไรก็ตาม การทำผิดหมายถึงทำให้ผู้เยี่ยมชมเว็บไซต์ของคุณรอสองสามวินาทีก่อนที่จะเห็นข้อความใดๆ ในเว็บไซต์ของคุณ
รูปแบบตัวอักษร
จนถึงขณะนี้ มีรูปแบบฟอนต์เว็บหลักสี่ (4) รูปแบบที่ใช้บนเว็บ ได้แก่ TrueType Font (TTF), Embedded Open Type (EOT), Web Open Font Format (WOFF) และ Web Open Font Format 2.0 (WOFF2)
ขออภัย ไม่มีรูปแบบใดที่ถือว่าเป็นรูปแบบสากลที่ใช้ได้กับทุกเบราว์เซอร์
EOT รองรับ IE เท่านั้น Chrome และ Opera รองรับรูปแบบส่วนใหญ่มากที่สุด ในขณะที่ประมาณ 86 เปอร์เซ็นต์ของเบราว์เซอร์ทั้งหมดรองรับรูปแบบ WOFF ซึ่งอาจกำหนดให้คุณต้องใส่รูปแบบแบบอักษรทั้งหมดสำหรับแบบอักษรแต่ละแบบที่คุณต้องการใช้ แนวคิดคือการมอบประสบการณ์ที่สอดคล้องกันโดยทำให้มั่นใจว่าเบราว์เซอร์ทั้งหมดสามารถแสดงทุกแบบอักษรได้
ปัญหาเหล่านี้เป็นส่วนหนึ่งของสาเหตุหลายประการที่มีความจำเป็นอย่างยิ่งในการเพิ่มประสิทธิภาพการทำงานของแบบอักษรของ Google
เพิ่มประสิทธิภาพการทำงานของ Google Font
การเพิ่มประสิทธิภาพแบบอักษรของ Google เริ่มต้นด้วยการจัดวาง Font API และรูปแบบคำขอ ไปจนถึงการแสดงผล เคล็ดลับง่ายๆ ในการเพิ่มประสิทธิภาพแบบอักษรของ Google มีดังนี้
โหลดทรัพยากรแบบอักษรของ Google ล่วงหน้า
ขอแนะนำอย่างยิ่งให้คุณใช้คุณลักษณะแพลตฟอร์มเว็บใหม่: <link rel="preload"> ซึ่งช่วยให้คุณโหลดแบบอักษรเว็บล่วงหน้าได้ คุณลักษณะนี้ช่วยให้คุณสามารถบายพาสการทำงานของเบราว์เซอร์เริ่มต้นได้ ซึ่งมักจะทำให้การแสดงข้อความล่าช้าโดยการสร้างแผนผังการแสดงผลก่อนเพื่อให้ทราบว่าต้องใช้ทรัพยากรแบบอักษรใดก่อนที่จะเข้าถึงลิงก์ทรัพยากร
<link rel="preload"> มักจะรวมอยู่ในแท็ก <head> ของ HTML เพื่อเรียกคำขอแบบอักษรของคุณเร็วพอ โดยไม่ต้องรอการสร้าง CSSOM คุณลักษณะนี้ให้ข้อมูลล่วงหน้าแก่เบราว์เซอร์ว่าจำเป็นต้องใช้แบบอักษรเว็บของคุณในเร็วๆ นี้ โดยไม่ต้องให้ข้อมูลใดๆ เกี่ยวกับวิธีการใช้งาน
นอกจากนี้ คุณควรใช้คำจำกัดความ CSS @font-face ที่เหมาะสมควบคู่ไปกับคุณสมบัติการโหลดล่วงหน้า เพื่อแจ้งให้เบราว์เซอร์ทราบถึงวิธีใช้ URL ของทรัพยากร ดูตัวอย่างในประเด็นต่อไป
หมายเหตุ: ไม่ใช่ทุกเบราว์เซอร์ที่รองรับ <link rel=”preload”> เบราว์เซอร์ที่ไม่รองรับก็จะเพิกเฉยต่อโค้ด อย่างไรก็ตาม คุณลักษณะนี้บางครั้งทำให้คำขอสิ้นเปลืองเมื่อมีสำเนาระยะไกลของแบบอักษรที่ต้องการ
ใช้คำขอเดียวสำหรับหลายแบบอักษร
การวัดผลที่ดีอีกประการหนึ่งสำหรับการเพิ่มประสิทธิภาพแบบอักษรของ Google คือการรวมคำขอแบบอักษรหลายรายการไว้ในแท็กเดียว ไม่รวมแท็ก <link> แยกกันสำหรับแต่ละแบบอักษร ดังนั้นจึงส่งคำขอหลายรายการในแบทช์ต่างกัน หากต้องการรวมคำขอแบบอักษร เพียงแยกแบบอักษรใน API ด้วย | อักขระ. อย่างไรก็ตาม สามารถทำได้โดยการเลือกแบบอักษรทั้งหมดที่คุณต้องการพร้อมกันในหน้า Google Font
รูปแบบคำขอแบบอักษรไม่ถูกต้อง:
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap"
rel="stylesheet">
รูปแบบคำขอแบบอักษรที่แนะนำ:
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2|Roboto&display=swap"
rel="stylesheet">
ด้วยการรวมคำขอแบบอักษรหลายรายการไว้ในแท็กเดียว เราบันทึกเบราว์เซอร์จากการเดินทางไปยังเซิร์ฟเวอร์หลายครั้ง และยังช่วยเบราว์เซอร์รุ่นเก่าด้วยการเชื่อมต่อสูงสุด 2 ครั้งต่อโดเมน
รูปแบบแบบอักษรที่ปรับให้เหมาะสมสำหรับเบราว์เซอร์ทั้งหมด
เบราว์เซอร์ที่ไม่รองรับรูปแบบฟอนต์เฉพาะ ให้เพิกเฉยและข้ามไปยังขั้นตอนถัดไปบนแผนผังการแสดงผล และเพื่อให้ได้รับประสบการณ์ที่สอดคล้องกัน คุณจะต้องรวมรูปแบบฟอนต์ทั้งหมดไว้ในการประกาศ CSS @font-face ของคุณ
อย่างไรก็ตามน้ำหนักสามารถลดลงได้ กราฟแต่ละรายการที่อธิบายแบบอักษรประกอบด้วยข้อมูลที่คล้ายคลึงกันซึ่งสามารถบีบอัดได้โดยใช้คอมเพรสเซอร์ที่เข้ากันได้ เช่น GZIP แม้ว่ารูปแบบ TTF และ EOT จะถูกบีบอัดโดยค่าเริ่มต้น คุณต้องแน่ใจว่าเซิร์ฟเวอร์ของคุณได้รับการกำหนดค่าให้ใช้การบีบอัดเมื่อส่งรูปแบบแบบอักษรทั้งสอง
ใช้การตั้งค่าการบีบอัดที่เหมาะสมที่สุดสำหรับ WOFF ซึ่งมีการบีบอัดในตัวและใช้อัลกอริธึมการประมวลผลล่วงหน้าและการบีบอัดแบบกำหนดเองเพื่อส่ง WOFF2 ด้วยการลดขนาดไฟล์ ~30%
ตัวอย่างการประกาศ CSS @font-face
@font-face {
font-family: 'Baloo Chettan 2';
font-style: normal;
font-weight: 600;
src: local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Android, Safari */
url('/fonts/awesome.svg') format('svg'); /* Super modern web browsers */
หมายเหตุ: src: ชี้ไปที่แหล่งข้อมูลที่หลากหลาย ในขณะที่ url() อนุญาตให้คุณโหลดฟอนต์ภายนอก และ local() อนุญาตให้คุณระบุแหล่งที่มาของฟอนต์ในเครื่อง รูปแบบ () ระบุรูปแบบแบบอักษรใน URL เฉพาะ
ให้ความสำคัญกับ local() ในรายการ src ของคุณ
แม้ว่าแนวคิดในการเพิ่มประสิทธิภาพแบบอักษรของ Google นี้อาจใช้ไม่ได้กับผู้ใช้โทรศัพท์มือถือจริงๆ เว้นแต่คุณจะอ้างอิงแบบอักษรของระบบเริ่มต้น แต่ก็ยังคงเป็นเคล็ดลับที่มีประสิทธิภาพสำหรับการเพิ่มประสิทธิภาพแบบอักษรของเว็บ
หากคุณดูตัวอย่างการประกาศ CSS @font-face ด้านบน คุณจะสังเกตเห็นว่า local() อยู่ในรายการตัวเลือกทรัพยากรที่คั่นด้วยเครื่องหมายจุลภาคใน src: descriptor การจัดลำดับความสำคัญนี้มีจุดประสงค์ และแนวคิดคือการส่งเบราว์เซอร์ผู้ใช้ไปยังแหล่งที่มาแรกสำหรับแบบอักษรในเครื่อง ก่อนที่จะเลือกดาวน์โหลดหากไม่มีในเครื่อง
เพื่อให้แน่ใจว่าเบราว์เซอร์จะไม่ดาวน์โหลดแบบอักษรที่ติดตั้งไว้ในคอมพิวเตอร์ของผู้ใช้แล้ว จึงมั่นใจได้ว่าเว็บไซต์จะมีประสิทธิภาพที่ดีขึ้น
ปรับแต่งการแสดงแบบอักษร: CSS font-display
การควบคุมประสิทธิภาพแบบอักษรด้วยคำอธิบายการแสดงแบบอักษรสำหรับ @font-face ช่วยให้คุณตัดสินใจได้ว่าควรแสดงผลแบบอักษร Google ของคุณอย่างไร โดยขึ้นอยู่กับระยะเวลาในการดาวน์โหลด เดิมที เว็บเบราว์เซอร์มีการตั้งค่าเริ่มต้นเกี่ยวกับสิ่งที่ต้องทำเมื่อฟอนต์ใช้เวลาในการโหลดนานเกินไป ส่วนใหญ่กำหนดระยะหมดเวลาหลังจากนั้นจึงใช้แบบอักษรทางเลือก แต่น่าเสียดายที่ระยะหมดเวลาต่างกัน
Chrome และ Firefox ใช้แบบอักษรสำรองหลังจากผ่านไปสามวินาทีหากแบบอักษรของเว็บไม่พร้อมและจะสลับข้อความเป็นแบบอักษรที่ต้องการทันทีที่ดาวน์โหลด Internet Explorer จะทำเช่นเดียวกันในศูนย์วินาทีในขณะที่ Safari ไม่มีพฤติกรรมหมดเวลาสำหรับการแสดงแบบอักษร
คุณสมบัติการแสดงแบบอักษรที่เพิ่งเปิดตัวใหม่ในปัจจุบันรองรับค่าห้าช่วง: auto | บล็อก | แลกเปลี่ยน | ทางเลือก | ไม่จำเป็น
คุณควรตั้งค่าคุณสมบัติให้ บล็อก ค่าหากการแสดงข้อความในแบบอักษรเฉพาะมีความสำคัญมาก เนื่องจากช่วยให้เบราว์เซอร์ใช้ข้อความที่ อยู่ยงคงกระพัน แทนแบบอักษรที่ต้องการเมื่อไม่พร้อมและเปลี่ยนทันทีที่ดาวน์โหลดเสร็จ เบราว์เซอร์ส่วนใหญ่ใช้ค่านี้เป็นค่าเริ่มต้น ( auto )
สามารถใช้ การสลับ ได้ในกรณีที่คุณสามารถแสดงแบบอักษรชั่วคราวได้จนกว่าแบบอักษรที่ต้องการจะพร้อม Swap คล้ายกับการบล็อก แต่แสดงแบบอักษรทางเลือกทันทีที่หน้าเริ่มโหลด และจะแทนที่ด้วยแบบอักษรที่ต้องการทันทีที่พร้อม ค่านี้มีระยะเวลาสลับไม่สิ้นสุดและช่วงบล็อกเป็นศูนย์วินาที
ค่าการ สลับ ไม่เหมาะสำหรับข้อความเนื้อหา เพื่อไม่ให้รบกวนประสบการณ์ของผู้อ่านเพียงครึ่งทางโดยการเลื่อนข้อความไปรอบๆ คุณสามารถใช้สิ่งนี้สำหรับข้อความโลโก้ที่คุณต้องการแสดงชื่อบริษัทหรือสโลแกนอย่างรวดเร็วโดยใช้ทางเลือกสำรอง แต่สุดท้ายก็ต้องใช้แบบอักษรอย่างเป็นทางการเพื่อจุดประสงค์ในการสร้างแบรนด์
ตัวอย่าง: คุณสมบัติการแสดงแบบอักษรที่ตั้งค่าเป็น swap
@font-face {
font-family : 'Baloo Chettan 2';
font-style : normal;
font-weight : 600;
font- display : swap
src : local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'); /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Safari, Android */
url('/fonts/awesome.svg') format('svg'); /* modern web browsers */
ค่า swap สามารถเห็นได้ในบรรทัดแรกของโค้ด (Google Font API) ที่ใช้ในการสาธิตวิธีเชื่อมโยงแบบอักษร Google ในเอกสาร HTML ของคุณ
ทางเลือก สำรอง คล้ายกับการ สลับ แต่มีระยะเวลาการสลับที่จำกัด หากรูปแบบแบบอักษรที่ต้องการไม่โหลดภายในระยะเวลาที่กำหนด โดยปกติแล้วจะเป็นศูนย์วินาที ข้อความจะคงแบบอักษรสำรองไว้ตลอดอายุของหน้า นี่เป็นตัวเลือกที่ดีสำหรับเนื้อหา มันแสดงข้อความโดยเร็วที่สุดและจะไม่เปลี่ยนเมื่อถึงเวลาที่ทุกคนเริ่มอ่าน
ค่า ทางเลือก คือการจำลองทาง เลือก แต่อนุญาตให้เบราว์เซอร์ตัดสินใจว่าจะเริ่มต้นการดาวน์โหลดแบบอักษรของเว็บหรือไม่ โดยพิจารณาจากความเร็วเครือข่ายของผู้ใช้ ในสถานการณ์ที่การเชื่อมต่ออ่อนแอเกินไป เบราว์เซอร์จะต้องจำกัดคำขอและจัดลำดับความสำคัญของทรัพยากรที่จำเป็นที่สุดโดยไม่ส่งคำขอใดๆ เพื่อดาวน์โหลดแบบอักษรของเว็บ
จำกัดตระกูลแบบอักษรและตัวแปร
เนื่องจากตระกูลแบบอักษรและตัวแปรแต่ละรายการมีส่วนทำให้น้ำหนักหน้า ส่วนหนึ่งของกระบวนการเพิ่มประสิทธิภาพแบบอักษร Google ของคุณจึงต้องมีการจำกัดองค์ประกอบทั้งสองนี้
ผู้เชี่ยวชาญส่วนใหญ่จะแนะนำให้คุณใช้แบบอักษรตระกูลไม่เกินสองชุด สำหรับหัวเรื่องและเนื้อหา นี่เป็นเหตุผลและช่วยให้คุณเล่นได้อย่างปลอดภัยในขณะที่ใช้แบบอักษรเว็บเพื่อการออกแบบที่ดีขึ้น
ความพร้อมใช้งานของตัวแปรต่างๆ เช่น ตัวเอียง ปกติ ตัวหนา ฯลฯ ไม่ได้หมายความว่าคุณมี 'ตัวเลือก' เพื่อรวมไว้ในการดาวน์โหลดของคุณ ตัดทอนการดาวน์โหลดของคุณเป็นตัวแปรที่จำเป็นและหลีกเลี่ยงการรวมมากเกินไป คงจะสิ้นเปลืองถ้าจะดาวน์โหลดเวอร์ชันเต็มเพราะคุณต้องการใช้คำเดียวจากมัน นี่คือจุดที่เคล็ดลับการเพิ่มประสิทธิภาพครั้งต่อไปสำหรับ Google Fonts มีประโยชน์
ใช้พารามิเตอร์ข้อความ
พารามิเตอร์ข้อความเป็นหนึ่งในเทคนิคการเพิ่มประสิทธิภาพแบบอักษรของ Google ที่ดีที่สุดที่คุณต้องรู้ และน่าประหลาดใจที่นักพัฒนาส่วนใหญ่ไม่ได้ใช้มัน พารามิเตอร์อนุญาตให้คุณโหลดเฉพาะอักขระที่คุณต้องการ
สมมติว่าคุณต้องการใช้แบบอักษรเพียงสองตัวอักษรในชื่อบริษัทของคุณดังตัวอย่างด้านล่าง ฉันใช้แบบอักษรต่างกันสำหรับตัวอักษร C และ N:
ชื่อ บริษัท
คุณสามารถร้องขอให้โหลดเฉพาะตัวอักษรสองตัวนั้น แทนที่จะโหลดทั้งหน้าฟอนต์ URL แบบอักษรจะมีพารามิเตอร์พิเศษดังนี้:
https://fonts.googleapis.com/css?family=Baloo+Chettan+2=CN
วิธีการเพิ่มประสิทธิภาพการทำงานของ Google Font นี้ค่อนข้างมีประสิทธิภาพและช่วยให้คุณสามารถตัดน้ำหนักแบบอักษรได้มากถึง 90%
สรุปแล้ว
การเพิ่มประสิทธิภาพแบบอักษรของ Google เป็นกลยุทธ์สำคัญในการปรับปรุงประสิทธิภาพโดยรวมของเว็บไซต์
การเข้าถึงและความสามารถในการอ่านเป็นปัจจัยหลักที่ต้องให้ความสำคัญเสมอ นอกเหนือไปจากการออกแบบที่ดีในการพิมพ์ วิธีการดังกล่าวข้างต้นสำหรับการปรับปรุงประสิทธิภาพของฟอนต์นั้นมุ่งเน้นไปที่การลดขนาดฟอนต์ การเข้าถึงฟอนต์ของเว็บโดยเร็วที่สุด และการแสดงรูปแบบ/ทางเลือกที่ถูกต้องเมื่อเครือข่ายผู้ใช้มีช่องโหว่
โปรดแจ้งให้เราทราบหากคุณได้ลองใช้วิธีการเหล่านี้แล้ว และเกี่ยวกับกระบวนการเพิ่มประสิทธิภาพแบบอักษรเว็บที่ไม่ได้กล่าวถึงในบทความนี้