वेब फॉन्ट्स को रेंडरिंग बदले बिना अनुकूलित करें

इस साइट के वेब फॉन्ट को बिना लुक बदले तेज़ी से लोड कराएं। फॉन्ट बाइट्स को जितना संभव हो छोटा करें, रेंडरिंग एक जैसी रखें, और पहले/बाद के पिक्सेल डिफ के साथ इसे साबित करें। किसी भी विज़ुअल बदलाव को रिग्रेशन मानें जब तक मैं उसे मंज़ूर न करूँ। अगर कोई ऑप्टिमाइज़ेशन रेंडरिंग बदलता है, तो बताएं कि यह कितना बचाता है और क्या बदलता है, और डिफ़ॉल्ट रूप से साइट का लुक वैसा ही रखें। मौजूदा लोडिंग व्यवहार बनाए रखें: फॉन्ट-डिस्प्ले या फॉलबैक फॉन्ट को न छुएं। बिल्ड में फॉन्ट प्रोसेसिंग न जोड़ें; एक स्क्रिप्ट लिखें जिसे मैं हाथ से चलाऊँ, उसका आउटपुट कमिट करें, और नोट करें कि इसे दोबारा कब चलाना है। पहले मौजूदा स्थिति मापें: हर फॉन्ट फ़ाइल का साइज़, ग्लिफ़ काउंट, वेरिएबल एक्सिस, ओपनटाइप फीचर और हिंटिंग, साथ ही प्रति पेज फॉन्ट बाइट्स और हर पेज क्या प्रीलोड करता है। फिर पता करें कि साइट वास्तव में क्या उपयोग करती है, इनलाइन कंपोनेंट स्टाइल के साथ-साथ स्टाइलशीट भी जांचें: कंटेंट में कौन से कैरेक्टर आते हैं, हर फॉन्ट को कौन से एक्सिस वैल्यू और वेट चाहिए (एक-ऑफ ओवरराइड और इटैलिक के अंदर बोल्ड सहित), कौन से ओपनटाइप फीचर चालू हैं, और CSS साइड इफेक्ट जैसे `hyphens: auto` जो U+2010 हाइफन का उपयोग करता है। हर फॉन्ट को उसी तक काटें। उपयोग किए गए कैरेक्टर के साथ-साथ लैटिन-1 और लैटिन एक्सटेंडेड-A रखें, और CJK को सिस्टम फॉन्ट पर छोड़ दें अगर आज यह ऐसे ही रेंडर होता है। वेरिएबल एक्सिस को उपयोग में आने वाली रेंज तक सीमित करें, और किसी एक्सिस को केवल एक वैल्यू पर फिक्स करें अगर कोई उसे ओवरराइड नहीं करता। अनुपयोगी ओपनटाइप फीचर और हिंटिंग हटाएं। हर फॉन्ट को दो फ़ाइलों में विभाजित करें। एक छोटा कोर जिसमें ASCII और वह विराम चिह्न जो अधिकतर पेज उपयोग करते हैं (कर्ली कोट्स, डैश, एलिप्सिस) प्रीलोड होता है। एक एक्सटेंडेड फ़ाइल `unicode-range` के पीछे केवल तब डाउनलोड होती है जब किसी पेज को उसके किसी कैरेक्टर की ज़रूरत हो। हर फ़ाइल के `unicode-range` में केवल वही कैरेक्टर सूचीबद्ध हों जो उसमें वास्तव में हैं। कुछ बातों का ध्यान रखें। कोर और एक्सटेंडेड फ़ाइलों के बीच एक जनरेटेड फॉलबैक फेस असली फॉन्ट आने से पहले एक्सटेंडेड कैरेक्टर खींच देगा। OFL के तहत रिज़र्व्ड फॉन्ट नेम वाले फॉन्ट को सबसेट करने के बाद आंतरिक रूप से नाम बदलना होगा। जनरेटेड फ़ाइलों की जांच करें, क्योंकि फॉन्ट टूल्स में खामियां होती हैं। पूरा कहने से पहले, उसी कंटेंट से बेसलाइन बनाएं और कोड, इटैलिक, एक्सेंटेड कैरेक्टर, अपने खुद के फॉन्ट सेटिंग्स वाले कंपोनेंट्स, और CJK वाले पेजों पर पहले और बाद का पिक्सेल डिफ करें। हर दिखने वाले अंतर को समझाएं: कंटेंट बदलाव, ठीक करने योग्य रिग्रेशन, या हानिरहित सब-पिक्सेल राउंडिंग। प्रति पेज बाइट्स फिर से मापें और पुष्टि करें कि एक्सटेंडेड फ़ाइलें केवल जहाँ ज़रूरत हो वहीं लोड होती हैं। जब आप पूरा कर लें, तो मुझे बताएं कि प्रति फॉन्ट और प्रति पेज पहले और बाद के बाइट्स, पिक्सेल डिफ के परिणाम, जहाँ आपने मेरे कहे से विचलन किया और उसकी कीमत क्या रही, और स्क्रिप्ट को दोबारा कैसे चलाएं। बाद में, कोर फॉन्ट को ग्लोबल स्टाइलशीट में एम्बेड करना और आइडल के बाद एक्सटेंडेड फ़ाइलों को प्रीकैश करना उचित हो सकता है।