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

वीडियो और ऐनिमेशन प्रदर्शन

प्रदर्शन पर प्रभाव कम करने के लिए वीडियो डिलीवरी, ऑटोप्ले नीतियों और CSS ऐनिमेशन को अनुकूलित कीजिए।

पाठ 3, कुल 4 में से11 चरण

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

मीडिया प्रदर्शन का परिचय

वीडियो और ऐनिमेशन आपकी वेबसाइट को आकर्षक और गतिशील बना सकते हैं। हालाँकि, वे पृष्ठ के धीमे लोड होने और खराब प्रदर्शन के सामान्य कारण भी हैं।

तेज़ और सहज उपयोगकर्ता अनुभव के लिए मीडिया को उपलब्ध कराने और उपयोग करने के तरीके को अनुकूलित करना अत्यंत महत्वपूर्ण है।

प्रदर्शन क्यों महत्वपूर्ण है

बड़ी वीडियो फ़ाइलें और अकुशल ऐनिमेशन आपकी वेबसाइट की गति को काफ़ी प्रभावित कर सकते हैं। इसके परिणामस्वरूप:

धीमा लोड समय: सामग्री दिखाई देने से पहले उपयोगकर्ता वेबसाइट छोड़ सकते हैं।
अधिक बैंडविड्थ उपयोग: उपयोगकर्ताओं और सर्वर, दोनों के लिए महँगा।
असहज उपयोगकर्ता अनुभव: रुक-रुककर या देर से चलने वाले ऐनिमेशन अव्यावसायिक लगते हैं।

इन्हें अनुकूलित करने से उपयोगकर्ता संतुष्टि बढ़ती है और वेबसाइट छोड़ने की दर कम होती है।

वीडियो प्रारूप और कोडेक अनुकूलित करें

सही वीडियो प्रारूप और कोडेक चुनना पहला चरण है। आधुनिक कोडेक बहुत अधिक गुणवत्ता खोए बिना बेहतर संपीड़न प्रदान करते हैं।

WebM (VP9/AV1): उत्कृष्ट संपीड़न, वेब के लिए आदर्श।
MP4 (H.264): व्यापक रूप से समर्थित, अच्छा संतुलन।
AV1: अगली पीढ़ी का कोडेक, बेहतर संपीड़न प्रदान करता है और इसका समर्थन बढ़ रहा है।

ब्राउज़र संगतता के लिए हमेशा कई <source> टैग उपलब्ध कराएँ।

<video controls>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <p>Your browser does not support the video tag.</p>
</video>

`preload` और `poster` का उपयोग करें

preload विशेषता ब्राउज़र को बताती है कि प्रारंभ में कितना वीडियो डेटा प्राप्त करना है। metadata अक्सर अच्छा संतुलन होता है, क्योंकि यह आयाम और अवधि दिखाने के लिए पर्याप्त डेटा ही प्राप्त करता है।

poster विशेषता आपको वीडियो लोड होने से पहले या उसके लोड होने के दौरान एक चित्र दिखाने देती है, जिससे अनुमानित प्रदर्शन और उपयोगकर्ता अनुभव बेहतर होता है।

<video controls preload="metadata" poster="thumbnail.jpg">
  <source src="myvideo.webm" type="video/webm">
</video>

CSS के साथ प्रतिक्रियाशील वीडियो

सुनिश्चित करें कि आपके वीडियो अलग-अलग स्क्रीन आकारों के अनुसार अच्छी तरह ढलें। एम्बेड किए गए वीडियो (जैसे YouTube/Vimeo iframe) का आस्पेक्ट अनुपात बनाए रखने की एक सामान्य तकनीक CSS पैडिंग युक्तियों का उपयोग करती है।

इससे वीडियो एक ऐसे कंटेनर में रहता है जो अनुपातिक रूप से आकार बदलता है।

<style>
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
</style>
<div class="video-container">
  <iframe src="https://www.youtube.com/embed/example" frameborder="0" allowfullscreen></iframe>
</div>

स्वतः चलने की नीतियाँ और UX

