X Theme Loading 'Hidden' section backgrounds on Mobile causing huge google page speed penalty

[mhkatz]

Hi I’m looking at meeting the white of google and my mobile page speed is getting destroyed.

I specifically have X / cornerstone hide sections on the smallest 2 breakpoints. I can confirm these do not show when viewing the site on mobile devices and show correctly when viewing the site on the desktop.

However, it appears they are still being loaded and google is picking them up which means it is seeing giant images for the mobile site, and penalizing it accordingly.

[ruenel]

Hello @mhkatz,

Thanks for posting in! Please be advised that the “Hide During Breakpoints” option will only show/hide from the display output and does not totally removed the element or section when viewed in a particular screen. To avoid duplicate contents, do not use this feature and layout your contents and images in a responsive layout instead.

Hope this helps.

[mhkatz]

Hi thanks for the quick response I though that was what I was doing?

Could you please explain this for me “layout your contents and images in a responsive layout instead.”

As you can see there is a fairly big difference with what we want in the desktop version (mainly the four images at the bottom) vs the mobile. Is there any other shortcuts or query where we could create mobile only pages as I don’t feel I’m going to win the argument against Google

[ruenel]

Hello @mhkatz,

####“layout your contents and images in a responsive layout instead.”
Yes, you can layout your contents to display differently in smaller screens. By default, when you add a section with four columns, you can have an image in each column. When you view this layout in smaller screens, the columns will collapse the columns thus the images will be displayed stacked below each other. If you want your 4 columns to display into two columns instead, then by using custom css, you can achieve that goal. This method will prevent you from making any duplicate content that has a different layout.

Is there any other shortcuts or query where we could create mobile only pages as I don’t feel I’m going to win the argument against Google?

• Regretfully there is no feature for that. When you create a page to display on desktops, that page will also be used for the mobile pages. There are plugins that transforms your page fit for mobile but you will be loosing the layouts.

Hope this helps.