WP Rocket
Forum Replies Created
-
Hi,
Please update to the 2.2 version of the plugin, it should help with your issue.
Hi,
The lazyload script we use will automatically load all images if it detects the visits comes from a crawling bot like googlebot.
Forum: Plugins
In reply to: [LazyLoad Plugin – Lazy Load Images, Videos, and Iframes] Many ProblemsHi,
We released a new version that should reduce the issues with animation and DOM changes if you want to give it a try.
You’re missing the quotes around the value, it should be:
add_filter( 'rocket_lazyload_youtube_thumbnail_resolution', function( $thumbnail_resolution ) { return 'maxresdefault'; } );Hi,
The way those images are loaded is not supported by the plugin currently, so they can’t be lazyloaded unfortunately.
This is a known issue with slider that calculate the height based on the image. Since the calculation is done while the placeholder image is still there, it’s breaking the layout like this.
Currently the only solution is to exclude the images or disable the lazyload on the pages with the slider.
For this case it’s not possible because there is no pattern in the images HTML that we could use to exclude them.
But in the FAQ we have an example of how to exclude images based on a class or an URL for example.
yes it’s the plugin. I didn’t know before if this testimonial part was a theme or a plugin feature on your site.
This is the HTML before JavaScript from the plugin does any modification:
<div class="sola_t_image " style="width:120px; height:120px;"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-lazy-src="https://www.horizonhomes-samui.com/wp-content/uploads/2015/04/t-ianfayhamilton.jpg" title="Ian & Fay Hamilton" alt="Ian & Fay Hamilton" /><noscript><img src="https://www.horizonhomes-samui.com/wp-content/uploads/2015/04/t-ianfayhamilton.jpg" title="Ian & Fay Hamilton" alt="Ian & Fay Hamilton" /></noscript></div>And this is after:
<div class="sola_t_image imgLiquid_bgSize imgLiquid_ready" style="width: 120px; height: 120px; background-image: url("data:image/svg+xml,%253Csvg%2520xmlns='http://www.w3.org/2000/svg'%2520viewBox='0%25200%25201%25201'%253E%253C/svg%253E"); background-size: cover; background-position: center top; background-repeat: no-repeat;"><img src="https://www.horizonhomes-samui.com/wp-content/uploads/2015/04/t-ianfayhamilton.jpg" data-lazy-src="https://www.horizonhomes-samui.com/wp-content/uploads/2015/04/t-ianfayhamilton.jpg" title="Ian & Fay Hamilton" alt="Ian & Fay Hamilton" style="display: none;" class="lazyloaded" data-was-processed="true"><noscript><img src="https://www.horizonhomes-samui.com/wp-content/uploads/2015/04/t-ianfayhamilton.jpg" title="Ian & Fay Hamilton" alt="Ian & Fay Hamilton" /></noscript></div>As you can see, all the inline CSS contained in the
styleattribute is added dynamically by the JS from the plugin. And thebackground-imageis based on thesrcattribute of the image container in thediv.To disable lazyload on this page, you can use the following code:
add_action( 'wp', 'deactivate_rocket_lazyload_on_single' ); function deactivate_rocket_lazyload_on_single() { if ( is_single( page_id ) ) { add_filter( 'do_rocket_lazyload', '__return_false' ); } }by replacing
page_idby the slug or ID of the page.Hi,
It’s a conflict with the theme. the background image for the containing div is dynamically added by copying the src value of the contained image, and using it as a style attribute.
With lazyload active, it’s copying the placeholder value instead of the real value, so the images are not displayed.
The only solution here would be to disable lazyload for this page.
It defer loading of off-screen images until they come in the viewport by scrolling for example.
Hi,
The images will be lazyloaded yes. The impact will be minimal though since they’re so high on the page.
We’re going to remove the data-cfasync=”false” by default in the next release. Instead there will be a filter available to modify the script tag for the lazyload script.
Hi,
It will depend on the placement of the image on the page. If it’s above the fold or close to it, it will still be loaded on page load.
If you have an example URL we could give a more specific answer.
Hi,
It’s not something easy to do yet, but we plan to add this automatically in the plugin for images we can detect the width and height.