CSS media queries: single file versus single files and impact on download speed

Question

For the site, I am currently using style.css and a bunch of other stylesheets, 960.css, etc., loaded as follows:

<link rel=​"stylesheet" media=​"screen" href=​"css/​style.css"> <link rel=​"stylesheet" media=​"only screen and (max-width:​ 960px)​" href=​"​css/​960.css"​> .... 

Now I'm worried about speed. I know that I could combine the files into one large file, but that would mean downloading and non-essential data.

So basically, my question is: what is the best approach, minimizing the number of requests or minimizing the amount of data transferred to one user?

Answer 1

This mainly relates to the performance of your system.

even if you are on mobile devices, the best approach would be to minimize the number of requests due to a slow network connection (possibly) and (possibly) slow processing of resources. except your page. context of a cordova, this approach would be a way to go because the resource was installed directly on the device. multiple files => multiple descriptors => slow (er) performance.

if you want to minimize the amount of data transferred to the user, this value is IMHO, as the tag will request a css file on the server and will analyze / read / load it. IMHO there is no corresponding performance problem. what you can do is create a non-redundant css file. but it’s not very petty :)

Answer 2

With a reasonable communication speed, the latency and overhead associated with the additional request will probably outweigh the gain without downloading a small amount (hopefully, reduced and gzipped) of text data, which, however, is not required for this user to display a page with this resolution. See Ilya Grigorik's excellent latency publication for more details on how this is a major performance limitation for many users.

The delay in additional data will be especially relevant for users on mobile devices (who will save their radios if they are not used), and even more so on 2G or 3G mobile connections, which have a relatively high cost when creating a connection (4G, apparently, is significantly improves it).

The key, like all of these things, is testing and measuring, but I would almost certainly expect that combining styles would be faster for your users. Do not forget every valid stylesheet ( where the media query evaluates to true ) will block the page rendering.

It’s also worth noting that Ilya (who works at Google, therefore, should know) refers to the fact that WebKit will still load style-style queries that return false, albeit with a low priority and non-blocking manner.

if the media request evaluates to false, the stylesheet is marked NonBlocking and gets a very low download priority

and

The only caveat, as Scott points out, is that the browser will download all the included stylesheets, even if your device’s screen cannot exceed the width [cited]

Looking briefly at the webkit source, it looks like this is still happening, apparently for an instant response to screen rotation or window resizing.

  // Load stylesheets that are not needed for the rendering immediately with low priority. 223 ResourceLoadPriority priority = isActive ? ResourceLoadPriorityUnresolved : ResourceLoadPriorityVeryLow; 224 CachedResourceRequest request(ResourceRequest(document().completeURL(url)), charset, priority); 225 request.setInitiator(this); 226 m_cachedSheet = document().cachedResourceLoader()->requestCSSStyleSheet(request); 

For such questions, I can highly recommend High-performance browser networks that you can read online for free.

Answer 3

So basically, my question is: what is the best approach, minimizing the number of requests or minimizing the amount of data transferred to one user?

I would say both. Please note that requests will be cached by the browser, so for returning visitors your problems are irrelevant. In general, less data = faster loading. The best approach is to maintain the minimum amount of data the user needs.