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.

Transcript

2. High Critical Path Performance in the
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 WebPageTest
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
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 support
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 minimum
50. Inline Images Save a request by inlining a base64 image Careful: Data URIs are slow on mobile!
51. Use a module system
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