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

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

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

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

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

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

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

वीडियो फ़ाइलों को कंप्रेस करने का एक तरीका यह है कि 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>

ऑटोप्ले

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

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

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

<!-- 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">

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

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

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

वीडियो डेमो

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

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

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