अधिकांश आधुनिक ब्राउज़र उपयोगकर्ताओं को परेशान होने से रोकने और डेटा बचाने के लिए स्वतः चलने पर कड़े नियम लागू करते हैं। स्वतः चलने के लिए वीडियो को अक्सर muted करना पड़ता है या उसे उपयोगकर्ता द्वारा शुरू किया जाना चाहिए।

playsinline का उपयोग करने पर iOS में वीडियो अपने प्लेबैक क्षेत्र के भीतर चलता है, न कि अपने-आप पूर्ण स्क्रीन में चला जाता है।

<video autoplay muted playsinline loop>
  <source src="intro.webm" type="video/webm">
</video>

कुशल CSS ऐनिमेशन

CSS के साथ ऐनिमेशन बनाते समय ऐसी विशेषताओं को प्राथमिकता दें जिन्हें ब्राउज़र कुशलता से संभाल सकें। transform और opacity अक्सर GPU द्वारा त्वरित किए जाते हैं, जिसका अर्थ है कि वे लेआउट की पुनर्गणना के लिए बाध्य नहीं करते।

width, height, top या left जैसी विशेषताओं को ऐनिमेट करने से महँगी लेआउट और पेंट प्रक्रियाएँ शुरू हो सकती हैं, जिससे झटकेदार अनुभव होता है।

<style>
.box {
  width: 100px; height: 100px;
  background-color: blue;
  transition: transform 0.3s ease-out;
}
.box:hover {
  transform: translateX(20px) scale(1.1);
}
</style>
<div class="box"></div>

`will-change` गुण

CSS का will-change गुण ब्राउज़र को संकेत देता है कि किसी तत्व में निकट भविष्य में बदलाव होने की संभावना है। इससे ब्राउज़र पहले से अनुकूलन कर सकता है।

इसे सीमित रूप से और केवल वास्तव में ऐनिमेट हो रहे तत्वों पर उपयोग करें, क्योंकि अत्यधिक उपयोग संसाधनों की खपत कर सकता है।

<style>
.animated-element {
  will-change: transform, opacity;
  transition: transform 0.5s, opacity 0.5s;
}
.animated-element:hover {
  transform: translateY(10px);
  opacity: 0.8;
}
</style>
<div class="animated-element">Hello</div>

ऐनिमेशन की सर्वोत्तम विधियाँ

सहज और बेहतर प्रदर्शन वाले ऐनिमेशन सुनिश्चित करने के लिए:

इसे छोटा रखें: अवधि 500ms से कम रखने का लक्ष्य रखें।
`cubic-bezier` का उपयोग करें: स्वाभाविक दिखने वाली गति के लिए।
`auto` से बचें: `height: auto` या `width: auto` को ऐनिमेट न करें।
कम क्षमता वाले उपकरणों पर जाँचें: डेस्कटॉप पर सहज दिखने वाला ऐनिमेशन मोबाइल उपकरण पर सहज न हो सकता है।

त्वरित जाँच: मीडिया अनुकूलन

वीडियो और ऐनिमेशन को अनुकूलित करने के बारे में आपने जो सीखा है, उसका पुनरावलोकन करें। सभी सही कथनों का चयन करें।

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

पुनरावलोकन और अगले चरण

आपने वीडियो और ऐनिमेशन के प्रदर्शन को अनुकूलित करना सीख लिया है!

कुशल वीडियो प्रारूप और कोडेक चुनें।
बेहतर वीडियो उपलब्ध कराने के लिए preload और poster विशेषताओं का उपयोग करें।
प्रतिक्रियाशील वीडियो तकनीकें लागू करें।
ब्राउज़र की स्वतः चलने की नीतियों का सम्मान करें।
ऐनिमेशन के लिए transform और opacity जैसे GPU द्वारा त्वरित CSS गुणों को प्राथमिकता दें।
प्रदर्शन संबंधी संकेतों के लिए will-change का विवेकपूर्ण उपयोग करें।

इसके बाद आप JavaScript प्रदर्शन की सर्वोत्तम विधियों का अध्ययन करेंगे!

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

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

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

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

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

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

क्या “वीडियो और ऐनिमेशन प्रदर्शन” पाठ निःशुल्क है?

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

“वीडियो और ऐनिमेशन प्रदर्शन” में मैं क्या सीखूँगा?

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

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

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

“वीडियो और ऐनिमेशन प्रदर्शन” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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