पिछले मॉड्यूल में, आपने परफ़ॉर्मेंस से जुड़ी कुछ तकनीकों के बारे में जाना इमेज, जो वेब पर बड़े पैमाने पर इस्तेमाल किए जाने वाले संसाधन हैं. इन्हें अगर उन्हें ऑप्टिमाइज़ करने और उपयोगकर्ता की व्यूपोर्ट को ध्यान में रखें.
हालांकि, वेब पर आम तौर पर सिर्फ़ इमेज वाले मीडिया का इस्तेमाल नहीं किया जाता. वीडियो
वेब पेजों पर अक्सर इस्तेमाल होने वाला कोई दूसरा लोकप्रिय मीडिया टाइप. ऐप की मदद से,
संभावित ऑप्टिमाइज़ेशन के लिए, पहले यह समझना ज़रूरी है कि <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 एट्रिब्यूट को इंटरसेक्शन ऑब्ज़र्वर एपीआई के साथ जोड़कर, ये काम किए जा सकते हैं
अपने पेज को सिर्फ़ वीडियो डाउनलोड करने के लिए तब कॉन्फ़िगर करें, जब वे व्यूपोर्ट में आ जाएं.
poster इमेज, हल्की क्वालिटी वाली इमेज प्लेसहोल्डर हो सकती है, जैसे कि पहला
वीडियो के फ़्रेम में रखें. व्यूपोर्ट में वीडियो दिखने के बाद, ब्राउज़र शुरू हो जाता है
वह वीडियो डाउनलोड कर रहा है. इससे
शुरू करें. autoplay के लिए poster इमेज का इस्तेमाल करने पर, समस्या को हल करने में मदद मिलेगी
आपके उपयोगकर्ताओं को एक इमेज मिलती है, जो सिर्फ़ तब तक दिखाई जाती है, जब तक वीडियो में
लोड हो जाता है और चलाना शुरू कर देता है.
उपयोगकर्ता की ओर से चलाया गया
आम तौर पर, एचटीएमएल कोड के साथ ही ब्राउज़र, वीडियो फ़ाइल डाउनलोड करना शुरू कर देता है
पार्सर, <video> एलिमेंट को खोजता है. अगर आपके पास ऐसे <video> एलिमेंट हैं जहां
जब कोई व्यक्ति वीडियो चलाना शुरू करता है, तो हो सकता है कि आप वीडियो डाउनलोड नहीं करना चाहें
जब तक उपयोगकर्ता उससे इंटरैक्ट न करे.
<video> का इस्तेमाल करके, यह तय किया जा सकता है कि वीडियो संसाधनों के लिए क्या डाउनलोड किया जाए
एलिमेंट का preload एट्रिब्यूट:
preload="none"को सेट करने पर, ब्राउज़र को पता चलता है कि वीडियो का कोई कॉन्टेंट नहीं है पहले से लोड होना चाहिए.preload="metadata"को सेट करने पर, सिर्फ़ वीडियो का मेटाडेटा फ़ेच होता है, जैसे कि वीडियो का अवधि और अन्य कर्सरी जानकारी.
अगर आप पेज लोड कर रहे हैं, तो preload="none" को सेट करना सबसे फ़ायदेमंद हो सकता है
ऐसे वीडियो जिनके लिए उपयोगकर्ताओं को वीडियो चलाने की ज़रूरत पड़ती है.
इस मामले में, poster की इमेज जोड़कर, उपयोगकर्ता अनुभव को बेहतर बनाया जा सकता है.
इससे उपयोगकर्ता को पता चल जाता है कि वीडियो किस बारे में है. इसके अलावा, अगर
पोस्टर इमेज आपका एलसीपी एलिमेंट है. आपके पास poster इमेज की
प्राथमिकता के आधार पर, <link rel="preload"> संकेत का इस्तेमाल किया जा रहा है
fetchpriority="high":
<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">
एम्बेड करता है
वीडियो कॉन्टेंट को बेहतर तरीके से ऑप्टिमाइज़ करने और दिखाने में मुश्किलें आ रही हैं. इस तरह की वीडियो सेवाओं पर समस्या को हल करना YouTube या Vimeo पर रजिस्टर करें. ऐसी सेवाएं आपके लिए वीडियो की डिलीवरी को ऑप्टिमाइज़ करती हैं, लेकिन किसी तीसरे पक्ष की सेवा का इस्तेमाल करके वीडियो एम्बेड करने से, परफ़ॉर्मेंस की जांच करें, क्योंकि एम्बेड किए गए वीडियो प्लेयर अक्सर विज्ञापन से जुड़े अन्य जैसे कि JavaScript.
इस सच्चाई को देखते हुए, एम्बेड किए गए तीसरे पक्ष के वीडियो की वजह से, पेज पर काफ़ी असर पड़ सकता है परफ़ॉर्मेंस. एचटीटीपी संग्रह के मुताबिक, YouTube मुख्य थ्रेड को एम्बेड करता है मीडियन वेबसाइट के लिए 1.7 सेकंड से ज़्यादा के लिए. मुख्य थ्रेड को इसके लिए ब्लॉक किया जा रहा है लंबी समयावधि एक ऐसी गंभीर समस्या है जो उपयोगकर्ता अनुभव पर असर डाल सकती है. पेज का इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी). हालांकि, आपके पास पहली बार पेज लोड होने के दौरान तुरंत एम्बेड नहीं किया जा सकता है, और इसके बजाय एम्बेड किए गए उस वीडियो के लिए प्लेसहोल्डर बनाएं जिसे एम्बेड किए गए असल वीडियो से बदल दिया गया है जब उपयोगकर्ता उससे इंटरैक्ट करता है.
वीडियो डेमो
अपने ज्ञान को परखें
किसी एलिमेंट में मौजूद <source> एलिमेंट का क्रम
पैरंट <video> एलिमेंट, तय नहीं करता है
कौनसा वीडियो संसाधन डाउनलोड हो जाता है.
<video> एलिमेंट का poster एट्रिब्यूट
को एलसीपी उम्मीदवार माना जाता है.
अगला: वेब फ़ॉन्ट ऑप्टिमाइज़ करें
कुछ खास तरह के संसाधनों को ऑप्टिमाइज़ करने से जुड़ी हमारी कवरेज में, फ़ॉन्ट का अगला नंबर आता है. अपनी वेबसाइट के फ़ॉन्ट को ऑप्टिमाइज़ करना ऐसी समस्या है जिसे अक्सर अनदेखा किया जाता है, लेकिन पर आपकी वेबसाइट की कुल लोड स्पीड पर काफ़ी असर पड़ता है. साथ ही, ऐसी मेट्रिक भी शामिल हैं एलसीपी और कुल लेआउट शिफ़्ट (सीएलएस) के तौर पर सेट करें.