Question

As a web developer I also have to take the Android and iOS web browsers into account. The rendering engines of these browsers and the lack of power and memory brings a lot of complications.

So I was wondering, is there a comprehensive guide on performance tuning (HTML/CSS/Javascript) for these browsers?

Answer 1

I haven’t found an actual guide focusing on mobile development yet. However, my coding practice is to do everything you’d do for a desktop browser and try to put extra effort in:

• maximize use of cache, by using CDN, ETags, proper expiry dates etc.
• minimize reflows/repaints, they are CPU intensive
• optimize images aggressively to minimize download size.
• minimze amount of server round-trips and included JS/CSS, since most mobiles are used on 3G/4G and other wireless networks. They tend to have higher latencies than wired broadband (cable/dsl).
• do not use animated gif, 3d transforms, etc.

Here is some reading material: https://developers.google.com/speed/docs/best-practices/rules_intro