That should stop unnecessary elements being loaded.
Lots of frameworks have gone mobile first, but that doesn't really address the problem here.
Media queries will only affect what CSS gets loaded. In terms of background images, most modern browsers defer loading the background images until the entire CSS cascade is loaded and they know which image they want. So order doesn't matter for that.
In terms of Javascript, the media queries won't change that at all. If it's not set up to load asynchronously, it will load as a "blocking" script and that won't change either because these frameworks are not changing the HTML (and thus the script calls) based on device size, only the CSS.
And then as for the rest of it, you can set content to display:none for mobile, but it doesn't reduce your payload.
Also, if you have a lot of corporate users stuck on IE8, a mobile first strategy presents some problems because of IE8's poor understanding of media queries. There's a huge long debate about this in the HTML5 Boilerplate community - a thread with over 100 posts and some of the well-known people participating.
https://github.com/h5bp/html5-boilerplate/issues/816So in short, you should think of "mobile first" design (big buzzword) as a progressive enhancement strategy rather than a payload management strategy.
Because of all of this, I saw a recent article by a guy who wrote a book on mobile first design explain why he had actually built a site that had separate URLs for mobile and desktop.
