The loading time of a website is one of the most important factors for its success. The amount of abandoned page loads raises dramatically, the longer the user has to wait for the content. Facebook named their special way to deliver content BigPipe, which allows the user to already see the essential parts of a website, while long-loading content is still being rendered. This delivers a better user experience and less abandoned page loads. This talk will show you the technical details of BigPipe and how it can help you to speed up your site and what you need to know to implement it.

1. Tobias Zander | @airbone42
Turbo boost your website

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

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

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

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

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

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

11. Traditional - Ajax - BigPipe

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

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

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

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

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

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

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

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

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

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

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

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

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

25. Comparison
Traditional - Ajax - BigPipe

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

27. BigPipe
Traditional - Ajax - BigPipe

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

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

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

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

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

34. Tobias Zander | @airbone42
Questions?

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

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

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

38. Tobias Zander | @airbone42
Thanks!