Enabling Autoptimize lazy loading breaks CSS
-
When image lazy loading option enabled in Autoptimize, I get a huge gap between carousel and navigation dots. Any way to fix this?
The page I need help with: [log in to see the link]
-
@optimizingmatters thanks for clarifying! If you have any information about potential conflicts between Swiper and Autoptimize, please feel free to share it. @arskrigitsioniets It seems like the style is from the theme and aggregated/minified by Autoptimize. Swiper calculates slide dimensions during initialization but if images are lazy loaded they may not be rendered yet. As a result, Swiper may miscalculate the height of the container, leading to that extra space. I will need time to investigate this.
Swiper relies on the browser’s native lazy loading features but enabling this will require some updates to the plugin. I’ll add it to my to-do list for the next version, as this may be the best approach for optimizing Swiper’s performance.
Test on clean install with no plugins besides Carousel and Autoptimize confirmed the bug.
How to reproduce:
- Install Neve theme https://wordpress.org/themes/neve/ (also it reproduces on standard Twenty Twenty Five)
- Install Autoptimize plugin and enable images > lazy loading
- Create a post with carousel, set “Slides per view” to 1
- Add more than 3 images, adding Image block to carousels > insert by link (this is important):
You can use these:
https://s3.regru.cloud/strategycon-media/games/2025/The%20Guild%20Europa%201410/1.jpghttps://s3.regru.cloud/strategycon-media/games/2025/The%20Guild%20Europa%201410/2.jpghttps://s3.regru.cloud/strategycon-media/games/2025/The%20Guild%20Europa%201410/3.jpghttps://s3.regru.cloud/strategycon-media/games/2025/The%20Guild%20Europa%201410/4.jpg5. See the bug with excess margin.
Important to note that the bug appears only with carousel blocks with more than 3 images and only when images are inserted by link.
@arskrigitsioniets apologies for the late answer. I tested locally and was able to recreate the issue with images added by URL.
When using images from the Media Library, they include
widthandheightattributes so the browser knows their aspect ratio before they load and will have the correct space. However images added by URL don’t have that info and lazyloading when used with Swiper in a carousel will show a placeholder with a different ratio. Inside Swiper that placeholder’s taller ratio gets measured and you see the extra space.You have a few options to fix it:
- Set an aspect ratio in the editor. In the Image block settings, choose a ratio (
16:9will work for your 1920×1080 images) so the space is set correctly. - Or add custom CSS to apply a fixed aspect ratio to all images inside the carousel for example:
.wp-block-cb-carousel-v2.cb-single-slide .swiper-slide .wp-block-image { aspect-ratio: 16/9; }.wp-block-cb-carousel-v2.cb-single-slide .swiper-slide .wp-block-image > img { height: 100%; object-fit: cover; }If you need different aspect ratios for other carousels or image sets, you can add a custom class to the carousel block (in the editor’s Advanced → Additional CSS class) and adjust the CSS selector accordingly so only that carousel gets the specific ratio.
We can also add a special class to carousel images via PHP and exclude that class from Autoptimize lazyloading. This will require some custom coding, you can email me through my site (see link in previous posts) if you’d like help implementing it.
In a future version I will add Swiper’s
autoHeight: truefeature, which will also prevent this issue. I will also implement Swiper’s own lazyloading so it works without relying on other lazyload plugins.
You must be logged in to reply to this topic.
