वीडियो की परफ़ॉर्मेंस

पिछले मॉड्यूल में, आपने इमेज से जुड़ी परफ़ॉर्मेंस की कुछ तकनीकों के बारे में जाना था. इमेज, वेब पर सबसे ज़्यादा इस्तेमाल किए जाने वाले संसाधन टाइप में से एक हैं. अगर इन्हें ऑप्टिमाइज़ करने और उपयोगकर्ता के व्यूपोर्ट को ध्यान में रखने का ध्यान नहीं रखा जाता है, तो ये काफ़ी बैंडविड्थ का इस्तेमाल कर सकती हैं.

हालांकि, वेब पर आम तौर पर सिर्फ़ इमेज ही नहीं दिखती हैं. वीडियो, एक और लोकप्रिय मीडिया टाइप है. इसका इस्तेमाल अक्सर वेब पेजों पर किया जाता है. संभावित ऑप्टिमाइज़ेशन के बारे में जानने से पहले, यह समझना ज़रूरी है कि <video>तत्व कैसे काम करता है.

वीडियो की सोर्स फ़ाइलें

मीडिया फ़ाइलों के साथ काम करते समय, आपके ऑपरेटिंग सिस्टम (.mp4, .webm वगैरह) पर दिखने वाली फ़ाइल को कंटेनर कहा जाता है. कंटेनर में एक या इससे ज़्यादा स्ट्रीम होती हैं. ज़्यादातर मामलों में, यह वीडियो और ऑडियो स्ट्रीम होती है.

कोडेक का इस्तेमाल करके, हर स्ट्रीम को कंप्रेस किया जा सकता है. उदाहरण के लिए, video.webm ऐसा हो सकता है कि इसमें WebM कंटेनर हो. इस कंटेनर में, VP9 का इस्तेमाल करके कंप्रेस की गई वीडियो स्ट्रीम और Vorbis का इस्तेमाल करके कंप्रेस की गई ऑडियो स्ट्रीम शामिल हो.

कंटेनर और कोडेक के बीच के अंतर को समझना ज़रूरी है. इससे आपको कम बैंडविड्थ का इस्तेमाल करके, अपनी मीडिया फ़ाइलों को कंप्रेस करने में मदद मिलती है. इससे पेज लोड होने में कम समय लगता है. साथ ही, इससे पेज के सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय (एलसीपी) भी बेहतर हो सकता है. एलसीपी, उपयोगकर्ता के अनुभव पर फ़ोकस करने वाली मेट्रिक है. साथ ही, यह Core Web Vitals की तीन मेट्रिक में से एक है.

वीडियो फ़ाइलों को कंप्रेस करने का एक तरीका, FFmpeg का इस्तेमाल करना है:

ffmpeg -i input.mov output.webm

FFmpeg का इस्तेमाल करते समय, ऊपर दी गई कमांड सबसे बुनियादी कमांड है. यह input.mov फ़ाइल को इनपुट के तौर पर लेती है और FFmpeg के डिफ़ॉल्ट विकल्पों का इस्तेमाल करके, output.webm फ़ाइल को आउटपुट के तौर पर देती है. ऊपर दी गई कमांड से, छोटी वीडियो फ़ाइल बनती है. यह सभी आधुनिक ब्राउज़र में काम करती है. वीडियो या FFmpeg के ऑडियो विकल्पों में बदलाव करके, वीडियो के फ़ाइल साइज़ को और भी कम किया जा सकता है. उदाहरण के लिए, अगर आपको GIF को बदलने के लिए <video> एलिमेंट का इस्तेमाल करना है, तो आपको ऑडियो ट्रैक हटाना होगा:

ffmpeg -i input.mov -an output.webm

अगर आपको वीडियो को और बेहतर तरीके से कंप्रेस करना है, तो FFmpeg, वैरिएबल बिटरेट एन्कोडिंग का इस्तेमाल किए बिना वीडियो कंप्रेस करने के लिए -crf फ़्लैग उपलब्ध कराता है. -crf का मतलब कॉन्स्टेंट रेट फ़ैक्टर है. यह एक ऐसी सेटिंग है जो कंप्रेशन के लेवल में बदलाव करती है. इसके लिए, यह दी गई रेंज में पूर्णांक स्वीकार करती है.

H.264 और VP9 जैसे कोडेक, -crf फ़्लैग के साथ काम करते हैं. हालांकि, इसका इस्तेमाल इस बात पर निर्भर करता है कि कौनसा कोडेक इस्तेमाल किया जा रहा है. ज़्यादा जानकारी के लिए, H.264 में वीडियो एन्कोड करने के लिए कॉन्स्टेंट रेट फ़ैक्टर और VP9 में वीडियो एन्कोड करते समय कॉन्स्टेंट क्वालिटी के बारे में पढ़ें.

एक से ज़्यादा फ़ॉर्मैट

