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

1. View Slide

2. High
   Critical Path
   Performance
   in the
   

   View Slide

3. View Slide

4. Measure!
   What is
   going on?
   

   View Slide

5. DevTools Audits
   

   View Slide

6. DevTools Audits
   

   View Slide

7. Per-resource advice
   Caching best practices
   DevTools Audits
   

   View Slide

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

   View Slide

9. PageSpeed Insights
   

   View Slide

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

    View Slide

11. WebPageTest
    webpagetest.org
    

    View Slide

12. WebPageTest
    webpagetest.org
    

    View Slide

13. WebPageTest
    webpagetest.org
    

    View Slide

14. WebPageTest
    webpagetest.org
    

    View Slide

15. WebPageTest
    webpagetest.org
    

    View Slide

16. WebPageTest
    Makes it easy to spot FOIT
    Calculates SpeedIndex
    

    View Slide

17. SpeedIndex takes the
    visual progress of the
    visible page loading and
    computes an overall
    score for how quickly
    the content painted
    

    View Slide

18. Inspect every request
    Analyze TCP traffic
    Identify bottlenecks
    Visualize progress
    WebPageTest
    

    View Slide

19. Automate!
    Measure early.
    Measure often.
    

    View Slide

20. npm install psi -g
    

    View Slide

21. npm install webpagetest-api underscore-cli
    

    View Slide

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

    View Slide

23. Budgets!
    Enforce a performance budget
    Track impact of every commit
    What should I track?
    timkadlec.com/2014/11/performance-budget-metrics
    

    View Slide

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
    

    View Slide

25. npm install grunt-perfbudget --save-dev
    

    View Slide

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

    View Slide

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

    View Slide

28. Networking
    But not the kind
    you do at conferences
    

    View Slide

29. View Slide

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
    

    View Slide

31. Optimizing HTTP
    Turn on keep-alive
    GZip all the text
    Add Expires and ETag headers
    Use a CDN
    Make less requests!
    

    View Slide

32. HTTPS/2!
    SPDY?
    Yes.
    

    View Slide

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

    View Slide

34. The Web
    Needs you
    #perfmatters
    

    View Slide

35. Optimizing HTML
    Become a Single Page App later
    Defer non-critical asset loading
    Keep it accessible with aria
    Render server-side!
    

    View Slide

36. Optimizing CSS
    Concatenate and minify
    Remove unused styles
    Avoid m. Be responsive
    Follow a style guide. Seriously.
    Inline critical CSS
    

    View Slide

37. Optimizing Fonts
    Cache them aggressively
    Use a fallback while fonts load
    Prevent FOIT using JavaScript
    Use fewer fonts, avoid repaints
    Load asynchronously
    

    View Slide

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
    

    View Slide

39. Optimizing JavaScript
    Cache vendor scripts separately
    Defer all of it
    Use small modules
    Use asset hashing
    You can live without it
    

    View Slide

40. HOW?
    

    View Slide

41. Reverse proxy
    Static asset caching
    Supports SPDY
    GZip compression
    

    View Slide

42. Set up a CDN!
    

    View Slide

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

    View Slide

44. Defer Assets
    

    View Slide

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

    View Slide

46. Inline Critical CSS
    Only what's seen!
    Remove
    roadblocks from
    the critical path
    

    View Slide

47. Use a font loader
    Prevent FOIT!
    

    View Slide

48. Optimize Images
    Up to 90%
    in savings!
    

    View Slide

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

    View Slide

50. Inline Images
    Save a request
    by inlining a
    base64 image
    Careful: Data URIs are slow on mobile!
    

    View Slide

51. Use a module system
    

    View Slide

52. View Slide

53. In Summary...
    Measure
    your
    metrics
    

    View Slide

54. In Summary...
    Automate
    your
    metrics
    

    View Slide

55. In Summary...
    Define
    your
    budget
    

    View Slide

56. In Summary...
    Enforce
    your
    budget
    

    View Slide

57. In Summary...
    Prioritize
    your
    content
    

    View Slide

58. In Summary...
    Optimize
    your
    content
    

    View Slide

59. In Summary...
    Respect
    your
    humans
    

    View Slide

60. In Summary...
    Respect
    your
    web
    

    View Slide

61. Automation
    Performance
    Modularity
    Asynchronicity
    MVC
    Testing
    REST API
    ~100 Code Samples
    bevacqua.io/bf
    

    View Slide

62. 4 Mayo
    @BeerJSBA
    Puerta Roja
    San Telmo
    Buenos Aires
    

    View Slide

63. Thanks!
    @nzgb
    ponyfoo.com
    

    View Slide