"turbo boost your website" aka bigpipe at webinale 2014 in berlin
DESCRIPTION
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.TRANSCRIPT
![Page 1: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/1.jpg)
Tobias Zander | @airbone42
Turbo boost your website
![Page 2: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/2.jpg)
![Page 3: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/3.jpg)
![Page 4: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/4.jpg)
![Page 5: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/5.jpg)
http://img3.wikia.nocookie.net/__cb20090301004714/knightrider/en/images/4/41/Turbo_Boost01.jpg
![Page 6: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/6.jpg)
Overview
1. Traditional request
2. Ajax requests
3. BigPipe
![Page 7: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/7.jpg)
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
![Page 8: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/8.jpg)
Cons
• Sequential
• Late CSS/JS loading
• Bottlenecks
– Server
– Browser
Traditional - Ajax - BigPipe
![Page 9: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/9.jpg)
The „cloud“
• For parallel requests
• For your big tv promotion
• Not for single page loads
• Or third-party-latencies
Traditional - Ajax - BigPipe
![Page 10: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/10.jpg)
http://cloudtimes.org/wp-content/uploads/2012/07/cutcaster-800900729-Businessman-thinking-and-watching-the-money-mark-of-cloud-medium..jpg
![Page 11: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/11.jpg)
Traditional - Ajax - BigPipe
![Page 12: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/12.jpg)
Pipelining
• UX-Performance
• It is a bit faster
• But it „feels“ a lot faster
Traditional - Ajax - BigPipe
![Page 13: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/13.jpg)
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
![Page 14: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/14.jpg)
The story continues …
8. Next HTTP request
9. Generate pagelet
10.Transfer HTTP response
11.Execute JS
Traditional - Ajax - BigPipe
![Page 15: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/15.jpg)
Pros
• Decoupled code
• Early CSS/JS loading
• Parallel requests for HTML
• User “feels” first page load
• Can use FPC
Traditional - Ajax - BigPipe
![Page 16: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/16.jpg)
Cons
• More HTTP overhead
• Network latency
• Multiple app initialisations
Traditional - Ajax - BigPipe
![Page 17: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/17.jpg)
App request flow
http://www.amicontech.com/blog/wp-content/uploads/2011/02/page-request-flow.png
Traditional - Ajax - BigPipe
![Page 18: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/18.jpg)
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
![Page 19: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/19.jpg)
BigPipe
• https://www.facebook.com/note.php?
note_id=389414033919
• Pipeline pagelets
Traditional - Ajax - BigPipe
![Page 20: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/20.jpg)
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
![Page 21: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/21.jpg)
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
![Page 22: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/22.jpg)
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
![Page 23: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/23.jpg)
Pros
• Decoupled code
• Early CSS/JS loading
• One HTML request
• Less HTTP overhead
• One app initialisation
• User „feels“ first page load
Traditional - Ajax - BigPipe
![Page 24: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/24.jpg)
Requirements
• Chrome
• Firefox
• Safari
• IE
• And even old IEs
Traditional - Ajax - BigPipe
![Page 25: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/25.jpg)
Comparison
Traditional - Ajax - BigPipe
![Page 26: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/26.jpg)
Traditional
Music: http://www.youtube.com/watch?v=0Wi8Fv0AJA4
Traditional - Ajax - BigPipe
![Page 27: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/27.jpg)
BigPipe
Traditional - Ajax - BigPipe
![Page 28: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/28.jpg)
![Page 29: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/29.jpg)
Code?
Traditional - Ajax - BigPipe
Livecoding!
http://www.logosnoesis.com/sites/default/files/styles/adaptive/public/Cat-surprised-485x728.jpg
![Page 30: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/30.jpg)
Content Security Policy
• Prevents XSS
• No inline CSS and JS!
Traditional - Ajax - BigPipe
![Page 31: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/31.jpg)
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
![Page 32: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/32.jpg)
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
![Page 33: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/33.jpg)
Summary
• Easy to implement
• Works technically everywhere
• Conceptual work
– What is important?
– Split design in pagelets
Traditional - Ajax - BigPipe
![Page 34: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/34.jpg)
Tobias Zander | @airbone42
Questions?
![Page 35: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/35.jpg)
Lazyload
• Prioritize ressources
• It „feels“ faster
• W3C Working Draft
![Page 36: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/36.jpg)
Lazyload jQuery-Plugin
<img class="lazy"
data-original="img/example.jpg"
width="640" height="480“ />
<script>
$(function() {
$("img.lazy").lazyload();
});
</script>
![Page 37: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/37.jpg)
Pipeline requests
• Reduce latency and HTTP overhead
– CSS
– JS
– Media
• Still FIFO
• Opera only
![Page 38: "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin](https://reader034.vdocuments.net/reader034/viewer/2022051400/54bd8a254a7959d4438b4656/html5/thumbnails/38.jpg)
Tobias Zander | @airbone42
Thanks!