Title: Enabling Autoptimize lazy loading breaks CSS Last modified: August 5, 2025 --- # Enabling Autoptimize lazy loading breaks CSS * [arskrigitsioniets](https://wordpress.org/support/users/arskrigitsioniets/) * (@arskrigitsioniets) * [10 months, 1 week ago](https://wordpress.org/support/topic/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](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fenabling-autoptimize-lazy-loading-breaks-css%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 11 replies - 1 through 11 (of 11 total) * Plugin Author [Virgildia](https://wordpress.org/support/users/virgildia/) * (@virgildia) * [10 months, 1 week ago](https://wordpress.org/support/topic/enabling-autoptimize-lazy-loading-breaks-css/#post-18587209) * [@arskrigitsioniets](https://wordpress.org/support/users/arskrigitsioniets/) I inspected your webpage and the gap is caused by custom CSS added by Autoptimize: * `.nv-single-post-wrap .wp-block-image { margin-bottom: var(--img-m); }` * You can add the following CSS: `.nv-single-post-wrap .swiper-slide` `.wp-block- image { margin-bottom: 0; }` * I suggest contacting Autoptimize for clarifying why they add the margin. * [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/) * (@optimizingmatters) * [10 months, 1 week ago](https://wordpress.org/support/topic/enabling-autoptimize-lazy-loading-breaks-css/#post-18587370) * autoptimize does not add CSS of its own, but aggregates and/or minifies CSS from other plugins/ theme/ core, so that custom CSS is added by *something* else and then optimized by AO 😉 * hope this clarifies, frank (ao dev) * Plugin Author [Virgildia](https://wordpress.org/support/users/virgildia/) * (@virgildia) * [10 months, 1 week ago](https://wordpress.org/support/topic/enabling-autoptimize-lazy-loading-breaks-css/#post-18587642) * [@optimizingmatters](https://wordpress.org/support/users/optimizingmatters/) thanks for clarifying! If you have any information about potential conflicts between Swiper and Autoptimize, please feel free to share it. [@arskrigitsioniets](https://wordpress.org/support/users/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. - This reply was modified 10 months, 1 week ago by [Virgildia](https://wordpress.org/support/users/virgildia/). * [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/) * (@optimizingmatters) * [10 months, 1 week ago](https://wordpress.org/support/topic/enabling-autoptimize-lazy-loading-breaks-css/#post-18587660) * As a workaround one could try excluding relevant images from being lazyloaded in AO? Excluding can be done based on (part of) the image URL or on an attribute of the image tag (e.g. `class`). * Plugin Author [Virgildia](https://wordpress.org/support/users/virgildia/) * (@virgildia) * [10 months, 1 week ago](https://wordpress.org/support/topic/enabling-autoptimize-lazy-loading-breaks-css/#post-18587747) * [@optimizingmatters](https://wordpress.org/support/users/optimizingmatters/) thank you for the recommendation! [@arskrigitsioniets](https://wordpress.org/support/users/arskrigitsioniets/) let me know if this makes sense so far and whether you’re able to apply the temporary workaround until I add lazy loading support to Swiper in the plugin. I don’t have access to the premium Autoptimize plugin so I can’t test it but feel free to contact me through my site [virgiliudiaconu.com](https://virgiliudiaconu.com) and we can go over it together. * Thread Starter [arskrigitsioniets](https://wordpress.org/support/users/arskrigitsioniets/) * (@arskrigitsioniets) * [10 months, 1 week ago](https://wordpress.org/support/topic/enabling-autoptimize-lazy-loading-breaks-css/#post-18588509) * >  I don’t have access to the premium Autoptimize plugin * Lazy loading is free feature. * >  I inspected your webpage and the gap is caused by custom CSS added by Autoptimize: > `.nv-single-post-wrap .wp-block-image { margin-bottom: var(--img-m); }` > You can add the following CSS: `.nv-single-post-wrap .swiper-slide` `.wp-block- > image { margin-bottom: 0; }` * That gap is not the root cause of the problem, this workaround changes nothing. This is some theme core feature, just a gap under image. But the actual gap ( when I enable lazy loading) is three times bigger and caused by something else. You can test it with free Autoptimize and Neve free theme: [https://wordpress.org/themes/neve/](https://wordpress.org/themes/neve/). I will also test it on clean install and report here if the bug confirmed. * Thread Starter [arskrigitsioniets](https://wordpress.org/support/users/arskrigitsioniets/) * (@arskrigitsioniets) * [10 months, 1 week ago](https://wordpress.org/support/topic/enabling-autoptimize-lazy-loading-breaks-css/#post-18588691) * Test on **clean install with no plugins **besides Carousel and Autoptimize confirmed the bug. * How to reproduce: 1. Install Neve theme [https://wordpress.org/themes/neve/](https://wordpress.org/themes/neve/)( also it reproduces on standard Twenty Twenty Five) 2. Install Autoptimize plugin and enable images > lazy loading 3. Create a post with carousel, set “Slides per view” to 1 4. 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.jpg` * `https://s3.regru.cloud/strategycon-media/games/2025/The%20Guild%20Europa%201410/ 2.jpg` * `https://s3.regru.cloud/strategycon-media/games/2025/The%20Guild%20Europa%201410/ 3.jpg` * `https://s3.regru.cloud/strategycon-media/games/2025/The%20Guild%20Europa%201410/ 4.jpg` * 5. 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. - This reply was modified 10 months, 1 week ago by [arskrigitsioniets](https://wordpress.org/support/users/arskrigitsioniets/). * Plugin Author [Virgildia](https://wordpress.org/support/users/virgildia/) * (@virgildia) * [10 months, 1 week ago](https://wordpress.org/support/topic/enabling-autoptimize-lazy-loading-breaks-css/#post-18590480) * [@arskrigitsioniets](https://wordpress.org/support/users/arskrigitsioniets/) you will need the premium version of Autoptimize for excluding slider images from being lazyloaded as [@optimizingmatters](https://wordpress.org/support/users/optimizingmatters/) suggested. This is currently the workaround until I release an update that works well with third-party lazy loading. * As I mentioned, Swiper calculates slide dimensions during initialization. If other plugins lazy-load the images, they may not be rendered in time which can lead to height miscalculations and create gaps. * [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/) * (@optimizingmatters) * [10 months, 1 week ago](https://wordpress.org/support/topic/enabling-autoptimize-lazy-loading-breaks-css/#post-18590483) * excluding from lazyloading is available in the free version as well 🙂 * Plugin Author [Virgildia](https://wordpress.org/support/users/virgildia/) * (@virgildia) * [10 months ago](https://wordpress.org/support/topic/enabling-autoptimize-lazy-loading-breaks-css/#post-18595019) * [@arskrigitsioniets](https://wordpress.org/support/users/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 `width` and `height` attributes 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: 1. Set an aspect ratio in the editor. In the Image block settings, choose a ratio(` 16:9` will work for your 1920×1080 images) so the space is set correctly. 2. 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: true` feature, which will also prevent this issue. I will also implement Swiper’s own lazyloading so it works without relying on other lazyload plugins. - This reply was modified 10 months ago by [Virgildia](https://wordpress.org/support/users/virgildia/). * Thread Starter [arskrigitsioniets](https://wordpress.org/support/users/arskrigitsioniets/) * (@arskrigitsioniets) * [10 months ago](https://wordpress.org/support/topic/enabling-autoptimize-lazy-loading-breaks-css/#post-18596472) * This css solution works in my case because I need this plugin only for 16:9 images. * Looking for the fix in the next update meanwhile, thanks for attention to the problem. Viewing 11 replies - 1 through 11 (of 11 total) The topic ‘Enabling Autoptimize lazy loading breaks CSS’ is closed to new replies. * ![](https://ps.w.org/carousel-block/assets/icon.svg?rev=2024115) * [Carousel Slider Block for Gutenberg](https://wordpress.org/plugins/carousel-block/) * [Frequently Asked Questions](https://wordpress.org/plugins/carousel-block/#faq) * [Support Threads](https://wordpress.org/support/plugin/carousel-block/) * [Active Topics](https://wordpress.org/support/plugin/carousel-block/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/carousel-block/unresolved/) * [Reviews](https://wordpress.org/support/plugin/carousel-block/reviews/) * 11 replies * 3 participants * Last reply from: [arskrigitsioniets](https://wordpress.org/support/users/arskrigitsioniets/) * Last activity: [10 months ago](https://wordpress.org/support/topic/enabling-autoptimize-lazy-loading-breaks-css/#post-18596472) * Status: not resolved