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
Tweet

More Decks by Nicolás Bevacqua

Other Decks in Programming

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