Overview
Functionality
HTML embedded content especially flash content, takes a significant time to load which decreases the overall page load speed. As more embedded objects are added to the page, this could literally spell page load chaos. This library addresses this issue by not directly loading YouTube embedded content. Instead, video thumbnails and titles are fetched using the YouTube Data API then placed in such a way that makes it look like the YouTube embedded player layout. Moreover with the aid of the jQuery lazy load plugin, these fetched thumbnails are only rendered using Ajax when the user scrolls to see them thus, the thumbnails loading time is also eliminated.
Download
Usage
-
import "jQuery" & the "lazy load" plugin if you haven't:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.lazyload.min.js"></script> -
import the "YouTube Lite Embed" Plugin:
<script type="text/javascript" src="lite-youtube-min.js"></script>
-
Add the following CSS Rules:
<style>
div.lite {
position: relative; left: 0; top: 0
}
img.lite:hover {
background:url(http://lh5.googleusercontent.com/-oBFjswrosz4/TuHqainRc3I/AAAAAAAAAbE/t3rMQuSJdLA/s800/youtube-play-button-hover.png)
}
</style> -
Finally, you can simply embed a youtube video anywhere using the following markup:
<div class="lite" id="youtube_video_id" style="width:my_width;height:my_height;"></div>
Where:
- youtube_video_id is the id of that video. (Typically, the value after 'v=' in the URL)
- my_width and my_height are the width and height of the embedded player in either pixels (Ex: 360px) or percetage (Ex: 50%).
Alternatively, you can install this chrome extension that I coded which will automatically copy the aforementioned special markup code to your clipboard whenever you click it's icon whilst being at a youtube video page.
Demos
- A demo page consisting of 10 YouTube videos while using the lite embed library can be found here (fast embed demo)
- An equivalent demo page to it WITHOUT the library can be found here (slow embed demo)
Benchmarks
The best way to test it out is to check the demos above. You'll instantly feel the difference especially if you are a *nix user.
"There are three types of lies: lies, damned lies and benchmarks"
That being said, let's get down to the results =)
Without the lite embed library, the page took 7.721s to fully load without caching. On the other hand, the page took ONLY 1.263s to load using the library under the same benchmark configuration. This is 6.1x Faster !!!. (PS: this was only tested on a page that has 10 videos. Try it with more videos and be impressed)
-
Benchmark summary using the library:
Document Complete Fully Loaded Load Time First Byte Start Render Time Requests Bytes In Time Requests Bytes In First View 1.227s 0.190s 0.804s 1.227s 18 75 KB 1.263s 18 75 KB Repeat View 0.521s 0.196s 0.503s 0.521s 1 2 KB 0.865s 12 6 KB -
Benchmark summary without the library:
Document Complete Fully Loaded Load Time First Byte Start Render Time Requests Bytes In Time Requests Bytes In First View 0.947s 0.198s 0.000s 0.947s 3 39 KB 7.721s 28 602 KB Repeat View 0.556s 0.149s 0.000s 0.556s 2 6 KB 0.962s 12 41 KB -
Detailed results can be fount at link1 and link2 for the "Using the library" and "Without the library" scenarios respectively.
Development
https://github.com/TjWallas/YouTube-Lite-Embed