Wednesday, October 13, 2021

Youtube Embedded Video के लिए Lazy Load कैसे लगाएं? Blogger में

Youtube Embedded Video के लिए Lazy Load कैसे लगाएं? Blogger में
Wednesday, October 13, 2021

Youtube Embedded Video के लिए Lazy Load कैसे लगाएं? Blogger में

Lazy Load For Youtube

Lazy Load क्या है? | What Is Lazy Load?

Lazy Load एक Pattern है, जिसका उपयोग आमतौर पर पूर्ण Web Page Load होने के बाद Images और Videos को Load करता है। अगर आप अपने Blog या Website पर Lazy Load का उपयोग करते हैं, तो केवल ऊपरी Images Load होंगी, जैसे ही Users Page को Scroll करता है, बाकी की Images भी Load हो जाती है।

Technically Lazy Load एक Java Script के लिए बेहतर काम करती है, जो आपके Visitors के वर्तमान Viewport की जांच करती है। और केवल उन Images को Load करती है, जो उन्हें दिखाई देती हैं।

Lazy Load सिर्फ तभी काम करता है, जब कई Visitors आपकी Images तक पहुंचते हैं, या वें Page को Scroll करते हैं। अगर वें Images तक नही पहुंचते हैं, तो उन्हें Load करने की आवश्यकता नहीं है।

Lazy Load एक Script है, जो Page के Code में दर्ज की जाती है, जिसके कारण Visitors द्वारा Page खोलते ही Image और Video Files Load नही होते हैं, लेकिन जब Visitors Website को Scroll करता है, तो वें खुलने लगते हैं, जहां Image और Video होते हैं।

इसके अलावा, Lazy Load से Blog या Website बहुत तेज़ी से Load होती है। और साथ ही Visitors को संतुष्टि भी देता है। इस प्रकार की Programming Script Blog या Website की Loading गति में सुधार करने में सीधे तौर पर Helpful होती है, और Blog या Website को इस बात की अधिक संभावना बनाती है, की Visitors उस Blog या Website पर बने रहेंगे, और परिणामस्वरूप Conversion Rate बढ़ जाती है।

यह Visitors की Bandwidth बचाता है, क्योंकि उन्हें आपकी सभी Images को Download करने की आवश्यकता नही होती है। इसके अलावा, Users या Visitors आपकी Site को बहुत तेज़ी से Browse कर सकता है।

Lazy Loading Performance को Optimize करने का एक शानदार तरीका है।

Blogger में Lazy Load क्यों लगाएं?

Default Youtube Iframe जिसे हम Blog या Website में Embed करते हैं, वह Site के Front में बहुत सारे Resources को Load करके Loading Speed को Slow कर देता है।

Youtube Video का एक Embedded Iframe लगभग 500-700 KB लेगा, जो पूरे Page के आकार का लगभग 50-60% योगदान देगा। इसलिए आप अपनी Images, CSS और Javascript को कितना भी Optimize करलें, फिर भी ये Iframe Site की Loading Speed में अड़चन पैदा करेगा।

जब आप Page Speed Insight का उपयोग करके अपने Blog या Website का Test करते हैं, तो यह Main Thread को भी Block कर देता है।

Lazy load for youtube embedded video

यह Page Speed Insight में कई अन्य Errors को Trigger करता है, जैसे 👎
  • Reduce The Impact Of Third-party Code
  • Some Third-party Resources Can Be Lazy-Loaded With A Facade
  • Does Not Use Passive Listeners To Improve Scrolling Performance
  • Reduce Javascript Execution Time
  • Remove Unused Javascript
इन सभी Errors से Blog या Website की Loading Speed Slow हो जाती है, और इसलिए हम Lazy Load तकनीक का उपयोग करते हैं, जो इन सभी Errors को ठीक करती है, और आपके Blog या Website की Loading Speed को बढ़ाती है।

Youtube Iframe के लिए Lazy Load कैसे काम करता है?

अगर आप Youtube Video को Default Method के साथ Embed करते हैं, तो Page Load होते ही यह आवश्यक Resources को Load कर देगा, भले ही Visitors उस Video को चलाए या नहीं। इससे Website की Speed काफी Slow हो जाती है।

