Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

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

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 38 Anzeige

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

Herunterladen, um offline zu lesen

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.

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.

Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Anzeige

Ähnlich wie "Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin (20)

Aktuellste (20)

Anzeige

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

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

×