CSS to remove html on mobile

Hi - I am working on https://www.propress.co.uk and I have managed to hide sections of the site’s html a user sees on Desktop when viewed on Mobile. (I am trying to speed up the page load speed on Mobile).

But the problem is that the hiding codes I’ve used in the css file don’t actually hide the code to the browser so page load speed is still slow.

Is there a way the mobile version of the site can be told to not use chunks of html?

The browser is always going to download all the HTML, so hiding some of it on mobile is not going to help as you have found.

If you run your website through Pagespeed Insights you can see that it doesn’t do so well for desktop either. I would concentrate on improving the overall loading speed.

I have done all I can to reduce load speed (within the constraints of needing certain large images), so can I assume there is no way to improve mobile load speed per se?

I notice your site has a huge number - 55 to be exact, of javascript files that it loads. Most are Wordpress, and while each one is relatively small, it takes its own http request over the network. Your site as a total takes 136 http requests, so that’s a decent percentage and I suspect a goodly portion of your load time. I don’t know if Wordpress has ways to bundle all those individual JS files into a single file to load, but you might poke around and see.

4 Likes

Page Speed Insights is showing pretty poor performance, so I’m sure there is more that can be done, observing the issues it highlights.

Can’t you use smaller images for smaller devices?
When I come to look at some of the images, they are not used in the most efficient way.
A good example is the main header image in red. The actual picture only covers the bottom right part of the whole image, its physical size could be reduced to one quarter without any loss by cropping to the actual image content, then placing in the bottom right on a plain red background.
Elsewhere you have background images, but as they are applied as inline styles, you are not able to serve smaller versions in media queries.
For actual image elements you may use srcset or picture to select smaller images.
And this is just images, there are plenty of other points to look into.

1 Like

Great , thanks for the feedback - I will make a start to look in to.