In my case responsive means that i have a large and small version of the site to handle various screen sizes, which will either be handled by using media queries and setting unneeded elements to display:none; or using jquery to test for the browser size and having that set to load a separate html. How does webpagetest handle either method (comments on best way to do this are appreciated).
WPT runs the tests in a browser with the browser dimensions set to 1024x768 (viewport will be a bit smaller). There is a (not yet documented) script command that you can use for the Chrome and Firefox agents to specify a custom viewport size which is what Guy used in his testing for the bdconf presentation on responsive performance: Performance Implications of Mobile Design
One quick warning from his presentation, display:none still causes the browser to load the resources so even though they aren’t being displayed they will get loaded and take a performance hit. Steve Souders mentioned that he didn’t think visibility:hidden had the same problem.
Thanks for the link, that was interesting, though it left alot to be explained. One of the links it referenced on responsive images seemed to resort to various tactics for replacing only img elements instead of just checking window size and loading an independent page version for that size, but maybe they are just creating extra work in order to cut corners on complete size dependent rewrites.
As for the media query approach, I read that media queries do in fact prevent downloading on unused resources, but only if you set a min and max (a range essentially) for the specific size your serving. That would make sense as setting only one test would often qualify all elements. I guess i’ll find out soon enough.
Edit: I found the page that was mentioning media queries effectiveness. It was actually describing how to make bg images not load:
That last note might work for other elements too. The downside to the js approach of serving different pages:
Which is painfully true for text based sites, luckily i dont have to worry about this one. Media queries is the superior method if it can do so without downloading all versions of a page. Im surprised there arent more write-ups about this.
Found a series of tests done on this exact topic, looks like theres two approaches but they have to be posed a elements with bg images, not as img elements themselves:
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
You have to be really careful using bg images. In high-contrast modes browsers (at least IE) disabled bg images so they are good for eye candy but don’t rely on them.