Lazy Load by WP Rocket – WordPress plugin Free download
Lazy Load by WP Rocket
Description
Lazy Load by WP Rocket displays images and/or iframes on a page only when they are visible to the user. This reduces the number of HTTP requests mechanism and improves the loading time.
This plugin works on thumbnails, all images in a post content or in a widget text, avatars, smilies and iframes. No JavaScript library such as jQuery is used and the script weight is less than 10KB.
You can also replace Youtube iframes by a preview thumbnail to further speed up the loading time of your website.
Dependencies
Lazyload script: https://github.com/verlok/lazyload
Related Plugins
Imagify: Best Image Optimizer to speed up your website with lighter images.
WP Rocket: Best caching plugin to speed-up your WordPress website.
Heartbeat Control by WP Rocket: Heartbeat Control by WP Rocket: Best plugin to control the WordPress Heartbeat API and reduce CPU usage.
Installation
Upload the complete rocket-lazy-load folder to the /wp-content/plugins/ directory
Activate the plugin through the ‘Plugins’ menu in WordPress
FAQ
How can I deactivate Lazy Load on some pages?
You can use the do_rocket_lazyload filter.
Here is an example to put in functions.php files that disable lazyload on posts:
add_action( 'wp', 'deactivate_rocket_lazyload_on_single' );
function deactivate_rocket_lazyload_on_single() {
if ( is_single() ) {
add_filter( 'do_rocket_lazyload', '__return_false' );
}
}
How can I deactivate Lazy Load on some images?
Simply add a data-no-lazy="1" property in you img or iframe tag.
You can also use the filters rocket_lazyload_excluded_attributes or rocket_lazyload_excluded_src to exclude specific patterns.
For iframes, the filter is rocket_lazyload_iframe_excluded_patterns.
How can I change the threshold to trigger the load?
You can use the rocket_lazyload_threshold filter.
Code sample:
function rocket_lazyload_custom_threshold( $threshold ) {
return 100;
}
add_filter( 'rocket_lazyload_threshold', 'rocket_lazyload_custom_threshold' );
I use plugin X and my images don’t show anymore
Some plugins are not compatible without lazy loading. Please open a support thread, and we will see how we can solve the issue by excluding lazy loading for this plugin.
How can I lazyload a background-image?
The plugin will automatically lazyload background-images set with a style attribute to a div element:
<div style="background-image: url(image.jpg);">
You can also apply it manually. The element you want to apply lazyload on must have this specific markup:
<div class="rocket-lazyload-bg" data-bg="url(../img/image.jpg)"></div>
The element must have the class rocket-lazyload-bg, and a data-bg attribute, which value is the CSS url for the image.
