Tips and Resources

Speed up webpage load times with embedded YouTube videos

Guide for speeding up page load times with embedded YouTube videos

When embedding a YouTube video on your website, you may notice a big drop in the page's loading time. Running your website through checks like GTMetrix or YSlow will show that the YouTube video player is causing render blocking and suggests you Eliminate render-blocking resources. One approach to limit the impact of the embedded YouTube player on your page's load time is to defer loading the player until it's needed. If your website already uses  jQuery version 1.7+ you may find the Lazy Load XT jQuery plugin helpful to defer the loading on the YouTube player.

Lazy Load XT jQuery plugin

Download the latest Lazy Load XT javascript file jquery.lazyloadxt.extra.min.js from 

Once downloaded, upload the file jquery.lazyloadxt.extra.min.js to your webserver and make a note of where you have uploaded it. For example, when using Joomla upload it to the js folder of your template.

Defer YouTube Video iframe code

Find the iframe embed code for your YouTube video you wish to defer and change the existing code

<iframe ... src=" ></iframe>


<iframe ... data-src=" ></iframe>

Changing the src path to a data-src path will trigger the Lazy Load XT script and prevent the iframe from initially loading, and will instead load when the site visitor scrolls to the video.