Tobias Zander | @airbone42

Turbo boost your website

http://img3.wikia.nocookie.net/__cb20090301004714/knightrider/en/images/4/41/Turbo_Boost01.jpg

Overview

1. Traditional request

2. Ajax requests

3. BigPipe

Traditional request

1. HTTP request

2. Generate HTTP response

3. Transfer HTTP response

4. Parsing DOM

5. Request CSS/JS

6. Apply CSS to DOM tree

7. Execute JS

Traditional - Ajax - BigPipe

Cons

• Sequential

• Late CSS/JS loading

• Bottlenecks

– Server

– Browser

Traditional - Ajax - BigPipe

The „cloud“

• For parallel requests

• For your big tv promotion

• Not for single page loads

• Or third-party-latencies

Traditional - Ajax - BigPipe

http://cloudtimes.org/wp-content/uploads/2012/07/cutcaster-800900729-Businessman-thinking-and-watching-the-money-mark-of-cloud-medium..jpg

Traditional - Ajax - BigPipe

Pipelining

• UX-Performance

• It is a bit faster

• But it „feels“ a lot faster

Traditional - Ajax - BigPipe

Ajax request

1. HTTP request

2. Generate simple HTTP response

3. Transfer simple HTTP response

4. Parsing simple DOM

5. Request CSS/JS

6. Apply CSS to DOM tree

7. Execute JS to start Ajax-Requests

Traditional - Ajax - BigPipe

The story continues …

8. Next HTTP request

9. Generate pagelet

10.Transfer HTTP response

11.Execute JS

Traditional - Ajax - BigPipe

Pros

• Decoupled code

• Early CSS/JS loading

• Parallel requests for HTML

• User “feels” first page load

• Can use FPC

Traditional - Ajax - BigPipe

Cons

• More HTTP overhead

• Network latency

• Multiple app initialisations

Traditional - Ajax - BigPipe

App request flow

http://www.amicontech.com/blog/wp-content/uploads/2011/02/page-request-flow.png

Traditional - Ajax - BigPipe

Single Page Apps

• Duplicate code

• Reveal business logic

• Client performance

• Don‘t get me wrong …

– Still cool stuff for the right use-case!

Traditional - Ajax - BigPipe

BigPipe

• Facebook

• https://www.facebook.com/note.php?

note_id=389414033919

• Pipeline pagelets

Traditional - Ajax - BigPipe

1. HTTP request

2. Generate simple HTTP response

3. Flush simple HTTP response

BigPipe request

Traditional - Ajax - BigPipe

4. Parsing simple DOM

5. Request CSS/JS

6. Apply CSS to DOM tree

7. Execute JS for simple response

1. HTTP request

2. Generate simple HTTP response

3. Flush simple HTTP response

4. Parsing simple DOM

5. Request CSS/JS

6. Apply CSS to DOM tree

7. Execute JS for simple response

BigPipe request

Traditional - Ajax - BigPipe

In the meantime …

1. HTTP request

2. Generate simple HTTP response

3. Flush simple HTTP response

4. Generate pagelet

5. Flush pagelet in same HTTP response

6. Execute JS

Traditional - Ajax - BigPipe

Pros

• Decoupled code

• Early CSS/JS loading

• One HTML request

• Less HTTP overhead

• One app initialisation

• User „feels“ first page load

Traditional - Ajax - BigPipe

Requirements

• Chrome

• Firefox

• Safari

• IE

• And even old IEs

Traditional - Ajax - BigPipe

Comparison

Traditional - Ajax - BigPipe

Traditional

Music: http://www.youtube.com/watch?v=0Wi8Fv0AJA4

Traditional - Ajax - BigPipe

BigPipe

Traditional - Ajax - BigPipe

Code?

Traditional - Ajax - BigPipe

Livecoding!

http://www.logosnoesis.com/sites/default/files/styles/adaptive/public/Cat-surprised-485x728.jpg

Content Security Policy

• Prevents XSS

• No inline CSS and JS!

Traditional - Ajax - BigPipe

CSP with Interval

window.setInterval(function () {

var bigpipe = document.getElementById('bigpipe');

if (bigpipe) {

var pagelets = bigpipe.getElementsByClassName('pagelets');

if (pagelets.length > 0) {

for (var x = 0; x < pagelets.length; x++) {

var targetId = pagelets[x].getAttribute('data-target');

var targetElement = document.getElementById(targetId);

targetElement.outerHTML = pagelets[x].innerHTML;

pagelets[x].parentNode.removeChild(pagelets[x]);

}

}

}

}, 100);

Traditional - Ajax - BigPipe

Libraries

• JavaScript:

https://github.com/orygens/bigpipe-js

• Node.js:

https://github.com/bigpipe/bigpipe

• Drupal:

https://drupal.org/project/bigpipe

• Magento:

https://github.com/sitewards/BigPipe

Traditional - Ajax - BigPipe

Summary

• Easy to implement

• Works technically everywhere

• Conceptual work

– What is important?

– Split design in pagelets

Traditional - Ajax - BigPipe

Tobias Zander | @airbone42

Questions?

Lazyload

• Prioritize ressources

• It „feels“ faster

• W3C Working Draft

Lazyload jQuery-Plugin

<img class="lazy"

data-original="img/example.jpg"

width="640" height="480“ />

<script>

$(function() {

$("img.lazy").lazyload();

});

</script>

Pipeline requests

• Reduce latency and HTTP overhead

– CSS

– JS

– Media

• Still FIFO

• Opera only

Tobias Zander | @airbone42

Thanks!