Speed 
Deferring Videos
When you have videos from Youtube, Vimeo or just about any other provider embedded in your webpages it causes your page to load slower.
Just about every video can be deferred until after your initial pageload which will allow your page to load quickly without having to gather all the files and resources that the video is requesting.
By deferring the video files you are often saving dozens of files requests and resource downloads and it can really make a difference for your page speed. Videos fall under the Render blocking javascript error you may see in pagespeed tools when you examine your site.
Example video
I have added a video to this page just to show the concept. This page loads in less than half of a second, even with the video.
If I did not defer this video this same page would take over two and a half seconds to load.
Deferring videos
I deferred the video using the same system we use to defer images. With images the common method is to hide the image file to keep it from downloading during the page load then replace it via javascript so that the image loads after the pageload event. The difference with videos is that you are not loading a file, you are loading an iframe.
Using the same concept we can keep the video from loading all the associated files by not identifying the iframe src until after the page loads.
How embedded videos work
When you embed a video from Youtube or Vimeo on your page you are loading an iframe. When this iframe is called during pageload, it may actually ask for several and sometimes dozens of additional files and resources. These additional resources are what slows down a page. The resources are things like javascript files, analytical resources for the video provider (that call even more resources), and many other things that have nothing to do with you, and certainly have nothing to do with your initial page load.
The point is that none of those resources can be called if the iframe is not called from their server.
If we do not identify the source of the iframe, we do not have to start those additional calls.
How to defer videos
To do this we need to markup our embed code and add a small and extremely simple javascript. I will show the method I actually used for this page.
The html
In the above code I took the embed video code from Youtube and made two small changes. The first change is that I made the "src" empty by removing the url from it as below.
The second change I made is I put the url I cut from "src" and added it to "data-src".
The 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;
</script>
Usage
- Get the embed code of video you want
- Alter the embed code as described above
- Add the script to bottom of page
For most pages you can simply put the script right before the end body tag in your html.
by Patrick Sexton
