Lazyframe Advanced
a dependency-free library to lazyload iframes and save bandwidth and memory
Why would you use it?
JavaScripts loaded from external providers like YouTube or Vimeo or Google Maps are big and waste precious bandwidth (especially on mobile). This slows down the loading of your website, even if your visitors don't want to see your beautiful videos or embeds.
For example here are the number of requests and filesizes of some well-known services:
- YouTube – 11 requests ≈ 1099kb (over a megabyte) 😲
- Google maps – 52 requests ≈ 520kb 😲
- Vimeo – 8 requests ≈ 232kb 😲
What does it do?
LazyframeAdvanced creates a responsive placeholder (and a placholder image from noembed.com or your custom one) for embedded content and only requests its content and scripts when the user interacts with it.
This decreases the page load and idle time. LazyframeAdvanced comes with brand-like themes for YouTube and Vimeo.
The thumnail placeholder is only loaded when the frame is in view, this saves additional bandwidth.
Examples
YouTube video with thumbnail and title from noembed.com
YouTube video with custom thumbnail image and custom title
Vimeo video with thumbnail and title from noembed.com
Google maps iframe with static placeholder image
Custom iframe with a Surveymonkey form
This video from vimeo has the data-initinview parameter set to to true, so it autoplays, when it enters the viewport
Need Help? Found a bug?
File an issue on GitHub