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

LCP, FID, CLS का गहन अध्ययन

Largest Contentful Paint (LCP), First Input Delay (FID) और Cumulative Layout Shift (CLS) का विस्तार से विश्लेषण कीजिए और उनके अनुकूलन की तकनीकें सीखिए।

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

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

Core Web Vitals का गहन अध्ययन

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

इस पाठ में हम Largest Contentful Paint (LCP), First Input Delay (FID) और Cumulative Layout Shift (CLS) का विश्लेषण करेंगे। आप सीखेंगे कि प्रत्येक क्या मापता है, वे क्यों महत्वपूर्ण हैं और उन्हें बेहतर बनाने की व्यावहारिक तकनीकें कौन-सी हैं।

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) यह मापता है कि व्यूपोर्ट में दिखाई देने वाले सबसे बड़े सामग्री तत्व को रेंडर होने में कितना समय लगता है। इसे इस रूप में समझें कि उपयोगकर्ता आपके पृष्ठ की मुख्य सामग्री कितनी जल्दी देख पाता है।

अच्छा LCP स्कोर 2.5 सेकंड या उससे कम होता है।
4 सेकंड से अधिक का समय खराब माना जाता है।

LCP आपके पृष्ठ की अनुमानित लोडिंग गति का एक प्रमुख संकेतक है।

LCP में किन चीज़ों की गिनती होती है?

सभी तत्व LCP में योगदान नहीं करते। आमतौर पर, पृष्ठ पहली बार लोड होने पर दिखाई देने वाली सबसे बड़ी छवि या पाठ का खंड LCP तत्व होता है। सामान्य LCP तत्वों में शामिल हैं:

<img> तत्व
<video> तत्व (अपनी पोस्टर छवि का उपयोग करते हुए)
url() के माध्यम से लोड की गई पृष्ठभूमि छवि वाले तत्व
टेक्स्ट नोड वाले ब्लॉक-स्तरीय पाठ तत्व (जैसे, <h1>, <p>)

अपने LCP तत्व को जानना उसे बेहतर बनाने का पहला कदम है!

LCP को बेहतर बनाना: संसाधनों की गति बढ़ाना

LCP का एक प्रमुख कारक यह है कि आपका ब्राउज़र महत्वपूर्ण संसाधनों, विशेष रूप से छवियों और फ़ॉन्ट को कितनी तेज़ी से प्राप्त और रेंडर कर सकता है। यहाँ एक सामान्य रणनीति दी गई है:

महत्वपूर्ण छवियों को पहले से लोड करें: ब्राउज़र को उच्च-प्राथमिकता वाले संसाधन जल्दी प्राप्त करने के लिए कहने हेतु <link rel="preload"> का उपयोग करें।
छवियों को बेहतर बनाएँ: उन्हें संपीड़ित करें, आधुनिक प्रारूप (WebP, AVIF) और प्रतिक्रियाशील छवियों का उपयोग करें।
रेंडर रोकने वाले संसाधनों को कम करें: ऐसे CSS और JavaScript को कम करें या बाद के लिए स्थगित करें, जो पृष्ठ को तेज़ी से रेंडर होने से रोकते हैं।

आइए, हीरो छवि को पहले से लोड करने का एक उदाहरण देखते हैं:

<!DOCTYPE html>
<html>
<head>
  <title>LCP Preload Demo</title>
  <!-- Preload the hero image to fetch it early -->
  <link rel="preload" href="https://via.placeholder.com/800x450.webp" as="image">
  <style>
    body { margin: 0; font-family: sans-serif; }
    img { max-width: 100%; height: auto; display: block; }
    h1 { padding: 10px; }
  </style>
</head>
<body>
  <h1>Welcome to Our Site!</h1>
  <!-- The actual image will render faster due to preload -->
  <img src="https://via.placeholder.com/800x450.webp" alt="Important Hero Image" width="800" height="450">
  <p>This image is likely the LCP element. Preloading helps it appear faster.</p>
</body>
</html>

First Input Delay (FID)

First Input Delay (FID) उस समय को मापता है जो उपयोगकर्ता द्वारा किसी पृष्ठ पर पहली बार इंटरैक्ट करने (जैसे बटन क्लिक करने या लिंक टैप करने) से लेकर ब्राउज़र द्वारा उस इंटरैक्शन को संसाधित करना शुरू करने में सक्षम होने तक लगता है।

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

