0

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.

Improve this question
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

2 Answers 2

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.

Improve this answer
3
  • this won't work as with javascript the images need to be loaded first. the question was not to load images at all
    – Pat_Morita
    Commented Apr 7, 2019 at 15:04
  • I don't think you read what I wrote correctly. I suggested lazy loading the images, but the problem is they are probably using a prebuilt slider.
    – tmdesigned
    Commented Apr 7, 2019 at 15:33
  • Ah ok. this is a different situation! Then I misunderstood you so you may ignore my comment at the bottom. Lazy loading is also a possible way of reducing time till first interaction. Prebuild sliders might not be able to handle that.
    – Pat_Morita
    Commented Apr 7, 2019 at 17:26
0

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.net

Improve this answer
1
  • This is not necessary, as WordPress itself provides a function to detect if the device is mobile. However as I mentioned, this is not really meant for browser width based styling, and more for detecting devices with limited resources. It also would not work for users who change their screen sizes.
    – tmdesigned
    Commented Apr 7, 2019 at 15:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.