Autoptimize – Lazy load images

OK, maybe try adding IoT_Automotive_News_2020_NEW.jpg to the list of lazyload exclusion to ensure the hero image is always loaded immediately?

Greeting and thank you for the quick reply. Really appreciate it.

Just added IoT_Automotive_News_2020_NEW.jpg to exclusion list and did help, but the same problem persists with the content/images below the hero image.

Please see the following:
https://iot-automotive.news/home_213-2-2/

That the images load later you mean? Afraid that is exactly what “lazyload” does; loading images (a bit) later claudio in order to allow the rest of the site to load & render faster.

Sorry about this – maybe I did not explain it correctly.

The content below the hero image is still shifting upwards. The effect can be seen on a iPad (portrait view). Without Lazy load activated, this shifting does not happen. This is the problem I am now trying to resolve.

Any ideas would be treating appreciated.
Thank you.

OK, I see. The problem seems to be something along these lines;

* the images have no dimensions set in HTML
* so the lazyload placeholder AO inserts are given a standard (incorrect) size
* at that point the Javascript that ensures image placement kicks in and already start rendering the layout, but in doing so it bases the calculations on the placeholder size instead of on the real images so it isn’t able to render thing correctly.
* so then when the images are really loaded, this forces some redrawing.

The bad news; I don’t have a firm idea of how to fix this really. Maybe ask the developers of the plugin you use to create that raster how the image can be lazyloaded?

frank

Hi Frank, Once again – thank you for your time.

After reading your analysis, I installed a plugin “Specify Image Dimensions” and content shifting is now resolved. Sorry about this, but is there way to increase “viewport” as the images above the fold are still taking to long to load?

Above the fold images are loaded asap, viewport has no impact on those Claudio.