YouTube Embeds बहुत भारी हैं, और इन्हें ठीक किया जा सकता है

• YouTube Embeds का आकार लगभग 1.3MB होता है और कई embeds के बीच resources साझा नहीं करते
• <lite-youtube> web component का उपयोग करने पर यह लगभग 100k तक घट जाता है, resources साझा करता है, और functionality से समझौता नहीं करता

YouTube वीडियो embed

• YouTube वीडियो को वेबसाइट में embed किया जा सकता है
• YouTube के Share मेनू में < > Embed विकल्प चुनने पर <iframe> शामिल HTML code दिया जाता है
• <iframe> performance के लिए अच्छा नहीं है, लेकिन संरक्षित third-party content के लिए उपयुक्त है

performance सुधारने के सुझाव

• loading="lazy" attribute जोड़ें ताकि वीडियो दिखाई न देने पर तुरंत load न हो
• inline style जोड़ें ताकि वीडियो का मूल ratio बना रहे और वह fluid रहे

मौजूदा YouTube Embed की समस्याएँ

• सिर्फ एक YouTube Embed वाले page में 32 requests, 1.3MB data transfer, और 2.76 सेकंड load time लगता है
• कई embeds के बीच resources साझा नहीं होते, इसलिए embed की संख्या बढ़ने पर data transfer रैखिक रूप से बढ़ता है

appearance और functionality

• YouTube Embed वीडियो की "poster" image, वीडियो title, और बड़ा play button देता है
• इन features को बहुत अधिक resources के बिना भी लागू किया जा सकता है

ऐसा क्यों है?

• हल्के embeds का परीक्षण किया गया था, लेकिन engagement घटने की रिपोर्ट मिली
• हालांकि यह परिणाम सहज समझ के खिलाफ है और इसकी गहराई से समीक्षा की जरूरत है
• बहुत अधिक resources का उपयोग पर्यावरण की दृष्टि से भी समस्या है

समाधान: embed अनुभव को दूसरे तरीके से दोहराना

• Google के Paul Irish द्वारा बनाया गया lite-youtube-embed web component मौजूद है
• यह component visual performance पर केंद्रित है और लगभग 224 गुना तेज render होता है
• यह default embed जैसी ही functionality देते हुए speed, efficiency, और default privacy में सुधार करता है

Lite YouTube Embed का उपयोग कैसे करें

1. web component को initialize करने वाला JavaScript जोड़ें
2. उपयोग करें

• npm से install किया जा सकता है या project में copy करके इस्तेमाल किया जा सकता है
• CDN से link करके भी इस्तेमाल किया जा सकता है

विकल्प

• Shadow DOM version (style protection, styling कठिन)
• खुद implement करना
  • Raymond Camden: YouTube Embed web component build करना (vanilla और WebC version)
  • Adrian Roselli: YouTube और Vimeo web components
• Mux: <youtube-video> (DOM API से मेल खाता है)
• React port और Next.js का आधिकारिक version

GN⁺ का सार

• YouTube Embed बहुत अधिक resources का उपयोग करता है, जिससे performance पर नकारात्मक असर पड़ता है
• lite-youtube-embed जैसे web component का उपयोग करने से performance में बड़ा सुधार हो सकता है
• इसका पर्यावरण पर भी सकारात्मक प्रभाव हो सकता है
• समान functionality देने वाले अन्य web components पर भी विचार किया जा सकता है

[xguru]

lite-youtube-embed - और तेज़ YouTube embed

[GN⁺]

Hacker News राय

• कम्युनिटी फ़ोरम प्लेटफ़ॉर्म पर YouTube embed का पता लगाकर उसे क्लिक करने तक लोड न होने वाले proxy thumbnail से बदल दिया जाता है

  • किसी एक व्यक्ति के YouTube वीडियो शेयर करने का मतलब यह नहीं होना चाहिए कि सभी users 1MB से अधिक YouTube JavaScript डाउनलोड करें और उनका IP Google द्वारा ट्रैक किया जाए

• लेखक यह नहीं मानता कि हल्का version engagement कम करता है

  • लेकिन मैं इसे पूरी तरह मानता हूँ
  • सुझाए गए lite-youtube-embed project page के demo में हल्का version वीडियो चलाने में ज़्यादा समय लेता है
  • load time में milliseconds की बढ़ोतरी के साथ engagement घटता है

• यह हैरानी की बात नहीं है कि अलग player users के साथ अलग तरह से व्यवहार करते हैं

  • lite-youtube-embed असली YouTube page पर क्लिक करके जाने नहीं देता
  • यह कंटेंट के वास्तविक source पर जाने से रोकने की कोशिश जैसा लग सकता है
  • मैं embedded वीडियो लगभग कभी नहीं चलाता, लेकिन जब चलाता हूँ तो सामान्य YouTube experience पसंद करता हूँ
  • अगर ऐसा लगे कि कोई अतिरिक्त layer है, तो क्लिक करने की संभावना कम हो जाती है

• यह इस गलत धारणा का उदाहरण है कि developers ठीक-ठीक जान सकते हैं कि users software का उपयोग कैसे करते हैं

  • मैं वीडियो और Google के उपयोग को कम करना चाहता हूँ, और JavaScript के megabytes घटाना चाहता हूँ
  • बेहतर web के लिए YouTube वीडियो embed करना बंद कर देना चाहिए

• bloggers को GitHub Gist embeds का उपयोग न करने के लिए मजबूर करने की ज़रूरत है

  • Hugo जैसे static site generators syntax highlighting वाले code snippets को support करते हैं
  • dynamic sites highlight.js का उपयोग कर सकती हैं

• embed का कुल भार कम करने और UX बेहतर करने का एक तरीका ads को block करना है

  • Content Security Policies का उपयोग करके page पर ads को block किया जा सकता है

• ublock users के लिए user-side solution के रूप में click 2 load का उपयोग किया जा सकता है

  • Chrome के manifest v3 पर जाने के कारण यह काम न करे, ऐसा हो सकता है

• ऐसे test results हैं जिनमें हल्के embeds engagement कम करते हैं

  • तेज़ load time से engagement बेहतर होना चाहिए, लेकिन अगर हल्के embeds के साथ engagement घटा, तो संभव है कि functionality की क़ीमत चुकानी पड़ी हो

• embedded वीडियो, YouTube server की files की ओर इशारा करने वाला <video> element हो सकता है

  • commercial interests बीच में आ गए

• embeds की संख्या बढ़ने पर भार रैखिक रूप से बढ़ता है

  • same-origin policy को cached resources के उपयोग की अनुमति देनी चाहिए

• lite youtube embed के विकल्प के रूप में मैं अपना solution साझा कर रहा हूँ

  • यह पूरी customization capability के लिहाज़ से बेहतर समझौता देता है