अच्छा FID स्कोर 100 मिलीसेकंड या उससे कम होता है।
300 मिलीसेकंड से अधिक का स्कोर खराब माना जाता है।

FID अधिक क्यों है: व्यस्त मुख्य थ्रेड

अधिक FID का अक्सर अर्थ होता है कि ब्राउज़र का मुख्य थ्रेड अन्य कार्यों में व्यस्त है, आमतौर पर JavaScript चला रहा है, और उपयोगकर्ता के इनपुट पर तुरंत प्रतिक्रिया नहीं दे सकता।

इसके सामान्य कारणों में शामिल हैं:

लंबे JavaScript कार्य: ऐसे भारी स्क्रिप्ट जो लंबे समय तक चलती हैं और मुख्य थ्रेड को अवरुद्ध करती हैं।
बड़े JavaScript बंडल: अधिक कोड का अर्थ है उसे पार्स, कंपाइल और निष्पादित करने में अधिक समय लगना।
तृतीय-पक्ष स्क्रिप्ट: विज्ञापन, विश्लेषण या अन्य बाहरी स्क्रिप्ट मुख्य थ्रेड का काफी समय ले सकती हैं।

FID को बेहतर बनाना: मुख्य थ्रेड को मुक्त करना

FID को बेहतर बनाने के लिए आपको मुख्य थ्रेड के अवरुद्ध रहने की अवधि कम करनी होगी। इसे इस प्रकार करें:

लंबे कार्यों को विभाजित करें: बड़े JavaScript कार्यों को छोटे, असमकालिक भागों में बाँटें।
महत्वपूर्ण न होने वाले JS को स्थगित या असमकालिक करें: शुरुआती रेंडरिंग के लिए आवश्यक न होने वाली स्क्रिप्ट के लिए defer या async एट्रिब्यूट का उपयोग करें।
JavaScript पेलोड कम करें: अपने JavaScript बंडल को मिनिफ़ाई करें, ट्री-शेकिंग करें और कोड को अलग-अलग भागों में बाँटें।
Web Workers का उपयोग करें: अधिक गणना वाले कार्यों को पृष्ठभूमि के थ्रेड पर भेजें, ताकि मुख्य थ्रेड मुक्त रहे।

संचयी लेआउट शिफ्ट (CLS)

Cumulative Layout Shift (CLS) किसी पृष्ठ की दृश्य स्थिरता को मापता है। यह बताता है कि पृष्ठ के पूरे जीवनकाल में अनपेक्षित लेआउट शिफ्ट कितनी बार और कितनी मात्रा में होते हैं।

अनपेक्षित शिफ्ट तब होता है जब कोई दिखाई देने वाला तत्व एक रेंडर किए गए फ़्रेम से अगले फ़्रेम तक अपना प्रारंभिक स्थान बदल देता है। यह उपयोगकर्ताओं के लिए बहुत निराशाजनक हो सकता है!

अच्छा CLS स्कोर 0.1 या उससे कम होता है।
0.25 से अधिक का स्कोर खराब माना जाता है।

CLS के सामान्य कारण

लेआउट शिफ्ट अक्सर तब होते हैं जब स्थान सुरक्षित रखे बिना सामग्री लोड होती है या गतिशील रूप से बदलती है। मुख्य कारणों में शामिल हैं:

आयाम के बिना चित्र या वीडियो: मीडिया लोड होने तक ब्राउज़र को पता नहीं होता कि कितना स्थान सुरक्षित रखना है।
गतिशील रूप से जोड़ी गई सामग्री: ऐसे विज्ञापन, बैनर या विजेट जो पृष्ठ की रेंडरिंग शुरू होने के बाद दिखाई देते हैं।
FOIT/FOUT उत्पन्न करने वाले Web Fonts: देर से लोड होने वाले फ़ॉन्ट टेक्स्ट को दोबारा व्यवस्थित, गायब या फिर से दिखाई देने का कारण बन सकते हैं।
नेटवर्क प्रतिक्रिया की प्रतीक्षा करने वाली कार्रवाइयाँ: API कॉल पूरी होने के बाद बदलने वाली सामग्री।

