1

If I use different style sheets for say large screens and small screens, will there be a considerable effect in the loading of a website?

Michael Wealthood
  • 11
  • 1
  • You would need to clarify context - many potential factors with this and I'm not sure what you mean by different sheets. I am taking this to mean you're considering dynamically loading a single style sheet based on screen size? Presumably reducing payload (by a little) and having the same number of requests? Again it would depend on more factors to say if that would be worth it. Maybe if you have a giant amount of css for hundreds of screens that could be worth it... – MrRobboto Oct 26 '19 at 15:41
  • Thank you for your response. I think you got my point already. Here's my thought: if I link different stylesheets based on screen size using media queries embedded in the link like this:. `` If I do these for other screen sizes, and I included all in the head, will there be considerable decrease in load time since each screen will be selecting it's own reduced css file instead of a big single css file – Michael Wealthood Oct 27 '19 at 22:30
  • No way to answer that question without knowing how much css you have and what you consider a "considerable decrease in load time". If your page already loads in a second and you save even 50KB in css it's not really going to matter in most cases IMO. If your CSS is minified, it's hard to imagine you'd have so much unshared desktop styles to justify separating them. Again, if you have a ton of CSS for some reason, maybe... – MrRobboto Oct 28 '19 at 01:17

1 Answers1

1

The opposite is the case. Performance wise (when looking at the loading speed of the website) it is actually best to just have one CSS file.

For each CSS file there will be one more http request. Imagine two websites with the exact same amount of data and same transfer rate: The one that references less sources (e.g. CSS files) will most likely load faster than the other one.

You might be interested in this question.

L483
  • 170
  • 1
  • 11