Upgrade to Pro — share decks privately, control downloads, hide ads and more …

High Performance in the Critical Path

High Performance in the Critical Path

This talk covers the past, present and future of web application performance when it comes to delivery optimization. I'll start by glancing over what you're already doing -- minifying your static assets, bundling them together, and using progressive enhancement techniques. Then I'll move on to what you should be doing -- optimizing TCP network delivery, inlining critical CSS, deferring font loading and CSS so that you don't block the rendering path, and of course deferring JavaScript. Afterwards we'll look at the future, and what HTTP 2.0 has in store for us, going full circle and letting us forego hacks of the past like bundling and minification.

Nicolás Bevacqua

April 24, 2015

More Decks by Nicolás Bevacqua

Other Decks in Programming


  1. None
  2. High Critical Path Performance in the

  3. None
  4. Measure! What is going on?

  5. DevTools Audits

  6. DevTools Audits

  7. Per-resource advice Caching best practices DevTools Audits

  8. PageSpeed Insights developers.google.com/speed/pagespeed/insights

  9. PageSpeed Insights

  10. Mobile, desktop Get a rough (1..100) score Best practices Practical

    advice PageSpeed Insights
  11. WebPageTest webpagetest.org

  12. WebPageTest webpagetest.org

  13. WebPageTest webpagetest.org

  14. WebPageTest webpagetest.org

  15. WebPageTest webpagetest.org

  16. WebPageTest Makes it easy to spot FOIT Calculates SpeedIndex

  17. SpeedIndex takes the visual progress of the visible page loading

    and computes an overall score for how quickly the content painted
  18. Inspect every request Analyze TCP traffic Identify bottlenecks Visualize progress

  19. Automate! Measure early. Measure often.

  20. npm install psi -g

  21. npm install webpagetest-api underscore-cli

  22. npm install grunt-yslow --save-dev

  23. Budgets! Enforce a performance budget Track impact of every commit

    What should I track? timkadlec.com/2014/11/performance-budget-metrics
  24. Milestone Timings timkadlec.com/2014/11/performance-budget-metrics Load time, time to interact, "time to

    first tweet" Average time at which parts of a page are displayed Request count, page weight, image weight... YSlow grade, PageSpeed score, etc. SpeedIndex Quantity based metrics Rule based metrics
  25. npm install grunt-perfbudget --save-dev

  26. Beyond minification Or, what can be done to improve performance?

  27. Web Stack TCP HTTP(S) HTML CSS Fonts Images JavaScript

  28. Networking But not the kind you do at conferences

  29. None
  30. Optimizing TCP Increase initial TCP cwnd size Disable slow-start restart

    (SSR) Long-lived, bursty TCP connections can't afford SSR Improve HTTP performance by disabling it sysctl -w net.ipv4.tcp_slow_start_after_idle = 0 Sender-side limit for in-flight data (cwnd) More data in first TCP roundtrip Accelerates connection ramp up
  31. Optimizing HTTP Turn on keep-alive GZip all the text Add

    Expires and ETag headers Use a CDN Make less requests!
  32. HTTPS/2! SPDY? Yes.

  33. Why? Non-blocking Multiplexing One Connection per Origin Header Compression Proactive

    Server Push
  34. The Web Needs you #perfmatters

  35. Optimizing HTML Become a Single Page App later Defer non-critical

    asset loading Keep it accessible with aria Render server-side!
  36. Optimizing CSS Concatenate and minify Remove unused styles Avoid m.

    Be responsive Follow a style guide. Seriously. Inline critical CSS
  37. Optimizing Fonts Cache them aggressively Use a fallback while fonts

    load Prevent FOIT using JavaScript Use fewer fonts, avoid repaints Load asynchronously
  38. Optimizing Images Use CSS for simple icons Defer images below

    the fold Create spritesheets with tools Try inlining tiny dynamic images Minify and shrink
  39. Optimizing JavaScript Cache vendor scripts separately Defer all of it

    Use small modules Use asset hashing You can live without it
  40. HOW?

  41. Reverse proxy Static asset caching Supports SPDY GZip compression

  42. Set up a CDN!

  43. Shared Rendering Needs Rendr Presumably in 2.0 Native support Native

  44. Defer Assets

  45. Remove Unused CSS Only what's needed! Useful when using Bootstrap

    or other CSS frameworks
  46. Inline Critical CSS Only what's seen! Remove roadblocks from the

    critical path
  47. Use a font loader Prevent FOIT!

  48. Optimize Images Up to 90% in savings!

  49. Create Spritesheets Save bandwidth by keeping the noise to a

  50. Inline Images Save a request by inlining a base64 image

    Careful: Data URIs are slow on mobile!
  51. Use a module system

  52. None
  53. In Summary... Measure your metrics

  54. In Summary... Automate your metrics

  55. In Summary... Define your budget

  56. In Summary... Enforce your budget

  57. In Summary... Prioritize your content

  58. In Summary... Optimize your content

  59. In Summary... Respect your humans

  60. In Summary... Respect your web

  61. Automation Performance Modularity Asynchronicity MVC Testing REST API ~100 Code

    Samples bevacqua.io/bf
  62. 4 Mayo @BeerJSBA Puerta Roja San Telmo Buenos Aires

  63. Thanks! @nzgb ponyfoo.com