वीडियो फ़ाइलों के साथ काम करते समय, एक से ज़्यादा फ़ॉर्मैट तय करने से, उन ब्राउज़र के लिए फ़ॉलबैक के तौर पर काम किया जा सकता है जो सभी नए फ़ॉर्मैट के साथ काम नहीं करते.

<video>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

सभी मॉडर्न ब्राउज़र, H.264 कोडेक के साथ काम करते हैं. इसलिए, MP4 का इस्तेमाल लेगसी ब्राउज़र के लिए फ़ॉलबैक के तौर पर किया जा सकता है. WebM वर्शन में, नए AV1 कोडेक का इस्तेमाल किया जा सकता है. हालांकि, यह अभी ज़्यादातर डिवाइसों पर काम नहीं करता. इसके अलावा, इसमें VP9 कोडेक का भी इस्तेमाल किया जा सकता है. यह AV1 कोडेक के मुकाबले ज़्यादा डिवाइसों पर काम करता है. हालांकि, आम तौर पर यह AV1 कोडेक की तरह वीडियो को कंप्रेस नहीं करता.

poster एट्रिब्यूट

वीडियो की पोस्टर इमेज को <video> एलिमेंट पर poster एट्रिब्यूट का इस्तेमाल करके जोड़ा जाता है. इससे उपयोगकर्ताओं को वीडियो चलाने से पहले ही पता चल जाता है कि वीडियो में क्या कॉन्टेंट हो सकता है:

<video poster="poster.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

ऑटोप्ले

HTTP Archive के मुताबिक, वेब पर मौजूद 20% वीडियो में autoplay एट्रिब्यूट शामिल होता है. autoplay का इस्तेमाल तब किया जाता है, जब वीडियो को तुरंत चलाना हो. जैसे, वीडियो बैकग्राउंड के तौर पर या ऐनिमेटेड GIF के विकल्प के तौर पर इसका इस्तेमाल किया जाता है.

ऐनिमेशन वाले GIF बहुत बड़े हो सकते हैं. ऐसा खास तौर पर तब होता है, जब उनमें कई फ़्रेम हों और उनमें जटिल जानकारी दी गई हो. ऐसा अक्सर होता है कि ऐनिमेटेड GIF, कई मेगाबाइट डेटा का इस्तेमाल करते हैं. इससे बैंडविथ काफ़ी कम हो जाता है. इस बैंडविथ का इस्तेमाल, ज़्यादा ज़रूरी संसाधनों के लिए किया जा सकता है. आम तौर पर, आपको ऐनिमेटेड इमेज फ़ॉर्मैट से बचना चाहिए, क्योंकि इस तरह के मीडिया के लिए <video> फ़ॉर्मैट ज़्यादा असरदार होते हैं.

अगर आपकी वेबसाइट के लिए, वीडियो अपने-आप चलने की सुविधा ज़रूरी है, तो <video> एलिमेंट पर सीधे तौर पर autoplay एट्रिब्यूट का इस्तेमाल किया जा सकता है:

<!-- This will automatically play a video, but
     it will loop continuously and be muted: -->
<video autoplay muted loop playsinline>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

poster एट्रिब्यूट को Intersection Observer API के साथ मिलाकर, अपने पेज को इस तरह कॉन्फ़िगर किया जा सकता है कि वीडियो सिर्फ़ तब डाउनलोड हों, जब वे व्यूपोर्ट में दिख रहे हों. poster इमेज, खराब क्वालिटी वाली इमेज का प्लेसहोल्डर हो सकती है. जैसे, वीडियो का पहला फ़्रेम. वीडियो व्यूपोर्ट में दिखने के बाद, ब्राउज़र वीडियो डाउनलोड करना शुरू कर देता है. इससे शुरुआती व्यूपोर्ट में मौजूद कॉन्टेंट को लोड होने में कम समय लग सकता है. हालांकि, autoplay के लिए poster इमेज का इस्तेमाल करने पर, आपके उपयोगकर्ताओं को एक ऐसी इमेज दिखती है जो वीडियो लोड होने और चलने तक सिर्फ़ कुछ समय के लिए दिखती है.

उपयोगकर्ता का चलाया गया वीडियो

आम तौर पर, एचटीएमएल पार्सर को <video> एलिमेंट का पता चलते ही, ब्राउज़र वीडियो फ़ाइल डाउनलोड करना शुरू कर देता है. अगर आपके पास ऐसे <video> एलिमेंट हैं जिनमें उपयोगकर्ता वीडियो चलाने की सुविधा शुरू करता है, तो शायद आपको यह नहीं चाहिए कि वीडियो तब तक डाउनलोड होना शुरू हो, जब तक उपयोगकर्ता उससे इंटरैक्ट न कर ले.

<video> एलिमेंट के preload एट्रिब्यूट का इस्तेमाल करके, यह तय किया जा सकता है कि वीडियो के संसाधनों के लिए क्या डाउनलोड किया जाए:

