Adjust LazyLoad threshold

By default, the LazyLoad and LazyLoad for CSS background images features load 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.

1. Download the helper plugin zip file, then un-zip it. 
2. Open the PHP file in a text editor. 
3. Edit line 33. Replace 300 with your desired value. Increase the value to load more images initially. Decrease it to load fewer.  Save the file. 
4. Re-zip the folder. 
5. Install the helper plugin on your site - go to Plugins → Add New → Upload plugin and select the zip file. 
6. Activate the plugin 
7. Clear the WP Rocket cache