How is fluid theme's impact on rendering performance?

Question

I am new to responsive design and now re-making a template to make it more responsive. This involves redefining many fixed width and fonts as context-dependent percentage (% or em) instead of pixels in css.

So I am wondering how does all these new added calculations affect the rendering time of pages, regarding that now most elements values needs to be calculated, and mobile processors which are the target devices are far less powerful than a typical Desktop cpu. Will the effect be sensible on most devices? If yes, how much? I appreciate if you also could refer me to the relevant benchmarks/studies. Thanks

Answer 1

You can use Google Chrome developer tools to benchmark the browser rendering (paint and reflows) along with the javascript calls and how they effect them. I'm sure there are other sophisticated tools but this is the most handy and accessible for me.

Great videos/tutorials on this topic:

• http://www.webkitbits.com/post/22459788035/chrome-devtools-timeline-has-a-new-frame-mode
• http://paulirish.com/2011/dom-html5-css3-performance/
• http://www.youtube.com/watch?v=RhaWYQ44WEc

You can also test your web designs using http://www.webpagetest.org/ and compare the speeds of your various designs. As an added bonus the waterfall chart includes CPU utilization graphs.

Answer 2

I haven't seen a benchmark on this (I'd be curious if there was), but I would imagine the effect is effectively zero.

The browser does all it's calculations when the page loads. So whether you tell the browser font-size: 0.8em; or font-size: 10px; or font-size: 80%; shouldn't make enough of a difference to be noticeable by any user and should load just as fast as a page designed for mobile only vs a responsive one.

I'd imagine the effect is the same when changing orientation (from portrait to landscape), it should only take as long as it would normally take when the page loads.

The biggest effect on the load time is the overall complexity of the document, any plugins, javascript, or images loaded rather than whether a div has a width set as a percentage or a fixed pixel size.