our site www.irish-pure.de has a slider. this header is currently deactivated for mobile via

@media (max-width: 640px) {
    .theme-slider-wrapper {
        display: none;
    }
    .benefit-bar__container {
        margin-bottom: 1rem;
    }
}

but when I check google pagespeed insights for the page, google recommends to avoid "hidden" images and lists the sliders images.

is there a way to remove the slider entirely for mobile in e.g., in the function.php or something?

thanks, E.

our site www.irish-pure.de has a slider. this header is currently deactivated for mobile via

@media (max-width: 640px) {
    .theme-slider-wrapper {
        display: none;
    }
    .benefit-bar__container {
        margin-bottom: 1rem;
    }
}

but when I check google pagespeed insights for the page, google recommends to avoid "hidden" images and lists the sliders images.

is there a way to remove the slider entirely for mobile in e.g., in the function.php or something?

thanks, E.

• slideshow

Share Improve this question edited Apr 7, 2019 at 12:27 fuxia♦ 107k3939 gold badges255255 silver badges459459 bronze badges asked Apr 7, 2019 at 12:25 EleEle 11355 bronze badges 7

• Someone had similar problem. Try this link – Karun Commented Apr 7, 2019 at 13:18
• hi @Karun, the code works from a visibility aspect. but the image are still being loaded In the backend, which decreases the performance. – Ele Commented Apr 7, 2019 at 13:34
• @Ele to remove this without CSS, the best way would be to share your theme's php function or code that is responsible for adding the slider. At some point in your theme, it must include the slider. As suggested elsewhere, the mobble plugin uses mobiledetect.php class to find mobile users better than the wp_is_mobile() function. With that said. You'll need to add a conditional around your slider code if you hope to do this. So if you can show your header.php or wherever the slider is in your theme, that would help get you a solution. – Howard E Commented Apr 7, 2019 at 15:43
• Do you use a plugin for a slider(Ex: slider revolution)? – Vishwa Commented Apr 8, 2019 at 11:01
• @HowardE We use the site origin builder to create the page. not sure if anything is hard coded in a php file... what do you think? thanks – Ele Commented Apr 8, 2019 at 15:11

 |  Show 2 more comments

2 Answers 2

Sorted by: Reset to default 1

This is one of those problems that seems like it should have a simple solution, but really doesn't. There are options, they're just not easy.

At least, from what I can see.

CSS is the best approach to detecting browser width IMO. In fact, you really can't detect browser width from PHP. You can with JavaScript but that's where the complexities come in.

Even if you could detect browser width in PHP, you wouldn't want to. What if they made their browser bigger (i.e. rotated their device)? PHP is gone by that point, and can't add it back anymore.

There is a clever technique I read about where you use the new HTML5 image srcset to still serve an image at mobile resolution, but a very small one. However since you're using a slider, which I presume means a plug-in, you probably don't have that flexibility.

That leaves you with JavaScript. You could remove the images if the browser width is small, but you'd need to keep watching the viewport width in case it changed, and be ready to put them back. Probably better, only load them when needed (i.e. lazy load). It's possible your slider, or an alternative, would just natively give you that functionality.

You need to change the template that loads the slider. Assuming it is written in php you can use this class to detect if the site is loaded from mobile or not. If its loaded by mobile just don't render the slider.

http://mobiledetect