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

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

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

अगर आपकी वेबसाइट के लिए, अपने-आप वीडियो चलने की सुविधा ज़रूरी है, तो सीधे <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 एट्रिब्यूट को इंटरसेक्शन ऑब्ज़र्वर एपीआई के साथ जोड़कर, अपने पेज को वीडियो डाउनलोड करने के लिए तब ही कॉन्फ़िगर किया जा सकता है, जब वे व्यूपोर्ट में शामिल हो जाएं. 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 सेकंड से ज़्यादा समय के लिए ब्लॉक कर दिया जाता है. मुख्य थ्रेड को लंबे समय के लिए ब्लॉक करना, उपयोगकर्ता अनुभव से जुड़ी एक गंभीर समस्या है. इसका असर पेज के इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) पर पड़ सकता है. हालांकि, शुरुआत में पेज लोड होने के दौरान एम्बेड को तुरंत लोड नहीं करके, समझौता किया जा सकता है. इसके बजाय, एम्बेड के लिए एक प्लेसहोल्डर बनाएं. एम्बेड की गई फ़ाइल को तब दिखाया जाता है, जब दर्शक एम्बेड किए गए वीडियो से इंटरैक्ट करता है.

वीडियो डेमो

देखें कि आपको कितना ज्ञान है

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

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