वेब प्रदर्शन अनुकूलन और Lighthouse · पाठ

फ़ॉन्ट लोडिंग का अनुकूलन

लेआउट में बदलाव किए बिना वेब फ़ॉन्ट को कुशलतापूर्वक लोड करने के लिए `font-display`, प्रीलोडिंग और सबसेटिंग लागू कीजिए।

पाठ 2, कुल 4 में से10 चरण

फ़ॉन्ट लोडिंग का अनुकूलन, CoddyKit पर वेब प्रदर्शन अनुकूलन और Lighthouse का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह वेब प्रदर्शन अनुकूलन और Lighthouse सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। वेब प्रदर्शन अनुकूलन और Lighthouse पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

फ़ॉन्ट को बेहतर क्यों बनाएँ

वेब फ़ॉन्ट वेबसाइटों को सुंदर और विशिष्ट बनाते हैं, लेकिन वे प्रदर्शन में बड़ी रुकावट का कारण भी बन सकते हैं। बड़ी फ़ॉन्ट फ़ाइलों को डाउनलोड होने में अधिक समय लगता है, जिससे आपकी साइट की कुल गति और उपयोगकर्ता अनुभव पर सीधा प्रभाव पड़ता है।

फ़ॉन्ट के धीमे लोड होने से 'Flash of Unstyled Text' (FOUT) या 'Flash of Invisible Text' (FOIT) जैसी समस्याएँ हो सकती हैं। इस पाठ में हम फ़ॉन्ट को प्रभावी ढंग से लोड करने की व्यावहारिक तकनीकें सीखेंगे।

`font-display` से फ़ॉन्ट लोडिंग नियंत्रित करें

font-display CSS प्रॉपर्टी आपको यह नियंत्रित करने देती है कि वेब फ़ॉन्ट कैसे लोड और प्रदर्शित हों। फ़ॉन्ट के डाउनलोड होने तक यह ब्राउज़र को बताती है कि कौन-सी रणनीति अपनानी है, जिससे अचानक होने वाले दृश्य बदलावों को रोकने में सहायता मिलती है।

auto: ब्राउज़र का डिफ़ॉल्ट व्यवहार।
block: थोड़ी देर का अवरोध काल (अदृश्य टेक्स्ट), फिर अनिश्चितकालीन अदला-बदली।
swap: बहुत कम अवधि का अवरोध काल (अदृश्य टेक्स्ट), फिर अनिश्चितकालीन अदला-बदली।
fallback: बहुत कम अवधि का अवरोध, फिर थोड़ी देर की अदला-बदली, उसके बाद स्थायी वैकल्पिक फ़ॉन्ट।
optional: बहुत कम अवधि का अवरोध, कोई अदला-बदली नहीं, स्थायी वैकल्पिक फ़ॉन्ट।

`font-display: swap` का प्रयोग

font-display: swap प्रदर्शन और सुंदरता के बीच संतुलन बनाने का एक लोकप्रिय विकल्प है। यह ब्राउज़र को तुरंत वैकल्पिक फ़ॉन्ट इस्तेमाल करने के लिए कहता है। आपका कस्टम वेब फ़ॉन्ट डाउनलोड हो जाने पर वह वैकल्पिक फ़ॉन्ट की जगह ले लेता है।

इससे टेक्स्ट हमेशा दिखाई देता है और शुरुआती लोड के दौरान फ़ॉन्ट की शैली के बजाय सामग्री की पठनीयता को प्राथमिकता मिलती है।

@font-face {
  font-family: 'MyWebFont';
  src: url('mywebfont.woff2') format('woff2');
  font-display: swap;
}

`optional` और `fallback` रणनीतियाँ

font-display के अन्य मान अलग-अलग समझौते प्रस्तुत करते हैं:

fallback: कस्टम फ़ॉन्ट को बहुत कम अवधि का अवरोध काल (लगभग 100ms) और थोड़ी देर की अदला-बदली अवधि (लगभग 3s) देता है। यदि इन अवधियों के भीतर कस्टम फ़ॉन्ट तैयार नहीं होता, तो वैकल्पिक फ़ॉन्ट का स्थायी रूप से उपयोग किया जाता है।
optional: यह fallback के समान है, लेकिन ब्राउज़र नेटवर्क की स्थिति के आधार पर तय करता है कि कस्टम फ़ॉन्ट डाउनलोड किया जाए या नहीं। यदि फ़ॉन्ट जल्दी डाउनलोड नहीं होता, तो वैकल्पिक फ़ॉन्ट का स्थायी रूप से उपयोग किया जाता है और लेआउट में कोई बदलाव नहीं होता।

महत्वपूर्ण फ़ॉन्ट को प्रीलोड करना

आमतौर पर ब्राउज़र CSS को पार्स करते समय फ़ॉन्ट खोजते हैं। हालाँकि, प्रीलोडिंग की सहायता से आप ब्राउज़र को किसी संसाधन को उसके सामान्य रूप से खोजे जाने से *पहले* ही प्राप्त करने के लिए कह सकते हैं।

फ़ॉन्ट के लिए, <link rel="preload"> का अर्थ है कि फ़ॉन्ट का उपयोग करने वाली CSS पूरी तरह पार्स होने से पहले ही ब्राउज़र उसका डाउनलोड शुरू कर सकता है। इससे सही फ़ॉन्ट में टेक्स्ट दिखाई देने तक का समय काफ़ी कम हो जाता है।

फ़ॉन्ट को प्रीलोड करने का तरीका

