पिछले मॉड्यूल में, आपने एचटीएमएल, सीएसएस, 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 एलान
पेज लोड होने के दौरान, फ़ॉन्ट को पहले ही खोजा जा सकता है. इसके लिए, <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 को लोड होने से रोकना. ऐसा करने से, पेज के स्टार्टअप फ़ेज़ के दौरान बैंडविड्थ और सीपीयू के इस्तेमाल को कम से कम रखा जा सकता है. यह वह अवधि होती है, जब उपयोगकर्ता के पेज से इंटरैक्ट करने की संभावना काफ़ी ज़्यादा होती है.