How do you Defer Parsing of JavaScript for YouTube video on a WordPress site?

后端 未结 3 1421
伪装坚强ぢ
伪装坚强ぢ 2021-02-19 18:46

I just today realized that of my 1.2 MB site (per GTMetrix), 550k of it is a YouTube video.

My web site is a WordPress site, and the current video loads in an iframe.

相关标签:
3条回答
  • 2021-02-19 19:22

    1. Replace “scr” with “data-src”

    <iframe width="560" height="315" data-src="https://www.youtube.com/embed/123456789" frameborder="0" allowfullscreen></iframe>
    

    2. Add Javascript

    function init() {
    var vidDefer = document.getElementsByTagName('iframe');
    for (var i=0; i<vidDefer.length; i++) {
    if(vidDefer[i].getAttribute('data-src')) {
    vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
    } } }
    window.onload = init;
    

    Now your site will load faster compared to past.

    I have following this blog and it's working for me : http://www.codecanal.com/defer-parsing-javascript-youtube-videos/

    0 讨论(0)
  • 2021-02-19 19:28

    You can achieve this with two simple steps......

    1. Update your embed code like flowing....
    <iframe width="560" height="315" src="" data-src="generic_youtube_url" frameborder="0" allowfullscreen></iframe>
    
    1. Here is the java script part....
    function init() { 
    var vidDefer = document.getElementsByTagName('iframe');
    for (var i=0; i<vidDefer.length; i++) {
     if(vidDefer[i].getAttribute('data-src')) {
     vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
     } } } window.onload = init;
    

    Reference For more details:

    https://scottdeluzio.com/defer-parsing-javascript-youtube-videos/

    https://varvy.com/pagespeed/defer-videos.html

    P.S. I am personally using this and it works.

    Thanks Sabbir H

    0 讨论(0)
  • 2021-02-19 19:35

    The best and faster thing to do is to replace the video iframe by something like a link or an image, and load the iframe on click or another event.

    Ahmed Essam linked you a solution, but if you don't want or don't know how to edit files on your wordpress installation, the Embed Video Thumbnail plugin does the job:

    https://wordpress.org/plugins/embed-video-thumbnail/

    0 讨论(0)
提交回复
热议问题