Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Drupal BigPipe: What have I learned

476 views

Published on

Demo: http://bigpipe.demo.wimleers.com/ & https://www.drupal.org/project/big_pipe_demo

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Drupal BigPipe: What have I learned

  1. 1. BigPipe: What have I learned Radim Klaška, Developer @ Morpht.com & Drupal.cz
  2. 2. Intro Wim Leers & Fabian Franz Thank you!
  3. 3. D7 way ● Intro D7 page handling ● Whole page is send as one chunk. ● Takes a long time to load everything. ● Limited options of DOM ordering vs. what’ s displayed
  4. 4. General info ● Intro ● D7 way BigPipe: general idea ● One quick response with main part of the page. ● Other small requests to fill in the gaps.
  5. 5. General info ● Intro ● D7 way It's all about performance ● Backend ○ server response time ● Frontend ○ often the slowest part ○ rendering DOM ○ loading assets (CSS, JS)
  6. 6. Performance ● Intro ● D7 way ● General info Performance vs. Perceived performance ● How long does it take to generate the page? ● How long does it take see your content?
  7. 7. Performance ● Intro ● D7 way ● General info Measurements ● Time to First Byte "Oh, that server responds quickly!" - Who cares?
  8. 8. Performance Measurements ● Time to First Byte "Oh, that server responds quickly!" - Who cares? ● Time to Assets Prefetching Load CSS linked at the beginning of the DOM while still loading the rest of the DOM. ● Intro ● D7 way ● General info
  9. 9. Performance Measurements ● Time to First Byte "Oh, that server responds quickly!" - Who cares? ● Time to Assets Prefetching Load CSS linked at the beginning of the DOM while still loading the rest of the DOM. ● Time to interact Not only clicking around, reading the article is interaction too! ● Intro ● D7 way ● General info
  10. 10. Performance Measurements ● Time to First Byte "Oh, that server responds quickly!" - Who cares? ● Time to Assets Prefetching Load CSS linked at the beginning of the DOM while still loading the rest of the DOM. ● Time to interact Not only clicking around, reading the article is interaction too! ● Page load time Total load time, avoid extremes ● Intro ● D7 way ● General info
  11. 11. Performance Usual optimizations still matter ● Minification ● Aggreggation ● Fewer HTTP requests ● Intro ● D7 way ● General info
  12. 12. Performance Whole chain has to be fast!
  13. 13. Performance BigPipe is on the intersection of backend and frontend. ● Intro ● D7 way ● General info
  14. 14. How it works General idea ● Send most basic and cacheable info first ● Load the rest of the content later in smaller pieces ● Intro ● D7 way ● General info ● Performance
  15. 15. It takes the same time (Page Load Time) in the end, but perceived performance is much better! How it works ● Intro ● D7 way ● General info ● Performance
  16. 16. That's the general idea. But how it works? How it works ● Intro ● D7 way ● General info ● Performance
  17. 17. Good old Page cache ● Generate the page How it works ● Intro ● D7 way ● General info ● Performance
  18. 18. Good old Page cache ● Generate the page ● Save the result in DB How it works ● Intro ● D7 way ● General info ● Performance
  19. 19. Good old Page cache ● Generate the page ● Save the result in DB ● Lots of variations How it works ● Intro ● D7 way ● General info ● Performance
  20. 20. D8 toolsHow it works ● Intro ● D7 way ● General info ● Performance
  21. 21. D8 tools ● Cache metadata How it works ● Intro ● D7 way ● General info ● Performance
  22. 22. D8 tools ● Cache metadata ○ actually used everywhere in core How it works ● Intro ● D7 way ● General info ● Performance
  23. 23. D8 tools ● Cache metadata ○ actually used everywhere in core ● Dynamic page cache How it works ● Intro ● D7 way ● General info ● Performance
  24. 24. D8 tools ● Cache metadata ○ actually used everywhere in core ● Dynamic page cache ○ for authenticated users! How it works ● Intro ● D7 way ● General info ● Performance
  25. 25. D8 tools ● Cache metadata ○ actually used everywhere in core ● Dynamic page cache ○ for authenticated users! ○ handles caching of parts of the page How it works ● Intro ● D7 way ● General info ● Performance
  26. 26. D8 tools ● Cache metadata ○ actually used everywhere in core ● Dynamic page cache ○ for authenticated users! ○ handles caching of parts of the page ○ overhead - actually makes page generation time How it works ● Intro ● D7 way ● General info ● Performance
  27. 27. Cache metadata ● Cache tags ● Cache context ● Cache max-age How it works ● Intro ● D7 way ● General info ● Performance
  28. 28. Cache tags ● data dependencies How it works ● Intro ● D7 way ● General info ● Performance
  29. 29. Cache tags ● data dependencies ● editing content will automatically invalidate proper caches How it works ● Intro ● D7 way ● General info ● Performance
  30. 30. Cache context ● Rememeber block definitions? "Cache by user / role..." How it works ● Intro ● D7 way ● General info ● Performance
  31. 31. Cache context ● Rememeber block definitions? "Cache by user / role..." ● this alters cachability of the whole page (not only your block) How it works ● Intro ● D7 way ● General info ● Performance
  32. 32. Cache context ● Rememeber block definitions? "Cache by user / role..." ● this alters cachability of the whole page (not only your block) ● you can define your own cache contexts How it works ● Intro ● D7 way ● General info ● Performance
  33. 33. Cache max-age ● invalidation by time How it works ● Intro ● D7 way ● General info ● Performance
  34. 34. Cache max-age ● invalidation by time ● default is permanent How it works ● Intro ● D7 way ● General info ● Performance
  35. 35. Render APIHow it works ● Intro ● D7 way ● General info ● Performance
  36. 36. Render API ● lazy builders How it works ● Intro ● D7 way ● General info ● Performance
  37. 37. Render API ● lazy builders ○ based on trivial variables (no objects) How it works ● Intro ● D7 way ● General info ● Performance
  38. 38. Render API ● lazy builders ○ based on trivial variables (no objects) ● pieces of content can be generated in isolation How it works ● Intro ● D7 way ● General info ● Performance
  39. 39. Render API ● lazy builders ○ based on trivial variables (no objects) ● pieces of content can be generated in isolation ● drupal_add_js() / drupal_add_css() How it works ● Intro ● D7 way ● General info ● Performance
  40. 40. Render API ● lazy builders ○ based on trivial variables (no objects) ● pieces of content can be generated in isolation ● drupal_add_js() / drupal_add_css() ● #attached How it works ● Intro ● D7 way ● General info ● Performance
  41. 41. Example: Shopping cart ● varies by session Example ● Intro ● D7 way ● General info ● Performance
  42. 42. Example: Shopping cart ● varies by session ● module provides cache metadata Example ● Intro ● D7 way ● General info ● Performance ● How it works
  43. 43. Example: Shopping cart ● varies by session ● module provides cache metadata ● drupal figures out ○ which parts of the page can be cached at what level Example ● Intro ● D7 way ● General info ● Performance ● How it works
  44. 44. Example: Shopping cart ● varies by session ● module provides cache metadata ● drupal figures out ○ which parts of the page can be cached at what level ○ automatically creates placeholders for expansive content Example ● Intro ● D7 way ● General info ● Performance ● How it works
  45. 45. Example: Shopping cart ● varies by session ● module provides cache metadata ● drupal figures out ○ which parts of the page can be cached at what level ○ automatically creates placeholders for expansive content ○ caches the base page and it’s parts separately ○ replaces placeholders Example ● Intro ● D7 way ● General info ● Performance ● How it works
  46. 46. Example: Shopping cart Result is one cached page that can be served to all users and variations of other context specific pieces in dynamic page cache. These will be used in placeholders on main page. Example ● Intro ● D7 way ● General info ● Performance ● How it works
  47. 47. Do you want it? ● Complicated configuration… ● NO! ● Just enable the module ;-) Use it ● Intro ● D7 way ● General info ● Performance ● How it works ● The mighty GIF ● Example
  48. 48. Any contradictions? ● Page can jump a little while loading. Use it ● Intro ● D7 way ● General info ● Performance ● How it works ● The mighty GIF ● Example
  49. 49. Any contradictions? ● Page can jump a little while loading. Surprise! Your 3G users see the same even without BigPipe. Fix your CSS. Use it ● Intro ● D7 way ● General info ● Performance ● How it works ● The mighty GIF ● Example
  50. 50. It's still experimental… Test it! Use it ● Intro ● D7 way ● General info ● Performance ● How it works ● The mighty GIF ● Example
  51. 51. Requirements ● No special config, just proper metadata Use it ● Intro ● D7 way ● General info ● Performance ● How it works ● The mighty GIF ● Example
  52. 52. Requirements ● No special config, just proper metadata ● Ability to stream responses - no buffering (Apache / Nginx) Use it ● Intro ● D7 way ● General info ● Performance ● How it works ● The mighty GIF ● Example
  53. 53. Requirements ● No special config, just proper metadata ● Ability to stream responses - no buffering (Apache / Nginx) ● JS for BigPipe to work at it's best, degrades gracefully by switching streams Use it ● Intro ● D7 way ● General info ● Performance ● How it works ● The mighty GIF ● Example
  54. 54. Demo
  55. 55. Q&A @radimklaska / radim@klaska.net

×