PageSpeed and Site Loading Hidden Elements

Hi,

Thank you for the inquiry.

You can try this script in the functions.php file to deactivate slides that are not visible on the current screen size.

— https://pastebin.com/RKdaXj6s

add_action('wp_footer', function() { ?>
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        const sliders = document.querySelectorAll(".avia-slideshow");

        function activateVisibleSlider() {
            sliders.forEach(slider => {
                const isVisible = slider.offsetParent !== null;
                const slides = slider.querySelectorAll("li[data-img-url]");

                slides.forEach(slide => {
                    const bgUrl = slide.getAttribute("data-img-url");
                    if (isVisible) {
                        slide.style.backgroundImage = <code>url(&quot;${bgUrl}&quot;)</code>;
                    } else {
                        slide.style.backgroundImage = "none";
                    }
                });
            });
        }

        activateVisibleSlider();

        let resizeTimer;
        window.addEventListener("resize", () => {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(activateVisibleSlider, 200);
        });
    });
    </script>
<?php }, 999);

Best regards,
Ismael

Hi,

Thank you for the update.

Looks like the slide images are still loading on all screen sizes. We may need to log in to the site to properly test the modification. Please provide the login details in the private field.

Best regards,
Ismael

Hi,

Thank you for the info.

Looks like the script is not working as intended so we removed it. Unfortunately, we didn’t find any other solution to prevent the slides’ background images from loading when the slider is not visible. You may need to remove the other sliders and rely on the responsive images if you’re using the Fullwidth Easy Slider, or manually apply different background images to the slides for different screen sizes using css. Example:

/* mobile */
@media (max-width: 767px) {
    .avia-fullscreen-slider .avia-slideshow > ul > li:nth-child(1) {
        background-image: url("/path/to/slide1-mobile.jpg") !important;
    }
    .avia-fullscreen-slider .avia-slideshow > ul > li:nth-child(2) {
        background-image: url("/path/to/slide2-mobile.jpg") !important;
    }
    .avia-fullscreen-slider .avia-slideshow > ul > li:nth-child(3) {
        background-image: url("/path/to/slide3-mobile.jpg") !important;
    }
}

/* tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .avia-fullscreen-slider .avia-slideshow > ul > li:nth-child(1) {
        background-image: url("/path/to/slide1-tablet.jpg") !important;
    }
    .avia-fullscreen-slider .avia-slideshow > ul > li:nth-child(2) {
        background-image: url("/path/to/slide2-tablet.jpg") !important;
    }
    .avia-fullscreen-slider .avia-slideshow > ul > li:nth-child(3) {
        background-image: url("/path/to/slide3-tablet.jpg") !important;
    }
}

Best regards,
Ismael