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

रेंडर-अवरोधक संसाधन

पेज के प्रारंभिक लोड समय पर रेंडर-अवरोधक CSS और JavaScript के प्रभाव की पहचान और उसे कम कीजिए।

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

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

आपके पेज को क्या रोकता है?

जब ब्राउज़र कोई वेबपेज लोड करता है, तो उसे HTML, CSS और JavaScript जैसे विभिन्न संसाधनों को संसाधित करना पड़ता है। कभी-कभी कुछ संसाधनों को पूरी तरह संसाधित करना आवश्यक होता है, तभी ब्राउज़र उपयोगकर्ता को कोई सामग्री दिखाना शुरू कर सकता है।

इन्हें रेंडरिंग रोकने वाले संसाधन कहा जाता है। जब तक इनका प्रसंस्करण पूरा नहीं हो जाता, ये ब्राउज़र को पेज रेंडर करने से रोकते हैं और 'First Contentful Paint' में देरी करते हैं।

त्वरित अवलोकन: ब्राउज़र रेंडरिंग

पृष्ठ प्रदर्शित करने के लिए ब्राउज़र चरणों की एक श्रृंखला से गुजरता है, जिसे क्रिटिकल रेंडरिंग पाथ कहा जाता है। मुख्य चरणों में शामिल हैं:

HTML का पार्सिंग: डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) बनाया जाता है।
CSS का पार्सिंग: CSS ऑब्जेक्ट मॉडल (CSSOM) बनाया जाता है।
संयोजन: रेंडर ट्री (DOM + CSSOM) बनाया जाता है।
लेआउट: एलिमेंट के स्थान और आकार की गणना की जाती है।
पेंट: स्क्रीन पर पिक्सेल बनाए जाते हैं।

रेंडर ट्री बनाए जाने से पहले DOM और CSSOM दोनों आवश्यक होते हैं, इसलिए रेंडरिंग में CSS की महत्वपूर्ण भूमिका होती है।

CSS: रेंडर को रोकने वाला संसाधन

डिफ़ॉल्ट रूप से, बाहरी CSS फ़ाइलें रेंडरिंग को रोकने वाली होती हैं। इसका अर्थ है कि आपके HTML के <head> में लिंक की गई सभी बाहरी स्टाइलशीट के डाउनलोड, पार्स और लागू होने तक ब्राउज़र रेंडरिंग रोक देता है।

यह महत्वपूर्ण है, क्योंकि ब्राउज़र को एलिमेंट को सही ढंग से पेंट करने से पहले यह जानना आवश्यक होता है कि उन्हें कैसा दिखना चाहिए। यदि CSS लोड होने में अधिक समय लेती है, तो आपके उपयोगकर्ताओं को अधिक समय तक खाली स्क्रीन दिखाई देगी।

उदाहरण: डिफ़ॉल्ट CSS अवरोधन

इस सरल HTML पर विचार कीजिए। ब्राउज़र HTML का पार्सिंग रोक देगा और कुछ भी रेंडर करने से पहले style.css के डाउनलोड और प्रोसेस होने की प्रतीक्षा करेगा।

<!DOCTYPE html>
<html>
<head>
  <title>Blocking CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Welcome!</h1>
  <p>This content is waiting.</p>
</body>
</html>

`media` के साथ सशर्त CSS

आप अपने <link> टैग में media एट्रिब्यूट का उपयोग करके कुछ CSS को रेंडरिंग न रोकने वाली बना सकते हैं। इससे ब्राउज़र को पता चलता है कि कोई स्टाइलशीट केवल कुछ विशेष परिस्थितियों में लागू होती है, जैसे प्रिंट के लिए या खास स्क्रीन आकारों पर।

यदि media की शर्त वर्तमान देखने के वातावरण से मेल नहीं खाती, तो ब्राउज़र फिर भी CSS डाउनलोड करेगा, लेकिन यह शुरुआती रेंडरिंग को नहीं रोकेगी।

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="mobile.css" media="(max-width: 600px)">

आवश्यक स्टाइल को इनलाइन करना

रेंडरिंग रोकने वाली CSS के प्रभाव को कम करने की एक और रणनीति महत्वपूर्ण स्टाइल को इनलाइन करना है। ये वे न्यूनतम CSS नियम होते हैं जिनकी सहायता से 'फोल्ड के ऊपर' की सामग्री रेंडर की जाती है, अर्थात वह सामग्री जो उपयोगकर्ताओं को सबसे पहले दिखाई देती है।