इस Error को Solve करने के लिए Lazy Load तकनीक का उपयोग किया जाता है, जो Youtube Video के Loading Time को रोक देता है। इसलिए जब कोई Visitor Page को Scroll करता है, तब Resources Automatically Load होना शुरू हो जाएंगे।

यह Server Bandwidth बचाता है, और Webpage को तेज़ी से Load करता है। यह Page Speed Insight में Main Thread को भी ब्लॉक नही करेगा, और जरूरत पड़ने पर ही Video को Load करेगा।

इस तरह केवल Browser Video के Thumbnail को ही Load करेगा, और जब कोई Visitor Play Button पर Click करेगा, तब ही Video Load और Play होगा। अब आप समझ गए होंगे की Youtube Video का Lazy Load कैसे काम करता है।

आइए अब हम Lazy Load को Implement करते हैं, ताकि आप भी अपने Blog या Website पर Lazy Load लगा सकें, और अपनी Site को तेज और Smooth बना सकें।

How To Put Lazy Load? In Your Blogger

सबसे पहले आपको Blogger Dashboard Open करना है > फिर Theme Section > में जाकर Edit HTML > करना है। और नीचे दिए गए Code को </body> Tag से पहले इसके ऊपर Paste करना है।

<style>
  .youtube-player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 0px;
  }
  .youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
  }
  .youtube-player img {
    object-fit: cover;
    display: block;
    left: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    -webkit-transition: 0.4s all;
    -moz-transition: 0.4s all;
    transition: 0.4s all;
  }
  .youtube-player img:hover {
    -webkit-filter: brightness(75%);
    -moz-filter: brightness(75%);
    filter: brightness(75%);
  }
  .youtube-player .play {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
     background: url("https://upload.wikimedia.org/wikipedia/commons/b/b8/YouTube_play_button_icon_%282013%E2%80%932017%29.svg") no-repeat;
    cursor: pointer;
  }
</style>
<a href='https://m.prakarwal.tech'/>
<script type="text/javascript">
  //<![CDATA[
  function labnolIframe(div) {
    var iframe = document.createElement("iframe");
    iframe.setAttribute(
      "src",
      "https://www.youtube.com/embed/" + div.dataset.id + "?autoplay=1&rel=0"
    );
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("allowfullscreen", "1");
    iframe.setAttribute(
      "allow",
      "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    );
    div.parentNode.replaceChild(iframe, div);
  }
  function initYouTubeVideos() {
    var playerElements = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < playerElements.length; n++) {
      var videoId = playerElements[n].dataset.id;
      var div = document.createElement("div");
      div.setAttribute("data-id", videoId);
      var thumbNode = document.createElement("img");
      thumbNode.src = "https://i.ytimg.com/vi/ID/hqdefault.jpg".replace(
        "ID",
        videoId
      );
      div.appendChild(thumbNode);
      var playButton = document.createElement("div");
      playButton.setAttribute("class", "play");
      div.appendChild(playButton);
      div.onclick = function () {
        labnolIframe(this);
      };
      playerElements[n].appendChild(div);
    }
  }
  document.addEventListener("DOMContentLoaded", initYouTubeVideos);
  //]]>
</script>

अब Theme का काम हो गया इसको आपको Save कर देना है। इसके बाद आपको जिस Post में Youtube Video Embed करनी है, उस Post को Compose View से HTML View करना है, और जिस Area में आपको Video लगानी है, वहां पर नीचे दिए गए Code को Paste करना है।

<div class="youtube-player" data-id="VIDEO_ID"></div>

पर ध्यान रहे इस Code में आपको किसी भी Youtube Video की सिर्फ Video ID Change करनी है।

Example 👉 https://youtu.be/w38mNVLnwHQ ID Mark किया हुआ है। बस हो गया आपका काम, आपने Successfully Lazy Load को Implement कर दिया है अपने Blog या Website में।

Conclusion

तो मुझे आशा है, की अब आप समझ गए होंगे, Lazy Load क्या है?, Lazy Load को क्यों लगाना चाहिए?, Lazy Load कैसे काम करता है?

तो अगर आपको यह Article पसंद आया हो तो अपने Friends के साथ Share भी कर सकते हैं, ताकि आपके Friends भी यह Article पढ़ सकें। और अपने किसी भी सवाल के लिए नीचे Comment करना ना भूलें। 🙏🏻