पिछले मॉड्यूल में, आपने एचटीएमएल, सीएसएस, 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क्वेरी स्ट्रिंग पैरामीटर तय करें. इसमें सिर्फ़ आपकी वेबसाइट के लिए ज़रूरी यूनिकोड कोड पॉइंट शामिल होने चाहिए. उदाहरण के लिए, अगर आपकी साइट पर ऐसा डिसप्ले वेब फ़ॉन्ट है जिसमें "वेलकम" वाक्यांश के लिए, सिर्फ़ कुछ वर्णों की ज़रूरत है, तो 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 का एक नुकसान यह है कि अगर फ़ॉलबैक वेब फ़ॉन्ट और आपकी सीएसएस में बताए गए वेब फ़ॉन्ट में लाइन की ऊंचाई, केर्निंग, और फ़ॉन्ट की अन्य मेट्रिक के मामले में काफ़ी अंतर होता है, तो इससे लेआउट में बदलाव होता है. अगर वेब फ़ॉन्ट रिसॉर्स को जल्द से जल्द लोड करने के लिए, preload हिंट का इस्तेमाल नहीं किया जाता है या font-display की अन्य वैल्यू का ध्यान नहीं रखा जाता है, तो इससे आपकी वेबसाइट के CLS पर असर पड़ सकता है.
fallback
font-display के लिए fallback की वैल्यू, block और swap के बीच का एक समझौता है. swap के उलट, ब्राउज़र किसी फ़ॉन्ट को रेंडर करने से रोकता है, लेकिन फ़ॉलबैक टेक्स्ट को सिर्फ़ कुछ समय के लिए बदलता है. हालांकि, block के मुकाबले, ब्लॉक करने की अवधि बहुत कम होती है.
fallback वैल्यू का इस्तेमाल, तेज़ नेटवर्क पर बेहतर तरीके से किया जा सकता है. अगर वेब फ़ॉन्ट तेज़ी से डाउनलोड होता है, तो वेब फ़ॉन्ट को पेज के शुरुआती रेंडरिंग पर तुरंत इस्तेमाल किया जाता है. हालांकि, अगर नेटवर्क की स्पीड धीमी है, तो फ़ॉलबैक टेक्स्ट, ब्लॉक करने की अवधि खत्म होने के बाद सबसे पहले दिखता है. इसके बाद, वेब फ़ॉन्ट आने पर उसे बदल दिया जाता है.
optional
optional, font-display की सबसे सख्त वैल्यू है. यह वेब फ़ॉन्ट संसाधन का इस्तेमाल सिर्फ़ तब करता है, जब वह 100 मिलीसेकंड में डाउनलोड हो जाता है. अगर किसी वेब फ़ॉन्ट को लोड होने में इससे ज़्यादा समय लगता है, तो उसे पेज पर इस्तेमाल नहीं किया जाता. साथ ही, ब्राउज़र मौजूदा नेविगेशन के लिए फ़ॉलबैक टाइपफ़ेस का इस्तेमाल करता है. इस दौरान, वेब फ़ॉन्ट को बैकग्राउंड में डाउनलोड करके, ब्राउज़र कैश मेमोरी में सेव किया जाता है.
इस वजह से, पेज पर नेविगेट करने पर, वेब फ़ॉन्ट का तुरंत इस्तेमाल किया जा सकता है, क्योंकि वह पहले से डाउनलोड हो चुका होता है. font-display: optional, swap के साथ दिखने वाले लेआउट शिफ़्ट से बचता है. हालांकि, अगर शुरुआती पेज नेविगेशन पर वेब फ़ॉन्ट बहुत देर से आता है, तो कुछ उपयोगकर्ताओं को वेब फ़ॉन्ट नहीं दिखता.
फ़ॉन्ट के डेमो
अपने ज्ञान को परखें
ब्राउज़र, वेब फ़ॉन्ट रिसॉर्स कब डाउनलोड करता है (यह मानते हुए कि इसे preload डायरेक्टिव से फ़ेच नहीं किया गया है)?
सभी मॉडर्न ब्राउज़र पर वेब फ़ॉन्ट दिखाने के लिए, कौनसा फ़ॉर्मैट ज़रूरी है और कौनसा सबसे असरदार है?
अगला लेख: कोड को अलग-अलग करने की सुविधा वाला JavaScript
फ़ॉन्ट ऑप्टिमाइज़ेशन के बारे में जानने के बाद, अब अगले मॉड्यूल पर जाएं. इसमें एक ऐसा विषय शामिल है जिससे आपके उपयोगकर्ताओं के लिए, पेज के लोड होने में लगने वाले समय को बेहतर बनाया जा सकता है. यह विषय है, कोड को अलग-अलग हिस्सों में बांटकर, JavaScript को लोड होने में लगने वाले समय को कम करना. ऐसा करने से, किसी पेज के स्टार्टअप फ़ेज़ के दौरान, बैंडविड्थ और सीपीयू के इस्तेमाल को कम से कम किया जा सकता है. यह वह समय होता है जब उपयोगकर्ताओं के पेज से इंटरैक्ट करने की संभावना ज़्यादा होती है.