Skip to content

Instantly share code, notes, and snippets.

@PeterMK85
Last active August 29, 2015 14:05
Show Gist options
  • Save PeterMK85/924e9cd34383c3b46a23 to your computer and use it in GitHub Desktop.
Save PeterMK85/924e9cd34383c3b46a23 to your computer and use it in GitHub Desktop.
Stylesheets download behave on browsers
Downloading all stylesheets
Notes:
"If you use separate CSS files (and I'd urge you not too) the browser will download each of them even if it doesn't need them, this is a limitation of the CSSOM. Some browsers e.g. WebKit and Blink based ones prioritise the stylesheets so the ones needed to render the page are downloaded first and the others at some point later."
Responsive Media stylsheet behaviour
Link: https://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/
"We've already established that the browser is smart enough to defer the loading of stylesheets which (a) do not match the media query, and (b) do not match the media device type. All other stylesheets are given a PriorityVeryLow to allow other critical assets, like JavaScript, to go ahead in the download queue"
"Given that the size of CSS assets is just 37kB on average, you are much better off downloading all of the CSS content in one shot over the initial, warmed up connection. By doing so, you will also help the user extend their battery life. If there is one optimization to be made here then it is simply: concatenate and compress."
Desktop browsers & Print.css
Link: http://www.phpied.com/5-years-later-print-css-still-sucks/
"Browsers blocked rendering waiting for print.css. Some took 10 seconds (downloading print.css and screen.css in parallel), some took 15. Why, oh why? It's a print CSS, you don't need this sh...eet."
Media Query Download test [2012]
Link: http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Stylesheet Downloading Test [Page]
Link: http://scottjehl.github.io/CSS-Download-Tests/
Combine Print and Screen stylesheets
Link: http://geertdedeckere.be/article/saving-a-http-request-by-combining-screen-and-print-styles
[Forum]
"Or, a more practical example is, it maybe be less that 460px wide now, but what's to say it won't be bigger. It will load all of the content it thinks might be used at some point and go with that."
Link: http://doctype.com/mobile-browsers-download-all-content-stylesheets-just-content-specified-media-query-applies-them
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment