Me

Christophe Coenraets

Boston, MA

@ccoenraets

http://coenraets.org

https://github.com/ccoenraets

You

Slow


<a href="product.php?id=101">Tuareg Summer</a>

Slow

$.get("product.php?id=101").done(function(page) {
    $("body").html(page);
});

[jQuery Mobile Hijax]

#10

Don't generate the UI on the server

Fast

Single Page Application

<html> <head> <title>My App</title> <script src="app.js"></script> </head> <body></body> </html>

Slow

[Network Access]

Slow

$.ajax({url: "services/states"}).done(function(data) {
    states = data;
});

#9

Avoid Network Access

Cache Static Data

Cache Dynamic Data


$.ajax({url: "slow/feed"}).done(function(data) {

});


dataAdapter.getItems().done(function(data) {

});

Limit Result Set Height

/movies/46637/comments?lastId=100

Limit Result Set Width

Slow

// Get data
$.ajax({url: "product/101"}).done(function(product) {
    // Display view
    displayView(product);
});
#8

Don't wait for the data to display the UI

Fast

// Display view
displayView();

// Get data
$.ajax({url: "product/101"}).done(function(product) {
    // Update view
});

Slow

$("#page").animate();
#7

Use CSS Transitions
+
Hardware Acceleration

Left Center Right


class="left"
Left Center Right


class="center"
Left Center Right


class="right"

Slow

.page { position: absolute;top: 0;left: 0;width: 100%;height: 100%; } .left { left: -100%; } .center { left: 0; } .right { left: 100%; } .transition { transition-duration: .25s; }

Fast

.page {
    position: absolute;top: 0;left: 0;width: 100%;height: 100%;
    transform: translate3d(0, 0, 0);
}
.left {
    transform: translate3d(-100%, 0, 0);
}
.center {
    transform: translate3d(0, 0, 0);
}
.right {
    transform: translate3d(100%, 0, 0);
}
.transition {
    transition-duration: .25s;
}

PageSlider

https://github.com/ccoenraets/PageSlider

Use Native Scrolling

#scroller { overflow: auto; -webkit-overflow-scrolling: touch; position: absolute; top: 48px; bottom: 0px; left: 0px; right: 0px; }

Slow

Click Me

click: 0ms

To experience the 300ms delay, tap quickly (don't "long-tap")

#6

Avoid Click Event's 300ms Delay

Fast

Click Me

touch end: 0ms

FastClick

https://github.com/ftlabs/fastclick

“FastClick uses document.createEvent to fire a synthetic click event as soon as touchend is fired. It then suppresses the additional click event created by the browser.”

Slow

<li><img src="img/icon_home.png"/>Call Home</li>
<li><img src="img/icon_office.png"/>Call Office</li>
<li><img src="img/icon_cell.png"/>Call Cell</li>
<li><img src="img/icon_email.png"/>Email</li>
<li><img src="img/icon_sms.png"/>Text</li>
<li><img src="img/icon_map.png"/>Map</li>
<li><img src="img/icon_contact.png"/>Add Contact</li>
#5

Optimize Images

Use CSS Sprite Sheets

glyphicons-halflings.png

Use CSS Sprite Sheets

.icon {
  width: 14px; height: 14px;
  background-image: url("glyphicons-halflings.png");
}
.icon-glass {
  background-position: 0 0;
}
.icon-music {
  background-position: -24px 0;
}
.icon-search {
  background-position: -48px 0;
}

Demo

Optimizing Images

#4

Limit Shadows and Gradients

#3

Minimize Reflows

Minimizing Browser Reflows

Slow

$("#header a.back").on("click", clickHandler);
$("#header a.back").css("color", "white");
$("#header a.back").css("text-decoration", "none");
$("#header a.back").attr("href", "#");

Fast

var $backButton = $("#header a.back");
$backButton.on("click", clickHandler);
$backButton.css("color", "white");
$backButton.css("text-decoration", "none");
$backButton.attr("href", "#");
#2

Do you need that framework?

Framework Considerations

#1

TEST!

[Know the Problem]

Chrome Dev Tools Demo

Chrome Dev Tools Demo

On-Device Debugging Demo

Summary

  1. Don't generate the UI on the server
  2. Limit network access
  3. Don't wait for the data to display the UI
  4. Use hardware acceleration
  5. Avoid click event's 300ms delay
  6. Optimize images
  7. Limit shadows and gradients
  8. Do you need that framework?
  9. Minimize browser reflows
  10. Test