1.
Tobias Zander | @airbone42
Turbo boost your website

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

3.
Overview
1. Traditional request
2. Ajax requests
3. BigPipe

4.
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

5.
Cons
• Sequential
• Late CSS/JS loading
• Bottlenecks
– Server
– Browser
Traditional - Ajax - BigPipe

6.
The „cloud“
• For parallel requests
• For your big tv promotion
• Not for single page loads
• Or third-party-latencies
Traditional - Ajax - BigPipe

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

8.
Traditional - Ajax - BigPipe

9.
Pipelining
• UX-Performance
• It is a bit faster
• But it „feels“ a lot faster
Traditional - Ajax - BigPipe

10.
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

11.
The story continues …
8. Next HTTP request
9. Generate pagelet
10.Transfer HTTP response
11.Execute JS
Traditional - Ajax - BigPipe

12.
Pros
• Decoupled code
• Early CSS/JS loading
• Parallel requests for HTML
• User “feels” first page load
• Can use FPC
Traditional - Ajax - BigPipe

13.
Cons
• More HTTP overhead
• Network latency
• Multiple app initialisations
Traditional - Ajax - BigPipe

14.
App request flow
http://www.amicontech.com/blog/wp-content/uploads/2011/02/page-request-flow.png
Traditional - Ajax - BigPipe

15.
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

16.
BigPipe
• Facebook
• https://www.facebook.com/note.php?
note_id=389414033919
• Pipeline pagelets
Traditional - Ajax - BigPipe

17.
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

18.
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

19.
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

20.
Pros
• Decoupled code
• Early CSS/JS loading
• One HTML request
• Less HTTP overhead
• One app initialisation
• User „feels“ first page load
Traditional - Ajax - BigPipe

21.
Requirements
• Chrome
• Firefox
• Safari
• IE
• And even old IEs
Traditional - Ajax - BigPipe

22.
Comparison
Traditional - Ajax - BigPipe

23.
Traditional
Music: http://www.youtube.com/watch?v=0Wi8Fv0AJA4
Traditional - Ajax - BigPipe

24.
BigPipe
Traditional - Ajax - BigPipe

25.
Code?
Traditional - Ajax - BigPipe
Livecoding!
http://www.logosnoesis.com/sites/default/files/styles/adaptive/public/Cat-surprised-485x728.jpg

26.
Content Security Policy
• Prevents XSS
• No inline CSS and JS!
Traditional - Ajax - BigPipe

27.
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

28.
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

29.
Summary
• Easy to implement
• Works technically everywhere
• Conceptual work
– What is important?
– Split design in pagelets
Traditional - Ajax - BigPipe

30.
Tobias Zander | @airbone42
Questions?

31.
Lazyload
• Prioritize ressources
• It „feels“ faster
• W3C Working Draft

32.
Lazyload jQuery-Plugin
<img class="lazy"
data-original="img/example.jpg"
width="640" height="480“ />
<script>
$(function() {
$("img.lazy").lazyload();
});
</script>

33.
Pipeline requests
• Reduce latency and HTTP overhead
– CSS
– JS
– Media
• Still FIFO
• Opera only

34.
Tobias Zander | @airbone42
Thanks!