Archived topic
Question about hide-on-mobile & page speed
5 replies · Started by Sasha on May 31, 2021
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!
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
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
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.
This is helpful – thank you!
No problem. :D
