Mobile CSS3:
Pointers and Pitfalls in the mobile space

Part 2

Name: Estelle Weyl
Twitter: @estellevw

Web Performance Optimization

  • Eliminate unnecessary reflows
  • Reduce the number of DOM elements
  • Defer parsing of JavaScript
  • Make fewer HTTP requests

Mobile UI Performance

Both get you where you need to go,
but they do it differently, and
have a different purpose

What happens on the device is as important as
what happens over the air

Anti-pattern: Embedded CSS & JS

  • On first page only
  • Save in LocalStorage
  • No re-fetch: use Cookies One HTTP request

203.70KB on first load to 15.29KB for subsequent pages

Embedded CSS & JS with data-*

Data URI's for images

Automated Data URI creation:

LocalStorage & Cookies

Naughty but Nice

  • Embed CSS & JS for 1st page load
  • Extract & put in LocalStorage
  • Set Cookies with script names
  • Next GET: cookies checked
  • Only embed new scripts
  • Load localStorage resources on load

Single http request for html, css, js & images


High memory usage causes a slow UI

When you are out of memory, you are out of memory

Browser crashes to free up memory

Not enough to GZip

Rendered media are still the same size.

  • Reduce File Size
  • Reduce Image Size
  • Use Data URIs

Video, Audio, Images and Text can be compressed to save bandwidth, but they're uncompressed in the browser.

Reduce File Size

images alpha saving 64% file size

Image Alpha

Reduce Image Size

Don't send big images to small screens?
Images 1024px or bigger are too big for memory


CSS Masking

jpeg plus framemask less than transparent png
88KB + 4KB < 551KB

div {
  -webkit-mask: url(images/framemask.png);

Is CSS3 the Solution?

CSS3 Can save the day (! or ?)

  • rounded Corners
  • box-shadow
  • text-shadow
  • background-position
  • background-repeat
  • multiple background images
  • border-image
  • gradients

CSS3 IS the Solution!

  • Fewer HTTP Requests
  • Updatable
  • Scalable
  • Transitionable
  • Animatable
  • Fewer DOM Nodes

CSS3 ISN'T always the Solution!

  • Tiny Fonts
  • Box Shadow (inset)
  • Text Indent
  • Gradients
  • Animations
  • ‘Non-rendered’ content
  • Recalculating / Repainting the UI

Static images may render faster than CSS effects

Disney: "The Tortoise and The Hare"


Fonts with Tall Ascenders Fonts with Tall Ascenders Fonts with Tall Ascenders Fonts with Tall Ascenders
Fonts: Zapfino, Helvetica, Savoye
Amount of space painted is large!


  • Not rendered as static bitmap
  • Evaluated each repaint
Render order: rendered from back to front


MyLogo Text
  • Use CSS Clip
  • Position text up instead of left

Large Gradients

    iphone with large gradient
  • Keep gradients small
  • Requires CPU to create
  • Stored in memory
  • Memory: Radial > Linear
  • Render Speed:
    Images often faster than Gradients


code {
   color: black;
   font-size: 85%;
   background-color: rgba(255,255,255,0.9);
   transition: all 2s ease-in 50ms;
code:hover {
   color: red;
   font-size: 120%;
   background-color: rgba(255,255,255,0.8);
code {
      color, font-size, background-color 2s ease-in 50ms;

Requires reflow!


code {
   color: black;
   font-size: 85%;
   background-color: rgba(255,255,255,0.9);
   transition: all 2s ease-in 50ms;
code:hover {
   color: red;
   transform: scale(1.4);
   transform-origin: 0 0;
   background-color: rgba(255,255,255,0.8);
code {
      transform 2s ease-in 50ms;

Only repaints

Repaint v. Reflow




When visual changes do NOT require recalculation of layout

  • Visibility
  • Colors
  • Transforms
  • Background images
  • Transparency


When visual changes REQUIRE recalculation of layout

  • Page load, Layout & orientation change
  • DOM Changes: Adding, removing, updating nodes
  • JS style information request
  • Changing value of display property
  • Changing to CSS property alters box model value
  • Resizing, zooming and scrolling (desktop), but not necessarily on mobile devices (viewport)
  • The larger a DOM tree, the more expensive a reflow is
  • Opera lists repaint and reflow as one of the 3 main contributors to sluggishness
  • Reflow of an element causes the subsequent reflow of all child and ancestor elements as well as any elements following it in the DOM.


Minimize the DOM

  • Minimize number of nodes
    • Uses up memory
    • Measures each node for each repaint
  • Cache DOM lookups
    • Store them!
  • Minimize DOM manipulations
    • Batch DOM queries & DOM manipulations separately

More nodes = more expensive!

Reuse the DOM

Pool Elements and Objects

Reuse instead of Allocate and Destroy

  1. Create a pool of DOM elements (more than you need)
  2. Use the nodes you created
  3. Release back into pool
  4. Go to step 2

Animations (and Gradients)

See Redial Gradients in Action

Hardware Acceleration: 3d Transforms

 div {
	transform: translateZ(0);


Composited mage in memory == H x W x 4

Take advantage of hardware acceleration, but don't abuse it. GPU accelerated elements eat video memory

Out of viewport content

Elements not currently in view are still rendered
  • Everything is rendered*
  • On screen even if out of viewport
<meta name="viewport" content="width=320;
initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

JavaScript affects UI

UI/JS is Single Threaded

UI Queue

  • JavaScript execution
  • UI Updates

UI will not update while JS is being executed

Always use
CSS for Animation

Never use
JS for Animation


Animation = UI's lowest priority

‘animation-delay’ expires even if UI thread is busy,
but animation has to wait.


  • delay in keyframes instead of animation-delay
  • change parent class to add in animations and delays

Other Tips

Test in Real Environments

iPhone showing which apps are running in the background
  • Test on Phone:
    • Simulator != Emulator
    • Cap your memory
  • Test with many apps open
  • Test on multiple devices
  • Test on mobile network

Use Tools

iPhone with Mobile Performance


  • Scale down (not up)
  • Use average size fonts
  • Take advantage of HTML5 & native storage
  • Don't disable zoom (except for games)


  • Follow performance recommendations
  • Minimize Latency
  • Manage memory
  • Use CSS Judiciously
  • Use JS Minimally (and NOT for animation)
  • Batch query and manipulations separately
  • Reuse the DOM
  • Keep Mobile in Mind


Your users may not be tethered

and their memory may be very limited.

Thank you

HTML5 and CSS3 for the Real WorldHTML5: The Definitive GuideMObile HTML5Web Performance Daybook

Who to follow