[Resolved] Question about hide-on-mobile & page speed

[Sasha]

Hello – 

As I’m designing a responsive website, with lots of duplicate elements that are either “hide-on-deskstop” or “hide-on-mobile,” I am wondering – 
Does this impact pagespeed? Do browsers load hidden content or ignore it?

PS: I’d have fewer duplicate elements if more GP settings were customizable based on device. In particular, it would great to be able to adjust text alignment responsively!

Thanks!

[Elvin]

Hi Sasha,

Does this impact pagespeed? Do browsers load hidden content or ignore it?

It can, especially if there are images.

While some display: none;-ed image doesn’t show up on some viewports, the browser still loads them as they are still part of the DOM structure.

This article explains it briefly – https://betterprogramming.pub/css-how-css-display-none-affects-images-on-page-load-dbdf1aaea820

[Sasha]

Thanks Elvin. What would you recommend as the most lightweight way to align text differently on mobile vs. desktop?

i.e. a headline is centered on mobile but right-aligned on desktop

[Elvin]

Thanks Elvin. What would you recommend as the most lightweight way to align text differently on mobile vs. desktop?

There’s no simpler way to do it but CSS and @media rule.

Example:

@media(min-width:769px){ /*desktop and tablets rule*/
.your-headline-class-here {
text-align: left;
}
}

@media(max-width:768px){ /*mobile rule*/
.your-headline-class-here {
text-align: center;
}
}

I’m not sure which element you’re pertaining to so I just added a .your-headline-class-here as an example. You can change the selector to the class of the headline you wish to target.

[Sasha]

This is helpful – thank you!

[Elvin]

No problem. 😀

[Author]

Posts