आप अपने HTML के <head> अनुभाग में <link> टैग जोड़कर फ़ॉन्ट प्रीलोड कर सकते हैं। फ़ॉन्ट सही तरीके से प्राप्त हो और दो बार डाउनलोड न हो, इसके लिए as="font" और crossorigin शामिल करना महत्वपूर्ण है।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preload Font Example</title>
  <link rel="preload" href="mywebfont.woff2" as="font" type="font/woff2" crossorigin>
  <style>
    @font-face {
      font-family: 'MyWebFont';
      src: url('mywebfont.woff2') format('woff2');
      font-display: swap;
    }
    body {
      font-family: 'MyWebFont', sans-serif;
    }
  </style>
</head>
<body>
  <h1>Hello CoddyKit!</h1>
  <p>This text uses a preloaded web font.</p>
</body>
</html>

सबसेटिंग से फ़ॉन्ट का आकार घटाना

फ़ॉन्ट फ़ाइलों में अक्सर सैकड़ों या यहाँ तक कि हज़ारों वर्ण होते हैं। इनमें से कई, जैसे विशेष प्रतीक या अलग-अलग भाषाओं के वर्ण, आपकी विशिष्ट वेबसाइट पर उपयोग नहीं किए जाते।

फ़ॉन्ट सबसेटिंग ऐसी छोटी फ़ॉन्ट फ़ाइल बनाने की प्रक्रिया है जिसमें केवल वे विशिष्ट वर्ण (ग्लिफ़) शामिल होते हैं जिनकी आपकी वेबसाइट को वास्तव में आवश्यकता होती है। इससे फ़ाइल का आकार बहुत कम हो जाता है।

अपने फ़ॉन्ट का सबसेट क्यों बनाएँ

सबसेटिंग का आपकी वेबसाइट के प्रदर्शन पर सीधा और महत्वपूर्ण प्रभाव पड़ता है:

तेज़ डाउनलोड: छोटी फ़ॉन्ट फ़ाइलें बहुत तेज़ी से डाउनलोड होती हैं, जिससे पृष्ठ लोड होने का समय बेहतर होता है।
कम बैंडविड्थ: इससे आपके उपयोगकर्ताओं का डेटा बचता है, जो विशेष रूप से मोबाइल प्लान इस्तेमाल करने वालों के लिए महत्वपूर्ण है।
बेहतर उपयोगकर्ता अनुभव: कम प्रतीक्षा का अर्थ है कि उपयोगकर्ताओं को आपकी सामग्री सही शैली में बहुत जल्दी दिखाई देती है।

Font Squirrel's Webfont Generator या Google Fonts जैसे उपकरण सबसेट बनाने में सहायता कर सकते हैं।

फ़ॉन्ट संबंधी अपने ज्ञान की जाँच करें

निम्नलिखित में से कौन-सी वेब फ़ॉन्ट की लोडिंग और प्रदर्शन को बेहतर बनाने की प्रभावी रणनीतियाँ हैं?

इंटरैक्टिव पाठ में इसका उत्तर दें

फ़ॉन्ट लोडिंग का पुनरावलोकन

हमने वेब फ़ॉन्ट की लोडिंग को बेहतर बनाने की आवश्यक तकनीकों को देखा:

font-display: यह CSS प्रॉपर्टी डाउनलोड के दौरान फ़ॉन्ट के रेंडर होने के तरीके को नियंत्रित करती है और FOUT तथा FOIT को रोकती है।
प्रीलोडिंग: अपने HTML में <link rel="preload"> का उपयोग करने से महत्वपूर्ण फ़ॉन्ट पहले प्राप्त होते हैं और उनकी उपलब्धता तेज़ होती है।
सबसेटिंग: इसमें केवल आपकी वेबसाइट के लिए आवश्यक वर्ण शामिल करके फ़ॉन्ट फ़ाइल का आकार कम किया जाता है।

इन रणनीतियों को अपनाकर आप अपनी वेबसाइट के उपयोगकर्ता को महसूस होने वाले प्रदर्शन में महत्वपूर्ण सुधार कर सकते हैं और अधिक सहज उपयोगकर्ता अनुभव प्रदान कर सकते हैं।

शुरुआत निःशुल्क

एआई शिक्षक के साथ वेब प्रदर्शन अनुकूलन और Lighthouse सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 12
पाठ: 48

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “फ़ॉन्ट लोडिंग का अनुकूलन” पाठ निःशुल्क है?

हाँ—“फ़ॉन्ट लोडिंग का अनुकूलन” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और वेब प्रदर्शन अनुकूलन और Lighthouse पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। वेब प्रदर्शन अनुकूलन और Lighthouse पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“फ़ॉन्ट लोडिंग का अनुकूलन” में मैं क्या सीखूँगा?

लेआउट में बदलाव किए बिना वेब फ़ॉन्ट को कुशलतापूर्वक लोड करने के लिए `font-display`, प्रीलोडिंग और सबसेटिंग लागू कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ वेब प्रदर्शन अनुकूलन और Lighthouse का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या वेब प्रदर्शन अनुकूलन और Lighthouse शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर वेब प्रदर्शन अनुकूलन और Lighthouse शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“फ़ॉन्ट लोडिंग का अनुकूलन” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस वेब प्रदर्शन अनुकूलन और Lighthouse पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर वेब प्रदर्शन अनुकूलन और Lighthouse पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← वेब प्रदर्शन अनुकूलन और Lighthouse पर वापस जाएँ