"Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin

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


The „cloud“

• For parallel requests

• For your big tv promotion

• Not for single page loads

• Or third-party-latencies


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

Pipelining

• UX-Performance

• It is a bit faster

• But it „feels“ a lot faster


Ajax request

1. HTTP request

2. Generate simple HTTP response

3. Transfer simple HTTP response

4. Parsing simple DOM

5. Request CSS/JS


7. Execute JS to start Ajax-Requests


The story continues …

8. Next HTTP request

9. Generate pagelet

10.Transfer HTTP response

11.Execute JS


Pros

• Decoupled code

• Early CSS/JS loading

• Parallel requests for HTML

• User “feels” first page load

• Can use FPC


Cons

• More HTTP overhead

• Network latency

• Multiple app initialisations


App request flow

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


Single Page Apps

• Duplicate code

• Reveal business logic

• Client performance

• Don‘t get me wrong …

– Still cool stuff for the right use-case!


BigPipe

• Facebook

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

note_id=389414033919

• Pipeline pagelets


1. HTTP request


3. Flush simple HTTP response

BigPipe request



5. Request CSS/JS


7. Execute JS for simple response

1. HTTP request




5. Request CSS/JS


7. Execute JS for simple response

BigPipe request


In the meantime …

1. HTTP request



4. Generate pagelet

5. Flush pagelet in same HTTP response

6. Execute JS


Pros

• Decoupled code

• Early CSS/JS loading

• One HTML request

• Less HTTP overhead

• One app initialisation

• User „feels“ first page load


Requirements

• Chrome

• Firefox

• Safari

• IE

• And even old IEs


Comparison


Traditional

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


BigPipe


Code?


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!


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);


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


Summary

• Easy to implement

• Works technically everywhere

• Conceptual work

– What is important?

– Split design in pagelets



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


Thanks!

"Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin

Technology

Transcript of "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin