I’ve been doing a lot of front end development recently. This means a lot of responsive sites, which in turn means progressive enhancement, graceful degradation and performance optimisation for mobile devices.
When you hear ‘performance optimisation’ for mobile devices, people often think of fewer HTTP requests because of higher latency across mobile networks. For example using image sprites for background images and combining and minifying CSS and Javascript. That is alongside thinking of other things like gzipping or deflating content, compressing jpegs, caching static content, serving static content from a CDN, putting the JavaScript at the end of the document etc. The truth is these things should be implemented regardless of it is mobile optimised or not.
There are however, some other considerations to do with rendering that aren’t necessarily immediately obvious. For example:
- Writing efficient CSS for faster rendering – things like not using tag qualified id selectors, see https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS?redirectlocale=en-US&redirectslug=Writing_Efficient_CSS for more details
- The -9999px hack – see http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ for details
- Using a translate3d transform for transitions (rather than left or margin) to force hardware accelerated transitions, meaning smoother animations. Usually used for things like carousels.
The translate3d does have a problem though: it breaks position: fixed in webkit and causes it to render as position absolute. So, if you were creating an off-canvas menu for example and transitioning the whole site, you wouldn’t be able to use anything with position: fixed inside that. I ran into this problem when I had a fixed nav.
See this issue on animate.css for a bit more info: https://github.com/daneden/animate.css/issues/26