Smush images are not working with my slider

I have a slider on my home page. Smush CDN is not working for images on this slider. Can you help me with fixing this?

  • Dimitris
    • Support Star

    Hello there Thalia

    It seems that the slider is using some JS code to insert and swap the selected images:

    Smush CDN can't work with such implementation as it supports the following cases:

    1. < img > tags being added directly in the HTML

    2. inline styling like <div style="background-image: url('/wp-content/uploads/example.jpg');">

    3. inline styling like <div class="my-class"></div><style>.my-class { background-image: url('/wp-content/uploads/example.jpg');"</style>

    The alternative here would be to find another slider that follows up one of the above markups.

    Warm regards,

    Dimitris

  • Nastia
    • Support Rock Star

    Hello Thalia

    Trust you're doing well!

    I've checked the images and the Lazy Load is added to these images. There is a CSS class lazyloaded is present in the image's HTML code in mobile view. However, I can confirm that Google Insight Performance Report showing "Defer offscreen images" recommendation for these images.

    I could not replicate the same issue on my end. Although, I've analyzed the report and the Potential Savings on reported images is equal to the actual image size. Please see the screenshot:

    With lazy loading active images are only loading on a request, and by default, no image will be loaded, until user scrolls to them. The Page Speed Insight perhaps not detecting the lazy load for some reason. I've flagged our developers in this thread so they would have a closer look at this. Once there will be an update we will follow back in this thread.

    Have a good day and take care!

    Kind regards,

    Nastia

  • Tho Bui
    • Staff

    Hello Thalia,

    I added a new MU plugin wpmudev-general-custom-ot-shortcode.php to custom some shortcodes to support CDN for images. So almost the images on the home page are loaded from the CDN link. You can check the detail of this MU plugin at wp-content/mu-plugins folder or here:

    https://gist.github.com/wpmudev-sls/359083c3dcfddda84c2493b2568051f5

    If you are not familiar with mu-plugins you can read about them here:

    https://wordpress.org/support/article/must-use-plugins/

    Kind regards,

    Tho Bui

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.