Lazy Load by WP Rocket – WordPress plugin Free download

Click to 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.

Reviews

Leave a Reply

Your email address will not be published. Required fields are marked *