When we use videos Like Youtube, Wistia, Vimeo, etc. Webpage speed will suffer a lot. Google has recently announced Google Search ranking is purely based on the PageSpeed.
Here is an easy way to defer your video that uses scripts.
Below is sample YouTube video Embed Link :
|
1 |
<iframe width="560" height="315" src="//www.youtube.com/embed/QUm1vh-iCGk" frameborder="0" allowfullscreen></iframe> |
Change the above code a bit to apply a trick.
|
1 |
<iframe width="560" height="315" src="" data-src="//www.youtube.com/embed/QUm1vh-iCGk" frameborder="0" allowfullscreen></iframe> |
Now we need to use small Javascript code to load the video without any issue.
|
1 2 3 4 5 6 7 8 9 |
<script> 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; </script> |
above javascript code will set the src=”” URL from copying the original video link from data-src=”” attribute.
That’s It. Now your page will load even faster. See how your site performs using GTMatrix
I’ll have to thank you for the success today
First time visiting your website, I really like your website!
Thank you for your comment sir.
I appreciate the information on your internet site. thnx.
Thank you. You will get even more. I have started a new blogging site