• preload="none" सेटिंग से ब्राउज़र को यह सूचना मिलती है कि वीडियो के किसी भी कॉन्टेंट को पहले से लोड नहीं किया जाना चाहिए.
• preload="metadata" सेटिंग से सिर्फ़ वीडियो का मेटाडेटा मिलता है. जैसे, वीडियो की अवधि और अन्य सामान्य जानकारी.

अगर आपको ऐसे वीडियो लोड करने हैं जिन्हें चलाने के लिए उपयोगकर्ताओं को कार्रवाई करनी पड़ती है, तो preload="none" को सेट करना सबसे सही विकल्प है.

इस मामले में, poster इमेज जोड़कर उपयोगकर्ता अनुभव को बेहतर बनाया जा सकता है. इससे उपयोगकर्ता को यह पता चलता है कि वीडियो किस बारे में है. इसके अलावा, अगर पोस्टर इमेज आपका एलसीपी एलिमेंट है, तो fetchpriority="high" के साथ <link rel="preload"> हिंट का इस्तेमाल करके, poster इमेज की प्राथमिकता बढ़ाई जा सकती है:

<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">

लेज़ी-लोडिंग

वीडियो की परफ़ॉर्मेंस से जुड़ी नई सुविधाओं में, loading=lazy एट्रिब्यूट शामिल है. यह एट्रिब्यूट, ब्राउज़र लेवल पर इमेज की लेज़ी लोडिंग और iframe के लिए भी यही सुविधा की तरह काम करता है. यह वीडियो के poster और preload डाउनलोड के लिए भी यही सुविधा देता है.

preload="none" या preload="metadata" के साथ poster एट्रिब्यूट का इस्तेमाल करने पर, वीडियो को डिफ़ॉल्ट रूप से डाउनलोड होने से रोका जा सकता है. वहीं, loading=lazy एट्रिब्यूट, वीडियो के व्यूपोर्ट में दिखने या उसके आस-पास होने तक, पोस्टर इमेज और मेटाडेटा को डाउनलोड होने से भी रोकता है.

एम्बेड करता है

वीडियो कॉन्टेंट को ऑप्टिमाइज़ करने और उसे असरदार तरीके से दिखाने में काफ़ी मुश्किल होती है. इसलिए, इस समस्या को YouTube या Vimeo जैसी वीडियो सेवाओं को सौंपना सही है. ये सेवाएं, आपके लिए वीडियो की डिलीवरी को ऑप्टिमाइज़ करती हैं. हालांकि, किसी तीसरे पक्ष की सेवा से वीडियो एम्बेड करने से, परफ़ॉर्मेंस पर असर पड़ सकता है. ऐसा इसलिए, क्योंकि एम्बेड किए गए वीडियो प्लेयर अक्सर कई अतिरिक्त संसाधन उपलब्ध करा सकते हैं, जैसे कि JavaScript.

इस वजह से, तीसरे पक्ष के वीडियो एम्बेड करने से पेज की परफ़ॉर्मेंस पर काफ़ी असर पड़ सकता है. HTTP Archive के मुताबिक, YouTube वीडियो एम्बेड करने से, मीडियन वेबसाइट के लिए मुख्य थ्रेड 1.7 सेकंड से ज़्यादा समय तक ब्लॉक हो जाती है. मुख्य थ्रेड को लंबे समय तक ब्लॉक करने से, उपयोगकर्ता अनुभव पर बुरा असर पड़ता है. इससे किसी पेज के पेज के रिस्पॉन्स में लगने वाले समय (आईएनपी) पर भी असर पड़ सकता है. हालांकि, पेज लोड होने के दौरान, एम्बेड किए गए वीडियो को तुरंत लोड न करके, इस समस्या को कुछ हद तक ठीक किया जा सकता है. इसके बजाय, एम्बेड किए गए वीडियो के लिए एक प्लेसहोल्डर बनाएं. जब उपयोगकर्ता उससे इंटरैक्ट करे, तब उस प्लेसहोल्डर को एम्बेड किए गए असली वीडियो से बदल दें.

वीडियो डेमो

अपने ज्ञान को परखें

अगला चरण: वेब फ़ॉन्ट ऑप्टिमाइज़ करना

अब हम खास तरह के संसाधनों को ऑप्टिमाइज़ करने के बारे में बात करेंगे. इस सीरीज़ में, फ़ॉन्ट के बारे में बताया गया है. अपनी वेबसाइट के फ़ॉन्ट को ऑप्टिमाइज़ करना एक ऐसी चीज़ है जिसे अक्सर अनदेखा कर दिया जाता है. हालांकि, इससे आपकी वेबसाइट के लोड होने की स्पीड और एलसीपी और लेआउट शिफ़्ट होने में लगने वाला समय (सीएलएस) जैसी मेट्रिक पर काफ़ी असर पड़ सकता है.