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.
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
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
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
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
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
33. Summary
• Easy to implement
• Works technically everywhere
• Conceptual work
– What is important?
– Split design in pagelets
Traditional - Ajax - BigPipe