Easy Lazy Loader
The most fully featured, incredibly easy to set up lazy load plugin for WordPress.
Easy Lazy Loader is the most fully featured, incredibly easy to set up lazy load plugin for WordPress. Lazy load images, videos, iframes and audios to improve page load times. Uses jQuery.sonar to only load an element when it’s visible in the viewport. The plugin also adds an “Settings > Easy Lazy Loader” page which allows you to configure the settings from the admin interface of your site.
You can also lazy load other images, iframes, videos and audios in your theme, by using a simple filter.
Non-javascript visitors gets the original element in noscript.
Compatible with the RICG Responsive Images plugin for responsive images.
Features
- Lazy load images, iframes, videos, and audios.
- Custom image placeholder.
- Low-res preview image placeholder.
- Color preview placeholder.
- Skip classes to ignore some elements by class name.
- Full support of jQueryMobile framework
- WordPress Multi site ready.
- Backend support for RTL display.
- Translation ready
Image Lazy Load
Images are the number one element that slows page load and increases bandwidth use. Easy Lazy Loader works with the responsive images feature introduced in WordPress 4.4.
Video Lazy Load
Easy Lazy Loader supports all WordPress video Embeds including Youtube, Vimeo and HTML5 video – for a full list see the WordPress Codex Embeds list. The WordPress embed method of copying and pasting the video url into posts and pages content area is fully supported.
Audio Lazy Load
Easy Lazy Loader supports all WordPress audio Embeds including SoundCloud, Spotify and HTML5 audio – for a full list see the WordPress Codex Embeds list. The WordPress embed method of copying and pasting the audio url into posts and pages content area is fully supported.
Iframe Lazy Load
Easy Lazy Loader has built in support for content that is added by iframe from any source in content and widgets examples.
- WordPress embedded media
- Facebook Like boxes with profiles, Like buttons, Recommend
- Google+ Profile
- Google Maps
Placeholders Options
Several strategies to fill the area of an image before it loads.
- Keeping the space empty for the image: In a world of responsive design, this prevents content from jumping around. Those layout changes are bad from a user’s experience point of view, but also for performance. The browser is forced to do layout re calculations every time it fetches the dimensions of an image, leaving space for it.
- Placeholder: Imagine that we are displaying a user’s profile image. We might want to display a silhouette in the background. This is shown while the main image is loaded, but also when that request failed or when the user didn’t set any profile picture at all. These images are usually vector-based, and due to their small size are a good candidate to be inlined.
- Solid colour: Take a colour from the image and use it as the background colour for the placeholder. This can be the dominant colour, the most vibrant… The idea is that it is based on the image you are loading and should help making the transition between no image to image loaded smoother.
- Blurry image: Also called blur-up technique. You render a tiny version of the image and then transition to the full one. The initial image is tiny both in pixels and kBs. To remove artifacts the image is scaled up and blurred.
Plugin Compatibility
- Work with any WordPress theme that follows the WordPress Theme Codex
- Fully compatible with WPTouch plugin
- Fully compatible with MobilePress plugin
- Fully compatible with WP-Print plugin
- Fully compatible with Opera Mini browser
- Will not conflict with any plugin that has lazy load built in
- Plugin Developers Easy Lazy Loader filter allows them to let lazy load apply to their plugin
- Tested 100% compatible with WP Super Cache and W3 Total Cache plugins
- Tested 100% compatible with Amazon Cloudfront
- Fully compatible with CDN architecture.
What is Lazy Loading?
Lazy loading is a technique for loading web content when it’s needed rather than all at once. Normally when a user opens a webpage, the entire page’s contents are downloaded and rendered in a single go. While this allows the browser to cache the web page, there’s no guarantee that the user will actually view all of the downloaded content.
For example, If an entire photo gallery is downloaded but the user leaves after only viewing the first image, then the result is wasted memory and bandwidth.
Instead of bulk loading all of the content when the page is accessed, content can be loaded when the user accesses a part of the page that requires it. With lazy loading, pages are created with placeholder content which is only replaced with actual content when the user needs it.
How Lazy Loading Works
When someone adds a resource to a web page (image, video, etc.), the resource references a small placeholder. As a user browses the web page, the actual resource is cached by the browser and replaces the placeholder when the resource becomes visible on the user’s screen. For instance, if the user loads a webpage and immediately leaves it, then nothing beyond the top portion of the web page is loaded.
Benefits of Lazy Loading
The main benefits of lazy loading break down into two areas…
Speed Up Your Page Load Times
The main benefit is a significant upgrade to your site’s initial load time. If you use lots of images in your posts, they’re going to add a bunch of size to your page. There’s really no point to loading them before it’s possible for visitors to see them.
So, better to load the page immediately and then fill in the web contents as they’re needed. You can’t even be sure readers will scroll the whole way down, which makes loading them entirely unnecessary.
That leads us to next point…
Save your Users’ Bandwidth
Not everyone is using unlimited bandwidth. For people who are limited by say, 3G mobile plans (or just horrible Internet providers), you can do them a favor by lazy loading your web contents. They’ll only have to use data for web contents they’re actually seeing.
They may never know, but it’s a nice thing to do, especially on your mobile site.
Installation
- Go to the Add New plugins screen in your WordPress admin area
- Click the “Upload Plugin” button
- Browse for the plugin file (easy-lazy-loader.zip)
- Click Install Now and then activate the plugin
Frequently Asked Questions (FAQ)
Whoa, this plugin is using JavaScript. What about visitors without JS?
No worries. They get the original element in a noscript element. No Lazy Loading for them, though.
I’m using a CDN. Will this plugin interfere?
Lazy loading works just fine. The images will still load from your CDN.
How do I change the placeholder image?
add_filter( ‘ell_placeholder_url’, ‘my_custom_placeholder_image’ );
function my_custom_placeholder_image( $image ) {
return ‘http://url/to/image’;
}
How do I lazy load other images in my theme?
If you have images output in custom templates or want to lazy load other images in your theme, you may pass the HTML through a filter:
'; $html = apply_filters( 'easy_lazy_loader_html', $html ); echo $html; ?>
Or, you can add an attribute called “data-lazy-src” and “data-lazy-type” with the source of the image URL and set the actual image URL to a transparent 1×1 pixel.
