[Resolved] mobile page speed load

[Author]

Posts

[albertA-2]

Hello toolset team.

We have toolset on our site for almost a year.
rioandlearn.com
But if you can see, on mobile the site is extremely heavy.
What I was thinking is to use the hide function so that mobile heavy elements like sliders are not seen but other lighter elements are seen. But, when doing a test, that only one photo appears on the mobile, the loading weight of the home in mobile with all the hidden elements is the same as when we see the home in mobile without hiding those elements. I don't know if I make myself understood. Maybe it's because we have the same cache for desktop and mobile? In this case, if I used the w3 total cache and made a mobile-only cache user agent, would it work? I await your comments. or other solutions.

Thank you

[Nigel]

Hi there

The "Hide element" setting for different screen sizes doesn't stop the content being shipped to the browser, it just stops it from being displayed, via CSS rules.

It is not intended for widespread use to include different designs of the same page for different sized screens, because all of the content gets shipped to the browser (so mobiles would download both a mobile version and a desktop version, even if they only displayed the mobile version).

A better use case would be, for example, where you want to show a banner on mobile only that linked to an app store, say. A desktop browser would download the banner but not display it, but this would have a trivial impact on performance.

There is some optimisation that would happen automatically, with images, for example, which are added to the markup with srcset and sizes parameters, so that the browser will download the most appropriate sized image for the screen.

If you want to have some content which does not get added to the markup sent to the browser in the first place, you could instead use the conditional block with a custom function (where the custom function is actually a core WordPress function, wp_is_mobile: https://developer.wordpress.org/reference/functions/wp_is_mobile/).

See https://toolset.com/course-lesson/using-toolset-conditional-block/#checking-for-values-from-custom-functions

[Waqar]

{ticket status updated}