CLS को बेहतर बनाना: स्थिर लेआउट

CLS को रोकने का मुख्य तरीका स्थान सुरक्षित रखना और यह सुनिश्चित करना है कि तत्व अनपेक्षित रूप से न हिलें। इसके लिए कुछ तकनीकें इस प्रकार हैं:

चित्र/वीडियो के आयाम निर्दिष्ट करें: हमेशा width और height एट्रिब्यूट या CSS aspect-ratio का उपयोग करें।
विज्ञापनों/एम्बेड के लिए स्थान सुरक्षित रखें: CSS min-height या प्लेसहोल्डर तत्व का उपयोग करें।
मौजूदा सामग्री के ऊपर सामग्री जोड़ने से बचें: खासकर पृष्ठ की शुरुआती रेंडरिंग के बाद।
फ़ॉन्ट पहले से लोड करें और font-display का उपयोग करें: फ़ॉन्ट लोड होने के व्यवहार को नियंत्रित करने के लिए font-display: optional या swap का उपयोग करें।

चित्र के आयाम निर्धारित करने से CLS कैसे रुकता है, इसका उदाहरण यहाँ दिया गया है:

<!DOCTYPE html>
<html>
<head>
  <title>CLS Prevention Demo</title>
  <style>
    body { font-family: sans-serif; }
    .container { width: 300px; margin: 20px auto; border: 1px solid #ccc; padding: 10px; }
    img { max-width: 100%; height: auto; display: block; margin-bottom: 10px; }
  </style>
</head>
<body>
  <div class="container">
    <p>This content is stable.</p>
    <!-- Image with specified width and height prevents layout shift -->
    <img src="https://via.placeholder.com/300x200" alt="Placeholder" width="300" height="200">
    <p>The content below the image does not jump around.</p>
  </div>
</body>
</html>

Core Web Vitals की जाँच

आइए Core Web Vitals और उन्हें बेहतर बनाने की तकनीकों की अपनी समझ जाँचें।

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

पुनरावलोकन: LCP, FID, CLS

आपने Core Web Vitals का गहराई से सफलतापूर्वक अध्ययन किया है!

LCP (Largest Contentful Paint): उपयोगकर्ता को महसूस होने वाली लोड गति को मापता है और सबसे बड़े सामग्री तत्व पर ध्यान केंद्रित करता है। इसे बेहतर बनाने के लिए पहले से लोडिंग करें, चित्रों को बेहतर बनाएँ और सर्वर की प्रतिक्रिया अवधि कम करें।
FID (First Input Delay): इंटरैक्टिविटी को मापता है और उपयोगकर्ता के इनपुट पर ब्राउज़र की प्रतिक्रिया से पहले की देरी पर ध्यान केंद्रित करता है। JavaScript कार्यों को छोटा करके और विभाजित करके इसे बेहतर बनाएँ।
CLS (Cumulative Layout Shift): दृश्य स्थिरता को मापता है। गतिशील सामग्री के लिए स्थान सुरक्षित रखकर, चित्रों के आयाम निर्दिष्ट करके और फ़ॉन्ट लोडिंग को नियंत्रित करके इसे बेहतर बनाएँ।

इन मेट्रिक को समझकर और बेहतर बनाकर आप उपयोगकर्ताओं के लिए कहीं बेहतर अनुभव तैयार करने में योगदान देते हैं!

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

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

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

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

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

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

क्या “LCP, FID, CLS का गहन अध्ययन” पाठ निःशुल्क है?

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

“LCP, FID, CLS का गहन अध्ययन” में मैं क्या सीखूँगा?

Largest Contentful Paint (LCP), First Input Delay (FID) और Cumulative Layout Shift (CLS) का विस्तार से विश्लेषण कीजिए और उनके अनुकूलन की तकनीकें सीखिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ वेब प्रदर्शन अनुकूलन और Lighthouse का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

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

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

“LCP, FID, CLS का गहन अध्ययन” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

Core Web Vitals का परिचय
LCP, FID, CLS का गहन अध्ययन
उपयोगकर्ता इंटरैक्शन मेट्रिक्स में सुधार
अगली पेंट तक इंटरैक्शन (INP)

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