Smashing Mobile Web Development

CSS3

CSS3 introduces a variety of new styling options that you can use to make your pages more visually appealing. Best of all, it can be done without loading any external images, which makes pages load faster and reduces the strain on your server.

However, this functionality is not completely free from a performance perspective. These properties require more work from the renderer, which can slow down processing. On desktop computers, this is mostly negligible, but mobile devices can be more underpowered.

It really depends on the device. iPhones (even older models like the 3G) have enough power to handle just about any CSS3. On the other hand, Android devices, which vary from manufacturer to manufacturer, can start to show performance problems. These typically occur with the more expensive properties such as gradients or transitions, but I have even seen performance problems with relatively “simple” properties like border-radius.

Thus, it is important to thoroughly test your app on a variety of devices. Then, if you encounter any issues, you will have to be prepared to gracefully degrade the design in favor of better performance. After all, good design matters only insofar as it provides a better user experience, and painfully slow performance will scare away users.

Most web app performance problems stem from JavaScript, so don’t get too worried about CSS3 optimization. As you learned in Chapter 12, it is important to pick your battles when it comes to performance tuning.

Box ...