पिछले मॉड्यूल में, आपने HTML, CSS, JavaScript को ऑप्टिमाइज़ करने साथ ही, मीडिया से जुड़े संसाधनों के लिए भी किया जा सकता है. इस मॉड्यूल में, वेब को ऑप्टिमाइज़ करने के कुछ तरीकों के बारे में जानें फ़ॉन्ट.
वेब फ़ॉन्ट, लोड होने और रेंडर होने के समय, दोनों के दौरान पेज की परफ़ॉर्मेंस पर असर डाल सकते हैं.
बड़ी फ़ॉन्ट फ़ाइलों को डाउनलोड होने में समय लग सकता है और पहले
कॉन्टेंटफ़ुल पेंट (एफ़सीपी), जबकि गलत font-display वैल्यू की वजह से
अनचाहे लेआउट शिफ़्ट की वजह से, जो किसी पेज के कुल लेआउट शिफ़्ट होने में बदलाव करते हैं
(सीएलएस).
वेब फ़ॉन्ट ऑप्टिमाइज़ करने से पहले, उनके बारे में चर्चा की जा सकती है. यह जानना कि वे कैसे खोजे जाते हैं यह ब्राउज़र मददगार हो सकता है, ताकि आप यह समझ सकें कि सीएसएस, कुछ स्थितियों में ग़ैर-ज़रूरी वेब फ़ॉन्ट वापस पाना.
डिस्कवरी
किसी पेज के वेब फ़ॉन्ट, @font-face का इस्तेमाल करके स्टाइल शीट में तय किए जाते हैं
एलान:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
पिछला कोड स्निपेट, "Open Sans" नाम के font-family के बारे में बताता है और
यह ब्राउज़र को बताता है कि संबंधित वेब फ़ॉन्ट संसाधन कहां मिलेगा. संरक्षण के लिए
बैंडविड्थ, ब्राउज़र, वेब फ़ॉन्ट को तब तक डाउनलोड नहीं करता है, जब तक यह पता नहीं लगाया जाता
मौजूदा पेज के लेआउट में इसकी ज़रूरत है.
h1 {
font-family: "Open Sans";
}
पिछले सीएसएस स्निपेट में, ब्राउज़र "Open Sans" फ़ॉन्ट फ़ाइल डाउनलोड करता है
क्योंकि यह पेज के एचटीएमएल में किसी <h1> एलिमेंट को पार्स करता है.
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 एलान
पेज लोड होने के दौरान, इनलाइन करके फ़ॉन्ट को खोजे जाने लायक बनाया जा सकता है
रेंडर करने से रोकने वाली सीएसएस—इसमें @font-face से जुड़े एलान शामिल हैं—इनकी <head>
<style> एलिमेंट का इस्तेमाल करके, अपने एचटीएमएल के बारे में बताएं. इस मामले में, ब्राउज़र को पता चलता है कि
वेब फ़ॉन्ट को पेज लोड होने में पहले ही शामिल कर लें, क्योंकि इसके लिए बाहरी पेज पर जाने से पहले इंतज़ार करना पड़ता है
स्टाइल शीट डाउनलोड करें.
preload के इस्तेमाल की तुलना में, @font-face एलानों को इनलाइन करने में फ़ायदा है
संकेत देता है, क्योंकि ब्राउज़र केवल वे फ़ॉन्ट डाउनलोड करता है जो वर्तमान
पेज. ऐसा करने से, इस्तेमाल न किए जाने वाले फ़ॉन्ट डाउनलोड होने का खतरा खत्म हो जाता है.
डाउनलोड करें
वेब फ़ॉन्ट खोजने और यह पक्का करने के बाद कि मौजूदा पेज के लिए उनकी ज़रूरत है तो ब्राउज़र उन्हें डाउनलोड कर सकता है. वेब फ़ॉन्ट की संख्या, उनकी एन्कोडिंग, और उनके फ़ाइल साइज़ का इस बात पर काफ़ी असर पड़ सकता है कि वेब फ़ॉन्ट कितनी तेज़ी से डाउनलोड और रेंडर करेगा.
अपने वेब फ़ॉन्ट खुद होस्ट करें
वेब फ़ॉन्ट को Google Fonts जैसी तीसरे पक्ष की सेवाओं के ज़रिए इस्तेमाल किया जा सकता है या अपनी साइट के ऑरिजिन पर खुद होस्ट किए जा सकते हैं. तीसरे पक्ष की सेवा का इस्तेमाल करते समय, आपकी पेज को शुरू करने से पहले कंपनी के डोमेन से एक कनेक्शन खोलना होगा आवश्यक वेब फ़ॉन्ट डाउनलोड कर रहा है. इसकी वजह से, कुछ खोजने और बाद में करने में देरी हो सकती है वेब फ़ॉन्ट डाउनलोड करने में मदद मिलती है.
इस ओवरहेड को preconnect संसाधन संकेत का इस्तेमाल करके कम किया जा सकता है. इस्तेमाल करके
preconnect, ब्राउज़र को क्रॉस-ऑरिजिन से कनेक्शन खोलने का निर्देश दिया जा सकता है
इससे पहले कि ब्राउज़र आम तौर पर यह काम करता है:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
पिछला एचटीएमएल स्निपेट, ब्राउज़र को इससे कनेक्ट करने का संकेत देता है
fonts.googleapis.com और fonts.gstatic.com से एक CORS कनेक्शन. कुछ सूचनाएं मिल रही हैं
फ़ॉन्ट सेवा देने वाली कंपनियां—जैसे कि Google Fonts—अलग-अलग तरीकों से सीएसएस और फ़ॉन्ट रिसॉर्स उपलब्ध कराते हैं
ऑरिजिन.
अपनी साइट को खुद होस्ट करके, तीसरे पक्ष के कनेक्शन की ज़रूरत खत्म की जा सकती है वेब फ़ॉन्ट. ज़्यादातर मामलों में, वेब फ़ॉन्ट डाउनलोड करने के मुकाबले उनमें खुद को होस्ट करने वाली सुविधा ज़्यादा तेज़ी से काम करती है क्रॉस-ऑरिजिन से होता है. अगर आपको सेल्फ़-होस्टिंग वेब फ़ॉन्ट का इस्तेमाल करना है, तो देख लें कि आपकी साइट कॉन्टेंट डिलीवरी नेटवर्क (सीडीएन), एचटीटीपी/2 या एचटीटीपी/3 का इस्तेमाल करके, अपनी वेबसाइट के लिए ज़रूरी वेब फ़ॉन्ट के लिए, कैश मेमोरी में सेव होने वाले हेडर को सही करें.
सिर्फ़ WOFF2—और WOFF2 का इस्तेमाल करें
WOFF2 को सभी ब्राउज़र के लिए सहायता मिलती है. साथ ही, यह सबसे अच्छी कंप्रेस की सुविधा भी देता है. यह 30% तक बेहतर काम करता है WOFF की तुलना में अधिक है. फ़ाइल का साइज़ कम होने से, डाउनलोड होने में कम समय लगता है. द डब्लूऑफ़2 आज के दौर में पूरी तरह सही तरीके से काम करने के लिए, ज़्यादातर फ़ॉर्मैट में फ़ॉर्मैट की ज़रूरत होती है. ब्राउज़र खोलें.
अपने वेब फ़ॉन्ट को सबसेट करें
वेब फ़ॉन्ट में आम तौर पर कई अलग-अलग ग्लिफ़ शामिल होते हैं, जो का इस्तेमाल करें. अगर आपके पेज पर कॉन्टेंट सिर्फ़ एक भाषा में उपलब्ध होता है या उसमें सिर्फ़ एक अक्षर का इस्तेमाल होता है, तो सबसेटिंग के ज़रिए अपने वेब फ़ॉन्ट का साइज़ कम करें. अक्सर ये लोग ऐसा करते हैं यूनिकोड कोड पॉइंट से जुड़ी किसी संख्या या रेंज को तय करना.
सबसेट, मूल वेब में शामिल ग्लिफ़ के कम किए गए सेट को कहते हैं फ़ॉन्ट फ़ाइल. उदाहरण के लिए, सभी ग्लिफ़ दिखाने के बजाय, आपके पेज पर लैटिन वर्णों के लिए खास सबसेट. ज़रूरी सबसेट के आधार पर, ग्लिफ़, फ़ॉन्ट फ़ाइल का साइज़ काफ़ी कम कर सकता है.
Google Fonts जैसे कुछ वेब फ़ॉन्ट प्रोवाइडर,
क्वेरी स्ट्रिंग पैरामीटर का इस्तेमाल करना होगा. उदाहरण के लिए,
https://fonts.googleapis.com/css?family=Roboto&subset=latin यूआरएल
Roboto वेब फ़ॉन्ट वाली स्टाइल शीट, जिसमें सिर्फ़ लैटिन वर्णमाला का इस्तेमाल किया गया है.
अगर आपने अपने वेब फ़ॉन्ट खुद होस्ट करने का फ़ैसला किया है, तो अगला चरण है जनरेट करना और glyphanger या subfont जैसे टूल का इस्तेमाल करके उन सबसेट को खुद होस्ट करें.
हालांकि, अगर आपके पास खुद के वेब फ़ॉन्ट होस्ट करने की सुविधा नहीं है, तो
अतिरिक्त text तय करके, Google Fonts से मिलने वाले वेब फ़ॉन्ट का सबसेट
क्वेरी स्ट्रिंग पैरामीटर में सिर्फ़ वही यूनिकोड कोड पॉइंट होते हैं जो
आपकी वेबसाइट पर आते हैं. उदाहरण के लिए, अगर आपकी साइट पर डिसप्ले वेब फ़ॉन्ट है
"स्वागत है" वाक्यांश के लिए कुछ वर्णों की ज़रूरत है, तो आप
Google Fonts से, नीचे दिए गए यूआरएल की मदद से उस सबसेट के लिए अनुरोध करें:
https://fonts.googleapis.com/css?family=Monoton&text=Welcome. यह काम कर सकता है
काफ़ी हद तक एक टाइपफ़ेस के लिए, वेब फ़ॉन्ट डेटा की ज़रूरत को कम करें
तो इस तरह की बहुत ज़्यादा सबसेटिंग आपकी वेबसाइट के लिए फ़ायदेमंद हो सकती है.
फ़ॉन्ट रेंडरिंग
ब्राउज़र द्वारा वेब फ़ॉन्ट खोजने और डाउनलोड करने के बाद, उसे
रेंडर किया गया. डिफ़ॉल्ट रूप से, ब्राउज़र ऐसे किसी भी टेक्स्ट को रेंडर होने से रोक देता है जो
वेब फ़ॉन्ट अपलोड करें. ब्राउज़र की टेक्स्ट रेंडरिंग को अडजस्ट किया जा सकता है
उपयोगकर्ता के व्यवहार के बारे में सोच सकता है. साथ ही, यह कॉन्फ़िगर कर सकता है कि वेब तक कौनसा टेक्स्ट दिखाया जाए या नहीं दिखाया जाए
font-display सीएसएस प्रॉपर्टी का इस्तेमाल करके फ़ॉन्ट को पूरी तरह लोड किया गया है.
block
font-display की डिफ़ॉल्ट वैल्यू block है. ब्राउज़र, block की मदद से
दिए गए वेब फ़ॉन्ट का इस्तेमाल करने वाले किसी भी टेक्स्ट को रेंडर होने से रोकता है. अलग
ब्राउज़र कुछ अलग तरीके से काम करते हैं. Chromium और Firefox ने इसके लिए रेंडरिंग को ब्लॉक किया है
फ़ॉलबैक का इस्तेमाल ज़्यादा से ज़्यादा तीन सेकंड पहले कर सकता है. Safari अनिश्चित काल तक ब्लॉक करता है
जब तक कि वेब फ़ॉन्ट लोड न हो जाए.
swap
सबसे ज़्यादा इस्तेमाल की जाने वाली font-display वैल्यू swap है. swap ब्लॉक नहीं करता है
में रेंडर हो जाता है और टेक्स्ट को ज़ूम इन करने से पहले तुरंत फ़ॉलबैक में
बताया गया वेब फ़ॉन्ट है. इससे आपको इंतज़ार किए बिना, तुरंत अपना कॉन्टेंट दिखाने की सुविधा मिलती है
वेब फ़ॉन्ट डाउनलोड करने के लिए.
हालांकि, swap की एक समस्या यह है कि यह फ़ॉलबैक की वजह से, लेआउट शिफ़्ट हो जाती है
आपकी सीएसएस में दिए गए वेब फ़ॉन्ट और वेब फ़ॉन्ट में लाइन के हिसाब से काफ़ी फ़र्क़ होता है
ऊंचाई, कर्निंग, और अन्य फ़ॉन्ट मेट्रिक होती हैं. इससे आपकी वेबसाइट के CLS पर असर पड़ सकता है, अगर
आप वेब फ़ॉन्ट संसाधन को जल्द से जल्द लोड करने के लिए, preload संकेत का इस्तेमाल करने पर ध्यान नहीं देते
संभव है या अगर आप अन्य font-display मानों पर विचार नहीं करते हैं.
fallback
font-display की fallback वैल्यू
block और swap. swap के उलट, ब्राउज़र फ़ॉन्ट की रेंडरिंग ब्लॉक करता है, लेकिन
फ़ॉलबैक टेक्स्ट को बहुत कम समय के लिए ही बदल सकते हैं. block को नापसंद करें,
हालांकि, रोक लगाने की अवधि बहुत कम होती है.
fallback वैल्यू का इस्तेमाल करने से, तेज़ स्पीड वाले नेटवर्क पर बेहतर तरीके से काम किया जा सकता है. अगर वेब फ़ॉन्ट का इस्तेमाल किया जाता है, तो
डाउनलोड तेज़ी से हो सकता है, वेब फ़ॉन्ट ऐसा टाइपफ़ेस है जो पेज के टेक्स्ट पेज पर तुरंत इस्तेमाल किया जाता है
शुरुआती रेंडरिंग. हालांकि, अगर नेटवर्क धीमे हैं, तो फ़ॉलबैक टेक्स्ट
पहले ब्लॉक करने की अवधि खत्म होने के बाद, और फिर वेब फ़ॉन्ट के खत्म होने पर उसकी जगह
आने का समय.
optional
optional, font-display की सबसे सख्त वैल्यू है और इसमें सिर्फ़ वेब का इस्तेमाल किया जाता है
फ़ॉन्ट संसाधन को स्कैन करता है. अगर वेब फ़ॉन्ट
तय अवधि से ज़्यादा समय तक लोड होती है, तो इसका इस्तेमाल पेज पर नहीं किया जाता और ब्राउज़र
वेब फ़ॉन्ट डाउनलोड होने के दौरान, मौजूदा नेविगेशन के लिए फ़ॉलबैक टाइपफ़ेस
और उसे ब्राउज़र कैश में रखा जाता है.
इस वजह से, बाद के पेज नेविगेशन तुरंत वेब फ़ॉन्ट का इस्तेमाल कर सकते हैं, क्योंकि
इसे पहले ही डाउनलोड किया जा चुका है. font-display: optional को देखे गए लेआउट शिफ़्ट से बचा जा सकता है
swap के साथ, लेकिन कुछ उपयोगकर्ताओं को वेब फ़ॉन्ट नहीं दिखाई देता अगर वह
पेज नेविगेशन के बारे में ज़्यादा जानें.
फ़ॉन्ट डेमो
अपने ज्ञान को परखें
ब्राउज़र वेब फ़ॉन्ट संसाधन कब डाउनलोड करता है (यह मानते हुए कि वह
preload डायरेक्टिव के साथ फ़ेच किया गया है)?
वेब पर विज्ञापन दिखाने के लिए, कौनसा फ़ॉर्मैट सबसे सही और सबसे असरदार है सभी मॉडर्न ब्राउज़र में फ़ॉन्ट इस्तेमाल करें?
अगला: कोड-स्प्लिट JavaScript
अपनी बेल्ट में फ़ॉन्ट ऑप्टिमाइज़ेशन के बारे में जानने के बाद, हम अगले मॉड्यूल पर जा सकते हैं. इसमें ऐसे विषय के बारे में बताया गया है जिसमें सुधार किए जाने की बहुत संभावना है आपके उपयोगकर्ताओं के लिए शुरुआती पेज लोड होने की स्पीड, और वह है पेज लोड होने की अवधि को JavaScript को कोड के हिसाब से बांटने का तरीका. ऐसा करके, आप बैंडविथ और सीपीयू (CPU) को बनाए रख सकते हैं एक पेज के स्टार्टअप चरण के दौरान जितना हो सके उतना कम विवाद, उपयोगकर्ता कितनी देर में इससे इंटरैक्ट कर सकते हैं.