Estelle Weyl | @estellevw | Github | Press to advance, 2 for comments, 4 to read/write notes.

Web Performance Considerations in a Mobile World

Estelle Weyl

Mobile v. Desktop

More powerful browsers.
Less powerful CPUs
Less RAM
More latency

IRLThis RoomMe
Mean512MB RAM1024MB RAM16GB
CPU600MHz-1.2GHz1.7 GHz 2.3
OSA2.3/3, iOSA4+, iOS 6 (7), and 1 FF

Device limitations!

  • Battery
  • Latency
  • Memory
  • Responsiveness



  • Render cost: JS (and CSS and images)
  • JS (download, parsing & executing)
  • Dynamic JS: ⬆ rendering cost (can't be cached).
  • AJAX: waking up the radio communications


  • All scripts loaded and parsed (even if not used)
  • Reduce JS to only what is needed
  • Are libraries really necessary?
    • Include only functions used by page to reduces energy use.
    • Goal of most: equalize across browsers
      (not necessry in mobile space)
    • Libraries simplify web development, but increase energy use.
    • You don't need a framework for that

Battery Consumption

CPU Drains the battery. Avoid using it!

  • Avoid Reflows (and repaints)
  • Minimize JavaScript (size and activity)
  • Avoid loading resources you don't need
  • No JavaScript Animations
    • requestAnimationFrame (not setInterval or setTimeout)
    • CSS Animation
  • Manage memory
  • Avoid waking up the radio - prefetch


and other 3rd party scripts

Prefetching mobile ads: Can ad systems afford it?


Computer asks DNS server for IP address, then goes to IP to get website
  • Issue: Requests take longer to complete
  • Solution: Reducing requests improves performance

I/O Latency

  • DNS lookups
  • File count
  • File size
Huge Assets
3rd Party Scripts

Responsive Images

  • <picture>
  • srcset="sm.jpg 640w, smhd.jpg 640w 2x, lghd.jpg 2x"
  • Client-Hints (dw, dh, dpr)
  • Clown Car Technique


  • Speed
  • Bandwidth
  • Memory

Object + Media Queries + SVG + CCimg

<object data="data:image/svg+xml,%3Csvg%20viewBox='0%200%20300%20329'%20preserveAspectRatio='xMidYMid%20meet'%20xmlns=''%3E%3Ctitle%3EClown%20Car%20Technique%3C/title%3E%3Cstyle%3Esvg%7Bbackground-size:100%25%20100%25;background-repeat:no-repeat;%7D@media%20screen%20and%20(max-width:300px)%7Bsvg%7Bbackground-image:url(;%7D%7D@media%20screen%20and%20(min-width:301px)%7Bsvg%7Bbackground-image:url(;%7D%7D@media%20screen%20and%20(min-width:601px)%7Bsvg%7Bbackground-image:url(;%7D%7D%3C/style%3E%3C/svg%3E" type="image/svg+xml">
<!--[if lte IE 8]>
<img src="images/medium.png" alt="Fall back for IE">
<svg xmlns="" viewBox="0 0 300 329"
  preserveAspectRatio="xMidYMid meet">
 <title>Clown Car</title>
  svg {
    background-size: 100% 100%; background-repeat: no-repeat;
 @media screen and (max-width: 400px) {
  svg {background-image: url(images/small.png");}
 @media screen and (min-width: 401px) and (max-width: 700px) {
  svg {background-image: url(images/medium.png);}
 @media screen and (min-width: 701px) and (max-width: 1000px) {
  svg {background-image: url(images/big.png);}
 @media screen and (min-width: 1001px) {
  svg {background-image: url(images/huge.png);}


  1. User Interaction
  2. Re-rendering time


Response Time

Touch Events

  • Touch Event: 300ms delay
  • provide user feedback, fetch, update when ready
el.addEventListener('click', myFunction);
el.addEventListener('touchend', myFunction);*
<meta name="viewport"
          initial-scale=1; maximum-scale=1;">
* Scroll throws a touchend :( Luke W.


  1. User Interaction
  2. Re-rendering time

60FPS = 16.67ms per frame

Frame Rate


JavaScript Animation

(not setInterval or setTimeout)

Goal: New Frame every 16.67ms goal at 60hz

  • Edit the DOM
  • Calculate styles
  • Layout
  • Paint

Avoid Reflows

  1. clientHeight
  2. clientWidth
  3. clientLeft
  4. clientTop
  5. offsetHeight
  6. offsetWidth
  7. offsetLeft
  8. offsetTop
  9. offsetParent
  10. width
  11. height
  12. innerText
  13. outerText
  14. getBoundingClientRect()
  15. getClientRects()
  16. getComputedStyle()
  17. scrollX
  18. scrollY
  19. scrollTo()
  20. scrollToView()
  21. scrollToViewNeeded()
  22. scrollBy()
  23. scrollByLines()
  24. scrollByPages()
  25. scrollHeight
  26. scrollWidth
  27. scrollLeft
  28. scrollTop

Long Paints

Large Gradients & Shadows

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

here is some text

Hardware Accelerate


  • transform
  • opacity


  • outline
  • shadow


  • height
  • width
  • border




Device Memory
iPhone 3G128MBiphone
htc inspire
iPhone 3GS256 MB
HTC Inspire768 MB
iPad 1256 MB
iPod Touch (4)256 MB
Galaxy S III1 GB
MacBook Pro16 GB

T-Mobile: cheapest prepaid phone runs Android 2.3 with 256MB

Mobile Norm: 512MB of RAM, with 1GHz Processor

PC Norm: 8GB+ RAM

Developing without mobile in mind
leads to sloppy App Dev

Browser shares Memory

Running Services
Other73MB Avail: 255MB + 182MB in 21
Started by application: Touch to stop
AT&T Navigator8.4MB
Started by application: Touch to stop
AT&T Spots2.4MB
Process: com.matchboxmobile.wasp
Started by application: Touch to stop
Started by application: Touch to stop
Process: com.pv.wmdrmservice
Started by application: Touch to stop

Minimize the DOM

  • Minimize number of nodes
    • Uses up memory & time
    • 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