3

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

2 Answers 2

2

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:

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.

1

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.

1
  • I would tend to agree, I can't see that using relative-sizes will have much of an effect on processing times. Absolute sizes (px) are not devoid of calculation. Media and context all play a part in calculating the actually size you see.
    – MrWhite
    Aug 4, 2012 at 11:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.