1

Recently I read about media attribute for <link> tag. Immediately I thought it would be a great idea to separate all the media queries into separate files and link them only when the website is opened on mobile device not to block the dom render on desktop etc. Something like this:

<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen and (max-width:768px)">

However I don't really see anyone using this attribute, is there any reason behind that, is it still faster to just load one bigger file?

2

It's pointless due to the fact all style-sheets will be downloaded on all devices, even if they are above the max-width:, so, mobile.css is downloaded on desktop, and desktop will be downloaded on mobile, as well as every other CSS script. Therefore your increasing server-side requests which in turn will slow down the page/server.

If you're looking to split files for administration purposes then you can use server-side scripts to combine all JavaScripts, CSS files and other resources into a single cached file, allowing you to edit the files with ease while maintaining the recommended approach - as few server-side requests as possible. Google has released a module for Apache and NGinx that can do this called PageSpeed Module.

  • As far as I know only the main css file would block the html dom render is that correct? And stylesheet with media tag should be downloaded after the dom is ready, so yeah it would be one more request to the server but wouldn't necesarly make the website load slower, is that correct? If I manage to find the source of what I wrote I will make sure to provide it. – aMJay Jun 14 at 14:08
  • The DOM and CSSOM tree structures are two independent structures. DOM + CSSOM = Render Tree. HTML and CSS are render blocking resources. – Simon Hayter Jun 15 at 14:46
  • Also, I never implied it would slow down just the page, I said page/server, so either of them. When developing a website it is considered best practice to think of volume rather than individuals, what I mean by this is... yes one user viewing the site having to download 3 CSS files is not going to see any slow down, now, that's multiple that by 10,000 users... what should be 10,000 server-side requests, now becomes 30,000 server-side requests, now let's say you have 10 JavaScripts that are not combined, that just became 100,000 server side requests rather than 10,000. – Simon Hayter Jun 15 at 14:55
  • This is why Cloudflare is so popular because it reduces server-side requests. But with all this said... optimisation is great but if you have a good server-setup you don't need it. Take my site, 30-40K visitors a month, half the bandwidth is served by Cloudflare, the site is very poorly optimised and yet it can render in less than a half a second. tools.pingdom.com/#5ad6ea0c7a800000 So, you can use multiple CSS files if you want, ideally, however, you shouldn't if you can avoid it. – Simon Hayter Jun 15 at 15:07
  • alright, thanks for the explenation – aMJay Jun 17 at 17:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.