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.

  • Someone had similar problem. Try this link – Karun Apr 7 '19 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 Apr 7 '19 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 Apr 7 '19 at 15:43
  • Do you use a plugin for a slider(Ex: slider revolution)? – Vishwa Apr 8 '19 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 Apr 8 '19 at 15:11
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 | |
  • 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 Apr 7 '19 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 Apr 7 '19 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 Apr 7 '19 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 | |
  • 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 Apr 7 '19 at 15:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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