Lazy Load Latest Posts and Background CSS Images

Hi, I’m looking at your page, but not sure which images are causing you trouble? Almost all of them are being loaded by our lazyload or JS WebP (or both), so perhaps you figured it out, or changed the page layout?

@nosilver4u no unfortunately I couldn’t figure it out, here is the screenshot of the images that are not in the view port, but still are being loaded as if there are. The upper 2 are css background images, the lower 3 are “latest post” gutenberg block thumbnails.

Screenshot

Any chance I could make them lazy load as well?

Thanks for the clarification! With most of those images, they are too close to the viewport, and so they are loaded immediately, rather than risk a user scrolling past them before they load.

However, if you would like to control the viewport “threshold”, you can see more info here: https://docs.ewww.io/article/74-lazy-load

For the two background images you highlighted, they are assigned by targeting the :before “pseudo attribute”, which we do not currently support, though I think it could be added without too much difficulty. I’ll look at that for the next release. Although again, since those images are in the same area as the other img elements, they are going to be above the default viewport threshold.

Thank you @nosilver4u I’ve tried changing the threshold to 100 by adding the following code to Snippets plugin, but unfortunately it still loads the mentioned ‘latest post’ thumbnails.

define( 'EIO_LL_THRESHOLD', 100 );

Am I doing something wrong?

Oh good grief, I added the threshold variable in the “script debug” version, but not in the production/minified version!
I’ve fixed it now, so it’ll be included in the 6.1.3 release.