Adjust LazyLoad Threshold

By default, LazyLoad loads images that are within 300px of the viewport (browser window). However you can adjust this threshold with the following. In this example the threshold is set to 100px:

function rocket_lazyload_custom_threshold( $threshold ) {
	return 100;
}
add_filter( 'rocket_lazyload_threshold', 'rocket_lazyload_custom_threshold' );

Reducing the threshold will give the appearance of loading the image faster, especially when scrolling quickly down a page. It will have the effect of the images "popping" or "snapping" into place.  

If you don't like that effect you can increase the threshold. This will load more images on the initial page load which means: 

  1. The initial load time could be a little longer depending on how many images are in that threshold. A large threshold means more images loaded right away, therefore increasing the overall loading time. 
  2. But since the image will already be loaded, when the user scrolls there will be no delay in the image displaying.

Adjusting the threshold is largely a matter of preference and opinion as to which option feels faster.

Helper Plugin

You can install this helper plugin to customize the threshold.

📝  Manual code edit required before use, to specify the threshold!

📥   Download (.zip):  WP Rocket | LazyLoad Threshold

Developers: You can find the code for this plugin on GitHub.