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