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 Answers 2


This technique isn't pointless at all, it can be used to optimize the Critical Rendering Path, which will reduce the time to first render and also help your website pass the Lighthouse test.

Both Google and Mozilla advocate this technique.

Regarding the issue of requests: just implement HTTP2 on your server.


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, 2019 at 14:08
  • The DOM and CSSOM tree structures are two independent structures. DOM + CSSOM = Render Tree. HTML and CSS are render blocking resources. Jun 15, 2019 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. Jun 15, 2019 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. Jun 15, 2019 at 15:07
  • 1
    After reading Marcio's linked articles, it seems to me that media attributes are not pointless, because they can prevent certain stylesheets from blocking rendering. And number of requests is not as important under HTTP/2, as long as it doesn't get very high. May 15, 2020 at 19:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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