इन स्टाइल को HTML के <head> में सीधे <style> टैग के भीतर रखने पर ब्राउज़र को अतिरिक्त नेटवर्क अनुरोध करने की आवश्यकता नहीं पड़ती, जिससे शुरुआती रेंडरिंग तेज हो जाती है। बची हुई, गैर-महत्वपूर्ण CSS को असमकालिक रूप से लोड किया जा सकता है।

JavaScript सब कुछ रोक देता है

CSS की तरह JavaScript भी रेंडरिंग को रोक सकती है। जब ब्राउज़र किसी पारंपरिक <script> टैग को देखता है, जिसमें async या defer एट्रिब्यूट नहीं होते, तो वह HTML का पार्सिंग रोक देता है।

इसके बाद वह JavaScript फ़ाइल को डाउनलोड, पार्स और निष्पादित करता है। स्क्रिप्ट का निष्पादन पूरा होने के बाद ही HTML का पार्सिंग फिर शुरू होता है। इससे रेंडरिंग में काफी देरी हो सकती है।

उदाहरण: डिफ़ॉल्ट JS अवरोधन

यहाँ, ब्राउज़र script.js पर पहुँचने पर HTML दस्तावेज़ का पार्सिंग रोक देगा। यदि script.js बड़ी है या उसे लोड होने में अधिक समय लगता है, तो स्क्रिप्ट का काम पूरा होने तक <h1> और <p> एलिमेंट का पार्सिंग या रेंडरिंग नहीं होगा।

<!DOCTYPE html>
<html>
<head>
  <title>Blocking JS</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Content Below Script</h1>
  <p>This waits for the script.</p>
</body>
</html>

स्क्रिप्ट के लिए `async` और `defer`

HTML, रेंडरिंग को रोकने से बचाने के लिए <script> टैग में दो एट्रिब्यूट प्रदान करता है:

async: HTML के पार्सिंग के साथ-साथ स्क्रिप्ट डाउनलोड करता है। डाउनलोड होते ही इसका निष्पादन शुरू हो जाता है, जो HTML का पार्सिंग पूरा होने से पहले भी हो सकता है। स्वतंत्र स्क्रिप्ट के लिए उपयोगी है।
defer: HTML के पार्सिंग के साथ-साथ स्क्रिप्ट डाउनलोड करता है। इसका निष्पादन HTML का पार्सिंग पूरी तरह पूरा होने के बाद, लेकिन DOMContentLoaded इवेंट से पहले होता है। निष्पादन का क्रम बना रहता है।

कोड उदाहरण: रेंडरिंग न रोकने वाला JS

async या defer जोड़ने पर, स्क्रिप्ट डाउनलोड होने के दौरान ब्राउज़र HTML का पार्सिंग जारी रख सकता है। इससे अनुभव की गई कार्यक्षमता बेहतर होती है।

<!DOCTYPE html>
<html>
<head>
  <title>Non-Blocking JS</title>
  <script async src="analytics.js"></script>
  <script defer src="main-app.js"></script>
</head>
<body>
  <h1>Page Content</h1>
  <p>This renders without waiting for scripts.</p>
</body>
</html>

रोकने वाले संसाधन को पहचानिए!

निम्नलिखित में से किन संसाधनों को आमतौर पर डिफ़ॉल्ट रूप से रेंडरिंग रोकने वाला माना जाता है?

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

मुख्य बातें

रेंडरिंग रोकने वाले संसाधन आपके वेबपृष्ठ के प्रदर्शित होने में देरी करते हैं। बाहरी CSS और पारंपरिक JavaScript, दोनों ब्राउज़र की रेंडरिंग प्रक्रिया को रोक सकते हैं।

CSS के लिए: सशर्त लोडिंग के लिए media एट्रिब्यूट का उपयोग कीजिए और महत्वपूर्ण स्टाइल को इनलाइन करने पर विचार कीजिए।
JavaScript के लिए: स्वतंत्र स्क्रिप्ट के लिए async या DOM पर निर्भर स्क्रिप्ट के लिए defer का उपयोग कीजिए, ताकि समानांतर डाउनलोड और रेंडरिंग को न रोकने वाला निष्पादन संभव हो सके।

इन संसाधनों को अनुकूलित करना तेज़ वेब प्रदर्शन की दिशा में एक महत्वपूर्ण कदम है!

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

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

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

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

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

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

क्या “रेंडर-अवरोधक संसाधन” पाठ निःशुल्क है?

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

“रेंडर-अवरोधक संसाधन” में मैं क्या सीखूँगा?

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

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

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

“रेंडर-अवरोधक संसाधन” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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